使用seajs進行子產品化前端開發

之前有一篇文章介紹了requirejs進行子產品化開發，今天來說高大上的國産seajs的吧，是的seajs遵循的是cmd規範。作者是淘寶前端工程師，名字叫玉伯。此解決方案的宗旨是使前端工程師從繁重的js檔案及對象依賴進行中解救出來，進而可以專注代碼的邏輯本身。

要使用seajs,隻要下載下傳sea.js檔案，然後直接包含在html檔案中就可以了，那麼如何定義能被seajs加載的子產品呢？請看下面的這段源碼：

define函數可以接受三個參數，但是你也可以隻傳一個參數，即factory。這也是官方推薦的做法。各參數的解釋如下：

id:即子產品id,如http://example/a,代表一個子產品的絕對路徑，a就是此子產品檔案名如a.js。

deps:表示需要此子產品要用到的其他子產品。

factory:表示工廠函數，這是子產品的主體，也是最重要的部分。

下面來詳細解釋一下工廠函數：

這裡隻傳了factory一個參數，factory其實是一個匿名函數，裡面的幾個參數表示如下：

require:此子產品需要依賴的其他子產品。

exports：子產品對外提供接口。

module:子產品中繼資料。

下面來介紹一下定義子產品的幾種方式：

.基于exports的模式：

這是比較常用的方式，還可以直接傳回一個對象：如下：

如果子產品中隻有一個對象，可以簡化這樣：

最後一種方法适合純json資料的子產品開發。

寫好了子產品，那麼怎麼來使用它們呢？

子產品的載入和引用：

表示載入http://example/js/a.js這個檔案。

也可以用相對位址：

表示載入http://example/js/c.js這個檔案。

表示載入css檔案。

seajs.use主要用于載入入口子產品，就像c裡面的main函數一樣樣，如下：

一般用于頁面中載入入口檔案。

也可以使用<script>标簽中加入data-main屬性來代替seajs.use如下：

require.async：

這種方法會異步加載子產品，即需要使用摸個子產品的時候再加載。

seajs的全局配置：

base：表示基址路徑，設定了它可以簡化require的加載路徑。

alias：别名，可以對較長的路徑進行縮寫。

剩下的沒那麼重要了，略過。

那麼seajs如何與其他js架構配合使用呢？這也是大家最關心的問題了吧。

就拿jquery來吧，我們需要對jquery的源碼進行封裝，你也可以直接用npm來直接下載下傳已經封裝好的jquery，但是我試了下，好像淘寶的伺服器抽風了，下下來的是損壞的檔案。自己動手.....

下面來介紹一個完整的例子吧：

index.html——首頁面。

sea.js——seajs腳本。

init.js——init子產品，入口子產品，依賴data、jquery、style三個子產品。由首頁面載入。

data.js——data子產品，純json資料子產品，由init載入。

jquery.js——jquery子產品，對 jquery庫的子產品化封裝，由init載入。

style.css——css樣式表，作為style子產品由init載入。

sea.js和jquery.js的代碼屬于庫代碼，就不贅述，這裡隻給出自己編寫的檔案的代碼。

html：

js;

css:

好的，今天就到這吧！