seajs官方文檔的學習筆記（一）

seajs API 快速參考 --> https://github.com/seajs/seajs/issues/266

 

 

########### 模塊 https://github.com/seajs/seajs/issues/240 #####################

sea.js 專一於前端開發領域裏的 JS 模塊：  

1. 模塊是一段 JavaScript 代碼，具備統一的基本書寫格式。  

2. 模塊之間經過基本交互規則，能彼此引用，協同工做。

 

模塊定義規範（Module Definition Specification）：對[基本書寫格式]與[基本交互規則]的清楚描述。

有CommonJS 社區的 Modules 1.1.1 規範、NodeJS 的 Modules 規範、RequireJS 提出的 AMD 規範等等。

 

sea.js 遵循的是 CMD 規範

########## CMD模塊定義規範 https://github.com/seajs/seajs/issues/242 ############

CMD（common Module Definition）。該規範明確了模塊的[基本書寫格式]和[基本交互規則]。

 

CMD 規範中，一個模塊就是一個文件。

 

define(factory)

define：是[全局函數]，用來定義一個模塊

factory：函數、對象或者字符串 

define({'foo', 'bar'}); 
define('I am a template, My name is {{name}}');

 

↓

factory爲函數時，表示[模塊的構造方法]，能夠獲得模塊向外提供的接口。 factory 方法在執行時，默認會傳入三個參數：require、exports 和 module. 

define(id?, deps?, factory)

字符串 id 表示模塊標識，數組 deps 是模塊依賴

define('hello', ['jquery'], function(require, exports, module) {  
　　// 模塊代碼
})；

 

define.cmd

一個空對象，可用來斷定當前頁面是否有 CMD 模塊加載器

if (typeof define === 'function' && define.cmd)  {
　　 // 有 sea.js 等 CMD 模塊加載器存在
}

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

require(id)

require 是一個方法，接受[模塊標識]做爲[惟一參數](參數值必須是字符串直接量。)，用來獲取模塊提供的接口

define(function(require, exports) {

　　 // 獲取模塊 a 的接口
　　 var a = require('./a');  
　　 // 調用模塊 a 的方法  
　　 a.doSomething();

});

 

require.async(id, callback?)

require.async 用來在模塊內部[異步加載]模塊，在加載完成後執行回調（ callback 可選）。 require(id) 是同步往下執行

define(function(require, exports) {  

　　// 異步加載一個模塊，在加載完成時，執行回調  
　　require.async('./b', function(b) {    
　　　　b.doSomething();  
　　});    

　　// 異步加載多個模塊，在加載完成時，執行回調  
　　require.async(['./c', './d'], function(c, d) { 
　　　　// 這 function 裏的參數要與前面加載模塊的順序一一對應    
　　　　c.doSomething();    
　　　　d.doSomething();  
　　});

});

 

require.resolve(id)

該函數[不會加載函數]，只[返回]解析後的[模塊絕對路徑]。（使用模塊系統內部的路徑解析機制）

define(function(require, exports) {

　　console.log(require.resolve('./b'));  
　　// ==> http://localhost/seajsS/quick-start/static/hello/src/b.js

});

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

exports

是一個對象，用來向外提供模塊接口

define(function(require, exports) { 

　　 // 對外提供 foo 屬性  
　　exports.foo = 'bar';    
　　// 對外提供 doSomething 方法  
　　exports.doSomething = function() {}; 

});

 

 

替代exports

使用 return 直接向外提供接口

define(function(require)  {  

　　// 經過 return 直接提供接口  
　　return {   
　　　　foo: 'bar',   doSomething: function() {}  
　　}; 

});

 

 

或者是

define(function(require, exports, module) {  

　　// 正確寫法  
　　module.exports = {   
　　　　foo: 'bar',   doSomething: function() {}  
　　};    

　　// 錯誤寫法  
　　// 解釋：exports 僅僅是 module.exports 的一個引用，給 exports 從新賦值時，並不會改變 module.exports 的值，OK？  
　　exports =  {   
　　　　foo: 'bar',   doSomething: function() {}  
　　}; 

});

 

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

module

是一個對象，存儲了與當前模塊相關聯的一些屬性和方法

 

module.id

模塊的惟一標識。define 的第一個參數就是模塊標識

define('module_id', [], function(require, exports, module) { 
　　 // 模塊代碼 
});

 

module.uri

返回模塊的絕對路徑（根據模塊系統的路徑解析規則）。

define(function(require, exports, module) {    

　　console.log(module.uri);  
　　// ==> http://localhost/seajsS/quick-start/static/hello/src/main.js 

});  

沒有在 define 中手寫 id 參數時，module.id 的值就是 module.uri，二者徹底相同

注意：而require.resolve(id) 是使用模塊系統內部的路徑解析機制的

 

module.dependencies Array

表示當前模塊的依賴

 

module.exports Object

當前模塊對外提供的接口

 

傳給 factory 構造方法的 exports 參數是 module.exports 對象的一個引用。只經過 exports 參數來提供接口，有時沒法知足開發者的全部需求。 好比當[模塊的接口是某個類的實例]時，須要經過 module.exports 來實現

 

define(function(require, exports, module) {    

　　// exports 是 module.exports 的一個引用  
　　console.log(module.exports === exports);  // true    
　　// 從新給 module.exports 賦值（模塊的接口是某個類的實例）  
　　module.exports = new SomeClass();        
　　// exports 再也不等於 module.exports  
　　console.log(module.exports === exports);  // false   

});

 

這就是 CMD 模塊定義規範的全部內容。常常使用的 API 只有 define, require, require.async, exports, module.exports 這五個。其餘 API 有個印象就好，在須要時再來查文檔，不用刻意去記。

 

################# 模塊標識 https://github.com/seajs/seajs/issues/258 ####################

 

################# require的書寫約定 https://github.com/seajs/seajs/issues/259 ############
require 的參數值 必須 是字符串直接量

 

################# 模塊的加載啓動 https://github.com/seajs/seajs/issues/260 ###############
seajs 啓動模塊

<script src="path/to/sea.js"></script>
<script>
　　seajs.use('./main');
</script>

　　

seajs.use(id, callback?) | Function |
在頁面中加載任意模塊

// 加載模塊 main，並在加載完成時，執行指定回調
seajs.use('./main', function(main) {
　　main.init();
});

// 併發加載模塊 a 和模塊 b，並在都加載完成時，執行指定回調
seajs.use(['./a', './b'], function(a, b) {
　　a.init();
　　b.init();
});

　

與 DOM ready
沒有任何關係。若是某些操做要確保在 DOM ready 後執行，須要使用 jquery 等類庫來保證

seajs.use(['jquery', './main'], function($, main) {
　　$(document).ready(function() {
　　　　main.init();
　　});
});

 

最佳實踐

1. seajs.use 理論上只用於加載啓動，不該該出如今 define 中的模塊代碼裏。在模塊代碼裏須要異步加載其餘模塊時，推薦使用 require.async 方法。
2. 引入 sea.js 時，能夠把 sea.js 與其餘文件打包在一塊兒，可提早合併好，或利用 combo 服務動態合併。不管哪種方式，爲了讓 sea.js 內部能快速獲取到自身路徑，推薦手動加上 id 屬性：<script src="path/to/sea.js" id="seajsnode"></script>

加上 seajsnode 值，可讓 sea.js 直接獲取到自身路徑，而不須要經過其餘機制去自動獲取。這對性能和穩定性會有必定提高，推薦默認都加上。

 

################# 配置 https://github.com/seajs/seajs/issues/262 ###############

seajs.config({

// 別名配置
alias: {
    'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
    'json': 'gallery/json/1.0.2/json',
    'jquery': 'jquery/jquery/1.10.1/jquery'
},

// 路徑配置
paths: {
    'gallery': 'https://a.alipayobjects.com/gallery'
},

// 變量配置
vars: {
    'locale': 'zh-cn'
},

// 映射配置
map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
],

// 預加載項
preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
],

// 調試模式
debug: true,

// Sea.js 的基礎路徑
base: 'http://example.com/path/to/base/',

// 文件編碼
charset: 'utf-8'
});