SeaJS入門教程系列之使用SeaJS（二）

更新時間：2014年03月03日 09:13:59 作者：

這篇文章主要介紹了SeaJS入門教程系列之使用SeaJS,著重介紹了SeaJS的使用方法、關(guān)鍵方法的使用等,需要的朋友可以參考下

下載及安裝

要在項目中使用SeaJS，你所有需要做的準備工作就是下載sea.js然后放到你項目的某個位置。
SeaJS項目目前托管在GitHub上，主頁為 https://github.com/seajs/seajs/ ?？梢缘狡鋑it庫的build目錄下下載sea.js（已壓縮）或sea-debug.js（未壓縮）。
下載完成后放到項目的相應(yīng)位置，然后在頁面中通過<script>標簽引入，你就可以使用SeaJS了。

SeaJS基本開發(fā)原則

在討論SeaJS的具體使用前，先介紹一下SeaJS的模塊化理念和開發(fā)原則。
使用SeaJS開發(fā)JavaScript的基本原則就是：一切皆為模塊。引入SeaJS后，編寫JavaScript代碼就變成了編寫一個又一個模塊，SeaJS中模塊的概念有點類似于面向?qū)ο笾械念悺K可以擁有數(shù)據(jù)和方法，數(shù)據(jù)和方法可以定義為公共或私有，公共數(shù)據(jù)和方法可以供別的模塊調(diào)用。
另外，每個模塊應(yīng)該都定義在一個單獨js文件中，即一個對應(yīng)一個模塊。
下面介紹模塊的編寫和調(diào)用。

模塊的定義及編寫

模塊定義函數(shù)define
SeaJS中使用“define”函數(shù)定義一個模塊。因為SeaJS的文檔并沒有關(guān)于define的完整參考，所以我閱讀了SeaJS源代碼，發(fā)現(xiàn)define可以接收三個參數(shù)：

復制代碼代碼如下:

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

上面是我從SeaJS源碼中摘錄出來的，define可以接收的參數(shù)分別是模塊ID，依賴模塊數(shù)組及工廠函數(shù)。我閱讀源代碼后發(fā)現(xiàn)define對于不同參數(shù)個數(shù)的解析規(guī)則如下：
如果只有一個參數(shù)，則賦值給factory。
如果有兩個參數(shù)，第二個賦值給factory；第一個如果是array則賦值給deps，否則賦值給id。
如果有三個參數(shù)，則分別賦值給id，deps和factory。
但是，包括SeaJS的官方示例在內(nèi)幾乎所有用到define的地方都只傳遞一個工廠函數(shù)進去，類似與如下代碼：

復制代碼代碼如下:

define(function(require, exports, module) {
    //code of the module...
});

個人建議遵循SeaJS官方示例的標準，用一個參數(shù)的define定義模塊。那么id和deps會怎么處理呢？
id是一個模塊的標識字符串，define只有一個參數(shù)時，id會被默認賦值為此js文件的絕對路徑。如example.com下的a.js文件中使用define定義模塊，則這個模塊的ID會賦值為 http://example.com/a.js ，沒有特別的必要建議不要傳入id。deps一般也不需要傳入，需要用到的模塊用require加載即可。

工廠函數(shù)factory解析

工廠函數(shù)是模塊的主體和重點。在只傳遞一個參數(shù)給define時（推薦寫法），這個參數(shù)就是工廠函數(shù)，此時工廠函數(shù)的三個參數(shù)分別是：
1.require——模塊加載函數(shù)，用于記載依賴模塊。
2.exports——接口點，將數(shù)據(jù)或方法定義在其上則將其暴露給外部調(diào)用。
3.module——模塊的元數(shù)據(jù)。
這三個參數(shù)可以根據(jù)需要選擇是否需要顯示指定。
下面說一下module。module是一個對象，存儲了模塊的元信息，具體如下：
1.module.id——模塊的ID。
2.module.dependencies——一個數(shù)組，存儲了此模塊依賴的所有模塊的ID列表。
3.module.exports——與exports指向同一個對象。

三種編寫模塊的模式

第一種定義模塊的模式是基于exports的模式：

復制代碼代碼如下:

define(function(require, exports, module) {
    var a = require('a'); //引入a模塊
    var b = require('b'); //引入b模塊

    var data1 = 1; //私有數(shù)據(jù)

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    exports.data2 = 2; //公共數(shù)據(jù)

    exports.func2 = function() { //公共方法
        return 'hello';
    }
});

上面是一種比較“正宗”的模塊定義模式。除了將公共數(shù)據(jù)和方法附加在exports上，也可以直接返回一個對象表示模塊，如下面的代碼與上面的代碼功能相同：

復制代碼代碼如下:

define(function(require) {
    var a = require('a'); //引入a模塊
    var b = require('b'); //引入b模塊

    var data1 = 1; //私有數(shù)據(jù)

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    return {
        data2: 2,
        func2: function() {
            return 'hello';
        }
    };
});

如果模塊定義沒有其它代碼，只返回一個對象，還可以有如下簡化寫法：

復制代碼代碼如下:

define({
    data: 1,
    func: function() {
        return 'hello';
    }
});

第三種方法對于定義純JSON數(shù)據(jù)的模塊非常合適。

模塊的載入和引用

模塊的尋址算法
上文說過一個模塊對應(yīng)一個js文件，而載入模塊時一般都是提供一個字符串參數(shù)告訴載入函數(shù)需要的模塊，所以就需要有一套從字符串標識到實際模塊所在文件路徑的解析算法。SeaJS支持如下標識：
絕對地址——給出js文件的絕對路徑。

如:

復制代碼代碼如下:

require("http://example/js/a");

就代表載入 http://example/js/a.js 。
相對地址——用相對調(diào)用載入函數(shù)所在js文件的相對地址尋找模塊。
例如在 http://example/js/b.js 中載入

復制代碼代碼如下:

require("./c");

則載入 http://example/js/c.js 。
基址地址——如果載入字符串標識既不是絕對路徑也不是以”./”開頭，則相對SeaJS全局配置中的“base”來尋址，這種方法稍后討論。
注意上面在載入模塊時都不用傳遞后綴名“.js”，SeaJS會自動添加“.js”。但是下面三種情況下不會添加：
載入css時，如:

復制代碼代碼如下:

require("./module1-style.css");

路徑中含有”?”時，如:

復制代碼代碼如下:

require(<a href="http://example/js/a.json?cb=func">http://example/js/a.json?cb=func</a>);

路徑以”#”結(jié)尾時，如:

復制代碼代碼如下:

require("http://example/js/a.json#");

根據(jù)應(yīng)用場景的不同，SeaJS提供了三個載入模塊的API，分別是seajs.use，require和require.async，下面分別介紹。

seajs.use

seajs.use主要用于載入入口模塊。入口模塊相當于C程序的main函數(shù)，同時也是整個模塊依賴樹的根。上面在TinyApp小例子中，init就是入口模塊。seajs.use用法如下：

復制代碼代碼如下:

//單一模式
seajs.use('./a');

//回調(diào)模式
seajs.use('./a', function(a) {
  a.run();
});

//多模塊模式
seajs.use(['./a', './b'], function(a, b) {
  a.run();
  b.run();
});

一般seajs.use只用在頁面載入入口模塊，SeaJS會順著入口模塊解析所有依賴模塊并將它們加載。如果入口模塊只有一個，也可以通過給引入sea.js的script標簽加入”data-main”屬性來省略seajs.use，例如，上面TinyApp的index.html也可以改為如下寫法：

復制代碼代碼如下:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js" data-main="./init"></script>
</body>
</html>

這種寫法會令html更加簡潔。

require

require是SeaJS主要的模塊加載方法，當在一個模塊中需要用到其它模塊時一般用require加載：

復制代碼代碼如下:

var m = require('/path/to/module/file');

這里簡要介紹一下SeaJS的自動加載機制。上文說過，使用SeaJS后html只要包含sea.js即可，那么其它js文件是如何加載進來的呢？SeaJS會首先下載入口模塊，然后順著入口模塊使用正則表達式匹配代碼中所有的require，再根據(jù)require中的文件路徑標識下載相應(yīng)的js文件，對下載來的js文件再迭代進行類似操作。整個過程類似圖的遍歷操作（因為可能存在交叉循環(huán)依賴所以整個依賴數(shù)據(jù)結(jié)構(gòu)是一個圖而不是樹）。
明白了上面這一點，下面的規(guī)則就很好理解了：
傳給require的路徑標識必須是字符串字面量，不能是表達式，如下面使用require的方法是錯誤的：

復制代碼代碼如下:

require('module' + '1');
require('Module'.toLowerCase());

這都會造成SeaJS無法進行正確的正則匹配以下載相應(yīng)的js文件。

require.async

上文說過SeaJS會在html頁面打開時通過靜態(tài)分析一次性記載所有需要的js文件，如果想要某個js文件在用到時才下載，可以使用require.async：

復制代碼代碼如下:

require.async('/path/to/module/file', function(m) {
    //code of callback...
});

這樣只有在用到這個模塊時，對應(yīng)的js文件才會被下載，也就實現(xiàn)了JavaScript代碼的按需加載。

SeaJS的全局配置
SeaJS提供了一個seajs.config方法可以設(shè)置全局配置，接收一個表示全局配置的配置對象。具體使用方法如下：

復制代碼代碼如下:

seajs.config({
    base: 'path/to/jslib/',
    alias: {
      'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});

其中base表示基址尋址時的基址路徑。例如base設(shè)置為 http://example.com/js/3-party/ ，則:

復制代碼代碼如下:

var $ = require('jquery');

會載入 http://example.com/js/3-party/jquery.js 。
alias可以對較長的常用路徑設(shè)置縮寫。
charset表示下載js時script標簽的charset屬性。
timeout表示下載文件的最大時長，以毫秒為單位。
debug表示是否工作在調(diào)試模式下。

SeaJS如何與現(xiàn)有JS庫配合使用

要將現(xiàn)有JS庫如jQuery與SeaJS一起使用，只需根據(jù)SeaJS的的模塊定義規(guī)則對現(xiàn)有庫進行一個封裝。例如，下面是對jQuery的封裝方法：

復制代碼代碼如下:

define(function() {

//{{{jQuery原有代碼開始
/*!  
 * jQuery JavaScript Library v1.6.1
 * http://jquery.com/
 *
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 * Copyright 2011, The Dojo Foundation
 * Released under the MIT, BSD, and GPL Licenses.
 *
 * Date: Thu May 12 15:04:36 2011 -0400
 */
//...
//}}}jQuery原有代碼結(jié)束

return $.noConflict();
});

SeaJS項目的打包部署

SeaJS本來集成了一個打包部署工具spm，后來作者為了更KISS一點，將spm拆出了SeaJS而成為了一個單獨的項目。spm的核心思想是將所有模塊的代碼都合并壓縮后并入入口模塊，由于SeaJS本身的特性，html不需要做任何改動就可以很方便的在開發(fā)環(huán)境和生產(chǎn)環(huán)境間切換。但是由于spm目前并沒有發(fā)布正式版本，所以本文不打算詳細介紹，有興趣的朋友可以參看其github項目主頁 https://github.com/seajs/spm/。
其實，由于每個項目所用的JS合并和壓縮工具不盡相同，所以spm可能并不是完全適合每個項目。在了解了SeaJS原理后，完全可以自己寫一個符合自己項目特征的合并打包腳本。

您可能感興趣的文章: