sea.js模塊化工具

 

sea.js

1、

sea.js向全局中引入了兩個變量seajs、define；

一、seajs用加載文件

　　seajs.use(deps,callback)異步引入入口模塊

　　路徑要以sea.js文件所在的目錄爲準

　　參數：

　　　　deps：能夠是一個字符串，也能夠是一個數組；若是是一個字符串表示要引入的文件地址；若是是一個數組，表示加載多個模塊文件。

　　　　callback：回調函數，模塊文件加載進來以後執行的事情

　　　　　　　　回調函數的參數是對應的模塊向外暴露的內容

eg：
seajs.use(["js/A.js", "js/B.js"])

　　注意：seajs.use不能引入具有id的模塊，由於第一個參數既是文件的路徑又是文件的id

二、define定義模塊

　　只有當參數是函數的時候纔有意義

　　（1）一個參數定義模塊

　　define(content)當content爲非函數時，定義即暴露；當content是函數時，暴露以下：

　　

define(function(require, exports, module) {
       這種定義方式默認暴露一個對象出去
})

　　（2）兩個參數定義模塊

　　　　第一種方式：define(id,handler)

　　　　參數：id：當前模塊的id；handler：當前模塊的函數體

　　　　第二種方式：define(deps,handler)

　　　　參數：deps：當前模塊所依賴的其餘模塊，數組類型；handler：當前模塊的函數體

　　（3）三個參數定義模塊

　　　　define(id,deps,handler)

　　　　參數：id:當前模塊id；deps：當前模塊所依賴的其餘模塊，數組類型；handler：當前模塊的函數體

2、模塊暴露

（1）定義即暴露

　　define（非函數）

（2）使用exports向外暴露

　　打點或方括號添加屬性

define(function(require,exports,module){
　　　exports.a = 10;
})

（3）使用module.exports向外暴露

　　打點或方括號添加屬性

　　module.exports.a  = 10;

（4）使用this向外暴露，只能夠打點向外暴露內容

（5）使用return向外暴露

3、加載具有id的模塊

　　seajs.use沒法引入 具有id的模塊

　　緣由：seajs.use方法的參數接收的既是文件的路徑有事模塊的id，因此能加載默認模塊，由於默認模塊的路徑和id一致；

　　當模塊具有id時，seajs.use只能夠完成第一步：加載文件；可是第二步：加載模塊完成不了。

//把A文件做爲入口文件，而後把BB（帶id的模塊）模塊暴露，在A文件裏面經過require引入BB模塊文件；在index.html文件中引入A模塊文件
//想要引入BB.js模塊文件中的a模塊，沒法使用seajs.use;
//因此使用A.js引入BB.js文件中的a模塊
index.html:
seajs.use("A.js",function(b) {
            // console.log(b)
        })
A.js:
define(["js/BB.js"],function(require, exports, module) {
    var b = require("a")
     console.log(b)
})
BB.js:
define("a",function(require,exports,module) {
    module.exports.a = 12;
})

4、require.async()用法同seajs.use

5、模塊配置

配置須要使用seajs.config方法

　　一、paths:值是一個對象，用來配置路徑，方便跨目錄調用

　　用法:

seajs.config({
     psth:{
           key: value;//用全部的key代替value
     }   
});

案例：

index.html:
seajs.config({
        //paths值是一個對象，用來配置路徑,全部的key代替value
            paths: {
                "j":"js"//AA.js文件在js文件夾下，用j來代替js路徑
            }
        })
//此處在引用模塊文件時就能夠用j
        seajs.use("j/AA",function(a) {
            console.log(a)    //輸出111
        })
AA.js：
define(function(require,exports,module) {
    module.exports.aa = 111;
})

　　二、alias：值是一個對象，用來給文件起別名

用法：

seajs.config({
     alias:{
           key: value;//用全部的key代替value
     }   
});

案例：

index.html：
seajs.config({
            //alias給一個文件起別名
            alias: {
                "b": "js/AA"      //把AA模塊文件起別名爲b
            }
        })
//此處引入AA.js文件時就能夠用b代替
        seajs.use("b",function(a) {
            console.log(a)      //輸出111
        })
AA.js：
define(function(require,exports,module) {
    module.exports.aa = 111;
})

　　三、map：映射，可用於路徑轉換；例如，將數組中的第一個所有按照規則映射成第二個

案例：

seajs.config({
 // 映射
 map: [
    // 將數組中的第一個 所有按照規則映射成第二個
  ['http://example.com/js/app/', 'http://localhost/js/app/']
  ]
 });

　　四、vars：變量配置

案例：

index.html：
seajs.config({
        vars: {
            a: "BB"
        }
    })
    seajs.use("js/AA",function(a) {
        
    })
AA.js：
define(["js/BB"],function(require,exports,module) {
    var lang = require("js/{a}")//加載的是js/BB.js
    console.log(lang)        //輸出12
})
BB.js：
define(function(require,exports,module) {
    module.exports.dd = 12;
})

　　五、base：配置根目錄

6、require.async：模塊內部異步加載一個或多個模塊；用法跟seajs.use同樣。

案例：

define(function(require){
    require.async(['aModule','bModule'],function(a,b){  // 異步加載多個模塊，在加載完成時，執行回調
    a.func();
    b.func();
    })    
});