如何設計大型網(wǎng)站的前端 JavaScript 框架？
時間：2023-12-11 08:36:01 | 來源：網(wǎng)站運營
時間：2023-12-11 08:36:01 來源：網(wǎng)站運營
如何設計大型網(wǎng)站的前端 JavaScript 框架？：具體的架構(gòu)方法可能會有很多種適用的情形也不一樣，我只說一些通用的東西。
相對大型的項目在前端 JS 方面有幾個需要達成的目標：
- 代碼邏輯分層
- 便于多人協(xié)作開發(fā)
- 各部分代碼模塊化，可以按需加載
- 保持全局變量的清潔
- 可進行單元測試
用 GoogleClosure 時對應如下:
1. 代碼由底層類庫（GoogleClosure）提供，項目代碼分為幾部分：
- 常量定義
- Helper 方法
- 項目相關(guān)的 UI 組件，如 InPlaceEditor, VoteBar 等
- 按功能模塊劃分的 Module，如 LoginPanel, AnswerList 等
- 程序入口 main 函數(shù)及各大模塊(以頁面或一組頁面劃分)入口，如 ProfilePage, HomePage
- 單元測試：針對UI模塊的測試和界面元素呈現(xiàn)測試，可批量執(zhí)行
2 . 開發(fā)人員負責各自模塊的開發(fā)及測試編寫，界面和功能測試（如果涉及異步請求，使用 Mock 對象）全部通過之后與后臺聯(lián)調(diào)。
3. 使用 ClosureBuilder 跟據(jù)各模塊的依賴關(guān)系生成 dependency 文件，并分別進行 build（壓縮、混淆），每頁面根據(jù)所屬模塊引入一至二個 JS 文件
4. 使用 goog.provide() 方法劃定命名空間。
5. 使用 GoogleClosure 自帶的單元測試工具編寫測試用例并調(diào)試。
在線咨詢