avatar

目录
前端为什么使用框架?解决了哪些问题?

javaScript框架对于前端来说就像是,八倍镜对于98K一样重要,成为了前端开发事半功倍,不可或缺的一部分。但是很少有人思考过,我们为什么要使用框架?仅仅是因为代码量减少吗?

很多前端开发者使用框架是因为:

“ 现在某某框架很火,我也要学习使用一下。”

“ 这个框架 UI 库很多,漂亮,跟公司设计很相似。”

“ 这个框架有很多插件,引入调用一下就行,省了我很多代码量。”

“ 公司项目碰巧很适合做单页面应用。”

“ 我喜欢用数据绑定。”

上面的几个答案确实是框架可以解决的问题,但仅仅是因为这些吗?因为某一个问题,就引入一个庞大的框架,绝不应该如此。

img

为什么使用框架?

近年来,因为互联网的崛起,web 业务也越来越复杂和多元化,一个web项目也不是像以前那样写几个网页拼起来,加几个特效 duang 一下就成了。项目复杂了,出现的问题也就多了。

前后端分离

在前后分离概念出现之前,大部分 web 项目都是后端人员又当爹又当妈的,前后端一起搞,导致质量和效率不是很好。而且对个人的发展也有影响,一个人你什么都会,也意味着你什么都不精,毕竟天才还是少数的。这也是社会趋势影响,大公司招聘,一般也都是需要某一方面很有研究的专才。

img

在互联网的洪流下,以前的那种方式越来越跟不上节奏,所以前后端分离应运而生。

前后端分离后,前端的任务也变得重要起来,web前端开发慢慢趋于规范。

但是在 jQuery 称霸的时代里,并不能满足前端开发人员的需求。也慢慢暴露出了很多不好解决的问题:外部js引用太多,复用性低,开发周期太长,性能低,效率低等等,这些 jQuery 不好解决或者说解决不了的问题,也成为了前端开发的趋势。

使用框架解决了哪些问题

重复引用外部js

在以前使用jQuery开发时,当项目越来越复杂和庞大的时候,可能会用到各种各样的第三方插件,而且不只是一个页面使用,所以会出现每个页面都要引用一遍相同的js文件,冗余大的问题。

img

这样不仅会使页面代码变得杂乱,而且会影响页面的打开速度,万一以后需要变更一下js文件的路径,还要一个一个去修改,对后期的维护也是很大的负担。

使用框架开发时(例如Vue),一般都会搭配构建工具使用(例如webpack),整个项目运行时会有一个入口文件,当你有多个组件都会用到某个文件或插件时,仅仅在这个入口文件引入一次,就可以在你所有组件中使用这个插件的方法,可以说是一劳永逸。就算后期文件位置有所变动,也只是修改入口文件中的引用路径就可以了。

组件化

组件是前端框架里非常强大的功能之一,它可以扩展你的HTML,封装可以重用的代码块,比如你的轮播图、tab切换、页面头部、页面底部等等。

img

这种独立的组件具有了结构(html),表现(css)和行为(js)完整的功能,很大程度的节省了代码量,提高了代码的复用性。根据不同的需求定制你自己的组件,在需要的页面引用即可。在团队合作开发中,相对独立开发不同的组件,效率上也有很大的提升。

开发周期长

jQuery开发时,需要频繁的操作DOM,几乎任何动态效果都需要去选择DOM来进行相应的操作,这使开发变得麻烦起来,很多的时间都用到了操作DOM上,项目的开发周期自然被延长。

使用框架开发,框架中封装许多的频繁使用的功能,例如Angular中的指令,指令功能有数据绑定,表单验证,数据格式化等等。这时前端的重点只需要放在数据逻辑部分,而不需要花费很大的精力去操作DOM完成功能,从而加快项目进度。

性能

很多DOM操作会引起回流和重绘,对于jQuery来说,大量的操作DOM虽然方便,但是很浪费页面性能。

框架和jQuery虽然都会操作DOM,但是框架吧大量的DOM进行了处理和优化(例如Vue的虚拟DOM),通过数据驱动,就能渲染出DOM,大大提升了性能。

文章作者: 刘向洋
文章链接: https://liuxiangyang.space/2020/01/01/00205/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LXY`S BLOG
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论
广告