SeaJS入門教程系列之使用SeaJS（二）

昵稱36691332 2016-09-19

展開全文

下載及安裝

要在項目中使用SeaJS，你所有需要做的準(zhǔn)備工作就是下載sea.js然后放到你項目的某個位置。
SeaJS項目目前托管在GitHub上，主頁為 https://github.com/seajs/seajs/ 。可以到其git庫的build目錄下下載sea.js（已壓縮）或sea-debug.js（未壓縮）。
下載完成后放到項目的相應(yīng)位置，然后在頁面中通過

這種寫法會令html更加簡潔。

require

require是SeaJS主要的模塊加載方法，當(dāng)在一個模塊中需要用到其它模塊時一般用require加載：

var m = require('/path/to/module/file');

這里簡要介紹一下SeaJS的自動加載機制。上文說過，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加載進來的呢？SeaJS會首先下載入口模塊，然后順著入口模塊使用正則表達式匹配代碼中所有的require，再根據(jù)require中的文件路徑標(biāo)識下載相應(yīng)的js文件，對下載來的js文件再迭代進行類似操作。整個過程類似圖的遍歷操作（因為可能存在交叉循環(huán)依賴所以整個依賴數(shù)據(jù)結(jié)構(gòu)是一個圖而不是樹）。
明白了上面這一點，下面的規(guī)則就很好理解了：
傳給require的路徑標(biāo)識必須是字符串字面量，不能是表達式，如下面使用require的方法是錯誤的：

require('module' + '1');
require('Module'.toLowerCase());

這都會造成SeaJS無法進行正確的正則匹配以下載相應(yīng)的js文件。

require.async

上文說過SeaJS會在html頁面打開時通過靜態(tài)分析一次性記載所有需要的js文件，如果想要某個js文件在用到時才下載，可以使用require.async：

require.async('/path/to/module/file', function(m) {
//code of callback...
});

這樣只有在用到這個模塊時，對應(yīng)的js文件才會被下載，也就實現(xiàn)了JavaScript代碼的按需加載。

SeaJS的全局配置
SeaJS提供了一個seajs.config方法可以設(shè)置全局配置，接收一個表示全局配置的配置對象。具體使用方法如下：

seajs.config({
    base: 'path/to/jslib/',
    alias: {
      'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});

其中base表示基址尋址時的基址路徑。例如base設(shè)置為 http:///js/3-party/ ，則:

var $ = require('jquery');

會載入 http:///js/3-party/jquery.js 。
alias可以對較長的常用路徑設(shè)置縮寫。
charset表示下載js時script標(biāo)簽的charset屬性。
timeout表示下載文件的最大時長，以毫秒為單位。
debug表示是否工作在調(diào)試模式下。

SeaJS如何與現(xiàn)有JS庫配合使用

要將現(xiàn)有JS庫如jQuery與SeaJS一起使用，只需根據(jù)SeaJS的的模塊定義規(guī)則對現(xiàn)有庫進行一個封裝。例如，下面是對jQuery的封裝方法：

define(function() {

//{{{jQuery原有代碼開始
/*!
* jQuery JavaScript Library v1.6.1
* http:///
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http:///license
*
* Includes Sizzle.js
* http:///
* 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項目的打包部署

SeaJS本來集成了一個打包部署工具spm，后來作者為了更KISS一點，將spm拆出了SeaJS而成為了一個單獨的項目。spm的核心思想是將所有模塊的代碼都合并壓縮后并入入口模塊，由于SeaJS本身的特性，html不需要做任何改動就可以很方便的在開發(fā)環(huán)境和生產(chǎn)環(huán)境間切換。但是由于spm目前并沒有發(fā)布正式版本，所以本文不打算詳細介紹，有興趣的朋友可以參看其github項目主頁 https://github.com/seajs/spm/。
其實，由于每個項目所用的JS合并和壓縮工具不盡相同，所以spm可能并不是完全適合每個項目。在了解了SeaJS原理后，完全可以自己寫一個符合自己項目特征的合并打包腳本。