如何设计大型网站的前端 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