2024前端发展方向

最新推荐文章于 2024-08-14 17:01:52 发布

2401_84093490

最新推荐文章于 2024-08-14 17:01:52 发布

阅读量580

点赞数 30

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84093490/article/details/137430196

版权

程序员专栏收录该内容

271 篇文章 1 订阅

订阅专栏

总结过去

从过去这些发展的技术可以看出来，前端主要是在做统一化、工程化、生态化的事情，从早些年间的刀耕火种跨越到比较完善的工程化开发，前端的能力范围也得到了扩展，以前不能做的事情现在可以做了。

很多互联网公司的前端高p也是在这一波浪潮中晋升，得到了更好的职业发展。

分析现在

===============================================================

首先定义一下我说的“现在”是2020年左右。

现在基本上各大公司的前端工程化改造大体完成，各种改造方案、组件库都层出不穷，所以前端又有新玩法了。

Serverless

准确来说，Serverless并不是前端的技术领域，因为它解决的是让开发者不用关心服务器底层架构和运维工作，形成一种“无服务器”的假象。

那为什么这个技术在前端领域会受到追捧呢？

因为这个技术刚好解决了整个开发链条中前端缺失的能力，即服务端底层和运维能力。各个大公司的前端团队也都在尝试把Serverless落地，比如在知乎上就可以看到很多关于Serverless的布道。

NoCode和LowCode

在我看来，低代码（LowCode）和零代码（NoCode）产品，是前端对现有能力整合之后，对其他领域的一种扩张和赋能。其实各大公司在某些特定业务场景中早已经有相关的产品落地了，比如广告业务、电商运营的繁多的落地页需求可以使用零代码产品来解决，全程不需要代码参与。

那既然之前有，现在为什么又提起低代码和零代码呢？我觉得原因有两个：

之前解决的只是某些特定业务场景的问题，现在想把这种能力逐渐扩展到更多的业务场景，比如扩展到公司外部，来做toC的使用。

之前解决的只是页面级的问题，现在想解决应用级的问题。

总结现在

当然了，现在的讨论的比较多的、正在进行中的技术和解决方案肯定不止我说到的这两种，欢迎大家补充。

目前大公司的前端们也在结合业务在做这方面的事情，如果你所在的团队在做相关的事情，不如加入进去，不管是技术或职业发展，都会有比较好的收获。

展望未来

===============================================================

React Server Component

这个目前还在提案中，未来成熟之后极有可能改变前端的开发方式，前端React生态的范围又向服务度端扩展了，一波新的基础建设、技术方案可以考虑了。

Serverless大规模落地

按照现在社区以及各大公司内部的发展，Serverless应该会在2021有大规模的落地，运维岗位会进一步减少

NoCode和LowCode持续发展

低代码这个概念在2021年初因为钉钉发布会被再次带火，因为钉钉的使用量以及toB端市场有很多内部应用的搭建需求，所以它强调这个概念也不奇怪。

相信有像阿里钉钉这样的企业的推动，低代码和零代码会发展的更好。

不用焦虑

说了这么多，是不是更焦虑了？其实不用。

React核心成员Dan Abramov都大方承认了他并不了解Flex、Webpack等等技术，没试过Serverless等等“时髦”技术，很多你会的技术他不会，照很多招聘标准来看他还评不上阿里P7，但是这并不影响他能成为React核心成员，以及他在他自己擅长的领域的造诣。

所以，不用都会，选定一个自己喜欢的、能做出成绩的技术，深入下去吧！

最后

=============================================================

前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。

千里之行始于足下，愿你我共勉。

金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等。

HTML 篇

图片中 title 和 alt 区别？
Html5 有哪些新特性、移除了哪些元素
浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
行内元素有哪些？块级元素有哪些？空(void)元素有那些？
canvas在标签上设置宽高和在style中设置宽高有什么区别
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

CSS 篇

CSS中link与@import的区别：
position的absolute与fixed共同点与不同点：
BFC 有什么用
清除浮动的几种方式
Css3 新增伪类 - 伪元素
IE盒子模型、W3C盒子模型
display:inline-block 什么时候不会显示间隙？
行内元素float:left后是否变为块级元素？

由于内容较多，为了避免阅读体验仅展示部分面试题，完整版的面试题+解析，【点击我】免费获取。

JavaScript篇

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
js拖拽功能的实现
异步加载js的方法
js的防抖
绕不过去的闭包
说说你对作用域链的理解
JavaScript原型，原型链 ? 有什么特点？
请解释什么是事件委托/事件代理
Javascript如何实现继承？