JavaScript模塊化編程之require.js與sea.js

  爲何要模塊化：當今，網站以再也不是一個簡單的頁面，JavaScript也再也不是作一些簡單的腳本驗證，隨着WEB.20時代到來，前端工程師面臨的必將是愈來愈龐大的JavaScript代碼，愈來愈複雜的內部邏輯。   從而，團隊化的合做開發成爲必然，各類軟件工程技術的引進使得JavaScript的模塊化開發成爲必然與必須。

  本文將主要討論require.js(AMD)以及sea.js(CMD)

      AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

      CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

sea.js(CMD)就近依賴： 即在代碼運行時，首先是不知道依賴的，須要遍歷全部的require關鍵字，從而找出依賴(使用字符串的正則表達式匹配)，與AMD的依賴引入方法相比，確實有其方便之處，但前提是以性能爲代價的。  下面舉一個簡單的例子，

  文件目錄結構：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

  在index頁面中進行配置入口模塊的加載，

固然，對於一些sea.js行爲的配置，遠遠不止這些，有興趣的同窗能夠查一下做者的github上的對應部分：Sea.js配置

--------------------------------------------------------------------------------------------------------------------------------------------------------------

模塊的搭建：  可分爲：模塊定義(define)，依賴引入，接口暴漏

define(function(require, exports, module) {
    // 經過 require 引入依賴
    //var $ = require('jquery');
    //var Spinning = require('./spinning');

    // type1
    // 經過 exports 對外提供接口
    exports.doSomething3 = function(){
        console.log("do3");
    };

    //type2
    var a = {};
    a.doSomething = function(){
        console.log("MyOk");
    };

    a.doSomething2 = function(){
        console.log("MyOk2");
    };
    // 或者經過 module.exports 提供整個接口
    module.exports = a;
});

     入口的定義其實和模塊的定義同樣，只是通常不會對外暴漏接口且只負責引入與執行(開啓執行)，如C中的main函數同樣。

 

 

require.js(AMD,依賴前置，即在執行當前模塊時，咱們必須指定當前模塊所依賴的模塊項，並逐個按循序引入)，這樣的一種依賴引入模式，相比於CMD，js引擎無需遍歷整個工程去找相應的依賴，而是直接引入便可。  下面以一個require的實例爲例，我想讀者應該很快就能get it。  其實

項目目錄：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

加載require.js

data-main:就是咱們整個模塊總體的入口點。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

在main.js中使用require.config()方法，對模塊的加載行爲進行自定義。

與sea.js相似，baseUrl定義了整個require.js的基礎路徑，全部模塊的引入都將依賴這個路徑或者說：文件夾。

--------------------------------------------------------------------------------------------------------------------------------------------------------------

重頭戲，require.js中的模塊的定義：

require是經過define函數的參數中匿名函數前面的一個String數組來存儲咱們所要引入的依賴，如此處要使用的car模塊，那麼就必須將car這個模塊的就baseUrl色路徑以字符串數組一個元的形式給出，  與sea.js相比(require('jquery'))，確實比較麻煩，但我前面也說過，方便必須是創建在性能代價的基礎上. 關於require在軟依方面的使用，請移步高人微博。

 

其實每種技術的優點都不是絕對的，sea.js也只有其獨特魅力，只是做者理解的過於膚淺，我想，只有最合適的業務邏輯，沒有最合適的技術。

 

That’s   all