一、初識(shí)seaJs

sea.js是一個(gè)加載器，是淘寶前端攻城師玉伯所著，他是根據(jù)commonjs規(guī)范的一種表現(xiàn)。何為commonJS？commonJs可以理解成一個(gè)組織，他們中的所有人都致力于提高javascript程序的可移植性以及可交互性。這種可移植性以及可交互性不僅僅局限于瀏覽器端，而且也包括了服務(wù)器端的javascript.

那seaJS到底是什么呢？seaJS就是根據(jù)commonJS組織規(guī)范寫(xiě)的一個(gè)加載器。其內(nèi)部可API并不多主要有以下幾個(gè)：alias，config，use，define。主要就這四個(gè)API。seaJS主要就是根據(jù)這四個(gè)API對(duì)其環(huán)境中的javascript進(jìn)行管理的。那么seaJS是如何對(duì)其環(huán)境中的代碼管理的？

在先前的頁(yè)面中，不管前端程序員還是后端程序員，在他們需要某一個(gè)js的時(shí)候，有人可能會(huì)直接寫(xiě)行內(nèi)js，而有些人則習(xí)慣于從外部引入js文件。項(xiàng)目后期維護(hù)的時(shí)候，雜亂的頁(yè)面不僅加大了維護(hù)的成本，而且維護(hù)起來(lái)也很不方便。這個(gè)時(shí)候就可以用seaJS來(lái)維護(hù)我們的這雜亂無(wú)序的js文件。

seaJS的利是遠(yuǎn)大于弊的，這個(gè)至少在大項(xiàng)目中可以體現(xiàn)。在比較小的項(xiàng)目中seajs還是舍棄比較好啊，可能會(huì)出現(xiàn)適得其反的效果。大家在使用之前一定要做好前期評(píng)估。

那到底如何使用seaJS呢？

二、使用seaJs

在使用seaJS之前難免一定要先引入它，就如我們使用jquery一樣。

1、seaJS環(huán)境中javascript的寫(xiě)法——模塊化

模塊化？何為模塊化？在seaJS中的所有javascript都必須要依據(jù)模塊化的書(shū)寫(xiě)格式。這又是什么意思？其實(shí)，seaJS在管理文件的過(guò)程中是根據(jù)javascript（這里我們先討論seaJS對(duì)javascript的管理，對(duì)于CSS的管理我們后面再做討論）的文件名進(jìn)行管理的，這個(gè)文件名就相當(dāng)于我們平時(shí)所說(shuō)的命名空間。在調(diào)用文件的時(shí)候我們可以直接寫(xiě)文件名而不需要寫(xiě)它的后綴。但是也是有特殊情況的：

a.加載css的時(shí)候一定要加后綴的

b.路徑中有”？“的時(shí)候javascript文件的后綴不能省略

c.路徑中是以“#”號(hào)結(jié)尾的文件也不可以省去后綴

到底如何模塊化一個(gè)javascript？這個(gè)時(shí)候就要用到我們seaJS提供的幾個(gè)接口了，模塊化使用define函數(shù)，如下：

define(id,deps,factory)

id：模塊id，可以自己賦值，如果不賦值默認(rèn)就是該函數(shù)的相對(duì)路徑，各位可以調(diào)試看看

deps：當(dāng)前模塊所依賴(lài)的模塊，這里關(guān)鍵就是按需加載了，將你需要的js文件引入

factory：模塊工廠函數(shù)，這個(gè)函數(shù)是重點(diǎn)，主要是模塊的邏輯實(shí)現(xiàn)

2、模塊化案例

說(shuō)了這么多，肯定還是有人是云里霧里，那么我們就給出一個(gè)具體例子：

moduleA.js：

define(function(require,exports,module){     //這里開(kāi)始，你可以隨意書(shū)寫(xiě)你的js代碼，聲明變量，定義函數(shù)，做任何你想做的事 }) 

define(function(require,exports,module){    

//這里開(kāi)始，你可以隨意書(shū)寫(xiě)你的js代碼，聲明變量，定義函數(shù)，做任何你想做的事

}) 

不是說(shuō)模塊化后就能按需加載么？按需加載后，我怎么去調(diào)用模塊化后文件內(nèi)的方法呢？是的，這個(gè)問(wèn)題就牽涉到了我們define函數(shù)的參數(shù)——內(nèi)部工廠函數(shù)

function（require，exports，module）{}，這個(gè)函數(shù)的三個(gè)參數(shù)在書(shū)寫(xiě)的時(shí)候不能寫(xiě)錯(cuò)，不能改變這三個(gè)參數(shù)的任意一個(gè)字母（強(qiáng)制性）。但是這三個(gè)參數(shù)中的require和module是可以省略的，這個(gè)不是我們本期討論的話題。言歸正傳：

moduleB.js：

define(function(require,exports,module){ //這里開(kāi)始代碼var a="hello world!"     exports.getA=function(){return a;}

}) 

現(xiàn)在我們拿上面的moduleB和moduleA進(jìn)行簡(jiǎn)單的seajs的模塊化管理：

如果moduleA也需要擁有moduleB中一樣的getA方法。以前大家都是直接在moduleA中也加一個(gè)方法getA，這樣明顯在重復(fù)“造輪子”，為什么我們不去拿別人先前已經(jīng)寫(xiě)好了的呢？所以，我們?cè)趕eajs的環(huán)境中可以進(jìn)行下面的操作

moduleA：

define(function(require,exports,module){

    var moduleb=require("moduleB")

    //這樣后就要可以調(diào)用moduleB.js中的getA方法了

    moduleb.getA();//"hello world!"

}) 

seajs管理代碼模塊基本就是這種流程，對(duì)于define內(nèi)的工廠函數(shù)，我們?cè)趯?xiě)模塊的時(shí)候一定要注意一下幾點(diǎn)：

1、require，exports，module這三個(gè)參數(shù)不能寫(xiě)錯(cuò)

2、require：是用來(lái)引入相關(guān)模塊的，就如按需加載，需要哪一個(gè)模塊就require進(jìn)來(lái)，然后就可以利用這個(gè)模塊中的方法了，前提是如果要使用require進(jìn)來(lái)的模塊中的代碼那么這個(gè)模塊中的公用函數(shù)就必須要定義在exports中

3、exports：用來(lái)定義包含外部公用的一些內(nèi)容，包括變量，函數(shù)等。這個(gè)也可以理解成與其他模塊的接口。

4、module：模塊的元數(shù)據(jù)，他本身是一個(gè)對(duì)象，擁有對(duì)象的一切特性（原型對(duì)象等）

這樣的描述是對(duì)seaJS的一個(gè)小規(guī)模的使用方法，其實(shí)seaJS內(nèi)部包含了很強(qiáng)大的用處，各位可以查看seaJS官網(wǎng)文檔：http://www.seajs.com

后面我將逐步開(kāi)始分析如何使用seaJS以及在使用的注意點(diǎn)

文章來(lái)源：im-ux.com/archives/833 轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： seaJS 前端優(yōu)化 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。