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