자바스크립트 모듈러 프로그래밍에 대한 자세한 설명

1. IIFE 설명

은 즉시 실행되는 함수 인 Immediately Invoked Function Expression을 설명합니다. 표현.

다음 코드와 같이 익명 즉시 실행 함수입니다.

(function(window, undefined){
  // 代码...    
})(window);

2. 괄호의 의미

2.1 Wrap function(){} 괄호의 의미

이 괄호의 목적은 function(){}를 표현식으로 변환하는 것입니다. 일부 라이브러리의 소스 코드와 마찬가지로 저는 대신 다음 방법을 사용하는 것을 좋아합니다:

~function(){
  // 代码...
}();

또는 이 방법:

+function(){
  // 代码...
}();

사실 효과는 동일합니다. function(){} 쉽게 실행할 수 있도록 실행 가능한 표현식 공식으로 변환합니다.
괄호를 제거하면 오류가 보고됩니다. 단순 function(){}은 실행 가능한 표현식이 아니기 때문에 오류가 직접 보고됩니다. 아래와 같습니다.

2.1 두 번째 괄호의 의미

이해 첫 번째 괄호의 의미를 이해한 후 두 번째 괄호는 매우 간단하게 표현식을 실행하는 것입니다.

3. 매개변수의 의미

매개변수를 설명하기 위해 이 코드를 예로 듭니다.

var wall = {};
(function(window, WALL, undefined){

})(window, wall);

매개변수는 형식 매개변수와 실제 매개변수로 구분됩니다. 세 개의 매개변수
function(window, WALL, undefined)는 형식 매개변수이고 두 번째 괄호 (window, wall) 안의 두 매개변수는 실제 매개변수입니다.
은 window == window, wall == WALL로도 이해될 수 있습니다.

 2.1 일반 형식 매개변수

일반 형식 매개변수는 전달되는 window 및 wall과 같은 실제 변수 를 나타냅니다. 모든 유형의 변수에 대해 지정됩니다. 형식 매개변수는 실제 매개변수에 해당합니다

 2.2 특수 형식 매개변수 undefound

형식 매개변수에 대해 추가로 undef를 작성해야 하는 이유는 무엇입니까? 주제.
이 예에서 볼 수 있듯이 실제 매개변수는 2개, 형식 매개변수는 3개뿐입니다. 따라서 함수가 실행되면 형식 매개변수 undefined에는 기본적으로 정의되지 않은 값이 할당됩니다.

형식 매개변수 undefined의 기능은 다음과 같습니다.

2.2.1 undefound라는 특수값이 악성코드에 의해 변조되는 것을 방지합니다.
IE6 등 하위 버전의 브라우저에서는 undefine을 수정할 수 있습니다. 이 특별한 값을 수정한 후에는 다음과 같은 판단이 무효화됩니다.

if(wall == undefined){
  // 代码...
}

따라서 여기에 추가 형식 매개변수를 추가하는 목적은 이러한 상황이 발생하는 것을 방지하는 것입니다. 이 IIFE 범위 내에 있는 한 undefound 는 정상적으로 얻을 수 있습니다.

 2.2.2 압축된 코드는 정의되지 않은 것을 압축할 수 있습니다
정의되지 않은 것은 형식 매개변수로 사용되기 때문에 YUI 압축기와 같은 코드 압축 도구는 관련 값을 압축하여 작은 파일 크기를 줄일 수 있습니다.

4. 글쓰기 분석

 4.1 공통 글쓰기

var wall = {}; // 声明定义一个命名空间wall

// 定义方法
(function(window, WALL, undefined){
    // 给wall命名空间绑定方法say
    WALL.say = function(){
        console.log('hello');
    };
})(window, wall);

(function(window, WALL, undefined){
    // 给wall命名空间绑定方法 whoIam
    WALL.whoIam = function(){
        console.log('wall');
    };
})(window, wall);

// 调用
wall.say();
wall.whoIam();

먼저 네임스페이스를 정의한 후 이 네임스페이스에 항목을 추가합니다. 이것은 가장 일반적인 글쓰기 방식이며 가장 이해하기 쉽습니다.
단점은 해당 바인딩 코드를 실행하기 전에 네임스페이스를 선언해야 한다는 것입니다. 순차적 로딩에 문제가 있습니다.

 4.2 증폭 모드

var wall = (function(window, WALL, undefined){
    if(typeof WALL == 'undefined'){
        WALL = {};
    }

    // 给wall命名空间绑定方法say
    WALL.say = function(){
        console.log('hello');
    }

    return WALL; // 返回引用
})(window, wall);

var wall = (function(window, WALL, undefined){
    if(typeof WALL == 'undefined'){
        WALL = {};
    }

    // 给wall命名空间绑定方法 whoIam
    WALL.whoIam = function(){
        console.log('wall');
    }

    return WALL; // 返回引用
})(window, wall);

// 调用
wall.say();
wall.whoIam();

증폭 모드의 장점은 코드가 로드되는 순서를 고려할 필요가 없다는 것입니다.
js에서는 wall 변수에 대해 반복적인 var 선언을 허용하므로 이 코드가 실행될 수 있습니다.
일반적인 글쓰기에서 주의해야 할 문제 없이 IIFE 함수를 여러 파일로 분할하여 로드할 수 있습니다.

 주의사항:
1. IIFE의 헤더는 먼저 네임스페이스가 인스턴스화되었는지 여부를 확인해야 합니다. 인스턴스화되지 않은 경우 인스턴스화합니다.
2. IIFE가 끝나면 네임스페이스에 대한 참조가 반환되어야 후속 코드에서 최신 wall 네임스페이스 콘텐츠를 얻을 수 있습니다.

 4.3 와이드 증폭 모드

(function(window, WALL, undefined){
    // 给wall命名空间绑定方法say
    WALL.say = function(){
        console.log('hello');
    }
})(window, window.wall || (window.wall = {}));

(function(window, WALL, undefined){
    // 给wall命名空间绑定方法 whoIam
    WALL.whoIam = function(){
        console.log('wall');
    }
})(window, window.wall || (window.wall = {}));

// 调用
wall.say();
wall.whoIam();

 와이드 증폭 모드에서 주의할 점: 는 실제 매개변수 부분의 window.wall || (window.wall = {})입니다. .
속임수를 사용하려면 ||연산자를 사용하세요.
window.wall이 인스턴스화되면 정의되지 않습니다. 그런 다음 window.wall의 참조를 직접 반환하고 이를 형식 매개변수 WALL에 할당합니다. || 연산자 뒤에 오는 내용은 실행되지 않습니다.
window.wall이 아직 인스턴스화되지 않은 경우 인스턴스화합니다. 여기서 주목해야 할 점은 인스턴스화는 오류가 보고되지 않도록 괄호로 묶고 표현식으로 변환하여 실행해야 하는 할당 작업이라는 것입니다.
표현식 (window.wall = {})이 실행된 후 새 객체 window.wall에 대한 참조가 반환됩니다.

 宽放大模式的好处：是可以切割成多个文件进行加载，而不必考虑文件加载的先后顺序，不存在强耦合关系。
 当然，如果IIFE里面的方法互相引用，还是存在加载依赖的问题。这个问题可以用加载器Require.js等工具解决，这里就不讨论了。

五、分文件加载IIFE要注意的点

;(function(window, WALL, undefined){
    // 给wall命名空间绑定方法say
    WALL.say = function(){
        console.log('hello');
    }
})(window, window.wall || (window.wall = {}));

 眼尖的已经看出区别了，就是文件开始的地方，先写上分号;。
 这样，多个文件合并的时候，才不会出现收尾相接，代码出现错乱的问题。比如下面这种情况：

// a.js 文件
wall.log()

// b.js 文件
(function(window, WALL, undefined){
    // 给wall命名空间绑定方法say
    WALL.say = function(){
        console.log('hello');
    }
})(window, window.wall || (window.wall = {}));

 由于a.js文件的wall.log()少写了分号，跟b.js文件合并后，js就会认为‘wall.log()(...)’是需要这么执行的，结果代码就报错了。

---

 觉得不错的，可以关注<a href="http://www.php.cn/js/js-weixinapp-module.html" target="_blank">模块化</a>这个系列的文章，容我后续码字，敬请期待！

위 내용은 자바스크립트 모듈러 프로그래밍에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!