Detaillierte Erläuterung der modularen Javascript-Programmierung

1. IIFE Erklärung

buchstabiert „Immediately Invoked Function Expression“, eine sofort ausgeführte Funktion Ausdruck.

Wie im folgenden Code gezeigt, handelt es sich um eine anonyme, sofort ausgeführte Funktion:

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

2. Die Bedeutung von Klammern

2.1 Umbruch function(){}

Der Zweck dieser Klammer besteht darin,

in einen Ausdruck umzuwandeln. Wie beim Quellcode einiger Bibliotheken verwende ich zum Ersetzen gerne die folgende Methode: function(){}

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

oder auf diese Weise:

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

Tatsächlich ist der Effekt der gleiche, sie sollen

zur einfachen Ausführung in ausführbare Ausdrücke konvertieren. function(){} Wenn die Klammern entfernt werden, wird ein Fehler gemeldet. Da es sich bei einem einfachen
nicht um einen ausführbaren Ausdruck handelt, wird ein Fehler direkt gemeldet. Wie unten gezeigt: function(){}

2.1 Die Bedeutung der zweiten Klammer

Nachdem Sie die Bedeutung der ersten Klammer verstanden haben, ist die zweite Klammer sehr einfach: Sie besteht darin, den Ausdruck auszuführen.

3. Die Bedeutung von Parametern

Nehmen Sie diesen Code als Beispiel, um die Parameter zu erklären

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

})(window, wall);

Parameter sind in formale Parameter und tatsächliche Parameter unterteilt. Die drei Parameter

sind formale Parameter und die beiden Parameter in der zweiten Klammer function(window, WALL, undefined) sind tatsächliche Parameter. (window, wall) kann auch als
, window == window verstanden werden. wall == WALL

 

2.1 Gewöhnliche formale Parameter

Gewöhnliche formale Parameter beziehen sich auf die tatsächlichen

Variablen window wie wall und , die in und übergeben werden für jede Art von Variable angegeben. Ein formaler Parameter entspricht einem tatsächlichen Parameter

 

2.2 Spezieller formaler Parameter undefiniert

Warum müssen wir einen zusätzlichen undefinierten Parameter für den formalen Parameter schreiben? Das ist sehr interessant Thema.

Wie Sie in diesem Beispiel sehen können, gibt es nur zwei tatsächliche Parameter und drei formale Parameter. Daher wird dem Formalparameter
beim Ausführen der Funktion standardmäßig der Wert undefiniert zugewiesen. undefined

Die Funktionen des formalen Parameters

lauten wie folgt: undefined

2.2.1 Verhindern Sie, dass der Sonderwert undefiniert durch bösartigen Code manipuliert wird. In Browsern niedrigerer Versionen wie IE6 kann undefiniert geändert werden. Nachdem dieser Sonderwert geändert wurde, werden Urteile wie die folgenden ungültig.

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

Der Zweck des Hinzufügens eines zusätzlichen formalen Parameters besteht also darin, dies zu verhindern. Solange es innerhalb dieses IIFE-Bereichs liegt, kann undefiniert normal abgerufen werden.

 

2.2.2 Komprimierter Code kann undefiniert komprimieren Da undefiniert als formaler Parameter verwendet wird, können Codekomprimierungstools wie der YUI-Kompressor die zugehörigen Werte komprimieren und so die Dateigröße verringern.

4. Schreibanalyse

 

4.1 Allgemeine Schreibweise

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();

Definieren Sie zuerst einen Namespace und fügen Sie dann Dinge zu diesem Namespace hinzu. Dies ist die gebräuchlichste Schreibweise und am einfachsten zu verstehen.

Der Nachteil besteht darin, dass ein Namespace deklariert werden muss, bevor der entsprechende Bindungscode ausgeführt werden kann. Es gibt ein Problem beim sequentiellen Laden.

 

4.2 Verstärkungsmodus

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();

Der Vorteil des Verstärkungsmodus besteht darin, dass Sie nicht auf die Reihenfolge achten müssen, in der der Code geladen wird.

Da
js wiederholte var-Deklarationen für -Variablen zulässt, kann dieser Code ausgeführt werden. wall Ich kann die IIFE-Funktion zum Laden in mehrere Dateien aufteilen, ohne dass die Probleme auftreten, auf die man beim normalen Schreiben achten muss.

 

Zu beachtende Punkte: 1. Der Header von IIFE muss zunächst prüfen, ob der Namespace instanziiert wurde. Wenn er nicht instanziiert wurde, instanziieren Sie ihn.
2. Am Ende des IIFE muss ein Verweis auf den Namespace zurückgegeben werden, damit nachfolgender Code den neuesten
Namespace-Inhalt erhalten kann. wall

 

4.3 Wide-Verstärkungsmodus

(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();

 

Das Wichtigste zum Wide-Verstärkungsmodus: ist das in der Realität Parameterteil. window.wall || (window.wall = {})Verwenden Sie ||
Operator, um Tricks auszuführen. Wenn
instanziiert wird, ist es nicht definiert. Geben Sie dann direkt die Referenz von window.wall zurück und weisen Sie sie dem formalen Parameter window.wall zu. Inhalte, die auf den ||-Operator folgen, werden nicht ausgeführt. WALL Wenn
noch nicht instanziiert wurde, instanziieren Sie es. Hierbei ist zu beachten, dass es sich bei der Instanziierung um eine Zuweisungsoperation handelt, die zur Ausführung in Klammern gesetzt und in einen Ausdruck umgewandelt werden muss, damit kein Fehler gemeldet wird. Nachdem der window.wall-Ausdruck
ausgeführt wurde, wird ein Verweis auf das neue (window.wall = {})-Objekt zurückgegeben. 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>这个系列的文章，容我后续码字，敬请期待！

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der modularen Javascript-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!