Was ist modulare Programmierung? Zusammenfassung der modularen js-Programmierung

1 Was ist modulare Programmierung

2 Warum sollten wir modularisieren

3 AMD

4 CommonJS

5 Zusammenfassung

Um eine Technologie zu verstehen, müssen Sie zunächst den Hintergrund der Technologie und die Probleme verstehen, die sie löst, und nicht nur wissen, wie man sie nutzt. Der vorherige Zustand bestand möglicherweise darin, nur um des Verständnisses willen zu verstehen, ohne die tatsächlichen Ursachen und Vorteile zu kennen. Fassen wir ihn also heute zusammen.

1 Was ist modulare Programmierung? In mehrere kleine Programmmodule unterteilt, erfüllt jedes kleine Programmmodul eine bestimmte Funktion, stellt die erforderlichen Verbindungen zwischen diesen Modulen her und vervollständigt die gesamte Funktion durch die gegenseitige Zusammenarbeit der Module.

Zum Beispiel Javas Import, C#s Verwendung. Mein Verständnis ist, dass durch modulare Programmierung verschiedene Funktionen getrennt werden können und die Änderung einer Funktion keine Auswirkungen auf andere Funktionen hat.

2 Warum Modularisierung? B.js wird ebenfalls zitiert. Wenn die Person, die C.js schreibt, nur weiß, dass B.js zitiert wird, wird sie A.js nicht zitieren, was zu einem Programmfehler führt und die Referenzreihenfolge der Dateien nicht falsch sein kann. Dies führt zu Unannehmlichkeiten beim Debuggen und Ändern des gesamten Codes.

Es gibt ein weiteres Problem, das zwei globale Variablen offenlegt, die leicht zu einer Verschmutzung globaler Variablen führen können

3 AMD

AMD ist Asynchronous Module Definition (asynchrone Moduldefinition). ). Das Modul wird asynchron geladen. Das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen.

Nehmen Sie die folgende Situation an:

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

druckt zuerst

und dann

. Daher hat das Laden von AMD keinen Einfluss auf die nachfolgende Ausführung der Anweisung.

Was passiert, wenn es nicht asynchron geladen wird?

// 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>

Die folgenden Anweisungen müssen warten, bis sie geladen werden, bevor sie ausgeführt werden können Das Programm bleibt hier hängen. Daher kann der Browser Ressourcen nicht synchron laden, was auch der Hintergrund von AMD ist.

AMD ist eine Spezifikation für die modulare Entwicklung auf der Browserseite. Da diese Spezifikation ursprünglich nicht von JavaScript unterstützt wird, müssen bei der Entwicklung mithilfe der AMD-Spezifikation Bibliotheksfunktionen von Drittanbietern, nämlich RequireJS, eingeführt werden.

1Hauptprobleme, die durch RequireJS gelöst werden2018 年 8 月 9 日

Aktivieren Sie das asynchrone Laden von JS, um Seitenantwortverluste zu vermeiden

Abhängigkeiten zwischen verwalten Codes, was dem Schreiben und Warten von Code förderlich ist

• Sehen wir uns an, wie require.js verwendet wird
  Um require.js zu verwenden, müssen Sie zuerst definieren

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

• id: bezieht sich auf den Namen des definierten Moduls

Abhängigkeiten: ist ein Array von Modulen, von denen das definierte Modul abhängt

• factory: Initialisiert die Funktion oder das Objekt, die für das Modul ausgeführt werden sollen. Wenn es sich um eine Funktion handelt, sollte sie nur einmal ausgeführt werden. Wenn es sich um ein Objekt handelt, sollte dieses Objekt der Ausgabewert des Moduls sein.
  Spezifische Spezifikationen finden Sie bei AMD (chinesische Version)
Erstellen Sie beispielsweise ein Modul mit dem Namen „Alpha“, verwenden Sie require, exports und ein Modul mit dem Namen „Beta“:

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

Ein anonymes Modul, das ein Objekt zurückgibt:

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

  Ein Modul ohne Abhängigkeiten, das Objekte direkt definieren kann:

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

  Verwendung
  

  AMD verwendet die require-Anweisung, um Module zu laden

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

Modul: ist ein Array, die darin enthaltenen Mitglieder sind die zu ladenden Module

Rückruf: Laden Sie die Rückruffunktion nach Erfolg

• Zum Beispiel

  require([module],callback);

  Die spezifische Verwendungsmethode ist wie folgt

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

• Angenommen, es gibt hier 4 Dateien, util. js, a-util.js bezieht sich auf util.js, a.js bezieht sich auf a-util.js und main.js bezieht sich auf a.js.
  Unter anderem wird das Attribut data-main zum Laden des Hauptmoduls des Webseitenprogramms verwendet.

Das obige Beispiel zeigt die einfachste Möglichkeit, ein Hauptmodul zu schreiben. Standardmäßig geht require.js davon aus, dass sich Abhängigkeiten im selben Verzeichnis wie das Hauptmodul befinden.

Verwenden Sie die Methode

, um das Ladeverhalten des Moduls anzupassen.

steht an der Spitze des Hauptmoduls (main.js). Das paths-Attribut dieses Objekts gibt den Ladepfad jedes Moduls an das Basisverzeichnis (baseUrl)

// 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)
})// 使用// 

4 CommonJS

commonJS ist die modulare Spezifikation von nodejs und wird aufgrund des hohen Automatisierungsgrads des Build-Tools mittlerweile häufig verwendet Die Kosten für die Verwendung von npm sind sehr gering. commonJS lädt JS nicht asynchron, sondern lädt alles auf einmal synchron

In commonJS gibt es eine globale Methode require(), die zum Laden von Modulen wie

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

require.config() verwendet wird. Dann Sie können einfach die von util bereitgestellten Methoden aufrufen require.config()

require.config({

　　　　baseUrl: "src",

　　　　paths: {

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

　　　　}

　　});

commonJS verfügt über drei Definitionen von Modulen: Moduldefinition (Exporte), Modulreferenz (erforderlich) und Modulidentifikation (Modul)

exports()-Objekt Wird zum Exportieren von Variablen oder Methoden des aktuellen Moduls verwendet, dem einzigen Exportport. require() wird verwendet, um externe Module einzuführen. Das Modulobjekt repräsentiert das Modul selbst.

Gib mir ein Beispiel

const util = require('util');

oder hier entlang

 // 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框架模块化编程实例详解

Das obige ist der detaillierte Inhalt vonWas ist modulare Programmierung? Zusammenfassung der modularen js-Programmierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!