如何设计大型网站的前端 JavaScript 框架

Yuanf 发布于2019-08-19 14:46 / 1470人阅读

摘要：前端单元测试，推荐淘宝开源的工具，简单易用，支持众多测试框架，也支持调试。这些也是设计前端框架时需要权衡的重要方面。最后，其实大型网站不一定要设计自己的前端框架，完全可以选用现有的框架。

有人在知乎上提问“如何设计大型网站的前端 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

GPU云服务器云服务器 javascript框架设计 javascript前端框架大型网站设计大型网站架构设计图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78100.html

前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

awesome23 2019-08-20 18:23 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

antyiwei 2019-08-29 13:03 评论0 收藏0
前端资源收集整理

摘要：工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。工作原因，最近一年断断续续写了一点前端代码，收集整理了一些资料，和大家共享。 Github版本：Front-End Resource Collection 前端相关资源汇总学习指导精华文章 Web前端的路该怎么走？：文章超长，但是干货超级多，值得反复精读！听说2017你想写前端？：适合于已经度过了小白阶...

KavenFan 2019-08-01 17:16 评论0 收藏0
【译】前端练级攻略

摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。译者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 评论0 收藏0
前端进阶之路: 前端架构设计(1)-代码核心

摘要：可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...

DevYK 2019-08-01 18:15 评论0 收藏0