| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 【网站架构】同是使用vue、react为什么我的项目会爆炸?了解你不知道的前端架构需要解决的问题。 -> 正文阅读 |
|
[JavaScript知识库]【网站架构】同是使用vue、react为什么我的项目会爆炸?了解你不知道的前端架构需要解决的问题。 |
?上期我们讲了前端网页的工作原理,而本期,我们就聊一聊前端架构应该解决的问题。或许很多人有疑问:前端需要考虑架构设计吗?很多人这么认为前端本来就是按一个个网页天然解耦的,给每个前端工程师分几个页面,干就完了,再说了,现在不是有很多现成的框架吗。vue、react都是比较流行的框架,不喜欢原生开发的,还可以选择使用脚手架。但是,实际情况是,即使使用了相同的框架,最后的软件质量也可能是天差地别的。正如之前在《架构是什么》中提到过的,约束开发过程才能保证最终的软件质量。 对于实际项目,尤其是对中大型项目而言,只考虑“只要实现功能”,而不去保证最终的软件的质量,这样的做法会导致严重的后果。所以,前端肯定是需要考虑架构的,当然,如果项目偏小,只有几个页面,也不需要长期维护的话,不考虑前端架构也不会出现太大问题。 从多个项目总结的经验看,我们认为,前端架构一般需要解决4个问题 1、规整化 2、适配性和兼容性 3、模块化 4、单页应用 1、规整化由于前端网页是相对容易入门的,所以相当一部分前端工程师并没有系统地学习过前端开发(没有歧视的意思),导致编写出来的代码一人一个样,很多代码细节都过于粗糙,再加上网上有很多质量难以分辨好坏的例子或者模板,导致最终“看上去是完成了”,但一旦发生BUG修改、UI改版、交互方式修改等状况的时候,都会出现工期和风险不可控的局面。 举个例子 如果不规范化前端工程,开发人员就会随意引用js或者css文件,当图中某个js文件的某个函数需要修改时,可能会触发出很多BUG,而且在这种情况下,想要定位哪里出现了问题也是十分困难的。规整化是提升软件质量最有效但又最容易被忽略的手段。 2、适配性和兼容性 适配性指的是对不同设备的适配性,如何一套代码适配多个显示端(PC、手机、电视、巨屏等)是前端架构需要考虑的问题。 兼容性指的是对不同浏览器的兼容性,浏览器远没到大一统的地步,特别是手机浏览器。 3、模块化在前端开发时,很多时候,都是在做重复的事情,这个页面有个列表,那个页面也有列表,这个页面有个播放器,那个页面也有播放器。 一个中大型前端工程(几十、几百个网页)中,相似的部分很多,如何只用一份代码嵌入到个个页面,是模块化需要考虑的问题。 4、单页应用传统网页,是不断跳转网页的,点击搜索会跳转、点击翻页会跳转,这种体验是糟糕的。为了改进这种糟糕的体验,单页应用的概念被提出。 简单地说,单页应用就是把多个网页做成一个网页,在接收到用户操作时,把局部元素替换成正确的元素。以翻页为例,点击翻页后,页面不会刷新,在页面获取到新数据后,会直接修改页面数据。 网上有很多单页应用的做法,但是,把整个网站做成一个单页应用是不现实的,因为谁都不想每次花几分钟打开一个网页。前端架构需要权衡好哪些网页需要合并成一个单页应用,哪些网页必须要分离。 本期只抛出前端架构需要考虑的问题,而具体的解决方案会在后面几期讨论
|
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 10:56:02- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |