一、初識seaJs

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

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

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

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

那到底如何使用seaJS呢？

二、使用seaJs

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

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

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

a.加載css的時候一定要加后綴的

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

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

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

define(id,deps,factory)

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

deps：當前模塊所依賴的模塊，這里關鍵就是按需加載了，將你需要的js文件引入

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

2、模塊化案例

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

moduleA.js：

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

define(function(require,exports,module){    

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

}) 

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

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

moduleB.js：

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

}) 

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

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

moduleA：

define(function(require,exports,module){

    var moduleb=require("moduleB")

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

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

}) 

seajs管理代碼模塊基本就是這種流程，對于define內(nèi)的工廠函數(shù)，我們在寫模塊的時候一定要注意一下幾點：

1、require，exports，module這三個參數(shù)不能寫錯

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

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

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

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

后面我將逐步開始分析如何使用seaJS以及在使用的注意點

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

標簽： seaJS 前端優(yōu)化 交互設計 

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