JS 클 로즈 드 이용 가능 한 흔 한 장면 소결
8087 단어 JS 폐쇄
패 킷 을 닫 는 일반적인 용법 은 특정한 함수 가 실행 되 기 전에 먼저 실행 하 는 함수 에 인 자 를 제공 하 는 것 입 니 다.예 를 들 어 웹 환경 에서 하나의 함 수 는 setTimeout 함수 가 호출 하 는 첫 번 째 매개 변수 로 서 흔히 볼 수 있 는 응용 이다.
setTimeout실행 할 함수(또는 자바 스 크 립 트 코드)를 첫 번 째 매개 변수 로 하고 다음 매개 변 수 는 실행 지연 시간 이 필요 합 니 다.코드 가 setTimeout 을 통 해 호출 되 려 면 함수 대상 의 인용 을 첫 번 째 매개 변수 로 전달 해 야 합 니 다.지연 되 는 밀리초 수 는 두 번 째 매개 변수 이지 만 이 함수 대상 의 인용 은 지연 되 는 대상 에 게 인 자 를 제공 할 수 없습니다.단,다른 함 수 를 호출 하여 내부 함수 의 호출 을 되 돌려 주 고 그 내부 함수 대상 의 인용 을 setTimeout 함수 에 전달 할 수 있 습 니 다.내부 함수 가 실 행 될 때 필요 한 인 자 는 외부 함 수 를 호출 할 때 전달 합 니 다.setTimeout 은 내부 함 수 를 실행 할 때 파 라 메 터 를 전달 할 필요 가 없습니다.내부 함수 가 외부 함수 호출 에 접근 할 수 있 기 때 문 입 니 다.
function callLater(paramA, paramB, paramC) {
/* */
return (function () {
/*
setTimeout ；
，
*/
paramA[paramB] = paramC;
});
}
/*
，
， ，
*/
var funcRef = callLater(elStyle, "display", "none");
/* setTimeout ， */
hideMenu = setTimeout(funcRef, 500);이러한 장면 이 많 습 니 다.함수 대상 의 인용 을 배정 하여 미래의 어느 시간 에 이 함 수 를 실행 할 수 있 도록 해 야 합 니 다.그러면 패 키 지 를 닫 는 것 은 실행 할 함수 에 인용 을 제공 하 는 데 도움 이 될 것 입 니 다.이 함 수 는 실행 할 때 까지 접근 할 수 있 기 때문이다.
하나의 예 는 javascript 대상 이 특정한 DOM 요소 의 상호작용 에 참여 하기 위해 봉 인 된 것 이다.doOnClick,doMouse Over,doMouse Out 방법 이 있 습 니 다.또한 DOM 요소 에 대응 하 는 이벤트 가 실 행 될 때 이 방법 을 실행 하고 싶 습 니 다.그러나 DOM 요소 와 관련 된 임의의 자바 script 대상 이 생 성 될 수 있 으 며,하나의 인 스 턴 스 는 코드 가 어떻게 처리 되 는 지 알 지 못 합 니 다.대상 인 스 턴 스 는 자신 을 어떻게'전역'으로 인용 하 는 지 모 릅 니 다.어떤 전역 변수(존재 한다 면)의 인용 이 그들 에 게 분 배 될 지 모 르 기 때 문 입 니 다.
따라서 문 제 는 특정 자바 script 대상 인 스 턴 스 와 연 결 된 이벤트 처리 함 수 를 실행 하고 그 대상 을 호출 하 는 방법 을 아 는 것 입 니 다.
다음 예 는 요소 이벤트 처리 대상 인 스 턴 스 의 관련 함수 에 간단 한 패 키 지 를 사용 합 니 다.이벤트 대상 과 관련 요 소 를 전달 하 는 인용 을 통 해 이벤트 프로세서 에 서로 다른 대상 인 스 턴 스 방법 을 할당 하여 호출 할 수 있 습 니 다.
/*
，
，
obj ，
*/
function associateObjWithEvent(obj, methodName) {
/* DOM */
return (function (e) {
/*
DOM e ，
， IE
*/
e = e || window.event;
/*
obj methodName
： ，
this ，
*/
return obj[methodName](e, this);
});
}
/*
， ID ，
DOM ，
onclick、onmouseover、onmouseout
。
*/
function DhtmlObject(elementId) {
/*
DOM
， null
*/
var el = getElementWith(elementId);
/*
if ，el ， boolean
， true, null false
*/
if (el) {
/*
， associateObjWithEvent ，
(this ) ，
*/
el.onclick = associateObjWithEvent(this, "doOnClick");
el.onmouseover = associateObjWithEvent(this, "doOnMouseOver");
el.onmouseout = associateObjWithEvent(this, "doOnMouseOut");
}
}
DhtmlObject.prototype.doOnClick = function (event, element) {
//doOnClick body
}
DhtmlObject.prototype.doMouseOver = function (event, element) {
//doMouseOver body
}
DhtmlObject.prototype.doMouseOut = function (event, element) {
//doMouseOut body
}장면 3:패키지 관련 기능 집합
패 키 지 를 닫 으 면 추가 scope 를 만 들 수 있 습 니 다.이것 은 관련 되 거나 의존 적 인 코드 를 조합 하 는 데 사용 할 수 있 습 니 다.이런 방식 으로 코드 간섭 의 위 해 를 최대한 줄 일 수 있다.만약 에 하나의 함수 가 문자열 을 만 들 고 직렬 연결 을 반복 하 는 작업 을 피 하 는 데 사용 된다 고 가정 합 니 다(예 를 들 어 일련의 중간 문자열 을 만 드 는 것).하나의 생각 은 문자열 의 일부분 을 배열 로 순서대로 저장 한 다음 Array.prototype.join 방법 으로 결 과 를 출력 하 는 것 입 니 다(빈 문자열 을 매개 변수 로 사용 합 니 다).배열 은 출력 버퍼 역할 을 하지만 부분 적 으로 정의 하면 함수 가 실 행 될 때마다 다시 만 들 수 있 습 니 다.만약 이 배열 이 유일한 변수 로 서 모든 함수 에 호출 된다 면,이것 은 좀 작은 문제 가 될 것 이다.
하나의 솔 루 션 은 배열 을 전역 변수 로 끌 어 올 려 다시 만 들 지 않 아 도 다시 사용 할 수 있 도록 하 는 것 입 니 다.그러나 결 과 는 그렇게 간단 하지 않 습 니 다.또한 하나의 전역 변 수 는 버퍼 배열 의 함 수 를 사용 합 니 다.그러면 두 번 째 전역 속성(함수 자체 도 window 대상 의 속성)이 이 배열 과 관련 되 어 코드 가 일정한 통제 성 을 잃 게 될 것 입 니 다.다른 곳 에 사용 하면이 코드 의 작성 자 는 함수 의 정의 와 배열 의 정의 논 리 를 기억 해 야 합 니 다.이 때문에 코드 는 다른 코드 와 쉽게 통합 되 지 않 습 니 다.함수 이름 이 전체 네 임 스페이스 에서 유일한 지 확인 하 는 것 에서 이 함수 와 연 결 된 배열 의 이름 이 전체 네 임 스페이스 에서 유일 하 게 유지 되 는 지 확인 할 필요 가 있 기 때 문 입 니 다.
패 키 지 를 닫 으 면 버퍼 배열 이 의존 하 는 함수 와 연결 되 고 버퍼 배열 의 속성 이름 을 유지 할 수 있 습 니 다.전체 공간 에 분 배 된 것 처럼 이름 충돌 과 코드 상호작용 의 방 해 를 피 할 수 있 습 니 다.
내 연 된 함수 표현 식 을 실행 하여 추가 실행 컨 텍스트 를 만 들 고 그 함수 표현 식 을 내 연 된 함수 로 되 돌려 주 는 방법 이 있 습 니 다.이 함 수 는 외부 코드 에 의 해 사 용 됩 니 다.버퍼 배열 은 내 연 에서 실 행 된 함수 표현 식 에서 부분 변수 로 정의 되 었 습 니 다.그것 은 한 번 만 호출 되 었 기 때문에 이 배열 은 한 번 만 만 들 어 졌 다.그러나 그것 에 의존 하 는 함수 에 있어 서 이 배열 은 항상 접근 할 수 있 고 재 활용 할 수 있 습 니 다.
다음 코드 는 함 수 를 만 들 었 습 니 다.HTML 문자열 중 일 부 는 변 하지 않 지만 변 하지 않 는 문자열 은 매개 변수 로 전 달 된 변수 에 삽입 되 어야 합 니 다.
내부 함수 대상 의 인용 을 되 돌려 주 는 내 연 실 행 된 함수 표현 식또한 전역 변 수 를 할당 하여 전역 함수 로 호출 할 수 있 도록 합 니 다.버퍼 배열 은 부분 변수 로 외부 함수 표현 식 에 정의 되 어 있 습 니 다.전역 네 임 스페이스 로 확장 되 지 않 았 으 며 함수 가 언제 사용 되 든 다시 만 들 필요 가 없습니다.
/*
：getImgInPositionedDivHtml
HTML ， DIV
IMG ，
*/
var getImgInPositionedDivHtml = (function () {
/*
buffAr ，
。 ，
，
*/
var buffAr = [
'<div id="',
'', //index 1, DIV ID attribute
'" style="position:absolute;top:',
'', //index 3, DIV top position
'px;left:',
'', //index 5, DIV left position
'px;width:',
'', //index 7, DIV width
'px;height:',
'', //index 9, DIV height
'px;overflow:hidden;\"><img src=\"',
'', //index 11, IMG URL
'\" width=\"',
'', //index 13, IMG width
'\" height=\"',
'', //index 15, IMG height
'\" alt=\"',
'', //index 17, IMG alt text
'\"><\/div>'
];
/*
，
*/
return (function (url, id, width, height, top, left, altText) {
/*
*/
buffAr[1] = id;
buffAr[3] = top;
buffAr[5] = left;
buffAr[13] = (buffAr[7] = width);
buffAr[15] = (buffAr[9] = height);
buffAr[11] = url;
buffAr[17] = altText;
/*
*/
return buffAr.join('');
});
})();좋은 웹페이지 즐겨찾기
