JavaScript模块化编程之require.js与sea.js

 

JS中的模块规范（CommonJS，AMD，CMD）

CommonJS规范-是用在服务器端的（不能用在浏览器端），同步的，如nodejs 
AMD规范, CMD规范是用在浏览器端的，异步的，如RequireJS 和SeaJS 

AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程当中对模块定义的规范化产出。
其中，AMD 先提出（国外），CMD 是根据commonjs和amd基础上提出的（国内-玉伯）。 

RequireJS 遵循AMD规范,CMD和AMD基本相同,最大的区别是就CMD是懒加载,AMD是预加载.

简单来讲,就是SeaJS 属于懒加载,RequireJS属于预加载（RequireJS从2.0开始，也改为能够延迟执行（根据写法不一样，处理方式不经过））。

1.首先原理上的区别

sea.js遵循CMD规范.书写方式相似node.js的书写模板代码.依赖的自动加载,配置的简洁清晰.说白了就是懒加载.

在这里,顺便扩展一下预加载和懒加载的优缺点

预加载:当第一次访问时将全部的文件加载出来

优势:第一次访问完成之后, 再次访问的速度会很快

缺点:第一次加载页面要等待好久.

懒加载:使用的时候才会加载对应的文件.

优势:第一次访问速度相对快点

缺点:再访问其余新的模块时速度会变慢.

 

2.书写上面的区别

都是用define来定义一个模板.经过require,exports,module三个参数来调动函数.

基本上他们的用法是大同小异的.不过要两点较大的区别是须要你们去注意的:

1)sea.js使用模块时用方法seajs.use,而require.js直接用require关键字

2)sea.js只使用一个模块时能够只传入一个字符串,可是require传入的必须是一个数组.

 

CommonJS 

CommonJs 是服务器端模块的规范，Node.js采用了这个规范。 

2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。由于老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；可是在服务器端，必定要有模块，与操做系统和其余应用程序互动，不然根本无法编程。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。

基于commonJS规范的nodeJS出来之后，服务端的模块概念已经造成，很天然地，你们就想要客户端模块。并且最好二者可以兼容，一个模块不用修改，在服务器和浏览器均可以运行。可是，因为一个重大的局限，使得CommonJS规范不适用于浏览器环境。仍是上面的代码，若是在浏览器中运行，会有一个很大的问题，你能看出来吗？

 

　　var math = require('math');

　　math.add(2, 3);

 

第二行math.add(2, 3)，在第一行require('math')以后运行，所以必须等math.js加载完成。也就是说，若是加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。

这对服务器端不是一个问题，由于全部的模块都存放在本地硬盘，能够同步加载完成，等待时间就是硬盘的读取时间。可是，对于浏览器，这倒是一个大问题，由于模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

 

所以，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

 

CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。

根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。 

例如： 
// foobar.js 

//私有变量 
var test = 123; 

//公有方法 
function foobar () { 

    this.foo = function () { 
        // do someing ... 
    } 
    this.bar = function () { 
        //do someing ... 
    } 
} 

//exports对象上的方法和变量是公有的 
var foobar = new foobar(); 
exports.foobar = foobar; 

//require方法默认读取js文件，因此能够省略js后缀 
var test = require('./boobar').foobar; 

test.bar(); 


CommonJS 加载模块是同步的，因此只有加载完成才能执行后面的操做。像Node.js主要用于服务器的编程，加载的模块文件通常都已经存在本地硬盘，因此加载起来比较快，不用考虑异步加载的方式，因此CommonJS规范比较适用。但若是是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。因此就有了 AMD  CMD 解决方案。 


AMD((Asynchromous Module Definition) 

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

AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各类类型的模块。 

适用AMD规范适用define方法定义模块。 

//经过数组引入依赖 ，回调函数经过形参传入依赖 
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) { 

    function foo () { 
        /// someing 
        someModule1.test(); 
    } 

    return {foo: foo} 
}); 
AMD规范容许输出模块兼容CommonJS规范，这时define方法以下： 

define(function (require, exports, module) { 
     
    var reqModule = require("./someModule"); 
    requModule.test(); 
     
    exports.asplode = function () { 
        //someing 
    } 
}); 



CMD 

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

CMD和AMD的区别有如下几点： 

1.对于依赖的模块AMD是提早执行，CMD是延迟执行。不过RequireJS从2.0开始，也改为能够延迟执行（根据写法不一样，处理方式不经过）。 

2.CMD推崇依赖就近，AMD推崇依赖前置。 
//AMD 
define(['./a','./b'], function (a, b) { 

    //依赖一开始就写好 
    a.test(); 
    b.test(); 
}); 

//CMD 
define(function (requie, exports, module) { 
     
    //依赖能够就近书写 
    var a = require('./a'); 
    a.test(); 
     
    ... 
    //软依赖 
    if (status) { 
     
        var b = requie('./b'); 
        b.test(); 
    } 
}); 
虽然 AMD也支持CMD写法，但依赖前置是官方文档的默认模块定义写法。 

3.AMD的api默认是一个当多个用，CMD严格的区分推崇职责单一。例如：AMD里require分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use()来实现模块系统的加载启动。CMD里每一个API都简单纯粹。 

 

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。

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

requireJS主要解决两个问题

一、多个js文件可能有依赖关系，被依赖的文件须要早于依赖它的文件加载到浏览器 二、js加载的时候浏览器会中止页面渲染，加载文件越多，页面失去响应时间越长