seajs是我剛入門前端就接觸到的一個javaScript模塊加載框架。使用seajs後javaScript代碼的可讀性和清晰度有了很大的提高,插件的使用和組裝變的很方便。更加方便代碼的升級和維護。推薦使用插件比較多的項目使用。或者使用requirejs也比較流行。javascript
ps:若是想知道RequireJS、SeaJS哪一個好用的能夠自行對比,或者查看html
首先先去官網下載最新版本。
下載後,假定把它放在js子目錄下面,就能夠加載了。前端
<script type="text/javascript" src="js/sea.js"></script>
加載seajs後咱們還須要加載本身的js配置文件java
<script type="text/javascript" src="js/sea-config.js"></script>
seajs 的簡單配置jquery
//.sea-config.js seajs.config({ base: "../plug-js/", alias: { "jquery": "jquery/1.10.1/jquery.js" } })
簡單使用api
// 全部模塊都經過define來定義 define(function(require,exports,module){ // 經過require來引入jquery var $ = require('jquery'); console.log($); })
使用全局函數define來定義函數數組
define(id?,dependencies?,factory);
id: 當前模塊的惟一標識。該參數可選。若是沒有指定,默認爲模塊所在文件的訪問路徑。若是指定的話,必須是頂級或絕對標識。
dependencies: 當前模塊所依賴的模塊,是一個由模塊標識組成的數組。
factory: 模塊的工做函數。模塊初始化時,會調用且僅調用一次該工廠函數。框架
define(function(require,exports,module){ //The module code goes here })
**注意:不推薦不要設定id和dependencies參數。異步
exports 用來向外提供模塊的APIasync
define(function(require,exports){ // snip exports.foo = 'bar'; exports.doSomething = function(){}; })
除了給exports對象增長成員,還能夠使用return直接向外提供API
define(function(require,exports){ // snip... return { foo : 'bar', doSomething : function(){} } }) 可簡化爲: define({ foo : 'bar', doSomething : function(){} })
require函數用來訪問其餘模塊提供的API
define(function(require){ var a = require('./a'); a.doSomething(); })
require.async: 異步加載模塊,並在加載完成後執行回調函數
require.resolv: 使用require()的內部機制來解析並返回模塊路徑。該函數不會加載模塊,只返回解析後的路徑。
require.load: 該方法可用異步加載腳本,並在加載完成後,執行指定的回調函數。
require.constructor: 給全部require參數對象添加一些公用屬性或方法。
modeule 參數存儲模塊的元信息
module.id: 當前模塊的惟一標識。
module.dependencies: 表示當前模塊的依賴列表
module.exports: exports是某個類的實例
define(function(require,exports,module){ console.log(module.exports === exports); // true module.exports = new SomeClass(); console.log(module.exports === exports); // false })
module.constructor: 給module參數對象添加一些公用屬性或方法。