Qu'est-ce que la programmation modulaire ? Résumé de la programmation modulaire js

1 Qu'est-ce que la programmation modulaire

2 Pourquoi devrions-nous modulariser

3 AMD

4 CommonJS

5 Résumé

Pour comprendre une technologie, vous devez d'abord comprendre le contexte de la technologie et les problèmes qu'elle résout, plutôt que simplement savoir comment l'utiliser. L’état précédent consistait peut-être à comprendre juste pour le plaisir de comprendre, sans connaître les causes et les avantages réels, alors résumons-le aujourd’hui.

1 Qu'est-ce que la programmation modulaire

Regardons la définition de l'Encyclopédie Baidu

La programmation modulaire fait référence à la division d'un grand programme en fonction de ses fonctions lors de la programmation. divisé en plusieurs petits modules de programme, chaque petit module de programme remplit une certaine fonction, et les connexions nécessaires sont établies entre ces modules, et la fonction entière est complétée grâce à la coopération mutuelle des modules.

Par exemple, l'importation de Java, l'utilisation de C#. Je crois comprendre que grâce à la programmation modulaire, différentes fonctions peuvent être séparées et que la modification d'une fonction n'affectera pas les autres fonctions.

2 Pourquoi la modularisation

Regardez l'exemple suivant

// A.jsfunction sayWord(type){
    if(type === 1){
        console.log("hello");
    }else if(type === 2){
        console.log("world");
    }
}// B.jsfunction Hello(){
    sayWord(1);
}// C.jsHello()

Supposons que les trois fichiers ci-dessus, B.js fait également référence au contenu dans A.js, C .js fait référence au contenu dans B.js. Si la personne qui écrit C.js sait seulement que B.js est référencé, alors elle ne fera pas référence à A.js, ce qui provoquera une erreur de programme et l'ordre de référence des fichiers ne peut pas être erroné. . Cela entraîne des inconvénients pour le débogage et la modification du code global.

Il y a un autre problème. Le code ci-dessus expose deux variables globales, ce qui peut facilement provoquer une pollution des variables globales

3 AMD

AMD est une définition de module asynchrone (définition de module asynchrone ) . Le module est chargé de manière asynchrone. Le chargement du module n'affectera pas l'exécution des instructions suivantes.

Supposons la situation suivante :

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-9'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>

imprime 1 d'abord, puis 2018 年 8 月 9 日. Par conséquent, le chargement d’AMD n’affectera pas l’exécution ultérieure des instructions.

Que se passera-t-il s'il n'est pas chargé de manière asynchrone ?

var a = require('a');
console.log(1)

Les instructions suivantes doivent attendre que a soit chargée avant de pouvoir être exécutées. Si le temps de chargement est trop long, tout le programme sera bloqué ici. Par conséquent, le navigateur ne peut pas charger les ressources de manière synchrone, ce qui est également l'arrière-plan d'AMD.

AMD est une spécification pour le développement modulaire côté navigateur. Étant donné que cette spécification n'est pas initialement prise en charge par JavaScript, des fonctions de bibliothèque tierces, à savoir RequireJS, doivent être introduites lors du développement à l'aide de la spécification AMD.

Principaux problèmes résolus par RequireJS

• Permettre à JS d'être chargé de manière asynchrone pour éviter la perte de réponse des pages

• Gérer les dépendances entre codes , ce qui est propice à l'écriture et à la maintenance du code

Voyons comment utiliser require.js

Pour utiliser require.js, vous devez d'abord définir

// ? 代表该参数可选
    define(id?, dependencies?, factory);

• id : fait référence au nom du module défini

• dépendances : est un tableau de modules dont dépend le module défini

• factory : Initialise la fonction ou l'objet à exécuter pour le module. S'il s'agit d'une fonction, elle ne doit être exécutée qu'une seule fois. S'il s'agit d'un objet, cet objet doit être la valeur de sortie du module.

  Pour des spécifications spécifiques, veuillez vous référer à AMD (version chinoise)
  Par exemple, créez un module nommé "alpha", utilisez require, exports et un module nommé "beta":

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();           //Or:
           return require("beta").verb();
       }
   });

Un module anonyme qui renvoie un objet :

define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

Un module sans dépendances peut définir directement des objets :

define({
     add: function(x, y){
       return x + y;
     }
   });

Comment utiliser

AMD pour charger les modules à l'aide de l'instruction require

require([module],callback);

• module : est un tableau, et les membres à l'intérieur sont les modules à charger

• callback : fonction de rappel après un chargement réussi

Par exemple,

require(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})

La méthode d'utilisation spécifique est la suivante

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-09'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})// 使用// 

Hypothèse Il y a 4 fichiers ici, util.js, a-util.js fait référence à util.js, a.js fait référence à a-util.js et main.js fait référence à a.js.

Parmi eux, l'attribut data-main est utilisé pour charger le module principal du programme web.

L'exemple ci-dessus montre la manière la plus simple d'écrire un module principal. Par défaut, require.js suppose que les dépendances se trouvent dans le même répertoire que le module principal.

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. L'attribut paths de cet objet spécifie le chemin de chargement de chaque module.

require.config({
    paths:{        "a":"src/a.js",        "b":"src/b.js"
    }
})

Une autre méthode est. pour changer le répertoire de base. (baseUrl)

require.config({

　　　　baseUrl: "src",

　　　　paths: {

　　　　　　"a": "a.js",
　　　　　　"b": "b.js",

　　　　}

　　});

4 CommonJS

commonJS est la spécification modulaire de nodejs et est maintenant largement utilisée dans le front-end en raison de son haut degré de. automatisation de l'outil de build, le coût d'utilisation de npm est très faible. commonJS ne charge pas JS de manière asynchrone, mais le charge en même temps de manière synchrone

Dans commonJS, il existe une méthode globale require(), qui est utilisée pour charger des modules, tels que

const util = require('util');

Ensuite, vous pouvez appeler les méthodes fournies par util

const util = require('util');var date = new date();
util.getFormatDate(date,1);

commonJS a trois définitions de modules, la définition de module (exportations), la référence de module (require) et l'identification de module (module)

Le L'objet exports() est utilisé pour exporter des variables ou des méthodes du module actuel et constitue le seul port d'exportation. require() est utilisé pour introduire des modules externes. L'objet module représente le module lui-même.

Par exemple

// util.jsmodule.exports = {
    getFormatDate:function(date, type){
         if(type === 1){                return '2017-06-15'
          }          if(type === 2){                return '2017 年 6 月 15 日'
          }
    }
}// a-util.jsconst util = require('util.js')
module.exports = {
    aGetFormatDate:function(date){
        return util.getFormatDate(date,2)
    }
}

Ou la méthode suivante

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

5 总结

CommonJS 则采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。

相关推荐：

论JavaScript模块化编程

requireJS框架模块化编程实例详解

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!