JS模塊化開發規範

JS模塊化開發規範，如下介紹三種

commonJS規範（Nodejs模塊系統遵循此規範，適用於服務端）

 

一、 規範定義

CommonJS規範規定，一個文件就是一個模塊，用module變量表明當前模塊。 Node在其內部提供一個Module的構建函數。全部模塊都是Module的實例

 

2、 module.exports屬性定義模塊

module.exports屬性表示當前模塊對外輸出的接口，其餘文件加載該模塊，實際上就是讀取module.exports變量。

//moduleA.js

module.exports.funcA= function(){

  console.log('This is moduleA!');

}

 

3、模塊引用

require函數的基本功能是，讀入並執行一個JavaScript文件，而後返回該模塊的exports對象。在moduleB模塊中加載引入moduleA模塊，即可以使用funA方法了，示例代碼以下：

//moduleB.js

var a = require('./moduleA');

a.funcA();//打印'This is moduleA!'

 

AMD規範（RequireJs  JS模塊加載器遵循此規範，適用於瀏覽器）

 

一、定義模塊：define方法   define(id?, [deps,]?, factory);

l  第一個參數，id（名字），是個字符串。它指的是定義中模塊的名字，這個參數是可選的。若是沒有提供該參數，模塊的名字應該默認爲模塊加載器請求的指定腳本的名字。若是提供了該參數，模塊名必須是「頂級」的和絕對的（不容許相對名字）。

l  第二個參數，dependencies（依賴），是個定義中模塊所依賴模塊的數組。依賴模塊必須根據模塊的工廠方法優先級執行，而且執行的結果應該按照依賴數組中的位置順序以參數的形式傳入（定義中模塊的）工廠方法中。

l  第三個參數，factory（工廠方法），爲模塊初始化要執行的函數或對象。若是爲函數，它應該只被執行一次。若是是對象，此對象應該爲模塊的輸出值。

 

二、require方法：加載模塊require([module], callback);

第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：

require(['a'], function (a) {

　　　　a.FuncA();

});

 

 

 

//js/index.js(requirejs的使用)

 <script data-main="js/ctr/index" src="js/lib/require.js" type="text/javascript"></script>

require.config({

//baseUrl——用於加載模塊的根路徑。

//paths——用於映射不存在根路徑下面的模塊路徑。

//shims——配置在腳本/模塊外面並無使用RequireJS的函數依賴而且初始化函數。

//deps——加載依賴關係數組

baseUrl : "js",         

paths: {

                 'jquery': '../lib/jquery'

          },

shim: {//加載非AMD規範的模塊

           "underscore" : {

             exports : "_";

         },

"jquery.form" : {

             deps : ["jquery"],//deps數組，代表該模塊的依賴性

         exports: 'jqueryForm'

         }

 

    }

 

});

require(['jquery'], function($) {

         $(document).on('click', '#clickBtn', function() {

                 $('#showMsg').html('看看jquery加載進來了沒有');

         });

});

 

CMD規範（seaJS 模塊加載器）

 

1、規範定義

CMD是國內大牛玉伯在開發SeaJS的時候提出來的，屬於CommonJS的一種規範，根據瀏覽器的異步環境作了本身的實現。它和 AMD 很類似，儘可能保持簡單，並與 CommonJS 和 Node.js 的 Modules 規範保持了很大的兼容性。

 

2、define方法：定義模塊   define( id?, [deps,]?, factory );  前兩個參數項可選

define('hello', ['jquery'], function(require, exports, module) {

  // 模塊代碼

});

 

三、require方法：加載模塊

1.require 是同步往下執行，require.async 則是異步回調執行。require.async 通常用來加載可延遲異步加載的模塊。

2.除了給 exports 對象增長成員，還可使用 return 直接向外提供接口

3.module.exports 的賦值須要同步執行，不能放在回調函數裏。

4.exports 是 module.exports 的一個引用

 

define(function(require, exports, module) {

// 錯誤用法,對 module.exports 的賦值須要同步執行，不能放在回調函數裏。

setTimeout(function() {

    module.exports = { a: "hello" };

}, 0);

 

// 異步加載模塊，在加載完成時，執行回調

  require.async(['./c', './d'], function(c, d) {

    c.doSomething();

    d.doSomething();

  });

 

//向外暴露接口的方法3種

// 1.給 module.exports 賦值

module.exports = new SomeClass();

// 2.給 exports 對象增長成員

exports.doSomething = function() {};

// 3.經過 return 直接提供接口

   return {

     foo: 'bar',

     doSomething: function() {}

   };

});

 

 

//js/index.js(seajs的使用)

define(function(require, exports, module) {

       // var $ = require("$");

        module.exports= {  

            init: function() {

                console.log('index.js is loaded!');

            }

        };

});

seajs.config({

    base: "./js/lib/",// Sea.js 的基礎路徑

      alias: {// 別名配置

        '$':'jquery/1.12.3/jquery-1.12.3',

        'jquery':'jquery/1.12.3/jquery-1.12.3',

      },

    paths: {// 路徑配置

        'basePath': './js/lib/'

    },

    vars: {// 變量配置

        'jquery_version': 'jquery-1.12.3'

    },

    map: [// 映射配置

        [ '.js', '-debug.js' ]

    ],

    preload: ['$'], //預加載項'$'

    debug: true,// 調試模式

    charset: 'utf-8'// 文件編碼

});

seajs.use(['$','./js/ctr/index.js'], function($,index) {
　　$(document).ready(function(){
　　　　index.init();
　　});    　　

});