Explication détaillée de la programmation modulaire javascript

1. IIFE explication

énonce l'expression de fonction immédiatement invoquée, une fonction immédiatement exécutée Expression.

Comme le montre le code suivant, il s'agit d'une fonction anonyme immédiatement exécutée :

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

2. La signification des parenthèses

2.1 Wrapping. function(){}

Le but de cette parenthèse est de convertir

en une expression. Comme le code source de certaines bibliothèques, j'aime utiliser la méthode suivante pour remplacer : function(){}

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

ou de cette façon :

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

En fait, l'effet est le même, ils doivent convertir

en expressions exécutables pour une exécution facile. function(){} Si les parenthèses sont supprimées, une erreur sera signalée. Parce qu'un simple
n'est pas une expression exécutable, une erreur sera signalée directement. Comme indiqué ci-dessous : function(){}

2.1 La signification de la deuxième parenthèse

Comprendre Après avoir compris le sens de la première parenthèse, la deuxième parenthèse est très simple, il s'agit d'exécuter l'expression.

3. La signification des paramètres

Prenez ce code comme exemple pour expliquer les paramètres

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

})(window, wall);

Les paramètres sont divisés en paramètres formels et paramètres réels. Les trois paramètres

sont des paramètres formels, et les deux paramètres de la deuxième parenthèse function(window, WALL, undefined) sont des paramètres réels. (window, wall) peut également être compris comme
, window == window. wall == WALL

 

2.1 Paramètres formels ordinaires

Les paramètres formels ordinaires font référence aux

variables window réelles telles que wall et qui sont transmises et spécifié pour tout type de variable. Un paramètre formel correspond à un paramètre réel

 

2.2 Paramètre formel spécial non défini

Pourquoi avons-nous besoin d'écrire un paramètre non défini supplémentaire pour le paramètre formel ? sujet.

Comme vous pouvez le voir dans cet exemple, il n'y a que deux paramètres réels et trois paramètres formels. Par conséquent, lorsque la fonction est exécutée, le paramètre formel
se verra attribuer la valeur non définie par défaut. undefined

Les fonctions du paramètre formel

sont les suivantes : undefined

2.2.1 Empêcher la valeur spéciale non définie d'être falsifiée par un code malveillant. Dans les navigateurs de version inférieure tels que IE6, undefined peut être modifié. Une fois cette valeur spéciale modifiée, les jugements tels que les suivants deviendront invalides.

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

Ainsi, le but de l'ajout d'un paramètre formel supplémentaire ici est d'éviter que cela ne se produise. Tant qu'il entre dans ce champ d'application IIFE, undefined peut être obtenu normalement.

 

2.2.2 Le code compressé peut compresser un défini Parce que undéfini est utilisé comme paramètre formel, les outils de compression de code comme le compresseur YUI peuvent compresser ses valeurs associées, réduisant ainsi la petite taille du fichier.

4. Analyse de l'écriture

 

4.1 Écriture commune

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

Définissez d'abord un espace de noms, puis ajoutez des éléments à cet espace de noms. C’est la manière d’écrire la plus courante et la plus simple à comprendre.

L'inconvénient est qu'un espace de noms doit être déclaré avant que le code de liaison correspondant puisse être exécuté. Il y a un problème avec le chargement séquentiel.

 

4.2 Mode amplification

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

L'avantage du mode amplification est que vous n'avez pas à considérer l'ordre dans lequel le code est chargé.

Parce que
js autorise les déclarations var répétées pour les variables , ce code peut être exécuté. wall Je peux diviser la fonction IIFE en plusieurs fichiers à charger sans les problèmes auxquels il faut prêter attention dans l'écriture ordinaire.

 

Points à noter : 1. L'en-tête de l'IIFE doit d'abord vérifier si l'espace de noms a été instancié. S'il n'a pas été instancié, instanciez-le.
2. À la fin de l'IIFE, une référence à l'espace de noms doit être renvoyée, afin que le code suivant puisse obtenir le dernier
contenu de l'espace de noms. wall

 

4.3 Mode d'amplification large

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

 

La chose importante à noter à propos du mode d'amplification large : est le dans le réel partie paramètre. window.wall || (window.wall = {})Utilisez ||
opérateur pour faire des tours. Si
est instancié, il n'est pas défini. Renvoyez ensuite directement la référence de window.wall et affectez-la au paramètre formel window.wall. Le contenu suivant l'opérateur || ne sera pas exécuté. WALL Si
n'a pas encore été instancié, instanciez-le. Le point à noter ici est que l'instanciation est une opération d'affectation, qui doit être entourée de parenthèses et transformée en une expression à exécuter, afin qu'aucune erreur ne soit signalée. Une fois l'expression window.wall
exécutée, une référence au nouvel objet (window.wall = {}) sera renvoyée. 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>这个系列的文章，容我后续码字，敬请期待！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!