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

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

相关文章
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
26天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
26天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
27天前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
26天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
65 1
|
1月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
31 9
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
下一篇
DataWorks