IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: 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项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-22 20:29:58  更:2022-02-22 20:30:38 
 
开发: 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-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码