【装载】人们常说的前端框架是什么

是否需要使用前端框架

一提起框架,我想我们基本都会脱口而出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与异步
这几个方面再留待后边学习

参考文章:
人们常说的前端框架是什么

此条目发表在JavaScript分类目录。将固定链接加入收藏夹。

发表评论

邮箱地址不会被公开。 必填项已用*标注