Programmation modulaire JavaScript (notes)_compétences javascript-js tutoriel-php.cn

J'ai toujours eu peu de connaissances sur JS. J'ai rencontré ce problème récemment, donc je l'ai étudié en ligne, je ne le comprends toujours pas, je vais donc d'abord publier mes notes ;

Chapitre 1 Programmation modulaire JavaScript

(1) : Comment écrire des modules

1 Ecriture originale
// Un 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, c'est un module ; Fonction m1(){
// ...
>
Fonction m2(){
// ...
>
// Les fonctions m1() et m2() ci-dessus forment un module ; il suffit de l'appeler directement lors de son utilisation
; // Inconvénients : variables globales "polluées" ; 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
;

2 méthodes d'écriture d'objets

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

Copier après la connexion

3 Comment écrire une fonction 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

5 Mode zoom large

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

Copier après la connexion

6 Saisir les variables globales

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

Copier après la connexion

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

1 Spécifications du module
// Actuellement, il existe deux spécifications de modules JavaScript populaires : CommonJS et AMD

;

2 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() pour charger les modules ; var math = require('math'); var math = require('math'); // Charger le module;
Math.add(2,3); // Méthode d'appel du module =>5;

3 Environnement du navigateur

// 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 : Vous devez attendre que math.js soit chargé dans require('math') avant math.add(2,3);
// Par conséquent, les modules du navigateur ne peuvent pas utiliser le "chargement synchrone" et ne peuvent utiliser que le "chargement asynchrone";==>AMD;

Quatre AMD

Définition du module asynchrone AMD (Asynchronous Module Definition) ;
// Utiliser le chargement asynchrone des modules. Le chargement du module n'affecte pas l'exécution des instructions suivantes. Toutes les instructions qui dépendent de 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 sont les modules à 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 fige pas ; par conséquent, AMD est plus adapté à l'environnement du navigateur ;
Chapitre 3 Programmation modulaire 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 perdra de réponse
; // 2. En raison des dépendances entre les fichiers js, l'ordre de chargement doit être strictement garanti. Lorsque les dépendances sont complexes, l'écriture et la maintenance du code deviendront difficiles ; // Donc require.js résout ces deux problèmes :
// 1. Implémentez le chargement asynchrone des fichiers js pour éviter que les pages Web ne perdent de réponse
// 2. Gérer les dépendances entre les modules pour faciliter l'écriture et la maintenance du code

2 Chargement de require.js

1. Charger require.js
// L'attribut async indique que ce fichier doit être chargé de manière asynchrone pour éviter que la page Web ne perde la réponse ; IE ne prend pas en charge cet attribut, seulement defer, donc écrivez également defer ; 2. Chargez main.js

// La fonction de l'attribut data-main est de spécifier le module principal du programme web => main.js Ce fichier sera le premier à être chargé par require.js ; // Puisque le suffixe de fichier par défaut de require.js est js, main.js peut être abrégé en main ;

3 Comment écrire le module principal 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, vous devez utiliser la fonction require() définie par la spécification AMD ; //main.js
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){
// ...
})
// La fonction require() reçoit deux paramètres :
// Paramètre 1 : Tableau, indiquant les modules dont il dépend, c'est-à-dire les trois modules dont dépend le module principal
; //Paramètre deux : fonction de rappel, qui sera appelée une fois que tous les modules spécifiés précédemment auront été chargés avec succès ; les modules chargés seront transmis à la fonction en tant que paramètres, afin que ces modules puissent être utilisés dans la fonction de rappel
; // require() charge les modules de manière asynchrone et le navigateur ne perdra pas de réponse ; la fonction de rappel qu'il spécifie ne s'exécutera qu'une fois les modules précédents chargés avec succè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 précise le chemin de chargement de chaque module
; // Définissez les fichiers des trois modules suivants pour qu'ils utilisent le même répertoire que main.js par défaut
; require.config({
chemins :{
"jquery": "jquery.min",
"soulignement": "soulignement.min",
"backbone": "backbone.min"
>
});

// Si le module chargé et le module principal ne sont pas dans le même répertoire, vous devez préciser les chemins un par un
require.config({
        chemins :{
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
>
});
// Ou changez directement le répertoire de base (baseUrl)
require.config({
        baseUrl:"js/lib",
        chemins :{
"jquery": "jquery.min",
"soulignement": "soulignement.min",
"backbone": "backbone.min"
>
});

// Si le module est sur un autre hébergeur, vous pouvez également préciser directement son URL
require.config({
chemins :{
"jquery": https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
>
});
// require.js nécessite que chaque module soit un fichier js distinct ; 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. Une fois le module 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, le module doit être défini à l'aide d'une fonction définir() 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 ajouter = fonction(x,y){
               return x y ;
        };
         revenir {
              ajouter :ajouter
        };
});
//Charger le module mathématique dans main.js
require(['math'],function(math){
alerte(math.add(1,1));
});
// Si ce module dépend également 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(['maLib'],fonction(maLib){
         fonction foo(){
maLib.doSomething();
>
         revenir {
foo:foo
        };
});
// Lorsque la fonction require() charge le module ci-dessus, le fichier myLib.js sera chargé en premier
;

6 Chargement de modules non standards

// Pour charger des modules non standards, avant de les charger avec require(), vous devez d'abord utiliser la méthode require.config() pour définir certaines de leurs caractéristiques
require.config({
cale :{
             'souligner' :{
                   exportations : '_'
            },
            'colonne vertébrale' :{
               deps:['underscore','jquery'],
exportations : '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éfinir le tableau deps pour indiquer les dépendances du module
// (2). Définir la valeur des exports (nom de la variable de sortie), indiquant le nom de ce module lorsqu'il est appelé en externe
; Par exemple : plug-in jQuery
cale :{
          'jquery.scroll' :{
           deps :['jquery'],
Exportations : 'jQuery.fn.scroll'
>
};

Sept plug-ins require.js

1.domready : La fonction de rappel peut être exécutée après le chargement de la structure DOM de la page

; require(['domready!'],function(doc){
// appelé une fois que le DOM est prêt ;
})
2.texte et image : Autoriser require.js à charger des fichiers texte et image
Définir(['text!review.txt','image!cat.jpg'],function(review,cat){
console.log(revue);
document.body.appendChild(cat);
});