Detailed explanation of JavaScript modular development

What is modular development?

In front-end development, at first, some basic interactive effects could be achieved by embedding dozens or hundreds of lines of code in script tags. Later, js gained attention and was widely used, including jQuery, Ajax, and Node.Js. , MVC, MVVM, etc. have also brought attention to front-end development and made front-end projects more and more complex. However, JavaScript does not provide any obvious help in organizing code, and there is not even the concept of classes, let alone modules. , so what is a module?

A module is a file that implements a specific function. With a module, we can use other people's code more conveniently, and load whatever module we want for whatever function we want. Module development needs to follow certain standards, otherwise everything will be messed up.

According to AMD specifications, we can use define to define modules and require to call modules.

Currently, there are two main popular js module specifications: CommonJS and AMD.

AMD specification

AMD is Asynchronous Module Definition, and the Chinese name means "asynchronous module definition". It is a specification for modular development on the browser side. The specification on the server side is that CommonJS

modules will be loaded asynchronously, and module loading will not affect the running of subsequent statements. All statements that depend on certain modules are placed in callback functions.

AMD is the standardized output of module definitions during the promotion process of RequireJS.

define() function

AMD specification only defines one function define, which is a global variable. The description of the function is:

define(id?, dependencies?, factory);

Parameter description:

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

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

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

Format of module name

The module name is used to uniquely identify the module in the definition, they are the same Used in the dependency array:

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

Using require and exports

Create a module named "alpha" using require, exports, and a module named "beta":

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

require API introduction: http://www.php.cn/

AMD specification Chinese version: http://www.php.cn/(%E4%B8%AD%E6 %96%87%E7%89%88)

Currently, libraries that implement AMD include RequireJS, curl, Dojo, Nodules, etc.

CommonJS specification

CommonJS is a specification for server-side modules, and Node.js adopts this specification. Node.JS first adopted the concept of js modularity.

According to the CommonJS specification, a single file is a module. Each module has a separate scope, that is to say, variables defined within the module cannot be read by other modules unless they are defined as attributes of the global object.

The best way to export module variables is to use the module.exports object.

var i = 1;
var max = 30;

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

The above code defines a function through the module.exports object, which is the bridge between the external and internal communication of the module.

Load the module using the require method, which reads a file and executes it, and finally returns the module.exports object inside the file.

CommonJS specification: http://www.php.cn/

RequireJS and SeaJS

RequireJS was created by James Burke, who is also the founder of the AMD specification.

The define method is used to define modules. RequireJS requires each module to be placed in a separate file.

RequireJS and Sea.js are both module loaders, advocating the concept of modular development, and their core value is to make modular development of JavaScript simple and natural.

The biggest difference between SeaJS and RequireJS:

SeaJS’s attitude towards modules is lazy execution, while RequireJS’s attitude towards modules is pre-execution

Don’t understand? Take a look at this article with pictures and texts: http://www.php.cn/

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

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

Why use requireJS

Just imagine, if a web page has many js files, then the browser will load the js files first when downloading the page. This stops the rendering of the web page. If there are more files, the browser may become unresponsive. Secondly, it is necessary to ensure the dependency of js files. The module (file) with the greatest dependency should be loaded last. When the dependencies are complex, it will become difficult to write and maintain the code.

RequireJS was born to solve these two problems:

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

RequireJS file download: http://www.php.cn/

AMD and CMD

CMD (Common Module Definition) Common module definition. This specification clarifies the basic writing format and basic interaction rules of the module. The norm was developed domestically. AMD is a front-end dependency, and CMD is loaded on demand.

In the CMD specification, a module is a file. The writing format of the code is as follows:

define(factory);

factory When it is a function, it means it is the construction method of the module. Executing this construction method can obtain the interface provided by the module. When the factory method is executed, three parameters will be passed in by default: require, exports and module:

define(function(require, exports, module) {

  // 模块代码

});

require is a parameter that can import other modules, and export can combine some attributes in the module with method exported.

CMD specification address: http://www.php.cn/

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

For dependent modules, AMD is executed in advance, and CMD is executed delayed.

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

CMD advocates dependencies nearby, while AMD advocates dependencies in front. Look at the following code:

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

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）！