Seajs的简单使用

Seajs的规范称之为CMD规范（延迟执行），它既遵循AMD规范（提前执行），又遵循commonJs规范（同步加载）。CMD 推崇依赖就近，这套框架在使用的时候，建议我们使用commonjs规范。

一、引入

seajs 引入之后会向全局添加两个变量， 第一个是seajs，第二个是define。seajs引入文件时是以seajs所在目录为根目录的，seajs对js敏感，可以省略.js后缀。

加载 sea.js 最直接的方式是通过 script 标签来引入。

<script src="https://cdn.bootcss.com/seajs/3.0.2/sea.js" data-main="path/to/init"></script>

二、模块定义

在 SeaJS 中，所有 JavaScript 文件都应该用模块的形式来书写，并且一个文件只包含一个模块。
define

使用全局函数 define 来定义模块：
define(id?, dependencies?, factory);

id
当前模块的唯一标识。该参数可选。如果没有指定，默认为模块所在文件的访问路径。如果指定的话， 必须是顶级或绝对标识（不能是相对标识）。

dependencies
当前模块所依赖的模块，是一个由模块标识组成的数组。该参数可选。如果没有指定，模块加载器会从 factory.toString() 中解析出该数组。
** 注意：强烈推荐不要设定 id 和 dependencies 参数。 在开发阶段，模块加载器会自动获取这两个参数。部署上线时，则可以通过优化工具来提取这两个参数。

factory
模块的工厂函数。模块初始化时，会调用且仅调用一次该工厂函数。factory 可以是函数， 也可以是对象、字符串等任意值，这时 module.exports 会直接设置为 factory 值。
factory 函数在调用时，会始终传入三个参数： require、exports 和 module， 这三个参数在所有模块代码里可用。

define(function(require, exports, module) {
    /*
    * require：引入其他模块的方法
    * exports：是向外暴露内容的对象，除了给 exports 对象增加成员，还可以使用 module.exports和return 直接向外提供 API.
    * module：模块的相关信息
    */
    var a = require('./a'); // 访问其他模块

    // exports.foo = 'bar'; // 导出值作为exports对象的一个属性
    // module.exports = function() {}; // 导出值既可以作为exports对象的一个属性也可以直接导出对象
    // return {}; // 返回值格式自由，但只能return一次
    // this.foo = 'bar'; // 不推荐this
    // 优先级： return > module.exports > exports = this
  
});

如果 return 语句是模块中的唯一代码，可简化为：

define({
  foo: 'bar'，
  doSomething: function() {};
});

module

1、module.id：当前模块的唯一标识。 require(module.id) 必然返回此模块的 exports 。
2、module.dependencies：module.dependencies 是一个数组，表示当前模块的依赖列表。该数组只读：模块加载完成后，修改该数组不会有任何效果。
3、module.exports：exports 对象由模块系统创建，返回值只能以该对象属性的形式，而module.exports可以直接返回对象本身。对 module.exports 的赋值需要同步执行，它不能放在回调函数里。
4、module.constructor：当需要给所有 module 参数对象添加一些公用属性或方法的时候，可以通过module.constructor向prototype添加。

三、模块使用

seajs.use

seajs.use('./a');

seajs.use('./a', function(a) {
  a.doSomething();
});

seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

seajs.config

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 处理路径不能拼接的问题，例如：var jq = require("modules/js/{j}-1.7.2");
    vars: {
        'locale': 'zh-cn'
    },
    // 映射配置
    // map 批量处理文件，值是一个二维数组，数组中的第一个成员表示修改后的文件，第二个成员表示匹配的文件
    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'
});

require.async

该方法可用来异步加载模块，并在加载完成后执行回调函数。

define(function(require, exports, module) {
  // 加载一个模块
  require.async('./b', function(b) {
    b.doSomething();
  });
  
  // 加载多个模块
  require.async(['./c', './d'], function(c, d) {
    // do something
  });
});

require.resolve

使用 require() 的内部机制来解析并返回模块路径。该函数不会加载模块，只返回解析后的路径。

require.load

该方法可用来异步加载脚本，并在加载完成后，执行指定的回调函数。开发插件时， 可以通过覆盖该方法来实现自定义的资源加载。

require.constructor

有时候，我们需要给所有 require 参数对象添加一些公用属性或方法。这时， 使用 require.constructor 来实现会非常方便。

四、插件

css插件

第一步在seajs文件后面引入seajs-css.js插件
第二步引入css文件即可
注意： 引入的css文件一定不能省略.css后缀， seajs对js敏感， 对css不敏感

<script type="text/javascript" src="sea.js"></script>
<script type="text/javascript" src="seajs-css.js"></script>
<script type="text/javascript">
// 引入css文件
seajs.use("css.css");

预加载插件（比较重要）

第一步在seajs文件之后引入seajs-preload.js插件
第二步配置preload
值是一个数组，数组中的成员就是要预先加载的文件（加载时间实在use方法之后，模块加载之前去执行，所以预加载的配置我们一般要放在最前面

// 配置preload
seajs.config({
    preload: ["jquery-1.7.2.js"]
});
 
seajs.use("main", function() {
    console.log($);
});

更详细的使用文档：https://seajs.github.io/seajs/docs/#docs