seajs快速瞭解

詳情請點擊原文

    SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。與jQuery等JavaScript框架不一樣，SeaJS不會擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。SeaJS的主要目的是令JavaScript開發模塊化並能夠輕鬆愉悅進行加載，將前端工程師從繁重的JavaScript文件及對象依賴處理中解放出來，能夠專一於代碼自己的邏輯。SeaJS能夠與jQuery這類框架完美集成。使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。
SeaJS的做者是前淘寶UED,現支付寶前端工程師玉伯。

特色

SeaJS 追求簡單、天然的代碼書寫和組織方式，具備如下核心特性：

• 簡單友好的模塊定義規範：SeaJS 遵循CMD規範，能夠像Node.js通常書寫模塊代碼。
• 天然直觀的代碼組織方式：依賴的自動加載、配置的簡潔清晰，可讓咱們更多地享受編碼的樂趣。

使用

SeaJS是爲了實現JavaScript的模塊化的，因此在 SeaJS 中，全部 JavaScript 文件都應該用模塊的形式來書寫，而且一個文件只包含一個模塊。它的操做也是圍繞着模塊來進行。

1.定義模塊——defined

define(id, dependencies,function(require, exports, module) {

  // 模塊代碼

});

• id:當前模塊的惟一標識。該參數可選。若是沒有指定，默認爲模塊所在文件的訪問路徑。若是指定的話， 必須是頂級或絕對標識（不能是相對標識）。
• dependencies:當前模塊所依賴的模塊，是一個由模塊標識組成的數組。該參數可選。
• fn:模塊的工廠函數。模塊初始化時，會調用且僅調用一次該工廠函數。
  • require:用來獲取指定模塊的接口

define(function(require) {

      // 獲取模塊 a 的接口
      var a = require('./a');

      // 調用模塊 a 的方法
      a.doSomething();
    });

+ require.async:用來在模塊內部異步加載一個或多個模塊。

``` javascript
    define(function(require) {

      // 異步加載多個模塊，在加載完成時，執行回調
      require.async(['./c', './d'], function(c, d) {
        c.doSomething();
        d.doSomething();
      });

    });
```

2.配置——seajs.config

seajs.config({

  // 設置路徑，方便跨目錄調用
  paths: {
    'arale': 'https://a.alipayobjects.com/arale',
    'jquery': 'https://a.alipayobjects.com/jquery'
  },

  // 設置別名，方便調用
  alias: {
    'class': 'arale/class/1.0.0/class',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  }

});

3.加載模塊——seajs.use

/ 加載一個模塊
seajs.use('./a');

// 加載一個模塊，在加載完成時，執行回調
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加載多個模塊，在加載完成時，執行回調
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});