javascript 패키지 기반 공유

만약 에 작용 역,함수 가 독립 된 대상 이라는 기본 개념 에 대해 잘 이해 하면 폐쇄 적 인 개념 을 이해 하고 실제 프로 그래 밍 실천 에서 응용 하면 도랑 이 되 는 느낌 이 든다.DOM 의 이벤트 처리 에 있어 서 대부분의 프로그래머 들 은 심지어 자신 도 모 르 게 패 키 지 를 사용 하고 있 습 니 다.이런 상황 에서 브 라 우 저 에 설 치 된 자바 스 크 립 트 엔진 의 bug 에 대해 메모리 누 출 문 제 를 일 으 킬 수 있 습 니 다.물론 프로그래머 가 직접 디 버 깅 을 하 더 라 도 항상 안개 가 끼 는 경우 가 많 습 니 다.간단 한 문장 으로 자 바스 크 립 트 의 패키지 개념 을 설명 합 니 다.자 바스 크 립 트 에서 함 수 는 대상 이 고 대상 은 속성의 집합 이 며 속성의 값 은 대상 일 수도 있 습 니 다.함수 내 에서 함 수 를 정의 하 는 것 은 당연 합 니 다.함수 func 내부 에서 함수 inner 를 설명 한 다음 에 함수 외부 에서 inner 를 호출 하면 이 과정 에서 패키지 가 생 깁 니 다.패 킷 의 특성:예 를 들 어 자바 스 크 립 트 의 특성 을 모 르 면 원인 을 찾기 어렵 습 니 다.

var outter = [];
        function clouseTest() {
            var array = ["one", "two", "three", "four"];
            for (var i = 0; i < array.length; i++) {
                var x = {};
                x.no = i;
                x.text = array[i];
                x.invoke = function () {
                    print(i);
                }
                outter.push(x);
            }
        }
        //      
        clouseTest();
        print(outter[0].invoke());
        print(outter[1].invoke());
        print(outter[2].invoke());
        print(outter[3].invoke());

실행 결 과 는 어 떻 습 니까?많은 초보 자 들 이 이러한 답 을 얻 을 수 있 습 니 다.0,1,2,3 그러나 이 프로그램 을 실행 하면 얻 은 결 과 는 4,4,4 입 니 다.사실 매번 교체 할 때마다 이러한 문 구 는 x.invoke=function(){print(i)입 니 다.}실행 되 지 않 았 습 니 다.함수 체 를'print(i)'로 만 들 었 습 니 다.함수 대상그리고 i=4 시 에 교체 가 멈 추고 외부 함수 가 되 돌아 갑 니 다.outter[0].invoke()를 호출 할 때 i 의 값 은 4 입 니 다.따라서 outter 배열 의 모든 요소 의 invoke 는 i 의 값 을 되 돌려 줍 니 다.4.어떻게 이 문 제 를 해결 합 니까?우 리 는 익명 함 수 를 설명 하고 즉시 실행 할 수 있 습 니 다.

var outter = [];
        function clouseTest2() {
            var array = ["one", "two", "three", "four"];
            for (var i = 0; i < array.length; i++) {
                var x = {};
                x.no = i;
                x.text = array[i];
                x.invoke = function (no) {
                    return function () {
                        print(no);
                    }
                }(i);
                outter.push(x);
            }
        }
        clouseTest2();
    </script>

이 예 에서 우 리 는 x.invoke 에 값 을 부여 할 때 먼저 함수 로 돌아 갈 수 있 는 함 수 를 실행 한 다음 에 바로 실행 합 니 다.그러면 x.invoke 의 매번 교체 기 는 이러한 문 구 를 수행 하 는 것 과 비슷 합 니 다.

//x == 0
x.invoke = function(){print(0);}
//x == 1
x.invoke = function(){print(1);}
//x == 2
x.invoke = function(){print(2);}
//x == 3
x.invoke = function(){print(3);}

이렇게 하면 정확 한 결 과 를 얻 을 수 있 습 니 다.패 킷 을 닫 으 면 외부 함수 에 존재 하 는 변 수 를 참조 할 수 있 습 니 다.그러나 이 변 수 를 사용 하여 만 들 때의 값 이 아니 라 외부 함수 에서 이 변수의 마지막 값 을 사용 합 니 다.폐쇄 의 용도:이제 폐쇄 의 개념 이 뚜렷 해 졌 으 니 폐쇄 의 용 도 를 살 펴 보 자.사실 폐쇄 적 인 사용 을 통 해 우 리 는 많은 일 을 할 수 있다.예 를 들 어 대상 을 대상 으로 하 는 코드 스타일 을 모 의 한다.더욱 우아 하고 간결 하 게 코드 를 표현 합 니 다.어떤 면 에서 코드 의 집행 효율 을 높이다.캐 시:예 를 들 어 처리 과정 이 오래 걸 리 는 함수 대상 이 있다 고 생각 합 니 다.호출 할 때마다 시간 이 오래 걸 립 니 다.그러면 계 산 된 값 을 저장 해 야 합 니 다.이 함 수 를 호출 할 때 먼저 캐 시 에서 찾 습 니 다.찾 지 못 하면 계산 한 다음 에 캐 시 를 업데이트 하고 값 을 되 돌려 야 합 니 다.찾 으 면...찾 은 값 을 되 돌려 주시 면 됩 니 다.패 킷 을 닫 는 것 은 바로 이 점 을 할 수 있 습 니 다.외부 인용 을 방출 하지 않 기 때문에 함수 내부 의 값 을 유지 할 수 있 습 니 다.

var CachedSearchBox = (function () {
            var cache = {},
               count = [];
            return {
                attachSearchBox: function (dsid) {
                    if (dsid in cache) {//        
                        return cache[dsid];//          
                    }
                    var fsb = document.getElementById(dsid);//  
                    cache[dsid] = fsb;//    
                    if (count.length > 100) {//       <=100
                        delete cache[count.shift()];
                    }
                    return fsb;
                },
                clearSearchBox: function (dsid) {
                    if (dsid in cache) {
                        cache[dsid].clearSelection();
                    }
                }
            };
        })();
        var obj1 = CachedSearchBox.attachSearchBox("input1");
        //alert(obj1);
        var obj2 = CachedSearchBox.attachSearchBox("input1");

패 키 징 실현:

var person = function(){
    //          ，      
    var name = "default";   

    return {
       getName : function(){
           return name;
       },
       setName : function(newName){
           name = newName;
       }
    }
}();

print(person.name);//    ，   undefined
print(person.getName());
person.setName("jack");
print(person.getName());

결 과 는 다음 과 같다.undefined defaultjack
패 킷 을 닫 는 또 다른 중요 한 용 도 는 대상 을 대상 으로 하 는 대상 을 실현 하 는 것 이다.전통 적 인 대상 언어 는 모두 유형의 템 플 릿 체 제 를 제공 하 는데 이렇게 서로 다른 대상(유형의 사례)은 독립 된 구성원 과 상 태 를 가지 고 서로 간섭 하지 않 는 다.자 바스 크 립 트 에는 이러한 메커니즘 이 없 지만 패 킷 을 사용 하면 이러한 메커니즘 을 모 의 할 수 있 습 니 다.아니면 위의 예 에서 볼 때

function Person(){
    var name = "default";   

    return {
       getName : function(){
           return name;
       },
       setName : function(newName){
           name = newName;
       }
    }
};
var john = Person();
print(john.getName());
john.setName("john");
print(john.getName());

var jack = Person();
print(jack.getName());
jack.setName("jack");
print(jack.getName());

운행 결 과 는 다음 과 같다.defaultjohn defaultjack
javascript 패 키 지 를 닫 을 때 주의해 야 할 문제:1.메모리 누 출:서로 다른 JavaScript 해석 기 구현 에서 해석 기 자체 의 결함 으로 인해 패 키 지 를 사용 하면 메모리 누 출 을 초래 할 수 있 습 니 다.메모리 누 출 은 비교적 심각 한 문제 로 브 라 우 저의 응답 속도 에 심각 한 영향 을 주 고 사용자 체험 을 낮 출 수 있 으 며 심지어 브 라 우 저의 응답 이 없 는 현상 을 초래 할 수 있 습 니 다.JavaScript 의 해석 기 는 모두 쓰레기 회수 체 제 를 갖 추고 있 으 며,일반적으로 인용 계수 형식 을 사용 하 며,한 대상 의 인용 계수 가 0 이면 쓰레기 회수 체 제 는 이 과정 을 자동 으로 회수 합 니 다.그러나 패 킷 을 닫 는 개념 이 생 긴 후에 이 과정 은 복잡 해 졌 다.패 킷 을 닫 는 과정 에서 국부 적 인 변 수 는 앞으로 어느 순간 에 사용 되 어야 할 수 있 기 때문에 쓰레기 회수 체 제 는 외부 에서 인 용 된 부분 변 수 를 처리 하지 않 고 순환 인용 이 나타 나 면 대상 A 는 B,B 는 C 를 인용 하고 C 는 A 를 인용 하 는 것 이다.이러한 상황 으로 인해 쓰레기 회수 체 제 는 인용 계수 가 0 이 아니 라 는 결론 을 얻어 메모리 누 출 을 초래 했다.2.상하 문장의 인용:

$(function(){
    var con = $("div#panel");
    this.id = "content";
    con.click(function(){
       alert(this.id);//panel
    });
});

이 곳 의 alert(this.id)는 도대체 어떤 값 을 인용 하고 있 습 니까?많은 개발 자 들 이 패 킷 개념 에 따라 잘못된 판단 을 할 수 있 습 니 다.content 이 유 는 this.id 가 표시 하 는 할당 값 은 content 이 고 click 리 셋 에서 형 성 된 패 킷 은 this.id 를 참조 하기 때문에 반환 값 은 content 입 니 다.그러나 사실 이 alert 는'panel'이 팝 업 됩 니 다.그 이 유 는 바로 이곳 의 this 입 니 다.패 킷 을 닫 으 면 부분 변 수 를 참조 할 수 있 지만 this 와 관련 될 때 상황 이 미묘 합 니 다.호출 대상 이 존재 하기 때문에 패 킷 이 호출 될 때(이 panel 의 click 사건 이 발생 했 을 때)이 곳 의 this 는 con 이라는 jQuery 대상 을 참조 합 니 다.익명 함수 중의 this.id="content"는 익명 함수 자체 에 대한 조작 입 니 다.두 this 가 인용 한 것 은 같은 대상 이 아니다.이벤트 처리 함수 에서 이 값 에 접근 하려 면 변경 사항 을 만들어 야 합 니 다.

$(function(){
    var con = $("div#panel");
    this.id = "content";
    var self = this;
    con.click(function(){
       alert(self.id);//content
    });
});

그러면 이벤트 처리 함수 에 저 장 된 것 은 this 가 아 닌 외부 부분 변수 self 의 참조 입 니 다.이런 기 교 는 실제 응용 에서 많이 응용 되 고 우 리 는 뒤의 장절 에서 상세 하 게 토론 한다.폐쇄 적 인 더 많은 내용 에 대해 우 리 는 9 장 에서 다른 명령 식 언어 에서 의'폐쇄 적',실제 프로젝트 에서 의 응용 등 을 상세 하 게 토론 할 것 이다.첨부:자체 의 수준 이 유한 하기 때문에 글 에서 오류 등 이 있 거나 언어 자체 가 타당 하지 않 은 점 이 있 을 수 있 습 니 다.제때에 지적 하고 건 의 를 하 는 것 을 환영 합 니 다.이 글 은 단지 벽돌 을 던 져 옥 을 끌 어 들 이기 위 한 것 입 니 다.감사합니다!