Explication détaillée de la programmation modulaire JavaScript

Cet article explique en détail la programmation modulaire JavaScript

Chapitre 1 Programmation modulaire JavaScript

(1) : Méthode d'écriture du module

Méthode d'écriture originale
/ / A le module est un ensemble de méthodes pour implémenter une fonction spécifique ; tant que différentes fonctions (et variables qui enregistrent l'état) sont simplement assemblées, il est considéré comme un module
 ; function m1(){
}
}
function m2(){
}
// Les fonctions ci-dessus m1() et m2() forment un module il suffit de l'appeler directement lorsque en l'utilisant ;
// Inconvénients : "pollution" des variables globales ; il n'y a aucune garantie que les noms de variables n'entreront pas en conflit avec d'autres modules, et il n'y a pas de relation directe entre les membres du module ;

Deux

objetméthode d'écriture

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

Trois méthodes d'écriture de fonctions d'exécution immédiate

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

Quatre modes de zoom

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

Cinq zoom large mode

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

Six variables globales d'entrée

// 独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互;
// 为了在模块内部调用全局变量,必须显式地将其他变量输入模块;
  var module = (function($,YAHOO){
    // ...
  })(jQuery,YAHOO);
// 上面的module模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module;
// 这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显;

Chapitre 2 Programmation modulaire JavaScript (2) : Spécification AMD

Spécification d'un module

// Actuellement, il existe un total de spécifications de module JavaScript courantes Deux types : CommonJS et AMD ;

Two CommonJS

//
node.js utilise le langage JavaScript pour la programmation côté serveur, ce qui marque la naissance officielle de la « programmation modulaire JavaScript » ; // Le système de modules de node.js est implémenté en référence à la spécification CommonJS ;
Dans CommonJS, il existe une méthode globale
require(), qui est utilisée pour charger les modules var math = ; require('math'); // Charger le module;
math.add(2,3); Le code de la section précédente aura de gros problèmes lors de son exécution dans le navigateur;
var math = require('math ');

math.add(2,3);

// Problème : il faut attendre que math.js soit chargé dans require('math') avant que math.add(2,3) soit exécuté ;
// Par conséquent, le module du navigateur ne peut pas utiliser le "chargement synchrone" et ne peut utiliser que le "chargement asynchrone" ";==>AMD;

quatre AMD
AMD (Asyn
chr

onous Module Definition) définition de module asynchrone;

// Utiliser un module de chargement asynchrone, chargement de module Cela n'affecte pas l'exécution des instructions suivantes. Toutes les instructions qui reposent sur ce module sont définies dans une
fonction de rappel<.>. // Cette fonction de rappel ne s'exécutera pas tant que le chargement n'est pas terminé / / AMD utilise également l'instruction require() pour charger les modules, mais elle nécessite deux paramètres :
require([module) ], callback); // module : est un tableau
, les membres à l'intérieur C'est le module à charger
// callback : est la fonction de rappel après un chargement réussi ; > require(['math'], function(math){
math.add(2,3);
});// math.add() et le chargement du module mathématique ne sont pas synchronisés, et le navigateur ne se bloquera pas ; par conséquent, AMD est plus adapté à l'environnement du navigateur ;
Chapitre 3 Programmation du module JavaScript (3) : Utilisation de require.js
1 Pourquoi utiliser require.js
// Plusieurs fichiers js doivent être chargés dans l'ordre ;
// Inconvénients :
// 1. Lors du chargement, le navigateur cessera de restituer la page Web. Plus il y a de fichiers chargés, plus la page Web sera longue. perdre la réponse;

// 2. Comme il existe des dépendances entre les fichiers js, l'ordre de chargement doit être strictement garanti. Lorsque les dépendances sont très volumineuses, lorsqu'il devient complexe, il devient difficile d'écrire et de maintenir le code // require.js résout donc ces deux problèmes :

// 1. Implémenter le chargement asynchrone des fichiers js pour éviter la perte de réponse sur la page web ;
// 2. Gérer les dépendances entre modules pour faciliter le code ; écriture et maintenance ;

Chargement de require.js
1. Chargement de require.js
50e99628e926b60c4ad285f45e721de93fa3f474cbb4b6d948eebecb1be5dde4
// L'attribut async indique que ce fichier doit être chargé de manière asynchrone pour éviter que la page Web ne réponde ; IE ne prend pas en charge cet attribut et ne prend en charge que le defer, donc écrivez également defer ;
2. 🎜>main
.js

35be17e58c59207c30045b58673f385a3fa3f474cbb4b6d948eebecb1be5dde4

// Le rôle des données- L'attribut principal est de spécifier le module principal du programme Web =>main.js Ce fichier sera le premier à être chargé par require.js
// Puisque require.js est par défaut Le suffixe du fichier est js, donc main.js peut être abrégé en main ;

Comment écrire les trois modules principaux main.js
1. Si main.js ne dépend d'aucun autre module, le code JavaScript peut être écrit directement
// main.js
alert( 'Chargement réussi ! ');
2. Si main.js dépend du module, alors vous devez utiliser la fonction require() définie par la spécification AMD;
// main.js
require( ['moduleA','moduleB','moduleC'],fonction(moduleA,moduleB,moduleC){
                                                                                                                    Un : Tableau, indiquant les modules dépendants, c'est-à-dire les trois modules dont dépend le module principal // Paramètre deux : fonction de rappel, elle sera appelée lorsque tous les modules spécifiés précédemment seront chargés avec succès ; le module chargé transmettra cette fonction en tant que paramètre, afin que ces modules puissent être utilisés dans la fonction de rappel ; // require() charge le module de manière asynchrone et le navigateur ne perdra pas de réponse ; pour la fonction de rappel qu'il spécifie, seuls les modules précédents sont chargés avec succès. Il ne s'exécutera qu'après, résolvant le problème de dépendance
Exemple :
require(['jquery','underscore','backbone'], function($,_,Backbone){
/ / ...
});

Chargement de quatre modules
//Utilisez la méthode require.config() pour personnaliser le comportement de chargement du module ;
// require.config() est écrit en tête du module principal (main.js) ; // Le paramètre est un objet, et l'attribut paths de cet objet spécifie le chemin de chargement de chaque module ;
// Définir les trois modules suivants Les fichiers sont dans le même répertoire que main.js par défaut ",

"backbone": "backbone.min"

}
});

// Si le module chargé et le module principal ne sont pas dans le même répertoire, vous devez préciser le chemin d'accès par un ;
require.config({
chemins :{
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone" ;
chemins :{
"jquery": "jquery.min",
"underscore": "underscore.min",

"backbone": "backbone.min"

}
});

// Si le module est sur un autre hôte, vous pouvez également spécifier directement son URL
require.config({
paths:{
"jquery ":" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
         }
     });
// exigence require.js, chaque module est un fichier js séparé ; dans ce cas, si plusieurs modules sont chargés, plusieurs requêtes HTTP seront émises, ce qui affectera la vitesse de chargement de la page Web ;
// Par conséquent, require.js fournit un outil d'optimisation après le. Le module est déployé, vous pouvez utiliser cet outil pour fusionner plusieurs modules en un seul fichier afin de réduire le nombre de requêtes HTTP ;

Comment écrire cinq modules AMD

// Les modules chargés par require.js adoptent les spécifications AMD, c'est-à-dire que les modules doivent être écrits conformément à la réglementation AMD
// Plus précisément, les modules doivent être définis à l'aide d'une fonction definition() spécifique ;Si un module ne dépend pas d'autres modules, il peut être défini directement dans la fonction définir() ;
// Définir le module mathématique dans math.js
// math.js
définir(fonction() {
var add = function(x,y){
return x y;
};
return {
};
});
/ / Charger le module mathématique dans main.js
require(['math'],function(math){
alert(math.add(1,1));
});
/ / Si ce module également dépend d'autres modules, alors le premier paramètre de la fonction définir() doit être un tableau pour indiquer les dépendances du module
// math.js
définir(['myLib'] ,function(myLib) {
function foo(){
myLib.doSomething();
}
return {
foo:foo
};
});
// Quand la fonction require() charge le module ci-dessus, le fichier myLib.js sera chargé en premier

Six charge les modules non standard

// Charge les modules non standard, avant de charger avec require ; (), vous devez d'abord utiliser la méthode require.config() pour définir certaines de leurs caractéristiques ; exports:'_'

},
'backbone':{
deps:['underscore',' jquery'],
exports:'Backbone'
          }
                                  🎜> });
// require.config() reçoit un objet de configuration En plus de l'attribut paths mentionné précédemment, cet objet. possède également un attribut shim, qui est spécialement utilisé pour configurer les modules incompatibles ;
// (1) Définissez le tableau deps pour indiquer la dépendance du module
// (2). nom de la variable de sortie) pour indiquer le nom de ce module lorsqu'il est appelé en externe ;
Par exemple : le plug-in de jQuery
shim : {
'jquery.scroll' : {
DEPS : [' jquery'],
exports : 'jquery.fn.scroll'
}
};

Sept plug-ins require.js

1.domready : permet le fonction de rappel à exécuter après le chargement de la structure DOM de la page ;
require(['domready!'],function( doc){
// appelée une fois le DOM prêt;

})

2 .text et image : autoriser require.js à charger des fichiers texte et image ;

definition(['text!review. txt','image!cat.jpg'],function(review,cat){

console .log(review);

document
.body.appendChild(cat);
});

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!