Explication détaillée de la programmation modulaire JavaScript-js tutoriel-php.cn

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;

Copier après la connexion

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模块的基本写法;

Copier après la connexion

Quatre modes de zoom

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

Copier après la connexion

Cinq zoom large mode

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

Copier après la connexion

Six variables globales d'entrée

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

Copier après la connexion

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

Derniers articles par auteur