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