JavaScript模組化開發探討

我們以前是怎麼開發JavaScript程式碼的
在過去由於應用複雜度不高，JavaScript之於web頁面一直處於一種輔助程式的地位，甚至談不上是一門應用開發語言。而且多數網站都是一次性應用，規模較小，相對於可維護性，開發速度更重要。大部分時候是沒有專業前端開發人員的，都是當後台的人查查手冊就開始工作了。

很多時候所有的JavaScript程式碼都放在同一個檔案中，所有程式碼耦合在一起，無法重複使用。所有的變數都是全域變量，可能互相覆蓋。做的好的會創建一些函數，將一些公共的程式碼組織一下，以便於復用，但是這些函數基本上也都是全域的。引入JQuery之後更明顯，好多人習慣把所有的事件綁定，事件處理等程式碼寫在一起放到一個document ready函數裡。

以上這些情況我都是親身經歷過的，總結起來就是程式碼無法重複使用，可維護性差，同時程式碼無法測試，還有就是多人協作開發比較困難。

什麼是模組？
維基百科的定義：
軟體模組(Module)是一套一致而互相有緊密關連的軟體組織。它分別包含了程式和資料結構兩部分。現代軟體開發往往利用模組作合成的單位。現代軟體開發往往利用模組作合成的單位。模組是可能分開地被寫的單位。這使他們可再用並允許廣泛人員同時協作、編寫及研究不同的模組。

模組化開發的優點
可以實現按需加載
多人協作開發
便於復用
可擴展性強
方便測試
JavaScript中的模組化開發
其實現在JavaScript模組化是個很熱門的東西了，主要特點是“模組化開發，按需加載“。這其中CommonJS組織定義了AMD的規格用來規範瀏覽器端的模組定義。 RequireJS和SeaJS是實現了AMD的兩個優秀的框架。

對於中大型專案來講使用模組化開發和按需加載是非常有必要的，可以選擇其中的一個框架來使用，而對於中小型專案來說，我個人覺得使用這種模組開發框架就有點不必要了，但是我們仍然可以採用模組化開發的優點但不使用按需載入這個功能。我們這裡主要中小型專案如何使用模組化開發方式來避免傳統開發方式中的各種問題。

JavaScript中模組的定義方式
JavaScript中的模組主要是透過閉包來實現的，它可以很好的解決全域變數的問題，把所有相關的變數當作私有變數放在模組中，下面是一個模組簡單的範例：

        var book = function() {
          var name = 'Master     
          return {
            getName: function() {🠜     },
            getPrice: function() {
              return price;
            }       
以下就是一些JavaScript模組化開發過程中的一些基本要求。

每個模組只完成一個獨立的功能
這是模組化開發的基本要求，模組化開發其實就是分治法即把整個功能分成若干個小功能，當然也可以繼續劃分直到每個模組只做一件事為止。當然不要分得太細，粒度太大不利於復用，而粒度太細則會使模組之間整合變得複雜。

每個模組有清晰的API介面
其實這個API介面可以在模組具體功能程式碼之前先定義好，這就要求你在寫程式碼前就清晰的知道這個模組要做什麼，這個和先寫單元測試程式碼後寫實作程式碼是一個道理。同時這也要求只暴露需要的接口，其它變數和函數等都是隱藏的，外面無法存取。

單元測試

JavaScript開發過程中很少有人寫單元測試，一方面是因為JavaScript經常和UI打交道，測試困難，另一方面是因為代碼耦合，無固定接口，沒有辦法測試。有了模組後，就可以很方便的進行測試了。請參考JavaScript單元測試框架介紹

總結
本文討論的是中小型JavaScript專案中的模組化開發方法，因此並沒有採用AMD的那套規範，而是使用了JavaScript中標準的模組模式來組織程式碼。同樣也沒有使用按需載入功能，因為對於中小型專案來說程式碼量不是太大，效能不是大問題。如果是大型專案採用AMD規範和按需載入還是非常必要的，這樣就可以載入必要的程式碼。