sea.js的介绍和使用

之前有一篇博客非常详细的介绍了sea.js的加载流程，以及源代码实现，链接地址：http://www.cnblogs.com/chaojidan/p/4123980.html

这篇博客我主要讲下sea.js的介绍和使用。

首先，先介绍下sea.js的CMD规范，以及跟其他规范的区别。

CommonJS 原来叫 ServerJS，推出 Modules/1.0 规范后，在 Node.js 等环境下取得了很不错的实践。

09年下半年这帮充满干劲的小伙子们想把 ServerJS 的成功经验进一步推广到浏览器端，于是将社区改名叫 CommonJS，同时激烈争论 Modules 的下一版规范。分歧和冲突由此诞生，逐步形成了三大流派：

1. Modules/1.x 流派。这个观点觉得 1.x 规范已经够用，只要移植到浏览器端就好。主流代表是服务端的开发人员。
2. Modules/Async 流派。这个观点觉得浏览器有自身的特征，不应该直接用 Modules/1.x 规范。这个观点下的典型代表是 AMD 规范及其实现 RequireJS。
3. Modules/2.0 流派。这个观点觉得浏览器有自身的特征，不应该直接用 Modules/1.x 规范，但应该尽可能与 Modules/1.x 规范保持一致。这个观点下的典型代表是 BravoJS 和 FlyScript 的作者。BravoJS 作者对 CommonJS 的社区的贡献很大，这份 Modules/2.0-draft 规范花了很多心思。FlyScript 的作者提出了 Modules/Wrappings 规范，这规范是 CMD 规范的前身。可惜的是 BravoJS 太学院派，FlyScript 后来做了自我阉割，将整个网站（flyscript.org）下线了。

第二流派：AMD 与 RequireJS

define(["require"], function(require) {

  // 在这里，模块 a 已经下载并执行好

  var a = require("./a") // 此处仅仅是取模块 a 的 exports

})

AMD 风格下，通过参数传入依赖模块，破坏了 就近声明 （需要时，才声明）原则。比如：

define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 

    // 等于在最前面声明并初始化了要用到的所有模块

   if (false) {

       // 即便没用到某个模块 b，但 b 还是提前执行了

       b.foo()

   } 

})

第三流派：Modules/2.0　　CMD模块

AMD 下，默认推荐的模块格式是

define([‘a‘,‘b‘], function(a, b) {     //进入到function时，a,b模块都已加载完成，并且执行好了

  // do sth

})

CMD 里，默认推荐的是

define(function(require, exports, module) {     //a,b模块只下载好了，并且只执行了模块中的define方法，而define方法中的function要等到require时，才会执行

  var a = require(‘a‘);

  var b = require(‘b‘);        

  // do sth

})

还有一个核心差异也跟就近原则有关，是懒懒原则

在 AMD 里

define([‘a‘, ‘b‘], function(a, b) {

   // 模块 a 和 b 在这里就都执行好并可用了

})

在 CMD 里

define(function(require, exports) {

   var a = require(‘a‘)  // 模块 a 运行到此处才执行(define中的function)

   if (false) {

      var b = require(‘b‘)   // 当某些条件为 false 时，模块 b 永远也不会执行（define中的function）

   }

})

CMD 可以使得构建时的复杂度降低。

目前 Sea.js 拥有 plugin-combo 插件，模块的合并可以放在线上动态做。有些情况下（比较容易出现），动态 combo 的地址会很长：

https://a.alipaybojects.com/??path/to/a.js,path/to/b.js..................path/to/long-url.js

当 url 地址很长时，超过 2083（好像是这个值），在 IE 以及一些服务器配置下，过长的 url 会出问题。这时经典的解决办法是将 url 拆分成多段：

https://a.alipaybojects.com/??path/to/a.js,path/to/b.js..................path/to/u.js

https://a.alipaybojects.com/??path/to/f.js,path/to/g.js..................path/to/long-url.js

拆分后，在 CMD 规范下，上面两个 url 可以并发同时请求，谁先返回都没问题。但在 AMD 下，上面的需求，就挂了，很难实现。

你会说 RequireJS 鼓励的是项目上线前，通过构建工具先构建好，不需要线上 combo，也就不会遇到上面的问题。

Sea.js 放得更宽泛，提前合并好，还是线上时才动态 combo，对 CMD 模块来说都可行。很多时候，combo 真心省事，也更自然。前端开发并非处处要像 Java 一样引入严格的构建过程。

CMD 的懒执行策略，也更有利于页面性能。

RequireJS 2.0 后，不少理念也在悄悄地发生着变化，现在好像也支持懒执行了。

然后，介绍下sea.js的方法和使用。

type="text/javascript" src="js/seajs/2.0.0/sea-debug.js?t=123" data-config="sea-js-config.js?t=123"

上面的data-config是指sea.js的配置文件的路径。还有一个属性是data-main，它是项目的起始模块，如果定义了会先执行此模块。data-main是可选项。

首先我们来看看sea-js-config.js

seajs.config({
   　　// 配置插件
   plugins: [‘shim‘],
   　　// 配置别名
   alias: {
     　　// 配置 jquery 的 shim 配置，这样我们就可以通过 require(‘jquery‘) 来获取 jQuery
   　　‘jquery‘: {
       　　　src: ‘libs/jquery/1.9.1/jquery.js‘,　　//注意，这里是从sea.js所在目录的上两节目录开始查找文件
         　　 exports: ‘jQuery‘
     　 }
   }
});

plugins选项配置插件，这里使用了shim插件。由于jquery不是一个标准的CMD模块，所以直接加载jquery是错误的。这里使用了shim插件，会自动把jquery转换成一个标准的CMD模块。不用人工改动jquery源码。alias是配置别名，方便加载的。

看个例子：

项目主模块app.js
define(function(require, exports, module) {
　　　　//加载jquery, 并把它$设为全局变量
 　　window.$ = window.jQuery = $ = require(‘jquery‘);
  　　　　//定义一个全局的模块加载函数.module为模块名，options为参数
  　　exports.script_load = function(module, options) {
      　　//使用require.async异步加载模块。模块需要提供一个固定的对外调用接口，这里定义为run。
      　　require.async(‘modules/‘ + module, function(module) {
 　　　　　　if (typeof(module.run) === ‘function‘) {
              　　　　module.run(options);
 　　　　　　}
       　　});
  　　}
  　　window.script_load = exports.script_load
});
上面我们加载了jquery, 并且定义了一个模块加载函数。现在我们在html页面加入如下代码：
<script type="text/javascript">
     seajs.use(‘modules/app‘, function(app) {
         　　app.script_load(‘index‘);
　　});
</script>
use方法执行时，会先加载app模块，加载并执行完后，就进入function中，这时就会调用app.script_load方法，此方法就会去加载index模块，加载完成后，执行index中的代码，index中会返回run方法。index执行完毕后，会调用require.async的回调方法：

if (typeof(module.run) === ‘function‘) {
              　　　　module.run(options);
}

因此index模块中返回了run方法，因此就执行index中的run方法。

index.js
define(function(require, exports, module) {
 　　exports.run = function() {
     　　　　$(‘#alert‘).click(function() {
　　　　　　　　alert(‘弹出了一个框！‘);
     　　　　});
　　}
});

SeaJS中使用“define”函数定义一个模块，define可以接收三个参数，
define可以接收的参数分别是模块ID，依赖模块数组及工厂函数。
我阅读源代码后发现define对于不同参数个数的解析规则如下：
如果只有一个参数，则赋值给factory。
如果有两个参数，第二个赋值给factory；第一个如果是array则赋值给deps，否则赋值给id。
如果有三个参数，则分别赋值给id，deps和factory。
id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。
如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为 http://example.com/a.js ，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。
工厂函数function是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：
• require——模块加载函数，用于记载依赖模块。
• exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
• module——模块的元数据。
module是一个对象，存储了模块的元信息，具体如下：
• module.id——模块的ID。
• module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
• module.exports——与exports指向同一个对象。

三种编写模块的模式:

第一种定义模块的模式是基于exports的模式：

define(function(require, exports, module) {
　　var a = require(‘a‘); //引入a模块
     var b = require(‘b‘); //引入b模块

     var data1 = 1; //私有数据

　　var func1 = function() { //私有方法
　　　　return a.run(data1);
　　}

     exports.data2 = 2; //公共数据

     exports.func2 = function() { //公共方法
　　　　return ‘hello‘;
　　}
});

上面是一种比较“正宗”的模块定义模式。除了将公共数据和方法附加在exports上，也可以直接返回一个对象表示模块，如下面的代码与上面的代码功能相同：（第二种）

define(function(require, exports, module) {
　　var a = require(‘a‘); //引入a模块
     var b = require(‘b‘); //引入b模块

     var data1 = 1; //私有数据

　　var func1 = function() { //私有方法
　　　　return a.run(data1);
　　}

 　　return {
　　　　data2: 2,
           func2: function() {
             　　return ‘hello‘;
　　　　}
　　};

});

如果模块定义没有其它代码，只返回一个对象，还可以有如下简化写法。第三种方法对于定义纯JSON数据的模块非常合适。