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

昵稱36691332 2016-09-19

展開全文

下載及安裝

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

這種寫法會(huì)令html更加簡(jiǎn)潔。

require

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

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

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

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

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

require.async

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

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

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

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

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

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

var $ = require('jquery');

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

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

要將現(xiàn)有JS庫(kù)如jQuery與SeaJS一起使用，只需根據(jù)SeaJS的的模塊定義規(guī)則對(duì)現(xiàn)有庫(kù)進(jìn)行一個(gè)封裝。例如，下面是對(duì)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項(xiàng)目的打包部署

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

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：昵稱36691332 > 《文件夾1》

舉報(bào)/認(rèn)領(lǐng)