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

標籤：前端   js   seajs   javascript   前端開發   

      “僅做一件事，做好一件事。”

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

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

      首先上一段度娘的話：

     “seaJs是一個遵循CommonJs規範的JavaScript模組載入架構，可以實現JavaScript的模組化開發及載入機制。與jQuery等JavaScript架構不同，SeaJS不會擴充封裝語言特性，而只是實現JavaScript的模組化及按模組載入。SeaJS的主要目的是令JavaScript開發模組化並可以輕鬆愉悅進行載入，將前端工程師從繁重的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: 進階前端開發工程師
Sign: 人生沒有失敗，只有沒到的成功。

博主相關文章推薦：

有趣的前端題目，看了不後悔

移動端前端開發概述

淺談 標籤的語義化

淺談滑鼠滾輪事件

不積跬步無以至千裡----高度自適應的textarea

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

視差滾動的那些事兒
關於那些常見的坑爹的小bug

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