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

简介: 有人在知乎上提问“如何设计大型网站的前端 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框架设计》,这是国内第一本讲述前端框架架构的书。

image.png

最后,其实大型网站不一定要设计自己的前端框架,完全可以选用现有的框架。;-)

相关文章
|
11月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
598 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
10月前
|
JavaScript 前端开发 API
|
10月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
396 8
|
11月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
10817 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
356 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
3596 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
261 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1238 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
451 0

热门文章

最新文章