什麼是模組化程式設計？ js 模組化程式設計的總結-js教程-PHP中文網

1 什麼是模組化程式設計

2 為什麼要模組化

3 AMD

4 CommonJS

5 總結

了解一個技術，首先要了解這個技術產生的背景及解決的問題，而不應該只是單純的知道該怎麼用。之前的狀態可能就是只是為了了解而了解，並不知道實際產生的原因及帶來的好處，所以今天就來總結一下。

1 什麼是模組化程式設計

來看百度百科的定義

模組化程式設計是指在進行程式設計時將一個大程式依照功能劃分為若干小程式模組，每個小程式模組完成一個確定的功能，並在這些模組之間建立必要的聯繫，透過模組的互相協作完成整個功能的程式設計方法。

例如 java 的 import，C# 的 using。我的理解是透過模組化編程，可以將不同的功能獨立出來，修改某個功能時不會對其他功能產生影響。

2 為什麼要模組化

來看下面一個例子

// A.jsfunction sayWord(type){
    if(type === 1){
        console.log("hello");
    }else if(type === 2){
        console.log("world");
    }
}// B.jsfunction Hello(){
    sayWord(1);
}// C.jsHello()

登入後複製

假設上面三個文件，B.js 引用了A.js 裡面的內容，C.js又引用了B.js 裡面的內容，如果寫C.js 的人只知道引用了B.js，那他就不會引用A.js 就會導致程式出錯，而且檔案的引用順序也不能出錯。給整體程式碼的調試修改帶來不便。

還有個問題，上述程式碼暴露了兩個全域變量，容易造成全域變數的污染

3 AMD

AMD 即Asynchronous Module Definition（非同步模組定義）。採取非同步載入的方式載入模組，模組的載入不會影響它後面的語句執行。

假設下面這種情況

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return &#39;2018-08-9&#39;
            }            if(type === 2){                return &#39;2018 年 8 月 9 日&#39;
            }
        }
    }
})// a-util.jsdefine([&#39;./util.js&#39;],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine([&#39;./a-util.js&#39;],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire([&#39;./a.js&#39;],function(a){
    var date = new Date()
    a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>

登入後複製

頁面上先列印 1，然後才會列印 2018 年 8 月 9 日。因此 AMD 的載入並不會影響後續的語句執行。

如果不是非同步載入會出現什麼情況呢

var a = require(&#39;a&#39;);
console.log(1)

登入後複製

後面的語句需要等待 a 載入完成才能執行，如果載入時間過長，整個程式都會卡在這。因此，瀏覽器不能同步載入資源，這也是 AMD 的產生背景。

AMD 是在瀏覽器端實作模組化開發的規格。由於該規範不是 JavaScript 原始支援的，使用 AMD 規範進行開發的時候需要引入第三方的函式庫函數，也就是 RequireJS。

RequireJS 主要解決的問題

使JS 非同步加載，避免頁面失去回應
##管理程式碼之間的依賴性，有利於程式碼的寫寫

下面來看看如何使用require.js

要想使用require.js，首先要define

// ? 代表该参数可选
    define(id?, dependencies?, factory);

登入後複製

id：指的是定義的模組的名字
#dependencies：是定義的模組所依賴模組的陣列

#factory：為模組初始化要執行的函數或物件。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模組的輸出值。

具體的規格說明可以參考AMD (中文版)

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();           //Or:
           return require("beta").verb();
       }
   });

登入後複製

define(["alpha"], function (alpha) {
       return {
         verb: function(){
           return alpha.verb() + 2;
         }
       };
   });

登入後複製

一個沒有依賴性的模組可以直接定義物件：

define({
     add: function(x, y){
       return x + y;
     }
   });

登入後複製

AMD 採用require 語句載入模組

require([module],callback);

登入後複製

module：是數組，裡面的成員是要載入的模組

callback：載入成功之後的回呼函數

例如<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">require([&#39;./a.js&#39;],function(a){ var date = new Date() a.printDate(date) })</pre><div class="contentsignin">登入後複製</div></div>具體的使用方法如下

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-09'
            }            if(type === 2){                return '2018 年 8 月 9 日'
            }
        }
    }
})// a-util.jsdefine(['./util.js'],function(util){
    return {
        aGetFormatDate:function(date){
            return util.getFormatDate(date,2)
        }
    }
})// a.jsdefine(['./a-util.js'],function(aUtil){
    return {
        printDate:function(date){
            console.log(aUtil.aGetFormatDate(date))
        }
    }
})// main.jsrequire([&#39;./a.js&#39;],function(a){
    var date = new Date()
    a.printDate(date)
})// 使用//

登入後複製

假設這裡有4 個文件，util.js，a- util.js 引用了util.js，a.js 引用了a-util.js，main.js 引用了a.js。

其中，data-main 屬性的作用是載入網頁程式的主模組。

上例示範了一個主模組最簡單的寫法，預設情況下，require.js 假設依賴和主模組在同一個目錄。

使用

require.config()

方法可以對模組的載入行為進行自訂。

require.config()

就寫在主模組（main.js）的頭部，參數是一個對象，這個對象的paths 屬性指定各個模組的載入路徑

require.config({
    paths:{        "a":"src/a.js",        "b":"src/b.js"
    }
})

登入後複製

還有一種方法是改變基礎目錄（baseUrl）

require.config({

　　　　baseUrl: "src",

　　　　paths: {

　　　　　　"a": "a.js",
　　　　　　"b": "b.js",

　　　　}

　　});

登入後複製

4 CommonJS

commonJS 是nodejs 的模組化規範，現在被大量用在前端，由於建置工具的高度自動化，使得使用npm 的成本非常低。 commonJS 不會非同步載入JS，而是同步一次性載入出來

###在commonJS 中，有一個全域性的方法require()，用於載入模組，例如###

const util = require(&#39;util&#39;);

登入後複製

###然後，就可以呼叫util 提供的方法了###

const util = require(&#39;util&#39;);var date = new date();
util.getFormatDate(date,1);

登入後複製

###commonJS 對於模組的定義分三種，模組定義（exports），模組引用（require）和模組標示（module）#######exports() 對象用於導出當前模組的變數或方法，唯一的導出口。 require() 用來引入外部模組。 module 物件代表模組本身。 ######舉個栗子###

// util.jsmodule.exports = {
    getFormatDate:function(date, type){
         if(type === 1){                return &#39;2017-06-15&#39;
          }          if(type === 2){                return &#39;2017 年 6 月 15 日&#39;
          }
    }
}// a-util.jsconst util = require(&#39;util.js&#39;)
module.exports = {
    aGetFormatDate:function(date){
        return util.getFormatDate(date,2)
    }
}

登入後複製

###或下面這種方式###

 // foobar.js
 // 定义行为
 function foobar(){
         this.foo = function(){
                 console.log(&#39;Hello foo&#39;);
        }  
         this.bar = function(){
                 console.log(&#39;Hello bar&#39;);
          }
 } // 把 foobar 暴露给其它模块
 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require(&#39;./foobar&#39;).foobar,
test = new foobar();
test.bar(); // &#39;Hello bar&#39;

登入後複製

5 总结

CommonJS 则采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。