人们常说的前端框架是什么

是否需要使用前端框架

一提起框架,我想我们基本都会脱口而出angular、vue、react等等,那么它们是用来干啥的呢?

先说下以angular、backbone为代表的MV*框架和jquery的区别,像我一直在使用jquery,用得好好的,为什么要用这种框架呢?

像jquery,针对界面上的DOM操作、远程请求、数据处理等都做了封装。使用它,并不会影响自己的代码结构,它只能算个库。

而框架则是提供一套解决方案,你得按我的规定来安排代码结构,它是随着前端功能的增强而产生的,对于往应用方向发展(也就是越来越像客户端)的web产品就很必要做前端架构这件事,它开始以模型为中心,DOM操作只是附加,通过关注点分离鼓励改进应用程序。

未来的发展趋势是前后端只靠json数据进行通信,后端只处理和发送一段json到前端,计算和模板渲染都在前端进行,后台程序不再做模板的任何处理。使用MV*框架能有效实现前后端的解耦,简化开发流程,便于维护管理,可以把精力更多放到业务逻辑,提升开发效率。

所以考虑是否需要引入前端框架,可以根据产品类型做个基本判断:对于页面型产品,处理交互更多,jquery也够用;但如果是应用软件类产品,需要关注处理复杂模型,很有必要引入MV*框架。如今的互联网公司的产品基本都是web app,越来越像传统应用软件开发靠拢,使用个框架就还是很有必要的。

前端MV*

上边只是简单说了结论性的话,那么MV*又是什么呢?

MVC在javascript中的体现

view和mode之间是观察者模式,view事先在model上注册,观察model的变化,使得view可以了解model中数据的变化。

view和controller之间是策略模式,MVC允许在不改变视图外观的情况下改变视图对用户输入的响应方式。MVC将响应机制封装在controller对象中,存在着一个controller的类层次结构,使得可以方便的对原有的controller做适当改变而创建新的controller。view使用controller子类的实例来实现一个特定的响应策略,要实现不同的策略只要用不同种类的controller实例替换。

view 承接controller的功能,处理用户的输入,依赖controller决定如何进一步处理。由于view具有独立处理事件的能力,如果每次都走controller,其实增加了复杂性。同时view也可委托controller处理model的更改,model数据变化后通知view进行更新,这整体是个循环的过程。

在经典MVC中,controller要做的事情多数是派发用户输入给不同的view,并且在必要的时候从view中获取用户输入来更改model,而Web以及绝大多数现在的UI系统中,controller的职责已经被系统实现了,controller非常薄,只起到路由的作用,Backbone索性取消了controller,只保留了router。总之由于某种原因,控制器和视图的分界线越来越模糊,由于controller和view之间的分界线越来越模糊,所以就衍生了MVP,MVVM这些模式。

MVP模式

MVP中view不仅拥有UI组件的结构,还拥有处理用户事件的能力,这样就能将controller独立出来。依赖Presenter作为核心,负责从model中拿数据,填充到view中。常见的MVP的实现是被动视图(passive view),Presenter观察model,不再是view观察model,一旦model发生变化,就会更新view。Presenter有效地绑定了model到view。view暴露了setters接口以便Presenter可以设置数据。对于这种被动视图的结构,没有直接数据绑定的概念。但是他的好处是在view和model直接提供更清晰的分离。但是由于缺乏数据绑定支持,意味着不得不单独关注某个任务。在MVP里,应用程序的逻辑主要在Presenter来实现,其中的view是很薄的一层。

MVVM模式

同MVP一样,将view和model清晰的分离开来。view是对viewmodel的外在显示,view绑定到viewmodel的属性上,与viewmodel保持同步,如果viewmodel中的属性值变化了,这些新值通过数据绑定会自动传递给view。反过来viewmodel会暴露model中的数据和特定状态给view。它的好处是实现了数据的双向绑定,angular就都是使用的这种模式。

MVC、MVVM与数据绑定

MVC 的思想是表示分离,将表示业务的领域对象Model和表示GUI元素的表示对象View分离。

流同步:在一个视图的代码中显示地对其它视图进行同步,也就是一个视图改变了模型,然后告诉其它所有视图需要刷新了。

MVC中实现模型和视图的解耦,同时还可以使用观察者(使得debug困难)同步策略,自动同步数据,但对于交互相关的状态,需要流同步(会增加好多代码)。前端MVC中,controller原本负责用户和系统的连接,被系统实现了很多,从而又演化出MVP,但是他们没有双向绑定

MVVM模式中,使用视图模板(ViewModel)的概念来维护视图所处的状态。ViewModel用来存储视图状态。controller负责ViewModel的初始化及根据视图的交互操作Model。View 和 ViewModel之间进行了数据的双向绑定

在前端领域中,可以一句话总结MVC/MVVM的不同:MVC指的是前端和后台的交互方式,MVVM指的是页面渲染方式。

当下的前端框架

当下的框架使用MV*的设计模式(最有优势的是MVVC),它们还集合了模板、模块化、组件化的功能,而且更重要的就是为了实现组件化。这两年前端领域有三个框架/库引领时尚,那就是Angular,Polymer(google提出,web component),React。(vue在国内使用的公司还是蛮多的,像百度外卖、饿了么、头条等等),这里有篇文章,详细分析了这几个前端框架,2015前端框架何去何从

这三个东西各有千秋,在可以预见的几年内将会鼎足三分,也许还会有新的框架出现,能不能比这几个流行就难说了。

对于前端框架我们需要关注:
模块化
web component
变更检测(双向绑定机制)
immutable Data
promise与异步
这几个方面再留待后边学习

参考资料

http://blog.sae.sina.com.cn/archives/1060
https://github.com/xufei/blog/issues/19
http://efe.baidu.com/blog/mvc-deformation/
http://www.cnblogs.com/sskyy/p/4264371.html

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

推荐阅读更多精彩内容