JavaScript模块化实现库教程

迷南。 2022-08-23 00:30 128阅读 0赞

在你学习这篇文章之前，博主我强烈建议你先去学习这篇文章[JavaScript模块化规范][JavaScript]

<table> 
 <thead> 
  <tr> 
   <th>规范</th> 
   <th>实现</th> 
   <th>概述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>commonJS</td> 
   <td>node.js</td> 
   <td>同步加载，用于服务器端</td> 
  </tr> 
  <tr> 
   <td>AMD</td> 
   <td>requireJS</td> 
   <td>异步加载，用于浏览器端</td> 
  </tr> 
  <tr> 
   <td>CMD</td> 
   <td>sea.js</td> 
   <td>异步加载，用于浏览器端</td> 
  </tr> 
  <tr> 
   <td>UMD</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

# 一、node.js #

参见这篇文章

# 二、requireJS #

## 2.1概述 ##

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件的方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范（Asynchronous Module Definition），是AMD规范最好的实现者之一。

## 2.2能带来什么好处 ##

requirejs的基本功能”模块化加载”，什么是模块化加载？我们要从之后的篇幅中一 一解释

RequireJS的基本思想是，通过define()方法，将代码定义为模块；通过require()方法，实现代码的模块加载。

先来看一段常见的场景，通过示例讲解如何运用requirejs

**正常编写方式**  
index.html:

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="a.js"></script>
        </head>
        <body>
          <span>body</span>
        </body>
    </html>

a.js:

function fun1(){ 
      alert("it works");
    }
    
    fun1();

可能你更喜欢这样写

(function(){ function fun1(){ alert("it works"); } fun1(); })()

第二种方法使用了块作用域来申明function防止污染全局变量，本质还是一样的，当运行上面两种例子时不知道你是否注意到，alert执行的时候，html内容是一片空白的，即body并未被显示，当点击确定后，才出现，这就是JS阻塞浏览器渲染导致的结果。

**requirejs写法**  
当然首先要到requirejs的网站去下载js -> requirejs.rog  
index.html:

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="require.js"></script>
            <script type="text/javascript"> require(["a"]); </script>
        </head>
        <body>
          <span>body</span>
        </body>
    </html>

a.js:

define(function(){ 
        function fun1(){ 
          alert("it works");
        }
        fun1();
    })

浏览器提示了”it works”，说明运行正确，但是有一点不一样，这次浏览器并不是一片空白，body已经出现在页面中，目前为止可以知道requirejs具有如下优点：

1.  防止js加载阻塞页面渲染
2.  使用程序调用的方式加载js，防出现如下丑陋的场景

## 2.3定义模块 ##

define()方法用于定义模块，requireJS要求每个模块放在一个单独的文件里。

按照是否依赖其他模块，可以分成两种情况讨论。  
第一种情况是定义独立模块，即所定义的模块不依赖其他模块；  
第二种情况是定义非独立模块，即所定义的模块依赖于其他模块。

### 2.3.1定义独立模块 ###

如果被定义的模块是一个独立模块，不需要依赖任何其他模块，可以直接用define方法生成。

define({
        method1: function() { },
        method2: function() { },
    });

上面代码生成了一个拥有method1、method2两个方法的模块。

另一种等价的写法是，把对象写成一个函数，该函数的返回值就是输出的模块。

define(function () { 
        return {
            method1: function() { },
            method2: function() { },
        };
    });

后一种写法的自由度更高一点，可以在函数体内写一些模块初始化代码。

值得指出的是，define定义的模块可以返回**任何值**，不限于**对象**。

### 2.3.2定义非独立模块 ###

如果被定义的模块需要依赖其他模块，则define方法必须采用下面的格式。

define(['module1', 'module2'], function(m1, m2) {
       ...
    });

define方法的第一个参数是一个数组，它的成员是当前模块所依赖的模块。比如，\[‘module1’, ‘module2’\]表示我们定义的这个新模块依赖于module1模块和module2模块，只有先加载这两个模块，新模块才能正常运行。一般情况下，module1模块和module2模块指的是，当前目录下的module1.js文件和module2.js文件，等同于写成\[’./module1’, ‘./module2’\]。

define方法的第二个参数是一个函数，当前面数组的所有成员加载成功后，它将被调用。它的参数与数组的成员一一对应，比如function(m1, m2)就表示，这个函数的第一个参数m1对应module1模块，第二个参数m2对应module2模块。这个函数必须返回一个对象，供其他模块调用。

define(['module1', 'module2'], function(m1, m2) { 
        return {
            method: function() { 
                m1.methodA();
                m2.methodB();
            }
        };
    });

上面代码表示新模块返回一个对象，该对象的method方法就是外部调用的接口，menthod方法内部调用了m1模块的methodA方法和m2模块的methodB方法。

需要注意的是，回调函数必须返回一个对象，这个对象就是你定义的模块。

如果依赖的模块很多，参数与模块一一对应的写法非常麻烦。

define(
        ['dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6'],
        function(dep1, dep2, dep3, dep4, dep5, dep6){
            ...
        }
    );

为了避免像上面代码那样繁琐的写法，RequireJS提供一种更简单的写法。

define(
        function (require) {
            var dep1 = require('dep1'),
                dep2 = require('dep2'),
                dep3 = require('dep3'),
                dep4 = require('dep4'),
                dep5 = require('dep5'),
                dep6 = require('dep6');
                ...
        }
    });

下面是一个define实际运用的例子。

define(['math', 'graph'], 
        function ( math, graph ) {
            return {
                plot: function(x, y){
                    return graph.drawPie(math.randomGrid(x,y));
                }
            }
        };
    );

上面代码定义的模块依赖math和graph两个库，然后返回一个具有plot接口的对象。

define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) { 
        return $;
    });

上面代码定义了一个中间模块，该模块先判断浏览器是否支持**proto**属性（除了IE，其他浏览器都支持），如果返回true，就加载zepto库，否则加载jQuery库。

## 2.4加载模块 ##

require()方法用于调用模块。它的参数与define()方法类似。

require(['foo', 'bar'], function ( foo, bar ) { 
            foo.doSomething();
    });

上面方法表示加载foo和bar两个模块，当这两个模块都加载成功后，执行一个回调函数。该回调函数就用来完成具体的任务。

require方法的第一个参数，是一个表示依赖关系的数组。这个数组可以写得很灵活，请看下面的例子。

require( [ window.JSON ? undefined : 'util/json2' ], function ( JSON ) { 
      JSON = JSON || window.JSON;
    
      console.log( JSON.parse( '{ "JSON" : "HERE" }' ) );
    });

上面代码加载JSON模块时，首先判断浏览器是否原生支持JSON对象。如果是的，则将undefined传入回调函数，否则加载util目录下的json2模块。

require()方法也可以用在define()方法内部。

define(function (require) { 
       var otherModule = require('otherModule');
    });

下面的例子显示了如何动态加载模块。

define(function ( require ) { 
        var isReady = false, foobar;
    
        require(['foo', 'bar'], function (foo, bar) { 
            isReady = true;
            foobar = foo() + bar();
        });
    
        return {
            isReady: isReady,
            foobar: foobar
        };
    });

上面代码所定义的模块，内部加载了foo和bar两个模块，在没有加载完成前，isReady属性值为false，加载完成后就变成了true。因此，可以根据isReady属性的值，决定下一步的动作。

下面的例子是模块的输出结果是一个promise对象。

define(\[‘lib/Deferred’\], function( Deferred )\{  
var defer = new Deferred();  
require(\[‘lib/templates/?index.html’,’lib/data/?stats’\],  
function( template, data )\{  
defer.resolve(\{ template: template, data:data \});  
\}  
);  
return defer.promise();  
\});  
上面代码的define方法返回一个promise对象，可以在该对象的then方法，指定下一步的动作。

如果服务器端采用JSONP模式，则可以直接在require中调用，方法是指定JSONP的callback参数为define。

require( [ 
        "http://someapi.com/foo?callback=define"
    ], function (data) { 
        console.log(data);
    });

require方法允许添加第三个参数，即错误处理的回调函数。

require(
        [ "backbone" ], 
        function ( Backbone ) {
            return Backbone.View.extend({ /* ... */ });
        }, 
        function (err) {
            // ...
        }
    );

require方法的第三个参数，即处理错误的回调函数，接受一个error对象作为参数。

require对象还允许指定一个全局性的Error事件的监听函数。所有没有被上面的方法捕获的错误，都会被触发这个监听函数。

requirejs.onError = function (err) {
        // ...
    };

## 2.5全局配置 ##

require方法本身也是一个对象，它带有一个config方法，用来配置require.js运行参数。config方法接受一个对象作为参数。

require.config({ paths: { jquery: [ '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js', 'lib/jquery' ] }
    });

config方法的参数对象有以下主要成员：

**paths**  
paths参数指定各个模块的位置。这个位置可以是同一个服务器上的相对位置，也可以是外部网址。可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置，上面的示例就表示如果CDN加载失败，则加载服务器上的备用脚本。需要注意的是，指定本地文件路径时，可以省略文件最后的js后缀名。

require(["jquery"], function($) {
        // ...
    });

上面代码加载jquery模块，因为jquery的路径已经在paths参数中定义了，所以就会到事先设定的位置下载。

**baseUrl**  
baseUrl参数指定本地模块位置的基准目录，即本地模块的路径是相对于哪个目录的。该属性通常由require.js加载时的data-main属性指定。

requirejs提供了一种叫”主数据”的功能，我们首先创建一个main.js：

require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], "a" : "js/a" }
    })

然后再页面中使用下面的方式来使用requirejs：

解释一下，加载requirejs脚本的script标签加入了data-main属性，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名

data-main还有一个重要的功能，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，是什么意思呢？如上面的data-main=”js/main”设定后，我们在使用require(\[‘jquery’\])后(不配置jquery的paths)，require会自动加载js/jquery.js这个文件，而不是jquery.js，相当于默认配置了：

require.config({ baseUrl : "js" })

**shim**  
有些库不是AMD兼容的，这时就需要指定shim属性的值。shim可以理解成“垫片”，用来帮助require.js加载非AMD规范的库。

require.config({
        paths: {
            "backbone": "vendor/backbone",
            "underscore": "vendor/underscore"
        },
        shim: {
            "backbone": {
                deps: [ "underscore" ],
                exports: "Backbone"
            },
            "underscore": {
                exports: "_"
            }
        }
    });

上面代码中的backbone和underscore就是非AMD规范的库。shim指定它们的依赖关系（backbone依赖于underscore），以及输出符号（backbone为“Backbone”，underscore为“\_”）。

[JavaScript]: http://blog.csdn.net/haozhoupan/article/details/51193941