1 什麼是模組化程式設(shè)計(jì)

2 為什麼要模組化

3 AMD

4 CommonJS

5 總結(jié)

了解一個(gè)技術(shù)，首先要了解這個(gè)技術(shù)產(chǎn)生的背景及解決的問(wèn)題，而不應(yīng)該只是單純的知道該怎麼用。之前的狀態(tài)可能就是只是為了了解而了解，並不知道實(shí)際產(chǎn)生的原因及帶來(lái)的好處，所以今天就來(lái)總結(jié)一下。

1 什麼是模組化程式設(shè)計(jì)

來(lái)看百度百科的定義

模組化程式設(shè)計(jì)是指在進(jìn)行程式設(shè)計(jì)時(shí)將一個(gè)大程式依照功能劃分為若干小程式模組，每個(gè)小程式模組完成一個(gè)確定的功能，並在這些模組之間建立必要的聯(lián)繫，透過(guò)模組的互相協(xié)作完成整個(gè)功能的程式設(shè)計(jì)方法。

例如 java 的 import，C# 的 using。我的理解是透過(guò)模組化編程，可以將不同的功能獨(dú)立出來(lái)，修改某個(gè)功能時(shí)不會(huì)對(duì)其他功能產(chǎn)生影響。

2 為什麼要模組化

來(lái)看下面一個(gè)例子

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

假設(shè)上面三個(gè)文件，B.js 引用了A.js 裡面的內(nèi)容，C.js又引用了B.js 裡面的內(nèi)容，如果寫(xiě)C.js 的人只知道引用了B.js，那他就不會(huì)引用A.js 就會(huì)導(dǎo)致程式出錯(cuò)，而且檔案的引用順序也不能出錯(cuò)。給整體程式碼的調(diào)試修改帶來(lái)不便。

還有個(gè)問(wèn)題，上述程式碼暴露了兩個(gè)全域變量，容易造成全域變數(shù)的污染

3 AMD

AMD 即Asynchronous Module Definition（非同步模組定義） 。採(cǎi)取非同步載入的方式載入模組，模組的載入不會(huì)影響它後面的語(yǔ)句執(zhí)行。

假設(shè)下面這種情況

// util.jsdefine(function(){
    return {
        getFormatDate:function(date,type){
            if(type === 1){                return '2018-08-9'
            }            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(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})
console.log(1);// 使用// <script src = "/require.min.js" data-main="./main.js"></script>

頁(yè)面上先列印 1，然後才會(huì)列印 2018 年 8 月 9 日。因此 AMD 的載入並不會(huì)影響後續(xù)的語(yǔ)句執(zhí)行。

如果不是非同步載入會(huì)出現(xiàn)什麼情況呢

var a = require('a');
console.log(1)

後面的語(yǔ)句需要等待 a 載入完成才能執(zhí)行，如果載入時(shí)間過(guò)長(zhǎng)，整個(gè)程式都會(huì)卡在這。因此，瀏覽器不能同步載入資源，這也是 AMD 的產(chǎn)生背景。

AMD 是在瀏覽器端實(shí)作模組化開(kāi)發(fā)的規(guī)格。由於該規(guī)範(fàn)不是 JavaScript 原始支援的，使用 AMD 規(guī)範(fàn)進(jìn)行開(kāi)發(fā)的時(shí)候需要引入第三方的函式庫(kù)函數(shù)，也就是 RequireJS。

RequireJS 主要解決的問(wèn)題

• 使JS 非同步加載，避免頁(yè)面失去回應(yīng)

• ##管理程式碼之間的依賴(lài)性，有利於程式碼的寫(xiě)寫(xiě)

下面來(lái)看看如何使用require.js

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

// ? 代表該參數(shù)可選
    define(id?, dependencies?, factory);

• id：指的是定義的模組的名字

• #dependencies：是定義的模組所依賴(lài)模組的陣列

• 
  

#factory：為模組初始化要執(zhí)行的函數(shù)或物件。如果為函數(shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模組的輸出值。

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

舉個(gè)例子，創(chuàng)建一個(gè)名為「alpha」 的模組，使用了require，exports，和名為「beta」的模組:

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

一個(gè)傳回物件的匿名模組：

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

  一個(gè)沒(méi)有依賴(lài)性的模組可以直接定義物件：

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

如何使用

AMD 採(cǎi)用require 語(yǔ)句載入模組

require([module],callback);

module：是數(shù)組，裡面的成員是要載入的模組

callback：載入成功之後的回呼函數(shù)

例如<pre class='brush:php;toolbar:false;'>require([&amp;#39;./a.js&amp;#39;],function(a){ var date = new Date() a.printDate(date) })</pre>具體的使用方法如下

// 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(['./a.js'],function(a){
    var date = new Date()
    a.printDate(date)
})// 使用// 

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

其中，data-main 屬性的作用是載入網(wǎng)頁(yè)程式的主模組。

上例示範(fàn)了一個(gè)主模組最簡(jiǎn)單的寫(xiě)法，預(yù)設(shè)情況下，require.js 假設(shè)依賴(lài)和主模組在同一個(gè)目錄。

使用

require.config()

方法可以對(duì)模組的載入行為進(jìn)行自訂。

require.config()

就寫(xiě)在主模組（main.js）的頭部，參數(shù)是一個(gè)對(duì)象，這個(gè)對(duì)象的paths 屬性指定各個(gè)模組的載入路徑

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

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

require.config({

　　　　baseUrl: "src",

　　　　paths: {

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

　　　　}

　　});

4 CommonJS

commonJS 是nodejs 的模組化規(guī)範(fàn)，現(xiàn)在被大量用在前端，由於建置工具的高度自動(dòng)化，使得使用npm 的成本非常低。 commonJS 不會(huì)非同步載入JS，而是同步一次性載入出來(lái)

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

const util = require('util');

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

const util = require('util');var date = new date();
util.getFormatDate(date,1);

###commonJS 對(duì)於模組的定義分三種，模組定義（exports），模組引用（require）和模組標(biāo)示（module）#######exports() 對(duì)象用於導(dǎo)出當(dāng)前模組的變數(shù)或方法，唯一的導(dǎo)出口。 require() 用來(lái)引入外部模組。 module 物件代表模組本身。 ######舉個(gè)栗子###

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

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

 // foobar.js
 // 定義行為
 function foobar(){
         this.foo = function(){
                 console.log('Hello foo');
        }  
         this.bar = function(){
                 console.log('Hello bar');
          }
 } // 把 foobar 暴露給其它模塊
 exports.foobar = foobar;// main.js//使用文件與模塊文件在同一目錄var foobar = require('./foobar').foobar,
test = new foobar();
test.bar(); // 'Hello bar'

5 總結(jié)

CommonJS 則采用了服務(wù)器優(yōu)先的策略，使用同步方式加載模塊，而 AMD 采用異步加載的方式。所以如果需要使用異步加載 js 的話(huà)建議使用 AMD，而當(dāng)項(xiàng)目使用了 npm 的情況下建議使用 CommonJS。

相關(guān)推薦：

論JavaScript模塊化編程

requireJS框架模塊化編程實(shí)例詳解

以上是什麼是模組化程式設(shè)計(jì)？ js 模組化程式設(shè)計(jì)的總結(jié)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！