快速上手seajs——簡單易用Seajs

聲明：本文為原創文章，如需轉載，請注明來源并保留原文連結前端小尚，謝謝！

背景

一個網站必然會涉及很多功能，tab頁籤、slide輪播圖、pop彈出層、美化alert、paging分頁等等等等，如果是企業網站那整合成一個js檔案就夠了，即插件庫。

但是對于一個大的網站平台來說需要的功能可能會有很多，而且随着平台的發展，功能會越來越多。到最後會發展成怎樣的情況呢？

這是錢莊網原先的插件庫，已經接近20個插件了。想象一下，你在做一個簡單的活動單頁裡面用到了tab頁籤，于是你把插件庫引用了進來，這個時候你有想過你隻是需要一個功能但是卻把整個插件庫引進來了，多大的浪費啊。該怎麼解決這種問題呢?

我們希望一個頁面按需引入，這個頁面需要什麼功能就引入什麼功能。現在主流的工具有兩種，amd規範的RequireJS、cmd規範的Seajs。

什麼是Seajs

1. Seajs是一個加載器 http://kb.cnblogs.com/page/211942/
2. 遵循 CMD 規範子產品化開發，依賴的自動加載、配置的簡潔清晰。
3. 相容性
   • Chrome 3+
   • Firefox 2+
   • Safari 3.2+
   • Opera 10+
   • IE 5.5+

基本應用

導入Seajs庫

1. 去官網下載下傳最新的seajs檔案，http://seajs.org/docs/#downloads
2. 在頁尾引入seajs：

   <script src="/site/script/sea.js"></script>

3. 然後在它下面寫子產品的配置和入口。

   // seajs 的簡單配置
   seajs.config({
     base: "../sea-modules/",
     alias: {
       "jquery": "jquery/jquery/1.10.1/jquery.js"
     }
   });
   
   // 加載入口子產品
   seajs.use("../static/hello/src/main");
              

配置和入口

這裡解釋下配置和入口的意思。

配置

通常在配置上修改seajs的路徑和别名。

seajs的路徑是相對于前面引入的seajs檔案的。假如是這樣的目錄結構：

examples/
           

|-- index.html

|

--about | |-- news.html |

-- script

|-- seajs.js

|-- jquery.js

`-- main.js

> 我們平時如果我們在index.html上引用main.js路徑應該是這樣寫的`script/main.js`，從news.html引用main.js就要這樣寫，`../script/main.js`。
而在seajs是相對于seajs檔案的，一律直接使用`main.js`就OK了，是不是很友善呢？

既然這麼友善那在什麼情況需要配置呢？一般情況是用不到的。但是假如你的路徑特别深 或者要做路徑映射的時候它的作用就來了。下面介紹下常用的幾個配置。

```js
seajs.config({
	// Sea.js 的基礎路徑（修改這個就不是路徑就不是相對于seajs檔案了）
	base: 'http://example.com/path/to/base/',
	// 别名配置（用變量表示檔案，解決路徑層級過深和實作路徑映射）
	alias: {
		'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
		'json': 'gallery/json/1.0.2/json',
		'jquery': 'jquery/jquery/1.10.1/jquery'
	},
	// 路徑配置（用變量表示路徑，解決路徑層級過深的問題）
	paths: {
		'gallery': 'https://a.alipayobjects.com/gallery'
	}
});
           

檢視更多

入口

入口即加載，需要加載什麼檔案（子產品加載器）就在這裡引入。sea.js 在下載下傳完成後，會自動加載入口子產品。

seajs.use("abc/main");  //導入seajs.js同級的abc檔案夾下的main.js子產品的（字尾名可略去不寫）
           

seajs.use()還有另外一種用法。

有時候我們寫一個簡單的單頁并不想為它單獨寫一個js檔案，選擇在直接把js代碼寫在頁面上，seajs通過

seajs.use()

實作了這個。接收兩個參數第一個是檔案依賴(單個用字元串數組都可以，多個需用數組表示)，第二個是回調函數。

加載單個依賴

//加載子產品 main，并在加載完成時，執行指定回調
seajs.use('./main', function(main) {
  main.init();
});
           

加載多個依賴

//并發加載子產品 a 和子產品 b，并在都加載完成時，執行指定回調
seajs.use(['./a', './b'], function(a, b) {
  a.init();
  b.init();
});
           

這裡回掉函數中的a和b參數是與前面的子產品暴露出來的接口一一對應的。有時候也許隻需要使用b的接口，但是也要把a參數寫上。什麼是暴露接口下面會解釋。

通過seajs.use()隻能在第一個參數中引入子產品，不能在回調函數中使用require()載入子產品。 ——141023補充

子產品開發

這裡才是重點，其實也很簡單就是一個書寫規範（CMD）而已。

// 所有子產品都通過 define 來定義
define(function(require, exports, module) {

  // 通過 require 引入依賴
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通過 exports 對外提供接口
  exports.doSomething = ...

  // 或者通過 module.exports 提供整個接口
  module.exports = ...

});
           

子產品是通過define()方法包裝的，然後内部痛過require()方法引入需要的依賴檔案(子產品)。（也可以引入.css檔案哦~）

子產品最好是面向對象開發的，這樣最後可以友善的通過

exports.doSomething

或

module.exports

把子產品的接口給暴露出來。如果你是寫的是jq插件的話就不需要這個功能了，因為你的接口是寫在jquery的對象裡的。如果你不需要提供接口的話也可以不使用這兩個屬性哦！

事實上define方法還有另外幾個參數，一般情況我們用不到。具體看官方API。

小結

其實Seajs的基本使用就這麼簡單，日常使用足夠了，之前看官網的5分鐘教程楞是沒看懂，等會的時候回頭想想真的是5分鐘學會啊,悟性太低- -||

注意事項

1. 子產品内的函數依賴必須交代清楚，防止子產品在函數依賴加載前先加載出來。而且還增強了子產品的獨立性。
2. 引入seajs的時候最好給

   <script>

   标簽加個id，可以快速通路到這個标簽（我是在子產品合并時用到它的）
3. 還有前面提到的使用

   seajs.use()

   在.html頁面上寫js時如果有多個子產品依賴，需要使用暴露出來的接口就要讓參數與它一一對應。