如何設計大型網站的前端 JavaScript 框架

有人在知乎上提問「如何設計大型網站的前端 JavaScript 框架」，有很多回答，其中得贊較多的兩個回答以下：

相對大型的項目在前端 JS 方面有幾個須要達成的目標：
1. 代碼邏輯分層
2. 便於多人協做開發
3. 各部分代碼模塊化，能夠按需加載
4. 保持全局變量的清潔
5. 可進行單元測試

馬驍

簡單說下，首先是模塊化開發，方便多人合做，減小代碼衝突，多使用繼承接口思路來取代if else，另外作一些監控能定位模塊運行狀態，必要時儘可能考慮one-page模式，減小對服務器的請求同時也能提升頁面加載速度（可參考bigPipe或者bigRender模式）。

雷雨

這兩個答案中提到的模塊化、代碼邏輯分層、便於多人協做開發、保持全局變量清潔、使用繼承接口思路、可進行單元測試等要點，其實適用於全部大型項目。

模塊的按需加載，經常使用的解決方案是 require.js 和 sea.js。二者的簡單對比能夠看《RequireJS與SeaJS模塊化加載示例》。此外，能夠參考《淺談 JavaScript 模塊化編程》和《淺談模塊化加載的實現原理》，瞭解模塊化加載的原理。

前端單元測試，推薦淘寶開源的totoro工具，簡單易用，支持衆多測試框架，也支持調試。

雷雨提到「必要時儘可能考慮 one-page 模式，減小對服務器的請求同時也能提升頁面加載速度」。其實 one-page 模式並不適合全部站點，特別是內容爲主的站點並不適合 one-page 模式，詳見 《客戶端JavaScript框架的五大痛點》。

除此之外，大小和依賴也是設計框架須要考慮的方面。一般而言，尺寸越小、依賴越少，框架的性能就越好。而尺寸越大、依賴越多，框架的特性就越多，兼容性也越好。同時，尺寸較小的框架每每更容易集成到現有的項目，而大型框架爲你作更多的事，可是不容易和其餘項目配合。這些也是設計前端框架時須要權衡的重要方面。

還要向你們推薦司徒正美的《JavaScript框架設計》，這是國內第一本講述前端框架架構的書。

最後，其實大型網站不必定要設計本身的前端框架，徹底能夠選用現有的框架。;-)

---

編撰 SegmentFault