seajs學習筆記

1、使用SeaJS開發JavaScript的基本原則就是：一切皆爲模塊。引入SeaJS後，編寫JavaScript代碼就變成了編寫一個又一個模塊，SeaJS中模塊的概念有點相似於面向對象中的類——模塊能夠擁有數據和方法，數據和方法能夠定義爲公共或私有，公共數據和方法能夠供別的模塊調用。
每一個模塊應該都定義在一個單獨js文件中，即一個對應一個模塊。

2、模塊的定義和編寫

fn.define = function(id, deps, factory) {
    //code of function…
}

若是隻有一個參數，則賦值給factory。

若是有兩個參數，第二個賦值給factory；第一個若是是array則賦值給deps，不然賦值給id。

若是有三個參數，則分別賦值給id，deps和factory。

可是，包括SeaJS的官方示例在內幾乎全部用到define的地方都只傳遞一個工廠函數進去，相似與以下代碼：

define(function(require, exports, module) {
    //code of the module...
});

id是一個模塊的標識字符串，define只有一個參數時，id會被默認賦值爲此js文件的絕對路徑。

沒有特別的必要建議不要傳入id。deps通常也不須要傳入，須要用到的模塊用require加載便可。

3、工廠函數
三個參數：

1. require——模塊加載函數，用於記載依賴模塊。
2. exports——接口點，將數據或方法定義在其上則將其暴露給外部調用。
3. module——模塊的元數據。

下面說一下module。module是一個對象，存儲了模塊的元信息，具體以下：

1. module.id——模塊的ID。
2. module.dependencies——一個數組，存儲了此模塊依賴的全部模塊的ID列表。
3. module.exports——與exports指向同一個對象

4、三種編寫模塊的模式

第一種定義模塊的模式是基於exports的模式：

是一種比較「正宗」的模塊定義模式。除了將公共數據和方法附加在exports上，也能夠直接返回一個對象表示模塊

define(function(require, exports, module) {
    var a = require('a'); //引入a模塊
    var b = require('b'); //引入b模塊
 
    var data1 = 1; //私有數據
 
    var func1 = function() { //私有方法
        return a.run(data1);
    }
 
    exports.data2 = 2; //公共數據
 
    exports.func2 = function() { //公共方法
        return 'hello';
    }
});

第二種：和上面的模式功能相同

define(function(require) {
    var a = require('a'); //引入a模塊
    var b = require('b'); //引入b模塊
 
    var data1 = 1; //私有數據
 
    var func1 = function() { //私有方法
        return a.run(data1);
    }
 
    return {
        data2: 2,
        func2: function() {
            return 'hello';
        }
    };
});

第三種：若是模塊定義沒有其它代碼，只返回一個對象，還能夠有以下簡化寫法：對於定義純JSON數據的模塊很是合適。

define({
    data: 1,
    func: function() {
        return 'hello';
    }
});

5、模塊的載入和引用

上文說過一個模塊對應一個js文件，而載入模塊時通常都是提供一個字符串參數告訴載入函數須要的模塊，因此就須要有一套從字符串標識到實際模塊所在文件路徑的解析算法。

根據應用場景的不一樣，SeaJS提供了三個載入模塊的API，分別是seajs.use，require和require.async

1.seajs.use

seajs.use主要用於載入入口模塊。

//單一模式
seajs.use('./a');
 
//回調模式
seajs.use('./a', function(a) {
  a.run();
});
 
//多模塊模式
seajs.use(['./a', './b'], function(a, b) {
  a.run();
  b.run();
});

SeaJS會順着入口模塊解析全部依賴模塊並將它們加載。若是入口模塊只有一個，也能夠經過給引入sea.js的script標籤加入」data-main」屬性來省略seajs.use

<script src="./sea.js" data-main="./init"></script>

2.require

require是SeaJS主要的模塊加載方法，當在一個模塊中須要用到其它模塊時通常用require加載：

SeaJS的自動加載機制。上文說過，使用SeaJS後html只要包含sea.js便可，那麼其它js文件是如何加載進來的呢？SeaJS會首先下載入口模塊，而後順着入口模塊使用正則表達式匹配代碼中全部的require，再根據require中的文件路徑標識下載相應的js文件，對下載來的js文件再迭代進行相似操做。整個過程相似圖的遍歷操做（由於可能存在交叉循環依賴因此整個依賴數據結構是一個圖而不是樹）。

傳給require的路徑標識必須是字符串字面量，不能是表達式，以下面使用require的方法是錯誤的：

3.require.async

SeaJS會在html頁面打開時經過靜態分析一次性記載全部須要的js文件，若是想要某個js文件在用到時才下載，可使用require.async：

require.async('/path/to/module/file', function(m) {
    //code of callback...
});

 

6、seajs全局配置

SeaJS提供了一個seajs.config方法能夠設置全局配置，接收一個表示全局配置的配置對象。具體使用方法以下：

seajs.config({
    base: 'path/to/jslib/',
    alias: {
      'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});

其中base表示基址尋址時的基址路徑

alias能夠對較長的經常使用路徑設置縮寫。

charset表示下載js時script標籤的charset屬性。

timeout表示下載文件的最大時長，以毫秒爲單位。

debug表示是否工做在調試模式下。