javascript如何實現模組程式設計簡單介紹

當前的網頁已經越來越像應用程式，功能越來越複雜，需要引入的javascript程式碼也越來越多。

所以面對如此龐大javascript程式碼的使用，javascript模組化程式設計勢在必行，最為理想的情形就是開發者實現核心的業務邏輯，引入其他開發者已經完成的程式模組即可。

基本概述:

當前流行的javascript版並不支援模組化程式設計，因為javascript並不支援類和模組，但是可以通過我們自己的努力來實現相同的效果。

特別說明:ES6已經新增類（class）和模組（module）。

下面就循序漸進，簡單介紹一下如何實現javascript模組程式設計。

一.最為原生態寫法:

模組就是能夠實現指定功能的一個或者一組方法。

最為原始的一個模組就是將幾個方法以及一些具有記錄狀態功能的變數放在一起。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function func1() {
  //code
}
function func2() {
  //code
}

但是上面程式碼的缺陷是明顯的，因為在全域性作用域下，那麼非常容易發生名稱衝突。

二.物件方式:

[JavaScript] 純文字檢視 複製程式碼
var module = new Object({
  _num : 0,
  func1 : function (){
　  //code
  },
  func2 : function (){
    //code
  }
});

上面的程式碼將方法作為物件的屬性，降低了產生汙染的可能性。

使用方式如下:

[JavaScript] 純文字檢視 複製程式碼
module.func1()

但是上面的方式缺陷還是非常明顯的，內部的成員容易暴露，並且輕易可以被輕易重寫。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
module._num=8

三.匿名立即執行函式方式:

使用立即執行匿名函式可以避免上面的問題，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var module = (function () {
  var _num = 0;
  var func1 = function () {
    //code
  };
  var func2 = function () {
    //code
  };
  return {
    func1: func1,
    func2: func2
  };
})();

將變數生命在匿名函式中，如果再使用module._num獲取變數值，那就會報錯了。

四.放大模式:

模組可以進行擴充套件，這就是所謂的放大模式，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var module = (function (mod){
  mod.func = function () {
    //code
　};
  return mod;
})(module);

上面的程式碼為模組module新增了一個新的方法，然後返回新的模組。

在實際應用中，由於某些原因，可能造成無法傳遞預期的mod，那麼我們可以設定一個預設值:

[JavaScript] 純文字檢視 複製程式碼
var module = (function (mod){
  mod.func = function () {
    //code
　};
  return mod;
})(module || {});

讓空物件作為一個預設值。

五.輸入全域性變數:

獨立性是模組的重要特點，模組內部最好不與程式的其他部分直接互動。

為了在模組內部呼叫全域性變數，必須顯式地將其他變數輸入模組。

[JavaScript] 純文字檢視 複製程式碼
var module = (function ($, YAHOO) {
  //code
})(jQuery, YAHOO);

上面的module模組需要使用jQuery庫和YUI庫，就把這兩個庫（其實是兩個模組）當作引數輸入module。