SeaJS入門教程系列之使用SeaJS（二）
下載及安裝
要在項(xiàng)目中使用SeaJS，你所有需要做的準(zhǔn)備工作就是下載sea.js然后放到你項(xiàng)目的某個(gè)位置。
SeaJS項(xiàng)目目前托管在GitHub上，主頁為 https://github.com/seajs/seajs/ ?？梢缘狡鋑it庫的build目錄下下載sea.js（已壓縮）或sea-debug.js（未壓縮）。
下載完成后放到項(xiàng)目的相應(yīng)位置，然后在頁面中通過<script>標(biāo)簽引入，你就可以使用SeaJS了。
SeaJS基本開發(fā)原則
在討論SeaJS的具體使用前，先介紹一下SeaJS的模塊化理念和開發(fā)原則。
使用SeaJS開發(fā)JavaScript的基本原則就是：一切皆為模塊。引入SeaJS后，編寫JavaScript代碼就變成了編寫一個(gè)又一個(gè)模塊，SeaJS中模塊的概念有點(diǎn)類似于面向?qū)ο笾械念悺K可以擁有數(shù)據(jù)和方法，數(shù)據(jù)和方法可以定義為公共或私有，公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。
另外，每個(gè)模塊應(yīng)該都定義在一個(gè)單獨(dú)js文件中，即一個(gè)對應(yīng)一個(gè)模塊。
下面介紹模塊的編寫和調(diào)用。
模塊的定義及編寫
模塊定義函數(shù)define
SeaJS中使用“define”函數(shù)定義一個(gè)模塊。因?yàn)镾eaJS的文檔并沒有關(guān)于define的完整參考，所以我閱讀了SeaJS源代碼，發(fā)現(xiàn)define可以接收三個(gè)參數(shù)：
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
//code of function…
}
上面是我從SeaJS源碼中摘錄出來的，define可以接收的參數(shù)分別是模塊ID，依賴模塊數(shù)組及工廠函數(shù)。我閱讀源代碼后發(fā)現(xiàn)define對于不同參數(shù)個(gè)數(shù)的解析規(guī)則如下：
如果只有一個(gè)參數(shù)，則賦值給factory。
如果有兩個(gè)參數(shù)，第二個(gè)賦值給factory；第一個(gè)如果是array則賦值給deps，否則賦值給id。
如果有三個(gè)參數(shù)，則分別賦值給id，deps和factory。
但是，包括SeaJS的官方示例在內(nèi)幾乎所有用到define的地方都只傳遞一個(gè)工廠函數(shù)進(jìn)去，類似與如下代碼：
define(function(require, exports, module) {
//code of the module...
});
個(gè)人建議遵循SeaJS官方示例的標(biāo)準(zhǔn)，用一個(gè)參數(shù)的define定義模塊。那么id和deps會(huì)怎么處理呢？
id是一個(gè)模塊的標(biāo)識(shí)字符串，define只有一個(gè)參數(shù)時(shí)，id會(huì)被默認(rèn)賦值為此js文件的絕對路徑。如example.com下的a.js文件中使用define定義模塊，則這個(gè)模塊的ID會(huì)賦值為 http://example.com/a.js ，沒有特別的必要建議不要傳入id。deps一般也不需要傳入，需要用到的模塊用require加載即可。
工廠函數(shù)factory解析
工廠函數(shù)是模塊的主體和重點(diǎn)。在只傳遞一個(gè)參數(shù)給define時(shí)（推薦寫法），這個(gè)參數(shù)就是工廠函數(shù)，此時(shí)工廠函數(shù)的三個(gè)參數(shù)分別是：
1.require——模塊加載函數(shù)，用于記載依賴模塊。
2.exports——接口點(diǎn)，將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用。
3.module——模塊的元數(shù)據(jù)。
這三個(gè)參數(shù)可以根據(jù)需要選擇是否需要顯示指定。
下面說一下module。module是一個(gè)對象，存儲(chǔ)了模塊的元信息，具體如下：
1.module.id——模塊的ID。
2.module.dependencies——一個(gè)數(shù)組，存儲(chǔ)了此模塊依賴的所有模塊的ID列表。
3.module.exports——與exports指向同一個(gè)對象。
三種編寫模塊的模式
第一種定義模塊的模式是基于exports的模式：
define(function(require, exports, module) {
var a = require('a'); //引入a模塊
var b = require('b'); //引入b模塊
var data1 = 1; //私有數(shù)據(jù)
var func1 = function() { //私有方法
return a.run(data1);
}
exports.data2 = 2; //公共數(shù)據(jù)
exports.func2 = function() { //公共方法
return 'hello';
}
});
上面是一種比較“正宗”的模塊定義模式。除了將公共數(shù)據(jù)和方法附加在exports上，也可以直接返回一個(gè)對象表示模塊，如下面的代碼與上面的代碼功能相同：
var a = require('a'); //引入a模塊
var b = require('b'); //引入b模塊
var data1 = 1; //私有數(shù)據(jù)
var func1 = function() { //私有方法
return a.run(data1);
}
return {
data2: 2,
func2: function() {
return 'hello';
}
};
});
如果模塊定義沒有其它代碼，只返回一個(gè)對象，還可以有如下簡化寫法：
data: 1,
func: function() {
return 'hello';
}
});
第三種方法對于定義純JSON數(shù)據(jù)的模塊非常合適。
模塊的載入和引用
模塊的尋址算法
上文說過一個(gè)模塊對應(yīng)一個(gè)js文件，而載入模塊時(shí)一般都是提供一個(gè)字符串參數(shù)告訴載入函數(shù)需要的模塊，所以就需要有一套從字符串標(biāo)識(shí)到實(shí)際模塊所在文件路徑的解析算法。SeaJS支持如下標(biāo)識(shí)：
絕對地址——給出js文件的絕對路徑。
如:
就代表載入 http://example/js/a.js 。
相對地址——用相對調(diào)用載入函數(shù)所在js文件的相對地址尋找模塊。
例如在 http://example/js/b.js 中載入
則載入 http://example/js/c.js 。
基址地址——如果載入字符串標(biāo)識(shí)既不是絕對路徑也不是以”./”開頭，則相對SeaJS全局配置中的“base”來尋址，這種方法稍后討論。
注意上面在載入模塊時(shí)都不用傳遞后綴名“.js”，SeaJS會(huì)自動(dòng)添加“.js”。但是下面三種情況下不會(huì)添加：
載入css時(shí)，如:
路徑中含有”?”時(shí)，如:
路徑以”#”結(jié)尾時(shí)，如:
根據(jù)應(yīng)用場景的不同，SeaJS提供了三個(gè)載入模塊的API，分別是seajs.use，require和require.async，下面分別介紹。
seajs.use
seajs.use主要用于載入入口模塊。入口模塊相當(dāng)于C程序的main函數(shù)，同時(shí)也是整個(gè)模塊依賴樹的根。上面在TinyApp小例子中，init就是入口模塊。seajs.use用法如下：
//單一模式
seajs.use('./a');
//回調(diào)模式
seajs.use('./a', function(a) {
a.run();
});
//多模塊模式
seajs.use(['./a', './b'], function(a, b) {
a.run();
b.run();
});
一般seajs.use只用在頁面載入入口模塊，SeaJS會(huì)順著入口模塊解析所有依賴模塊并將它們加載。如果入口模塊只有一個(gè)，也可以通過給引入sea.js的script標(biāo)簽加入”data-main”屬性來省略seajs.use，例如，上面TinyApp的index.html也可以改為如下寫法：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TinyApp</title>
</head>
<body>
<p class="content"></p>
<script src="./sea.js" data-main="./init"></script>
</body>
</html>
這種寫法會(huì)令html更加簡潔。
require
require是SeaJS主要的模塊加載方法，當(dāng)在一個(gè)模塊中需要用到其它模塊時(shí)一般用require加載：
這里簡要介紹一下SeaJS的自動(dòng)加載機(jī)制。上文說過，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加載進(jìn)來的呢？SeaJS會(huì)首先下載入口模塊，然后順著入口模塊使用正則表達(dá)式匹配代碼中所有的require，再根據(jù)require中的文件路徑標(biāo)識(shí)下載相應(yīng)的js文件，對下載來的js文件再迭代進(jìn)行類似操作。整個(gè)過程類似圖的遍歷操作（因?yàn)榭赡艽嬖诮徊嫜h(huán)依賴所以整個(gè)依賴數(shù)據(jù)結(jié)構(gòu)是一個(gè)圖而不是樹）。
明白了上面這一點(diǎn)，下面的規(guī)則就很好理解了：
傳給require的路徑標(biāo)識(shí)必須是字符串字面量，不能是表達(dá)式，如下面使用require的方法是錯(cuò)誤的：
require('Module'.toLowerCase());
這都會(huì)造成SeaJS無法進(jìn)行正確的正則匹配以下載相應(yīng)的js文件。
require.async
上文說過SeaJS會(huì)在html頁面打開時(shí)通過靜態(tài)分析一次性記載所有需要的js文件，如果想要某個(gè)js文件在用到時(shí)才下載，可以使用require.async：
//code of callback...
});
這樣只有在用到這個(gè)模塊時(shí)，對應(yīng)的js文件才會(huì)被下載，也就實(shí)現(xiàn)了JavaScript代碼的按需加載。
SeaJS的全局配置
SeaJS提供了一個(gè)seajs.config方法可以設(shè)置全局配置，接收一個(gè)表示全局配置的配置對象。具體使用方法如下：
base: 'path/to/jslib/',
alias: {
'app': 'path/to/app/'
},
charset: 'utf-8',
timeout: 20000,
debug: false
});
其中base表示基址尋址時(shí)的基址路徑。例如base設(shè)置為 http://example.com/js/3-party/ ，則:
會(huì)載入 http://example.com/js/3-party/jquery.js 。
alias可以對較長的常用路徑設(shè)置縮寫。
charset表示下載js時(shí)script標(biāo)簽的charset屬性。
timeout表示下載文件的最大時(shí)長，以毫秒為單位。
debug表示是否工作在調(diào)試模式下。
SeaJS如何與現(xiàn)有JS庫配合使用
要將現(xiàn)有JS庫如jQuery與SeaJS一起使用，只需根據(jù)SeaJS的的模塊定義規(guī)則對現(xiàn)有庫進(jìn)行一個(gè)封裝。例如，下面是對jQuery的封裝方法：
//{{{jQuery原有代碼開始
/*!
* jQuery JavaScript Library v1.6.1
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2011, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Thu May 12 15:04:36 2011 -0400
*/
//...
//}}}jQuery原有代碼結(jié)束
return $.noConflict();
});
SeaJS項(xiàng)目的打包部署
SeaJS本來集成了一個(gè)打包部署工具spm，后來作者為了更KISS一點(diǎn)，將spm拆出了SeaJS而成為了一個(gè)單獨(dú)的項(xiàng)目。spm的核心思想是將所有模塊的代碼都合并壓縮后并入入口模塊，由于SeaJS本身的特性，html不需要做任何改動(dòng)就可以很方便的在開發(fā)環(huán)境和生產(chǎn)環(huán)境間切換。但是由于spm目前并沒有發(fā)布正式版本，所以本文不打算詳細(xì)介紹，有興趣的朋友可以參看其github項(xiàng)目主頁 https://github.com/seajs/spm/。
其實(shí)，由于每個(gè)項(xiàng)目所用的JS合并和壓縮工具不盡相同，所以spm可能并不是完全適合每個(gè)項(xiàng)目。在了解了SeaJS原理后，完全可以自己寫一個(gè)符合自己項(xiàng)目特征的合并打包腳本。
相關(guān)文章
seaJs使用心得之exports與module.exports的區(qū)別實(shí)例分析
這篇文章主要介紹了seaJs使用心得之exports與module.exports的區(qū)別,結(jié)合實(shí)例形式分析了exports與module.exports具體功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2017-10-10
這篇文章主要介紹了seajs下require書寫約定,結(jié)合實(shí)例形式分析了seajs中require書寫約定遵循的規(guī)則,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了seajs中最常用的7個(gè)功能、配置,結(jié)合實(shí)例形式簡單分析了seajs中常用的項(xiàng)目配置、模塊加載、定義、獲取等操作技巧,需要的朋友可以參考下2017-10-10
Seajs是一個(gè)Web模塊加載框架，追求簡單、自然的代碼書寫和組織方式，Sea.js 遵循 CMD 規(guī)范，模塊化JS代碼。依賴的自動(dòng)加載、配置的簡潔清晰，可以讓程序員更多地專注編碼。這篇文章為seajs深入學(xué)習(xí)的第一篇，主要介紹的基礎(chǔ)性的內(nèi)容，感興趣的朋友們可以參考學(xué)習(xí)。2016-10-10
近幾年前端工程化越來越完善，打包工具也已經(jīng)是前端標(biāo)配了，像seajs這種老古董早已停止維護(hù)，這是一篇細(xì)細(xì)品味Seajs源碼的文章,看完一定受益匪淺2019-04-04
本文是對Sea.js 提供seajs的模塊化與加載方式的講解，對學(xué)習(xí)JavaScript編程技術(shù)有所幫助,與大家分享。有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了seaJs的模塊定義和模塊加載淺析,以及模塊間的依賴關(guān)系等問題,需要的朋友可以參考下2014-06-06
seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié)
這篇文章主要介紹了seajs中模塊的解析規(guī)則詳解和模塊使用總結(jié),需要的朋友可以參考下2014-03-03
這篇文章主要介紹了SeaJS中use函數(shù)用法,結(jié)合實(shí)例形式分析了use函數(shù)加載模塊的使用方法與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
seajs實(shí)現(xiàn)強(qiáng)制刷新本地緩存的方法分析
這篇文章主要介紹了seajs實(shí)現(xiàn)強(qiáng)制刷新本地緩存的方法,結(jié)合實(shí)例形式簡單分析了seajs強(qiáng)制刷新本地緩存的原理、實(shí)現(xiàn)方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10