前端架构八大设计准则

脑海中印象很深的一件事是,有一次我们做了一个文件上传的功能,刚开始有用户反馈上传速度太慢了有时候还上传失败,大家一致认为是用户的网络有问题,直到后面又有客户反馈这个问题。我立马就意识到,这肯定不是网络的问题,而是单文件过大,IIS的限制导致问题的发生。 后续的方案是采取了分片上传、修改IIS限制,解决了棘手这个问题。

4. 技术选型

技术选型以需求为主,而不是人员现状。

经常看到这样的情况,在做技术选型决策时,明知某种技术是最优的,但还是选择当前团队掌握的技术。这种决策可以理解,但对产品长远发展不利,极有可能在与竞品的PK中落于下风(性能以及用户体验上)。

技术行业最经典的一句话:没有解决不了的技术问题,只有解决不了问题的人。始终坚信项目是可以推动团队技术发展的。

5. 重视成本

很多架构师可能有这样一种思维:把架构设计得简单了,会显得自己很平庸。弄一个高大上的架构出来,方显本事,在领导面前述职时也有善可陈。

可是,如果太超前去搞这种复杂的架构,会白白增加成本。

架构师的每一个决定都会影响到成本。包括研发成本、第三方软硬件采购成本和上线后的运营成本。不同的方案,在成本分布和最终的总体成本上会不尽相同。需要我们综合权衡,才能决策出成本最优的方案。

成本关系着企业利润,最终也会影响到个人奖金。这种因果关系的体现周期虽然较长,也不是很透明直接,但道理不会错。身为架构师,每做一个决策前,先问问自己,这个方案会花费多少成本。

6. 慎重审视“拿来”的东西

技术这块,一直都有“借鉴”的习惯,说的不好听一点,就是抄袭。前端这块更是严重,诞生了许多的“CV”工程师。

有的人做架构设计,完全是拿来主义,不从自己系统的实际情况出发;而另一种人,则完全自己发挥,不去调查类似系统的设计方案。

这两种情况都不可取,应该从自己系统的实际需求出发,在参考别人成熟案例的基础上,少走弯路,并考虑自己系统的特点,给出符合自身需求的设计。

7. 重视流程

现在早已过了FTP上传文件的时代, 那么现在重要的是思考怎么用工具和流程构建一个高效且避免出错的工作流。

工作流变得越来越复杂, 那些用于它们的工具也同样如此.。这些工具在提高生产力、加快效率和保持代码一致性上带来了惊人的效果。

大家有过中大型公司工作经验的同学都知道,每一个人的岗位职责都是非常明确的,遵循既定的流程。有人会抱怨流程太过繁琐(PS:我刚进大厂的时候也是这样,哈哈)。不过直到出了一件事情:一个实习生的误操作,导致项目直接崩盘了,离上线只剩几个小时。我原本以为上线计划估计得延后了,没想到领导很淡定,切另外一条线就可以了。

开发的工作流程需要规范化,这样才能提升工作效率、降低错误成本。

比如开发环境的准备,至少要有三个环境:开发环境,测试环境,生产环境。还可以加一个备用环境,各个板块是互相关联而又不在一起的,出错了也不用慌,有其它版本。

8. 性能测试

不满足于业务功能的实现,而是要考虑到性能与响应速度。

网站性能基线与行业平均水准和通用的最佳实践相比较是必不可少的。

推荐HTTPArchive(http://httparchive.org/),它测试并记录了几十万个网站的性能数据。

数据分析:

i.  页面大小:2061KB

ii.  总请求数:99

iii.  可缓存资源所占比例

框架相关

原生JS虽能实现绝大部分功能,但要么就是过于繁琐,要么就是存在缺陷,故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架,两者工作原理上存在共通点,也存在一些不同点,对于校招来说,不需要两个框架都学得特别熟,一般面试官会针对你简历中写的框架进行提问。

在框架方面,生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的,在学习的过程可以结合框架的官方文档

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点:
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

HJ0-1714624297080)]

React框架

知识要点:
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-Dt3Undic-1714624297081)]

  • 10
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值