Sea.Js使用入门

// 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加入一些方法，提供一些额外的功能。

转自博客：https://www.cnblogs.com/zhulongchao/p/4573229.html