有人在知乎上提问“如何设计大型网站的前端 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框架设计》,这是国内第一本讲述前端框架架构的书。
最后,其实大型网站不一定要设计自己的前端框架,完全可以选用现有的框架。;-)