模塊化之SeaJS(二)

　　

Seajs

此文來自 予舍驛站

提供簡單、極致的模塊化開發體驗

非官方文檔，整理來本身 官方文檔的文字與實例，方便速查。

seajs.configObject

aliasObject

別名配置，配置以後可在模塊中使用require調用 require('jquery');

seajs.config({
    alias: { '': 'jquery/jquery/1.10.1/jquery' }
});jquery

define(function(require, exports, module) {
    //引用jQuery模塊
    var $ = require('');
});jquery

pathsObject

設置路徑，方便跨目錄調用。經過靈活的設置path能夠在不影響base的狀況下指定到某個目錄。

seajs.config({
    //設置路徑
    paths: {
        '': 'https://a.alipayobjects.com/gallery'
    },

    // 設置別名，方便調用
    alias: {
        '': '/underscore'
    }
});galleryunderscoregallery

define(function(require, exports, module) {
    var _ = require('');
     //=> 加載的是 https://a.alipayobjects.com/gallery/underscore.js
});
underscore

varsObject

變量配置。有些場景下，模塊路徑在運行時才能肯定，這時可使用 vars 變量來配置。

vars 配置的是模塊標識中的變量值，在模塊標識中用 {key} 來表示變量。

seajs.config({
    // 變量配置
    vars: {
        '': 'zh-cn'
    }
});locale

define(function(require, exports, module) {
  var lang = require('./i18n/.js');
     //=> 加載的是 path/to/i18n/zh-cn.js
});
{locale}

mapArray

該配置可對模塊路徑進行映射修改，可用於路徑轉換、在線調試等。

seajs.config({
    map: [
        [ '.js', '-debug.js' ]
    ]
});

define(function(require, exports, module) {
    var a = require('./a');
    //=> 加載的是 path/to/a-debug.js
});

preloadArray

使用preload配置項，能夠在普通模塊加載前，提早加載並初始化好指定模塊。

preload中的空字符串會被忽略掉。

// 在老瀏覽器中，提早加載好 ES5 和 json 模塊
seajs.config({
    preload: [
        Function.prototype.bind ? '' : 'es5-safe',
        this.JSON ? '' : 'json'
    ]
});

注意： preload中的配置，須要等到 use 時才加載。好比：

seajs.config({
    preload: 'a'
});

// 在加載 b 以前，會確保模塊 a 已經加載並執行好
seajs.use('./b');

preload 配置不能放在模塊文件裏面：

seajs.config({
    preload: 'a'
});

define(function(require, exports) {
    // 此處執行時，不能保證模塊 a 已經加載並執行好
});

debugBoolean

值爲true時，加載器不會刪除動態插入的 script 標籤。插件也能夠根據debug配置，來決策 log 等信息的輸出。

baseString

Sea.js 在解析頂級標識時，會相對 base 路徑來解析。

注意：通常請不要配置 base 路徑，把 sea.js 放在合適的路徑每每更簡單一致。

charsetString | 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.useFunction

用來在頁面中加載一個或多個模塊。seajs.use(id, callback?)

// 加載一個模塊
seajs.use('./a');

// 加載一個模塊，在加載完成時，執行回調
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加載多個模塊，在加載完成時，執行回調
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

注意：seajs.use 與 DOM ready 事件沒有任何關係。若是某些操做要確保在 DOM ready 後執行，須要使用 jquery 等類庫來保證。好比

seajs.use(['jquery', './main'], function($, main) {
    $(document).ready(function() {
        main.init();
    });
});

注意： use方法第一個參數必定要有，可是能夠是null，也能夠是一個變量

var bootstrap = ['bootstrap.css', 'bootstrap-responsive.css', 'bootstrap.js'];

seajs.use(bootstrap, function() {
    //do something
});

seajs.cacheOjbect

經過 seajs.cache，能夠查閱當前模塊系統中的全部模塊信息。

好比，打開 seajs.org，而後在 WebKit Developer Tools 的 Console 面板中輸入 seajs.cache，能夠看到：

Object
  > http://seajs.org/docs/assets/main.js: x
  > https://a.alipayobjects.com/jquery/jquery/1.10.1/jquery.js: x
  > __proto__: Object
                        

這些就是文檔首頁用到的模塊。展開某一項能夠看到模塊的具體信息，含義可參考：CMD 模塊定義規範 中的 module 小節。

seajs.resloveFunction

相似require.resolve，會利用模塊系統的內部機制對傳入的字符串參數進行路徑解析。

seajs.resolve('jquery');
// => http://path/to/jquery.js

seajs.resolve('./a', 'http://example.com/to/b.js');
// => http://example.com/to/a.js
                        

seajs.resolve 方法不光能夠用來調試路徑解析是否正確，還能夠用在插件開發環境中。

seajs.dataObject

經過 seajs.data，能夠查看 seajs 全部配置以及一些內部變量的值，可用於插件開發。當加載遇到問題時，也可用於調試。

常見問題

關於模塊標識

Seajs模塊標識主要以小駝峯字符串、.或..

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('./b');
  // => http://example.com/js/b.js

// 在 http://example.com/js/a.js 的 factory 中：
require.resolve('../c');
  // => http://example.com/c.js

分爲 相對 與 頂級 標識。以.或..開頭，則爲相對標識 。以小駝峯字符串開關，則爲頂級標識。

// 假設 base 路徑是：http://example.com/assets/

// 在模塊代碼裏：
require.resolve('gallery/jquery/1.9.1/jquery');
  // => http://example.com/assets/gallery/jquery/1.9.1/jquery.js

關於路徑

Seajs除了相對與頂級標識以外，還可使用普通路徑來加載模塊。

就到當前頁面的腳本分析（能夠右鍵查看源碼）

//sea.js的路徑，即 base 路徑，相對於當前頁面
<script src="http://yslove.net/actjs/assets/sea-modules/seajs/2.1.1/sj.js"></script>

<script type="text/javascript">
//配置Seajs
seajs.config({
    alias: {
        //頂級標識，基於 base 路徑
        'actjs': 'actjs/core/0.0.7/core.js',
            // => http://
        'position': 'actjs/util/0.0.2/position.js'
    }
});

seajs.config({
    alias: {
        //普通路徑，相對於當前頁面
        'affix': '../../actjs/assets/widget/src/widget-affix.js',

        //相對標識，相對於當前頁面
        'init': './src/init.js'
    }
});
</script>