目錄
模塊定義
define
id
dependencies
factory
exports
require
require.async
require.resolve
require.load
require.constructor
module
module.id
module.dependencies
module.exports
module.constructor
seajs.config
alias
| 簡介： SeaJS：javascrīpt模塊化開發 jQuery：javascrīpt框架 |
簡介： SeaJS：javascrīpt模塊化開發 jQuery：javascrīpt框架 |
| 1、jQuery定義 | 2、加載jQuery文件 |
//jquery-sea.js define(function(require, exports, module) = { //原jquery.js代碼... module.exports = $.noConflict(true); }); |
seajs.config({ alias: { 'jquery': '/static/lib/seajs/jquery-sea.js' } }); |
| 3、模塊定義 | 4、define，使用全局函數 define 來定義模塊： |
在 SeaJS 中，所有 JavaScript 文件都應該用模塊的形式來書寫，並且一個文件只包含一個模塊。 |
define(id?, dependencies?, factory); |
| 5、id | 6、dependencies |
| 當前模塊的唯一標識。該參數可選。如果沒有指定，默認為模塊所在文件的訪問路徑。如果指定的話， 必須是頂級或絕對標識（不能是相對標識）。 |
當前模塊所依賴的模塊，是一個由模塊標識組成的數組。該參數可選。如果沒有指定，模塊加載器會從 factory.toString() 中解析出該數組。
** 注意：強烈推薦不要設定 id 和 dependencies 參數。 在開發階段，模塊加載器會自動獲取這兩個參數。部署上線時，則可以通過優化工具來提取這兩個參數。
|
| 7、factory | 8、exports |
模塊的工廠函數。模塊初始化時，會調用且僅調用一次該工廠函數。factory 可以是函數， 也可以是對象、字符串等任意值，這時 module.exports 會直接設置為 factory 值。 factory 函數在調用時，會始終傳入三個參數： require、exports 和 module， 這三個參數在所有模塊代碼里可用。 define(function(require, exports, module) { // The module code goes here }); 9、require require 函數用來訪問其他模塊提供的 API. define(function(require) { var a = require('./a'); a.doSomething(); }); 它接受 模塊標識 作為唯一參數。 請牢記，為了使靜態分析能成功獲取到模塊依賴信息，在書寫模塊時，需要遵循一些簡單的 規則。 10、require.async 該方法可用來異步加載模塊，並在加載完成后執行回調函數。 define(function(require, exports, module) { // 加載一個模塊 require.async('./b', function(b) { b.doSomething(); }); // 加載多個模塊 require.async(['./c', './d'], function(c, d) { // do something }); });
|
exports 用來向外提供模塊的 API. define(function(require, exports) { // snip... exports.foo = 'bar'; exports.doSomething = function() {}; }); 除了給 exports 對象增加成員，還可以使用 return 直接向外提供 API. define(function(require, exports) { // snip... return { foo: 'bar'， doSomething: function() {}; }; }); 如果 return 語句是模塊中的唯一代碼，可簡化為： define({ foo: 'bar'， doSomething: function() {}; }); 上面這種格式特別適合定義 JSON 數據。 ** 注意：下面這種寫法是錯誤的！ define(function(require, exports) { // snip... exports = { // 錯誤! foo: 'bar'， doSomething: function() {}; }; }); 模塊加載器不能獲取到新賦給 exports 變量的值。 請使用 return 或 module.exports 。
|
| 11、require.resolve | 12、require.load |
使用 require() 的內部機制來解析並返回模塊路徑。該函數不會加載模塊，只返回解析后的路徑。 |
該方法可用來異步加載腳本，並在加載完成后，執行指定的回調函數。開發插件時， 可以通過覆蓋該方法來實現自定義的資源加載。 |
| 13、require.constructor | 14、module |
有時候，我們需要給所有 require 參數對象添加一些公用屬性或方法。這時， 使用 require.constructor 來實現會非常方便。 |
module 參數存儲模塊的元信息。擁有以下成員：
|
| 15、module.id | 16、module.dependencies |
當前模塊的唯一標識。 require(module.id) 必然返回此模塊的 exports 。 define(function(require, exports, module) { console.log(module.id); // http://path/to/this/file.js console.log(require(module.id) === exports); // true }); |
module.dependencies 是一個數組，表示當前模塊的依賴列表。
該數組只讀：模塊加載完成后，修改該數組不會有任何效果。
|
| 17、module.exports | 18、module.constructor |
|
exports 對象由模塊系統創建，這不能滿足開發者的所有需求， 有時候會希望 exports 是某個類的實例。 這時可用 module.exports 來實現： define(function(require, exports, module) { x.js: define(function(require, exports, module) { define(function(require, exports, module) { |
有時候，我們需要給所有 module 參數對象添加一些公用屬性或方法。在這種情況下， 使用 module.constructor 可以很好地滿足需求。 extend.js: define(function(require, exports, module) { var Module = module.constructor; Module.prototype.filename = function() { var id = this.id; var parts = id.split('/'); return parts[parts.length - 1]; }; }); a.js: define(function(require, exports, module) { exports.filename = module.filename(); });
|