輕輕談一下seaJs——模塊化開發的利器

      「僅作一件事，作好一件事。」

      這個應該就是seaJs的精髓了。

      我在本身的一些項目中使用過seaJs。對其算是瞭解一二。現在就班門弄斧。輕輕地談一下。

      首先上一段度孃的話：

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

1.下載seaJs

下載url：https://github.com/seajs/seajs

      

       咱們能清楚地看到，docs是文檔。dist是壓縮好的、用於瀏覽器端的SeaJS代碼；src則是源碼。

package.json + Gruntfile.js就是Grunt構建工具所需要的文件。用來合併壓縮等等。

看完代碼結構，現在就開始說一下里面的基本使用方法。

 2.seaJs的基本使用方法

2.1 用seajs.config來進行路徑和文件依賴的配置。

譬如：

        

seajs.config({

  // 別名配置
  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'
  },

  // 變量配置
  vars: {
    'locale': 'zh-cn'
  },

  // 映射配置
  map: [
    ['http://example.com/js/app/', 'http://localhost/js/app/']
  ],

  // 預載入項
  preload: [
    Function.prototype.bind ?
 '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ],

  // 調試模式
  debug: true,

  // Sea.js 的基礎路徑
  base: 'http://example.com/path/to/base/',

  // 文件編碼
  charset: 'utf-8'
});

更加具體的配置 ，可以參考：https://github.com/seajs/seajs/issues/262

2.2 用seajs.use在頁面中載入一個或多個模塊，callback 參數可選。省略時，表示無需回調。

繼續看代碼：

// 載入模塊 common，並在載入完畢時，運行指定回調
seajs.use('./common', function(main) {
  common.init();
});
// // 併發載入模塊 x 和模塊 y。並在都載入完畢時，運行指定回調
seajs.use(['./x', './y'], function(x, y) {
  x.init();
  y.init();
});

2.3 用define定義模塊和獲取模塊。

詳細調用例如如下：

define(function(require, exports, module) {

  // 你要寫的模塊代碼

});

2.4用require 獲取指定模塊的接口。

define(function(require) {

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

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

2.5 用require.async在模塊內部異步載入一個或多個模塊。

define(function(require) {

  // 異步載入一個模塊，在載入完畢時。運行回調
  require.async('./b', function(b) {
    b.doSomething();
  });

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

});

ps:此段代碼copy自官網參考文檔。

2.6用exports在模塊內部對外提供接口。

define(function(require, exports) {

  //這一句對外提供了一個屬性todo
  exports.todo = 'wt';


});

3.注意和規範

膚淺地過了一遍主要的使用方法以後，接下來就說一下要注意的東西了。

3.1模塊工廠構造方法的第一個參數 必須 命名爲 require 。

// 錯誤！
define(function(req) {
  // ...
});
// 錯誤！
define(function(r) {
  // ...
});

// 正確！
define(function(require) {
  // ...
});

3.2不要給 require 又一次賦值或者不能把這個函數重命名。

// 錯誤
var yilai = require, a= yilai ("./mod");

// 錯誤
require = function() {};

// 錯誤
function todo(require) {}

// 錯誤
function todo() {
  var require = function() {};
}

3.3require 的參數值不能是字符串直接量以外的其它變量。

// 錯誤！
require(todo);

// 錯誤！
require("to-" + "do");

// 錯誤！
require("todo".toLowerCase());

總結：使用 Sea.js。提升代碼的可維護性。高效性。靈活性。粒子性和可移植性。總結得有點虛，但是seaJs確實給項目的開發帶來了很是多的便利。

還不用seaJs。你就凹凸慢了。

注：此 文章參考了官網的很是多文章，編寫而來。想知道得不少其它的童鞋。請點擊這裏：http://seajs.org/docs/#docs

Author: Alone
Antroduction: 高級前端開發project師
Sign: 人生沒有失敗。僅僅有沒到的成功。

博主相關文章推薦：

有趣的前端題目。看了不懊悔

移動端前端開發概述

淺談 標籤的語義化

淺談鼠標滾輪事件

不積跬步無以致千里----高度自適應的textarea

sass和less，優秀的前端樣式預處理器

視差滾動的那些事兒

關於那些常見的坑爹的小bug