Sea.Js使用入门

1.Sea.Js是什么

seajs相对于RequireJs与LabJS就比较年轻，2010年玉伯发起了这个开源项目，SeaJS遵循CMD规范，与RequireJS类似，同样做为模块加载器。示例

// File:greet.js

define(function (require, exports) {

    function helloPython() {

        document.write("Hello,Python");

    }

    function helloJavaScript() {

        document.write("Hello,JavaScript");

    }

    exports.helloPython = helloPython;

    exports.helloJavaScript = helloJavaScript;

});



// File:usegreet.js

sea.use("greet", function (Greet) {

    greet.helloJavaScript();

});

2.Sea.Js使用指南

模块定义的三种方式

a.

define(function(require, exports, module) {

    // 模块代码

    // 使用require获取依赖模块的接口

    // 使用exports或者module来暴露该模块的对外接口

})

b.

define(function(require, exports) {

    var Vango = require('vango')

    exports.drawCircle = function () {

        var vango = new Vango(document.body, 100, 100)

        vango.circle(50, 50, 50, {

            fill: true,

            styles:{

                fillStyle:"red"

            }

        })

    }

})

c.

define(function(require, exports, module) {

    var Vango = require('vango');

    module.exports = {

        drawCircle: function () {

            var vango = new Vango(document.body, 100, 100);

            vango.circle(50, 50, 50, {

                fill: true,

                styles:{

                    fillStyle:"red"

                }

            });

        }

    };

});

注意：必须保证参数的顺序，即需要用到require， exports不能省略；在模块中exports对象不可覆盖，如果需要覆盖请使用module.exports的形式。

d.“具名模块”：Sea.js从用于生产的角度来说，必须支持具名模块，因为开发时模块拆得太小，生产环境必须把这些模块文件打包为一个文件，这时再use相应的模块时，需要通过ID来指向。针对此需求，Seajs基本约定原则：ID 和路径一致原则

define('drawCircle', ['vango'], function(require, exports) {

    var Vango = require('vango');

    exports.drawCircle = function () {

        var vango = new Vango(document.body, 100, 100);

        vango.circle(50, 50, 50, {

            fill: true,

            styles:{

                fillStyle:"red"

            }

        });

    };

})

SeaJs环境配置：

Sea.js通过.configAPI来进行配置。你甚至可以在多个地方调用seajs.config来配置，配置多个之后，相关属性合并起来

base：String，在解析绝对路径标识的模块时所使用的base路径，使用base配置，根本上可以分离静态文件的位置，比如使用CDN（如何把静态文件分布到CDN上？）

paths：Object，如果目录太深，可以使用paths这个配置项来缩写，可以在require时少写些代码。

alias：Object，本质上看不出和paths有什么区别，区别就在使用的概念上。

preload：配置项可以让你在加载普通模块之前提前加载一些模块

模块的使用：

a. seajs.use(id)

seajs.use('./main')

b.seajs.use(ids, callbacks)

seajs.use('./main', function(main) {

    main.init()

})

Sea.js执行ids中的所有模块，然后传递给callback使用。

 

SeaJs的Plugin

• seajs-text：用来加载HTML或者模板文件；
• seajs-style：提供了importStyle，动态地向页面中插入css；
• seajs-combo：该插件提供了依赖combo的功能，能把多个依赖的模块uri combo，减少HTTP请求；
• seajs-flush：该插件是对seajs-combo的补充，或者是大杀器，可以先hold住前面的模块请求，最后将请求的模块combo成一个url，一次加载hold住的模块；
• seajs-debug：Fiddler用过么？这个插件基本就是提供了这样一种功能，可以通过修改config，将线上文件proxy到本地服务器，便于线上开发调试和排错；
• seajs-log：提供一个seajs.log API，私觉得比较鸡肋；
• seajs-health：目标功能是，分析当前网页的模块健康情况。

Plugin的运行机制：

• 使用Sea.js在加载过程中的事件，注入一些插件代码，修改Sea.js的运行流程，实现插件的功能；
• 给seajs加入一些方法，提供一些额外的功能。

模块打包：SPM