sea.js模塊化工具
sea.js
一、
sea.js向全局中引入了兩個變量seajs、define;
1、seajs用加載文件
seajs.use(deps,callback)異步引入入口模塊
路徑要以sea.js文件所在的目錄為準
參數:
deps:可以是一個字符串,也可以是一個數組;如果是一個字符串表示要引入的文件地址;如果是一個數組,表示加載多個模塊文件。
callback:回調函數,模塊文件加載進來之後執行的事情
回調函數的參數是對應的模塊向外暴露的內容
eg:
seajs.use(["js/A.js", "js/B.js"])
註意:seajs.use不能引入具備id的模塊,因為第一個參數既是文件的路徑又是文件的id
2、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:當前模塊的函數體
二、模塊暴露
(1)定義即暴露
define(非函數)
(2)使用exports向外暴露
打點或方括號添加屬性
define(function(require,exports,module){ exports.a = 10; })
(3)使用module.exports向外暴露
打點或方括號添加屬性
module.exports.a = 10;
(4)使用this向外暴露,只可以打點向外暴露內容
(5)使用return向外暴露
三、加載具備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; })
四、require.async()用法同seajs.use
五、模塊配置
配置需要使用seajs.config方法
1、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; })
2、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; })
3、map:映射,可用於路徑轉換;例如,將數組中的第一個全部按照規則映射成第二個
案例:
seajs.config({ // 映射 map: [ // 將數組中的第一個 全部按照規則映射成第二個 [‘http://example.com/js/app/‘, ‘http://localhost/js/app/‘] ] });
4、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; })
5、base:配置根目錄
六、require.async:模塊內部異步加載一個或多個模塊;用法跟seajs.use一樣。
案例:
define(function(require){ require.async([‘aModule‘,‘bModule‘],function(a,b){ // 異步加載多個模塊,在加載完成時,執行回調 a.func(); b.func(); }) });
sea.js模塊化工具