자바스크립트 자체 실행 함수_javascript 스킬의 유사 네임스페이스 캡슐화 방법

자체 실행 기능: 자동으로 실행되는 기능입니다. 해석될 때 이미 실행 중입니다. 일반적으로 함수는 호출될 때 실행됩니다.
자체 실행 함수의 일반적인 형식: (function() { function body })();
또한, 자체 실행 함수는 일반적으로 function() {} 형식의 익명 함수를 갖습니다.

다음 코드는 window 객체에 mySpace 네임스페이스를 만들고, 이 자체 실행 함수에서 일부 함수를 호출할 수 있도록 mySpace 네임스페이스 아래에 자체 실행 함수의 메서드를 캡슐화합니다.

코드 복사 코드는 다음과 같습니다.

(function() {
/ /id에 따라 객체 가져오기
function $(id) { return document.getElementById(id) }

//외부 레이어에서는 내부 함수를 호출할 수 없습니다.
function _setStyle(id, styleName, styleValue) {
$(id).style[styleName] = styleValue;

//유사 네임스페이스 생성
window.mySpace =

// mySpace 네임스페이스에 내부 함수 _setStyle 캡슐화
//호출 시 window.mySpace.setStyle(id, styleName, styleValue) 사용
window.mySpace.setStyle = _setStyle; () ;

//다음은 테스트 코드입니다
window.onload = function() {
//id가 test인 개체의 텍스트 색상을 빨간색으로 설정합니다
window. mySpace.setStyle( "test", "color", "#f00");
}


그럼 이 패키징 방법의 장점은 무엇인가요?

물론 자체 실행 함수 내에서 메소드, 변수, 속성 등을 보호합니다. 이렇게 하면 코드가 더욱 안전해집니다.

이 방법을 사용하지 않는 경우 다음 방법도 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.mySpace = window.mySpace.$ = function(id) { return document.getElementById(id) }

window.mySpace.setStyle = function(id, styleName, styleValue) {
window.mySpace.$("test ").style[styleName] = styleValue;
}
//다음은 테스트 코드입니다
window.onload = function() {
window.mySpace.setStyle("test", " backgroundColor", "# f00");
window.mySpace.setStyle("test", "color", "#fff");
}


위 코드와 자체 실행 함수로 구현된 함수 실제로는 동일합니다.

비교해 보면 두 번째 방법이 더 직관적이고 이해하기 쉽다는 것을 알 수 있습니다. 하지만 캡슐화 과정을 거치지 않으면 코드가 완전히 노출됩니다.