快速上手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了，是否是很方便呢？

既然這麼方便那在什麼狀況須要配置呢？通常狀況是用不到的。可是假如你的路徑特別深 或者要作路徑映射的時候它的做用就來了。下面介紹下經常使用的幾個配置。

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時若是有多個模塊依賴，須要使用暴露出來的接口就要讓參數與它一一對應。