Verstehen Sie die Front-End-Modularität (CommonJs, AMD und CMD)

Es gibt drei Front-End-Modulspezifikationen: CommonJs, AMD und CMD.

CommonJs kommt serverseitig zum Einsatz, AMD und CMD kommen in der Browserumgebung zum Einsatz.

AMD ist die standardisierte Ausgabe von Moduldefinitionen während des Promotion-Prozesses von RequireJS.

CMD ist die standardisierte Ausgabe der Moduldefinition während des Promotion-Prozesses von SeaJS.

AMD: Frühe Ausführung (asynchrones Laden: Abhängigkeiten werden zuerst ausgeführt) + verzögerte Ausführung

CMD: Verzögerte Ausführung (zum Laden ausführen, in der richtigen Reihenfolge ausgeführt)

Modul

Funktion Schreiben

function f1(){
    //...
}
function f2(){
    //...
}

Ein Modul ist eine Datei, die eine bestimmte Funktion implementiert. Es besteht darin, mehrere Funktionen in einer Datei zusammenzufassen . ein Modul. Laden Sie diese Datei bei Bedarf und rufen Sie die darin enthaltenen Funktionen auf.

Dadurch wird jedoch die globale Variable verschmutzt, es gibt keine Garantie dafür, dass es keinen Variablennamen-Konflikt mit anderen Modulen gibt, und es besteht keine Beziehung zwischen den Modulen Mitglieder.

　ObjektSchreiben

var module = {
　　star : 0,
　　f1 : function (){
　　　　//...
　　},
　　f2 : function (){
　　　　//...
　　}
};
module.f1();
module.star = 1;

Das Modul wird als Objekt geschrieben und die Modulmitglieder werden durch Aufrufen des ObjektsAttribut, Sie können auf das Modul zugreifen. Es macht aber auch die Modulmitglieder verfügbar, und der interne Status des Moduls kann von der Außenwelt geändert werden.

Funktion sofort ausführen

var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log('ok');
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
       return {
          f1:f1,
          f2:f2
       };
　　})();
module.f1();  //ok
console.log(module.star)  //undefined

Extern kein Zugriff auf interne private Variablen

CommonJs

CommonJS ist eine Spezifikation für serverseitige Module, die gefördert und verwendet wird von Node. Aufgrund der Komplexität der serverseitigen Programmierung ist es schwierig, ohne Module mit dem Betriebssystem und anderen Anwendungen zu interagieren. Die Verwendung ist wie folgt:

math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

increment.js
var add = require(&#39;math&#39;).add;
exports.increment = function(val) {
    return add(val, 1);
};

index.js
var increment = require(&#39;increment&#39;).increment;
var a = increment(1); //2

Gemäß der CommonJS-Spezifikation:

• Eine einzelne Datei ist ein Modul. Jedes Modul hat einen separaten Bereich, d. h. innerhalb des Moduls definierte Variablen können von anderen Modulen nicht gelesen werden, es sei denn, sie sind als Attribute des globalen Objekts definiert.

• Der beste Weg, Modulvariablen zu exportieren, ist die Verwendung des module.exports-Objekts.

• Laden Sie das Modul mit der Methode require, die eine Datei liest und ausführt und das module.exports-Objekt in der Datei zurückgibt.

Schauen Sie Wenn Sie sich den obigen Code genau ansehen, werden Sie feststellen, dass require synchron ist. Das Modulsystem muss den Inhalt der Moduldatei synchron lesen, kompilieren und ausführen, um die Modul-

-Schnittstelle zu erhalten.

Allerdings bringt dies browserseitig viele Probleme mit sich.

Auf der Browserseite ist die beste und einfachste Möglichkeit, JavaScript zu laden, das 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag einzufügen. Allerdings sind Skript-Tags von Natur aus asynchron und herkömmliche CommonJS-Module können nicht normal in die Browserumgebung geladen werden.

Eine der Lösungen besteht darin, eine serverseitige Komponente zu entwickeln, eine statische Analyse des Modulcodes durchzuführen und das Modul und seine Abhängigkeitsliste an den Browser zurückzugeben. Das funktioniert gut, erfordert aber die Installation zusätzlicher Komponenten auf dem Server und damit eine Reihe grundlegender Architekturanpassungen.

Eine andere Lösung besteht darin, einen Satz Standardvorlagen zu verwenden, um die Moduldefinition zu kapseln:

define(function(require, exports, module) {

  // The module code goes here

});

Dieser Satz Vorlagencode bietet dem Modullader die Möglichkeit, die vor der Ausführung zu verwenden Der Modulcode wird statisch analysiert und die Abhängigkeitsliste wird dynamisch generiert.

math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

increment.js
define(function(require, exports, module) {
  var add = require(&#39;math&#39;).add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

index.js
define(function(require, exports, module) {
  var inc = require(&#39;increment&#39;).increment;
  inc(1); // 2
});

AMD

AMD ist die Abkürzung für „Asynchronous Module Definition“, was „asynchrone Moduldefinition“ bedeutet. Da es von JavaScript nicht nativ unterstützt wird, erfordert die Seitenentwicklung mithilfe von AMD-Spezifikationen die Verwendung entsprechender Bibliotheksfunktionen, bei denen es sich um das berühmte RequireJS handelt. Tatsächlich ist AMD die standardisierte Ausgabe von Moduldefinitionen während des Promotion-Prozesses von RequireJS

Es verwendet Das Modul wird asynchron geladen, und das Laden des Moduls hat keinen Einfluss auf die Ausführung nachfolgender Anweisungen. Alle Anweisungen, die von diesem Modul abhängen, werden in einer

Callback-Funktion definiert. Diese Callback-Funktion wird erst ausgeführt, wenn der Ladevorgang abgeschlossen ist.

　RequireJS löst hauptsächlich zwei Probleme

• Mehrere js-Dateien können Abhängigkeiten aufweisen, und die abhängigen Dateien müssen früher in den Browser geladen werden als die davon abhängigen Dateien

• Der Browser stoppt das Rendern der Seite, wenn js geladen wird, desto länger verliert die Seite an Reaktionszeit

Erfordert auch Js verwendet require() Die Anweisung lädt das Modul, erfordert aber im Gegensatz zu CommonJS zwei Parameter:

Der erste Parameter [module] ist ein

Array , und die darin enthaltenen Mitglieder sind die zu erstellenden Module geladen; der zweite Parameter Der Parameter Callback ist die Callback-Funktion nach erfolgreichem Laden. Math.add() und das Laden des Mathematikmoduls werden nicht synchronisiert und der Browser friert nicht ein.

require([module], callback);

require([increment'], function (increment) {
　   increment.add(1);
});

　

define()-Funktion

　　RequireJS定义了一个函数 define，它是全局变量，用来定义模块:

　　define(id?, dependencies?, factory);

　　参数说明：

• id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

• 依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
  依赖参数是可选的，如果忽略此参数，它应该默认为["require", "exports", "module"]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

• 工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

　　来举个例子看看：

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

　　RequireJs使用例子

　　require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；参数一是数组，传入我们需要引用的模块名，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。

main.js
//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //可以省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});

　　引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在此模块内的方法和变量外部是无法访问的，只有通过return返回才行.

math.js
define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

　　将该模块命名为math.js保存。

require(['jquery','math'], function ($,math) {
    console.log(math.add(10,100));//110
});

　　main.js引入模块方法

　CMD

　　CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同。

　　在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下:

define(function(require, exports, module) {

  // 模块代码

});

　　require是可以把其他模块导入进来的一个参数;而exports是可以把模块内的一些属性和方法导出的;module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

　　AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块;

　　CMD是按需加载依赖就近,只有在用到某个模块的时候再去require：

// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖可以就近书写
  b.doSomething()
  // ... 
})

// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...
})

　　seajs使用例子

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('p').addClass('active');
  exports.data = 1;
});

// 加载模块
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Front-End-Modularität (CommonJs, AMD und CMD). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!