前端框架 seajs 使用总结

CMD 模块定义规范

• seajs中，所有的javascript都遵循CMD模块定义规范。该规范明确定义了模块的定义格式和模块依赖的规则说明。
• define.cmd ： 一个空对象，可以用来判断当前页面是否存在cmd模块加载器，调用方法如下：

if(typeof define.cmd ==="undefined" || define.cmd){

    //Seajs存在cmd模块加载器

}

• 与 RequireJS 的 AMD 规范相比，CMD 规范尽量保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性

seajs的特点

• 简单友好的模块定义规范：遵循CMD规范。
• 简单直观的代码组织方式：依赖自动加载，配置简洁清晰。

seajs的兼容性

Chrome 3+ ✔ Firefox 2+ ✔ Safari 3.2+ ✔ Opera 10+ ✔ IE 5.5+ ✔

理论上适用于任何浏览器，包括 Mobile 。

 

 

seajs的配置

seajs.config({

    // 别名配置

    alias: {

        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',

        'json': 'gallery/json/1.0.2/json',

        'jquery': 'jquery/jquery/1.10.1/jquery'

    },

    // 路径配置

    paths: {

        'gallery': 'https://a.alipayobjects.com/gallery'

    },

    // 变量配置

    vars: {

        'locale': 'zh-cn'

    },

    // 映射配置

    map: [

        ['http://example.com/js/app/', 'http://localhost/js/app/']

    ],

    // 预加载项

    preload: [

        Function.prototype.bind ? '' : 'es5-safe',

        this.JSON ? '' : 'json'

    ],

    // 调试模式

    debug: true,

    // Sea.js 的基础路径

    base: 'http://example.com/path/to/base/',

    // 文件编码

    charset: 'utf-8'

});

 

 

 

 

alias Object

可以简化较长模块标示的书写。

seajs.config({

   // 别名配置

    alias: {

        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',

        'json': 'gallery/json/1.0.2/json',

        'jquery': 'jquery/jquery/1.10.1/jquery'

    }

});

模块定义：

define(function(require, exports , module){

    var $ = require("jquery");

    //==>加载的是http://example.com/path/to/base/jquery/jquery/1.10.1/jquery.js

});

 

path Object

如果依赖层次较深，或者跨目录调用模块，path可以简化书写。

path 可以结合alias一起使用。

seajs.config({

    // 路径配置

    paths: {

        'gallery': 'https://a.alipayobjects.com/gallery'

    },

});

模块定义：

define(function(require,exports, module){

    var json = require("gallery/jsonparser");

    //==> 加载的是https://a.alipayobjects.com/gallery/jsonparser.js

});

 

vars Object

有些模块需要在运行时才能确定，可以使用vars指定。

vars 配置的是模块标识中的变量值，在模块标识中用 {key} 来表示变量。

 

seajs.config({

// 变量配置

    vars: {

        'local': 'zh-cn'

    },

});

模块定义

define(function(require, exports, module){

    var language_config = require("language/{local}.js");

    console.log(language_config);//获取中文配置文件

});

 

map Array

路由模块路径。

seajs.config({

    // 映射配置

    map: [

        ['http://example.com/js/app/', 'http://localhost/js/app/'],

        ['.js','-debg.js']

    ],

});

 

define(function(require, exports, module){

    var m_a = require("./a");

    //==>加载的是./a-debug.js

});

 

preLoad Array

预加载一些公共模块或者指定模块

seajs.config({

    // 预加载项

    preload: [

        Function.prototype.bind ? '' : 'es5-safe',

        this.JSON ? '' : 'json'

    ],

});

preLoad中的配置，需要等到use时才加载

seajs.use("./b",function(){

    //在加载b模块之前，预加载项已经加载完成。

});

preLoad中的配置，无法保证模块定义中已经加载完成并执行完成。

 

debug String

值为 true 时，加载器不会删除动态插入的 script 标签。插件也可以根据 debug 配置，来决策 log 等信息的输出。

 

base String

Sea.js 在解析顶级标识时，会相对 base 路径来解析。

 

charset String | Function

获取模块文件时，<script> 或 <link> 标签的 charset 属性。 默认是 utf-8

charset还可以是函数：

seajs.config({

    charset: function(url) {

        // xxx 目录下的文件用 gbk 编码加载

        if (url.indexOf('http://example.com/js/xxx') === 0) {

            return 'gbk';

        }

        // 其他文件用 utf-8 编码

        return 'utf-8';

    }

});

 

注意：seajs.config 可以多次执行，每次执行都会对配置项进行合并操作。

config 会自动合并不存在的项，对存在的项则进行覆盖。

 

建议seajs.config所在的js文件 

独立成一个文件时，一般通过 script 标签在页面中同步引入。

 

模块定义（define Function）

 

定义函数：

函数： define(factory)

其中，define方法是全局方法，作用域是window；factory可以是字符串，对象或者函数。

 

 

Factory类型：

 

• 字符串或者对象。

   define({"username":"fol","age":"23"});    //factory是对象类型

    define("I love zhuzhou");    //factory是字符串类型

 

    如果模块的factory类型是字符串或者对象，那么该模块对外提供的接口(输出)就是字符串或者对象本身。

• 函数

        定义格式1：
        define(function(require, exports, module){

        //todo

   });

 

      如果factory的类型是函数，那么给函数就是该模块的构造函数，执行该函数可以得到模块对外提供接口。

      factory默认传入的参数是require, exports, module。

      这种模块定义方式未指定模块id，模块依赖列表。

    

      定义格式2：

      define(id? , deps?, factory?)

      模块定义也可以接受两个以上参数，其中id定义模块的id，deps声明模块依赖的其他模块列表（Array）。

       define("user", ["jquery", "ajax", "upload", "json"], function(require, exports, module){

       // todo 

   });

 

    注意：id 和 deps参数是可选参数，可以通过构建工具自动生成。

    

 

模块引用（require Function）

 

 

模块加载函数：

 

函数： require( id? )

其中，require对象是factory的第一个参数，同样，require函数也是全局函数，作用域是window；

id是模块标识，一般在模块定义函数中被调用,用来获取其他模块提供的接口。

define(function( require, exports, module ) {

    var $ = require("jquery");  //引入jquery模块

    $(document).ready(function(){

        $("#bt").on("click", function(){

              console.log("the bt is clicked");

        });

    });

});

 

异步加载：

 

函数： require.async( id?, callback? )

其中，id是模块的标识，callback是模块异步加载完成后的回调函数。

 

define(function(require, exports, module){

    //异步加载单个模块

    require.async("plugins/bootstrap", function(b){

        b.doSomething();

    });

    //异步加载多个模块

    require.async(["./utils/datepicker","./utils/colorpicker"], function(datepicker, colorpicker){

        datepicker.init();

        colorpicker.init();

    });

});

注意：require()是同步执行的，require.async()是异步回调执行，require.async用来执行可以延迟加载执行的模块。

 

 

 

路径解析：

函数： require.resolve(id?)

其中，id 是模块的唯一标识，只用来解析模块的绝对路径。

define(function(require, exports, module){

    val jqueryPath = require.resolve("jquery");    //解析jquery的绝对路径    

    //http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js

});

 

seajs 三个对象

 

exports Object

exports 是一个对象，负责对外提供模块接口。

define(function(require, exports, module){

      function trim() {

            return this.replace(/(^s*)|(s*$)/g, "")

      }

      exports.trim = trim;    //把内部函数暴露给其他模块

      exports.config = {"username":"foo", "age":"23"};//把内部对象暴露给其他模块

});

 

除了使用exports 对象对外提供接口外，还可以使用return直接对外提供接口

define(function(require, exports, module){

      function trim() {

            return this.replace(/(^s*)|(s*$)/g, "")

      }

      return {

        "trim":trim,

        "config":{"username":"foo", "age":23}

      }

});

如果模块中return语句是唯一的代码，那么可以使用define({})简化模块定义：

define({

   "trim":function(){

         

return this.replace(/(^s*)|(s*$)/g, "")

    },

    "config":{"username":"foo","age":23}

} 

);

上面的格式可以适合定义JSONP模块。

注意：不能对exports重新赋值，这样虽然不会影响到module.exports 。但是无法对外提供接口，可以赋值module.exports达到对外提供接口的目的。

define(function(require, exports , module){

    module.exports = {

        trim:function(){ return this.replace(/(^s*)|(s*$)/g, "");},

        config:{"username":"foo", "age":23}

    }

});

 

module Object

module是一个对象，其中存储着于当前模块相关的一些方法和属性。

module.id：返回模块的标识

module.uri：返回模块的绝对路径。

define(function(require, exports, module){

    var module_uri = module.uri;

    //==> 

http://example.com/path/to/this/file.js

});

一般情况下，如果没有定义模块id, 那么module.id == module.uri，两者完全相同。

 

 

module.dependencies Array ：返回当前模块依赖的模块列表。

module.exports ：返回当前模块对外提供的接口对象。

注意：传递给factory方法的参数中exports 只是module.exports 的一个引用，只能通过exports来对外提供接口，但是module.exports可以是一个类的实例。

而且，对module.exports 赋值不能通过回调函数等方法异步执行，只能同步执行。

define(function(require, exports, module) {

  // exports 是 module.exports 的一个引用
  console.log(module.exports === exports); // true

  // 重新给 module.exports 赋值
  module.exports = new SomeClass();

  // exports 不再等于 module.exports
  console.log(module.exports === exports); // false

  //module.exports 不能异步执行

  setTimeout(function(){

    module.exports = {"username":"foo", "age":23};    //错误，无法对外提供接口

  }, 1000);

});

seajs.use Function 

函数：seajs.use(ids?, callback?)

作用：用在页面上加载其他模块。

 

//加载一个模块

seajs.use("./a");

 

//加载一个模块并回调

seajs.use("./a", function(a){

    a.doSomething();

});

 

//加载多个模块并回调

seajs.use(["jquery","./a"], function($, a){

    $("#bt").click(function(){

        //doSomething

    });

    a.doSomething();

});

注意：seajs.use方法和document.ready()方法没有必然关系，如果某些操作需要在document ready后才能执行操作，需要借助jquery等依赖模块。

 

 

seajs.cache Function

函数：seajs.cache();

可以用来查看当前页面加载的依赖模块列表。

 

seajs.resolve Function

函数：seajs.resolve(id?);

可以用来获取依赖模块的绝对路径。

 

 

seajs.data Function

函数：seajs.data();

可以用来seajs的所有配置以及一些内部变量，可以用在插件开发中。

 

 

模块标识与路径关系

模块标识：

模块标识主要以小驼峰，. 或者 .. 为主。

 

//在http://example.com/my/js/user.js中

define(function(require, exports, module){

    var path = require.resolve("./json");

    //==>路径为http://example.com/my/js/json.js

    

    var path2 = require.resolve("../json");

    //==> 路径为http://example.com/my/json.js

});

注意：以小驼峰开头的模块标识是顶级标识，以base为根目录加载模块文件；以.和..开头的模块标识是相对标识，以当前模块文件所在的位置为基础根目录加载。

 

//假设base 是http://examle.com/my/js

define(function(require, exports, module){

    var path = require.resolve("json");

    //==>路径为http://example.com/my/js/json.js

});

 

 

注意：页面中基于当前页面为根目录加载模块文件。

 

 

构建工具那些事

构建过程描述：

• 提取操作

提取模块的标识id以及模块的其他依赖dependencies。

 

//a.js

define(function(require, exports, module){

    var b = require("./b");

});

 

经过提取操作，a.js文件会变成临时文件：

 

define("xxx/1.0.0/a",["./b"],function(require, exports, module){

    var b = require("./b");

});

• 压缩操作

经过上面的提取操作后，构建工具就可以调用任何 JS 压缩工具来进行压缩了，require 参数也可以被压缩成任意字符。相比于其他的压缩工具，CMD模块的构建过程增加了id和dependencies的提取过程。

 

为什么要提取模块标识Id：

 

我们在模块定义过程中，可能会合并两个模块定义文件，使得模块管理更加方便和易用。

//a.js

define(function(require, exports, module){

    //todoSomething

});

 

//b.js

define(function(require, exports, module){

    //todoSomething

});

 

如果我们希望合并以上两个文件，那么会出现模块定义不清楚，无法确认加载哪个模块的问题，所以在模块构建过程中需要提取模块标识id。

 

此外，即便不合并，保持一个文件一个模块，如果压缩时不提取 id，那么在 IE6-9 下也有可能会出现问题。

 

为什么要提取模块依赖dependencies：

 

为了保证压缩文件随意压缩代码，构建工具在提取id的同时，也会提取dependencies数组。这样seajs不会再通过factory.toString()借助于正则匹配来获取依赖，直接可以通过factory函数的第二个参数拿到依赖数组。

注意：一旦factory的第二个参数定义了依赖数组，那么seajs将不会使用正则匹配的方式去分析并获取依赖，而是直接使用factory第二个参数提供的依赖数组作为所有的依赖。