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

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

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

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

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

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

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

“ 我喜欢用数据绑定。”

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

为什么使用框架?

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

前后端分离

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

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

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

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

使用框架解决了哪些问题

重复引用外部js

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

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

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

组件化

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

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

开发周期长

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

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

性能

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

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

你有没有思考过你的项目为什么使用框架呢?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,039评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,426评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,417评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,868评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,892评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,692评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,416评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,326评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,782评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,957评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,102评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,790评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,442评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,996评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,113评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,332评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,044评论 2 355

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,170评论 25 707
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,732评论 2 59
  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,936评论 7 113
  • 47.KW 工作会是我最重大的宽恕课程吗? 问: 一直以来,我都有就业方面的困扰。 我原本的想法是,人生苦短,不该...
    台Jennifer阅读 357评论 0 0
  • 第六章,我参观科学院的“政治设计分院”——一位通晓政治的医生建议用药物医治政治家的各种毛病,而两位教授对征税方法各...
    KSHMR阅读 303评论 0 0