Detaillierte Erläuterung der modularen JavaScript-Entwicklung

Was ist modulare Entwicklung?

In der Front-End-Entwicklung müssen Sie zunächst nur Dutzende oder Hunderte von Codezeilen in Skript-Tags einbetten, um einige grundlegende interaktive Effekte zu erzielen. Später gewann js an Aufmerksamkeit und wurde weit verbreitet, einschließlich jQuery. Ajax und Node.Js, MVC, MVVM usw. haben ebenfalls die Aufmerksamkeit auf die Front-End-Entwicklung gelenkt und Front-End-Projekte immer komplexer gemacht. Allerdings bietet JavaScript keine offensichtliche Hilfe für die Organisation von Code, und das gibt es nicht einmal das Konzept von Klassen, geschweige denn Module. Was ist also ein Modul?

Ein Modul ist eine Datei, die eine bestimmte Funktion implementiert. Mit einem Modul können wir den Code anderer Leute bequemer verwenden und jedes gewünschte Modul für jede gewünschte Funktion laden. Bei der Modulentwicklung müssen bestimmte Normen eingehalten werden, sonst wird alles durcheinander gebracht.

Gemäß den AMD-Spezifikationen können wir „define“ zum Definieren von Modulen und „require“ zum Aufrufen von Modulen verwenden.

Derzeit gibt es zwei hauptsächlich beliebte JS-Modulspezifikationen: CommonJS und AMD.

AMD-Spezifikation

AMD ist Asynchronous Module Definition, und der chinesische Name bedeutet „asynchrone Moduldefinition“. Es handelt sich um eine Spezifikation für die modulare Entwicklung auf der Browserseite. Die Spezifikation auf der Serverseite besagt, dass CommonJS

-Module asynchron geladen werden und das Laden von Modulen keinen Einfluss auf die Ausführung nachfolgender Anweisungen hat. Alle Anweisungen, die von bestimmten Modulen abhängen, werden in Callback-Funktionen platziert.

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

define()-Funktion

Die AMD-Spezifikation definiert nur eine Funktionsdefinition, bei der es sich um eine globale Variable handelt. Die Beschreibung der Funktion lautet:

define(id?, dependencies?, factory);

Parameterbeschreibung:

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

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

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

Das Format des Modulnamens

Der Modulname ist Sie dienen zur eindeutigen Identifizierung der Definitionsmodule und werden auch im Abhängigkeitsarray verwendet:

模块名是用正斜杠分割的有意义单词的字符串
单词须为驼峰形式，或者"."，".."
模块名不允许文件扩展名的形式，如“.js”
模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名
顶级的模块名从根命名空间的概念模块解析
相对的模块名从 "require" 书写和调用的模块解析

Verwenden Sie require und exports

Erstellen Sie ein Modul mit dem Namen „alpha“ mithilfe von require, exports und a Modul namens „Beta“-Modul:

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

API-Einführung erforderlich: http://www.php.cn/

AMD-Spezifikation Chinesische Version: http://www.php.cn /( %E4%B8%AD%E6%96%87%E7%89%88)

Zu den Bibliotheken, die AMD implementieren, gehören derzeit RequireJS, Curl, Dojo, Nodules usw.

CommonJS-Spezifikation

CommonJS ist eine Spezifikation für serverseitige Module, und Node.js übernimmt diese Spezifikation. Node.JS übernahm zunächst das Konzept der js-Modularität.

Gemäß der CommonJS-Spezifikation ist eine einzelne Datei 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.

var i = 1;
var max = 30;

module.exports = function () {
  for (i -= 1; i++ < max; ) {
    console.log(i);
  }
  max *= 1.1;
};

Der obige Code definiert eine Funktion über das module.exports-Objekt, das die Brücke zwischen der externen und internen Kommunikation des Moduls darstellt.

Das Laden von Modulen verwendet die Methode require, die eine Datei liest und ausführt und schließlich das module.exports-Objekt innerhalb der Datei zurückgibt.

CommonJS-Spezifikation: http://www.php.cn/

RequireJS und SeaJS

RequireJS wurde von James Burke erstellt, der auch der Begründer der AMD-Spezifikation ist . Die Methode

define wird zum Definieren von Modulen verwendet. Jedes Modul muss in einer separaten Datei abgelegt werden.

RequireJS und Sea.js sind beide Modullader, die das Konzept der modularen Entwicklung vertreten, und ihr Kernwert besteht darin, die modulare Entwicklung von JavaScript einfach und natürlich zu machen.

Der größte Unterschied zwischen SeaJS und RequireJS:

Die Einstellung von SeaJS gegenüber Modulen ist die verzögerte Ausführung, während die Einstellung von RequireJS gegenüber Modulen die Vorausführung ist

Nicht verstanden? Schauen Sie sich diesen Artikel mit Bildern und Texten an: http://www.php.cn/

RequireJS API: http://www.php.cn/

RequireJS-Nutzung: http :/ /www.php.cn/

Warum requireJS verwenden

Stellen Sie sich vor, wenn eine Webseite viele js-Dateien enthält, lädt der Browser beim Herunterladen zuerst die js-Dateien Dadurch wird die Darstellung der Webseite gestoppt. Wenn mehr Dateien vorhanden sind, reagiert der Browser möglicherweise nicht mehr. Zweitens muss sichergestellt werden, dass die Abhängigkeit von js-Dateien zuletzt geladen wird. Wenn die Abhängigkeiten komplex sind, wird es schwierig, den Code zu schreiben und zu warten.

RequireJS wurde geboren, um diese beiden Probleme zu lösen:

（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

RequireJS-Datei-Download: http://www.php.cn/

AMD und CMD

CMD (Common Module Definition) Gemeinsame Moduldefinition. Diese Spezifikation verdeutlicht das grundlegende Schreibformat und die grundlegenden Interaktionsregeln des Moduls. Die Norm wurde im Inland entwickelt. AMD ist eine Front-End-Abhängigkeit und CMD wird bei Bedarf geladen.

In der CMD-Spezifikation ist ein Modul eine Datei. Das Schreibformat des Codes lautet wie folgt:

define(factory);

Wenn Factory eine Funktion ist, bedeutet dies, dass es sich um die Konstruktionsmethode des Moduls handelt. Durch Ausführen dieser Konstruktionsmethode kann die vom Modul bereitgestellte Schnittstelle abgerufen werden. Wenn die Factory-Methode ausgeführt wird, werden standardmäßig drei Parameter übergeben: require, exports und module:

define(function(require, exports, module) {

  // 模块代码

});

require ist ein Parameter, der andere Module importieren kann, und export kann einige der Module importieren. Eigenschaften und Methoden werden exportiert.

CMD-Spezifikationsadresse: http://www.php.cn/

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

Für abhängige Module wird AMD im Voraus und CMD verzögert ausgeführt.

AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

CMD fördert Abhängigkeiten in der Nähe, während AMD Abhängigkeiten im Vordergrund fördert. Schauen Sie sich den folgenden Code an:

// 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()
...
})

另外一个区别是：

AMD:API根据使用范围有区别，但使用同一个api接口
CMD:每个API的职责单一

AMD的优点是：异步并行加载，在AMD的规范下，同时异步加载是不会产生错误的。
CMD的机制则不同，这种加载方式会产生错误，如果能规范化模块内容形式，也可以

jquery1.7以上版本会自动模块化，支持AMD模式：主要是使用define函数，sea.js虽然是CommonJS规范，但却使用了define来定义模块
所以jQuery已经自动模块化了

seajs.config({

'base':'/',

'alias':{

    'jquery':'jquery.js'//定义jQuery文件

}
});

define函数和AMD的define类似：

define(function(require, exports, module{

     //先要载入jQuery的模块

     var $ = require('jquery');

     //然后将jQuery对象传给插件模块

     require('./cookie')($);

     //开始使用 $.cookie方法

});

sea.js如何使用？

• 引入sea.js的库

• 如何变成模块？

• define

• 3.如何调用模块？

       -exports
       -sea.js.use

• 4.如何依赖模块？

       -require
  
  <script type="text/javascript">
         define(function (require,exports,module) {
             //exports : 对外的接口
             //requires : 依赖的接口
             require(&#39;./test.js&#39;);//如果地址是一个模块的话，那么require的返回值就是模块中的exports
         })

  2cacc6d41bbb37262a98f745aa00fbf0

sea.js 开发实例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标拖拽的模块化开发实践</title>
<style type="text/css">
#p1{ width:200px; height:200px; background:black; position:absolute; display:none;}
#p2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}
#p3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
    
//A同事 ：
seajs.use(&#39;./main.js&#39;);
    
</script>
</head>

<body>
<input type="button" value="确定" id="input1" />
<p id="p1">
    <p id="p2"></p>
</p>
<p id="p3"></p>
</body>
</html>

A同事

//A同事写的main.js:

define(function (require,exports,module) {
    var oInput = document.getElementById('input1');
    var op1 = document.getElementById('p1');
    var op2 = document.getElementById('p2');
    var op3 = document.getElementById('p3');

    require('./drag.js').drag(op3);
    oInput.onclick = function () {
        op1.style.display = 'block';
        require('./scale.js').scale(op1,op2);

        require.async('./scale.js', function (ex) {
            ex.scale(op1,op2);
        })
    }
});

B同事

//B同事写的drag.js:

define(function(require,exports,module){
    
    function drag(obj){
        var disX = 0;
        var disY = 0;
        obj.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX - obj.offsetLeft;
            disY = ev.clientY - obj.offsetTop;
            
            document.onmousemove = function(ev){
                var ev = ev || window.event;


                 var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 );
                 var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 );

                
                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };
    }
    
    exports.drag = drag;//对外提供接口
    
});

C同事

//C同事写的scale.js:

define(function(require,exports,module){
    
    
    function scale(obj1,obj2){
        var disX = 0;
        var disY = 0;
        var disW = 0;
        var disH = 0;
        
        obj2.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX;
            disY = ev.clientY;
            disW = obj1.offsetWidth;
            disH = obj1.offsetHeight;
            
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                
                var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100);
                var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100);
                
                obj1.style.width = W + 'px';
                obj1.style.height = H + 'px';
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };
        
    }
    
    exports.scale = scale;
    
});

D同事

// D同事的range.js--限定拖拽范围

    define(function(require,exports,module){
        
        function range(iNum,iMax,iMin){
            
            if( iNum > iMax ){
                return iMax;
            }
            else if( iNum < iMin ){
                return iMin;
            }
            else{
                return iNum;
            }
            
        }
        
        exports.range = range;
        
    });

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返回才行.

define 模块

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

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

main.js引入模块方法

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

没有依赖

如果定义的模块不依赖其他模块，则可以：

define(function () {

    return {
        name: "trigkit4",
        age: "21"
    }
});

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

以上就是详解JavaScript模块化开发的内容，更多相关内容请关注PHP中文网（www.php.cn）！