所謂的模塊化編程就是封裝細節，提供使用接口，彼此之間互不影響，每個模塊都是相互獨立，實現某一特定的功能。如果其他模塊想調用的時候，可以暴露我們所希望對外的公開的方法與數據。

1、函數寫法

function f1(){ var value=1； //... } function f2(){var value=2； //... }

這里定義了f1跟f2，每個函數相當于一個模塊，f1跟f2是相互獨立的，不能訪問到對方里面的局部內容value；這種寫法定義了全局變量f1、f2污染了全局環境會導致命名沖突（在上一篇文章提過）。

?

2、對象寫法

var myModule= new Object({value : 0,f1 : function (){//... 　　　　},f2 : function (){//... 　　　　} });

把函數f1()和f2(），封裝在myModule對象里。使用的時候，就是調用這個對象的屬性即可：myModule.f1()。這樣的寫法會暴露所有模塊成員，內部狀態可以被外部改寫如：myModule.value=1 ，會改變myModule內部的屬性值。同時這種辦法只能一定程度上減少了命名沖突的問題，不能完全避免命名沖突。

?

3、立即執行函數寫法

（1）匿名閉包寫法　

(function () { // ... }());

javascript中沒用私有作用域的概念，根據javascript函數作用域鏈的特性，使用這種寫法可以模仿一個私有作用域。在閉包中，可以定義私有變量和函數，外部無法訪問它們，從而做到了私有成員的隱藏和隔離，俗稱“匿名包裹器”或“命名空間”。

（2）全局引入寫法

(function (a) { a.a3 = function () {//... 　　　};// … }(a));

將a對象作為參數傳入，在函數體內對這個對象進行操作。這樣做除了保證模塊的獨立性，還使得模塊之間的依賴關系變得明顯。現在很多類庫里都有這種使用方式，比如jQuery源碼。

（3）模塊導出寫法

var myModule = (function(){
var value = 0;var f1 = function(){//... 　　　　};var f2 = function(){//... 　　　　};return {value: value,f2 : f2};})();

這里，我們聲明了一個全局的模塊叫myModule，它包含二個屬性，一個成員變量value和一個成員方法f1。除此之外，它還使用匿名函數的閉包維護了私有內部狀態，我們也可以通過按需傳入外部變量。

（3）擴展模式寫法

var myModule = (function (a) { var value =a.value;var f1 = function(){//... 　　　　};var f2 = function(){//... 　　　　};return {value: value,f2 : f2};}(a));

這里，我們在閉包中定義私有變量和函數，外部無法訪問它們，做到了私有成員的隱藏和隔離。將某對象作為參數傳入，在函數體內對該對象進行操作，然后返回對象或函數。由此，可以做到把依賴項通過參數的形式注入進來在內部使用注入的屬性，并且可以暴露我們所希望對外的公開的方法與數據。這就是模塊化編程的基礎思想。

在此思想之下，javaScript模塊化編程開始盛行，大牛們開始進行各式各樣的封裝打包，從而產出一系列的模塊化規范、模塊化加載器。上面的方法中，a必須在模塊myModule之前定義，如果a依賴項自身是一個大的模塊，比如一個庫，我們如何做到在myModule之前定義加載a，然后在myModule中成功地引用a呢？模塊化加載器便能幫我們解決這個問題。

下一篇我們開始介紹模塊化規范的先驅-------CommonJS規范；

?

轉載于:https://www.cnblogs.com/huiguo/p/7967189.html

總結

以上是生活随笔為你收集整理的前端模块化（二）：模块化编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。