隨著web專案越來越複雜，排除掉外部引入的**，開發的**動輒上千過萬行，甚至更多。按照最初的開發經驗，我們把**全部放在乙個檔案上，除了**多以外，還有命名容易被覆蓋，衝突等問題。 從管理上我們會選擇把它分開若干個js，分成各種部分，每個js管理某些部分或功能。不同檔案中的**可能由不同的多個人開發，如果把變數都放在全域性上，可能會造成變數被篡改，函式名衝突等問題。
通常我們把每個分出來的部分，叫做模組，模組的編寫每個團隊都有自己的規範，為了更好的管理，進而引申出模組化開發，即把整個專案分成若干個模組，分發給不同的人，每個模組處理某些功能，最後通過協定把它們湊合在一起，最終形成了乙個專案。
然而web的模組化並不那麼容易，如果單純的使用js來處理邏輯，我們可以利用靈活的js特性，通過閉包或者面對物件方式解耦來處理，如果涉及到了html和css，我們需要考慮更多問題。
html和css作為字串的方式引入到js中，可能會導致除錯的不便；
把html單獨抽出來作為乙個片段，需要部署到伺服器中，檔案直接開啟無法獲取；
css和html檔案一樣，是通過片段方式的引入，還是通過全域性引入，如果以片段方式的引入，在切換頁面的時候，移除樣式，如果樣式中包含全域性樣式，可能會照成頁面抖動或布局重繪。
通過以上討論，以下列的方式進行統一規定
純js的模組，如果有必要的會必須要有dispose方法，用來作為刪除不需要的記憶體引用。然後在index.html引入該檔案，或用的時候非同步引入。
簡單案例**1
var m1 = ,
// list除了可以通過dispose()來刪除，還可以直接通過m1.list.length = 0來輸出
dispose: function ()
};
var m2 = (function ()
return
}})();
如果帶有html的片段，首先以單獨html片段方式引入，由於ajax獲取html片段是需要短暫的時間，在特殊情況下可以酌情以字串的形式嵌入，對於dom的使用和事件的引用，要在模組銷毀之前進行分離引用。
簡單案例**
var m3 = (function () , eventlist = {}, parentdom = null;
// 載入html片段到dom中
var adddom = function (dom, bk) )
} // 繫結事件，快取dom
var attachdomevent = function (key, type, eventfn)
// 清除引用，待系統**記憶體
var dispose = function ()
}// 移除dom
parentdom.innerhtml = "";
// 移除引用
domlist = null;
eventlist = null;
}// 暴露外部使用
return
})();
如果是css的樣式，那就以全域性的方式在最開始的時候在index.html引入多個css檔案，利用css的特性進行模組篩選。
在index.html中引入 part1.css, part2.css。如果開發的人很多，可以引入更多, 通過後代選擇器進行樣式書寫。
part1.css簡單案例
.part1 container.part2 container純js的模組引入及定義
簡單案例說明，假設在/public/services/mk.js
// 引入模組依賴，避免迴圈引用和自引用
// strtool， othertool就是其它定義的模組，在內部就可以使用
// 其它定義和事務處理
// 定義模組, 第乙個引數為模組名，第二個為模組的物件
})
帶有html的模組使用，主要用於page物件，component物件
簡單**案例
// 通過引用外部模組，如果不引用直接傳入乙個**函式
// 可以儲存私有物件和私有處理方案**
// 定義page1的page物件
render: function (next) )
},// 快取dom和繫結事件。
getdomobj: function () ,
// 引入資源初始化，init方法在html放在頁面，並且快取dom和繫結事件後觸發
init: function () ,
// 事件**
confirmhandler: function (ev) ，
dispose: function ()
});})
css的引入，與傳統的方案一致
對於1，2兩點，可能會有點困惑，傳統的方式也能很好的工作，為什麼還要進行一次封裝呢，主要由以下原因：
通過以上方案，只要對模組進行統一的註冊，內部的乙個物件進行管理，使得最終易於管理和使用。
為了更好的理解將上一章節的內容**拷貝下來，並作以下修改
檢視index.js, home.js, static.js中的**改為引入模組的方式, 如下:
(function () {})();在services資料夾中新增兩個檔案，這裡注意，要求services類的模組的檔名和定義的模組名稱必須是一致。如果不一致需要手動設定模組配置項。
新增/public/services/strtool.js：注意模組名和檔名要一致
});新增/public/services/maptool.js：
var map = null;
var obj = );
},dispose: function ()
};if (typeof amap === "undefined")
script.onerror = function () })}
} else
})修改second.js**
render: function (next) ,
getdomobj: function () ,
init: function () ,
clickhandler: function (ev) ,
dispose: function ()
})});
檢視效果(主要針對移動端，可以通過手機端檢視或者用瀏覽器模擬移動端)將**放在可以訪問的伺服器或本地服務上，啟動服務，通過瀏覽器訪問，如下位址
主要探索了如何管理複雜專案的構建方法，然後介紹了模組化方法，引出了框架層如何實現按需引入模組從而提高頁面載入速度。分模組開發可以讓開發更專注，效率更高。
演示**:
模組化開發
講模組化開發之前，我們先了解一下 傳統開發模式 是什麼？比如說a所在的公司在做乙個專案，公司安排a跟b還有c三個人一起協同開發，a負責一部分功能塊，b負責另一部分功能塊，把專案的功能分成一塊一塊，這適用於多人協作開發，每個人負責不同的功能塊，當然，這其中有人是負責整合的，有人是負責開發公共功能塊的等...
模組化開發
commonjs規範 同步模式載入模組，導致效率低 node.js環境 乙個檔案就是乙個模組 每個模組都有單獨地作用域 通過module.exports匯出成員 通過require函式載入模組 amd asynchronous module definition 規範 使用相對複雜 模組js檔案請求...
模組化開發
寫在前面 面試時常被問到，你知道什麼是模組化開發嗎？模組化開發能帶來什麼好處？下面的內容可以幫助你簡單了解什麼是模組化開發，從對它模糊的印象中看到一些清晰的輪廓，幫助你了解模組化開發的現狀，以對選擇哪種模組化開發有個選擇的方向。目錄 什麼是模組化開發 模組化開發的意義 模組化開發的好處 1 避免變數...