day21

##前言##
SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。

SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。

SeaJS的做者是淘寶前端工程師玉伯。

SeaJS自己遵循KISS（Keep It Simple, Stupid）理念進行開發，其自己僅有個位數的API，所以學習起來毫無壓力。在學習SeaJS的過程當中，到處能感覺到KISS原則的精髓——僅作一件事，作好一件事。

##使用SeaJS##

SeaJS項目目前託管在GitHub上，主頁爲 https://github.com/seajs/seajs/ 。

下載完成後,經過```<script>```標籤將其引入頁面

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

使用SeaJS開發JavaScript的基本原則就是：一切皆爲模塊。引入SeaJS後，編寫JavaScript代碼就變成了編寫一個又一個模塊，SeaJS中模塊的概念有點相似於面向對象中的類——模塊能夠擁有數據和方法，數據和方法能夠定義爲公共或私有，公共數據和方法能夠供別的模塊調用。

另外，每一個模塊應該都定義在一個單獨js文件中，即一個對應一個模塊。

**模塊的定義**

**define**
SeaJS中使用"define"函數定義一個模塊

```
define(function(require, exports, module) {
    require("./module1");
    exports.add = function(x, y) {
        return x + y;
    };
});
```
裏面的這個函數是模塊的主體和重點:
- require: 模塊加載函數,用於加載依賴的模塊
- exports: 接口對象,將變量或方法定義其上並暴露給外部調用
- module: 模塊的元數據

**require**
require是SeaJS主要的模塊加載方法, 當在一個模塊中須要用到其餘模塊時通常用require加載:
```
var module1 = require("../module1");
```
加載流程:
SeaJS會首先下載入口模塊,而後順着入口模塊使用正則表達式匹配代碼中全部的require,在根據require中的文件路徑標識下載相應的JS文件,對下載來的js文件進行相似操做.傳給require的路徑標識必須是字符串字面量,不能是表達式,以下面使用require的方法是錯誤的:

```
require("module" + 1);
require("MODULE".toLowerCase());
```

**seajs.config**
SeaJS提供了一個config方法能夠設置全局配置,接收一個表示全局配置的配置對象:
```
seajs.config({
    base: 'path/to/jslib/',
    alias: {
        'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});
```

- base: 表示基址尋址時的基址路徑
- alias: 經常使用路徑設置縮寫
- charset: 表示下載js時script標籤的charset屬性
- timeout: 表示下載文件的最大時長, 以毫秒爲單位
- debug: 表示是否工做在調試模式下

**seajs.use**
該方法主要用於載入入口模塊,入口模塊表示是一個程序的入口

```
seajs.use("./main", function(main) {
    //some code here
})
```

第一個參數爲須要載入的文件的路徑,能夠不加後綴,默認爲.js文件.第二個參數爲加載成功以後的回調函數.

**Seajs如何與現有JS庫配合使用**

要將現有JS庫如jQuery與SeaJS一塊兒使用，只需根據SeaJS的的模塊定義規則對現有庫進行一個封裝。例如，下面是對jQuery的封裝方法：

```
define(function() {
    //jquery原有代碼
    return $.noConflict();
});
```

**seajs + handlebars**

1. 在 seajs 中使用 handlebars, 須要引入 seajs-text.js, 用來載入模板.
2. 使用 seajs 加載 modules/handlebars.seajs.min
3. 模塊中操做:
```
`
```