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

2021-11-15 23:50:00

有人在知乎上提問“如何設計大型網站的前端 JavaScript 架構”，有不少回答，其中得贊較多的兩個回答如下：

相對大型的項目在前端 JS 方面有幾個需要達成的目标：

1. 代碼邏輯分層

2. 便于多人協作開發

3. 各部分代碼子產品化，可以按需加載

4. 保持全局變量的清潔

5. 可進行單元測試

簡單說下，首先是子產品化開發，友善多人合作，減少代碼沖突，多使用繼承接口思路來取代if else，另外做一些監控能定位子產品運作狀态，必要時盡量考慮one-page模式，減少對伺服器的請求同時也能提高頁面加載速度（可參考bigPipe或者bigRender模式）。

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

子產品的按需加載，常用的解決方案是 require.js 和

。兩者的簡單對比可以看

。此外，可以參考

和

，了解子產品化加載的原理。

前端單元測試，推薦淘寶開源的

工具，簡單易用，支援衆多測試架構，也支援調試。

雷雨提到“必要時盡量考慮 one-page 模式，減少對伺服器的請求同時也能提高頁面加載速度”。其實 one-page 模式并不适合所有站點，特别是内容為主的站點并不适合 one-page 模式，詳見

。

除此以外，大小和依賴也是設計架構需要考慮的方面。通常而言，尺寸越小、依賴越少，架構的性能就越好。而尺寸越大、依賴越多，架構的特性就越多，相容性也越好。同時，尺寸較小的架構往往更容易內建到現有的項目，而大型架構為你做更多的事，但是不容易和其他項目配合。這些也是設計前端架構時需要權衡的重要方面。

還要向大家推薦司徒正美的

，這是國内第一本講述前端架構架構的書。

最後，其實大型網站不一定要設計自己的前端架構，完全可以

。;-)

繼續閱讀