淺述編寫模塊化的 JavaScript

模塊化，就是字面意思的模塊化。比如模塊化一個表單驗證，模塊化一個輪播圖等。

在平常 JavaScript 代碼的編寫中，我們一般是保持著這樣一個順序。

1. 無腦式自然編寫

function a() {
  alert("a")
}

function b() {
  alert("b")
}

a()
b()

這樣的寫法在每個人的學習初級階段都是存在的，當代碼量比較少的時候顯然是沒有什么問題的。但是當工程量比較大的時候，就會出現一些列的不可控，因為這里出現的變量都是全局變量，處處埋藏著炸彈。

2. 進階式裝 X 編寫

在寫了稍微多的代碼后只要是個正常的人都會意識到這個問題，然后可能就會出現下面的寫法。

var A = {}
var B = {}

A.a = function() {
  //do
}
A.b = function() {
  //do
}

B.a = function() {
  //do
}
B.b = function() {
  //do
}

在這樣子的編寫中，我們首先創建了不同的對象，然后在各自的對象里面聲明 名字是同樣的函數 a 和 b， 所以不會產生沖突。相比較第一種寫法，顯然在沖突這件事情上會好很多很多。

但是這樣的編寫還存在一個問題，對象中的函數或者屬性對外部是可見的，并且是可修改的。外部不經意或者故意的修改就會讓原本的功能癱瘓，顯然這樣是存在一定的安全隱患的。

3. 稍高層立即執行函數

這個時候可能是多多少少用過一些 jQuery 庫之類的東西，可能就會這樣

(function() {
  // private code

  var a = function() {

  }

  window.a = a;
})();

這樣寫的話可以有私立的 private 類型變量，然后將局部的函數提升到 windows 下面，可以讓其他地方使用。

據說 jQuery 就是使用這種寫法讓 windows 有了 $ 這個方法。

當然，也可以寫一個立即執行函數，然后返回一個對象，讓其他模塊去調用，比如這樣

var A = (function(){
  //private code

  var a = function() {
    //do
  }

  return {a: a}
})()

A.a()

道理和上面的沒有太大的區別

4. 現有高級通用寫法

未知。。。。

requeryJs...

AMD...

原文鏈接： http://life.rccoder.net/webpre/1157.html