成都网站推广如何,网站开发用户名不存在,织梦网站开发语言,编程软件scratch免费下载首先#xff0c;在谈这个话题之前#xff0c; 我们有必要了解一下库和框架的区别。
我们先来看react官网以及vue官网对他们的定位#xff1a;
react: vue: react我们不说了#xff0c;官网上明明白白说了#xff0c;人家是一个library#xff0c;用于构建用户界面。
v…首先在谈这个话题之前 我们有必要了解一下库和框架的区别。
我们先来看react官网以及vue官网对他们的定位
react: vue: react我们不说了官网上明明白白说了人家是一个library用于构建用户界面。
vue的官方文档是说vue的核心库也只是关注视图View层。
所以实际上来说和angular有完整的解决方案不同狭义的vue.js和react.js实际上只是library还并不是一个framework因为他们没有一整套的解决方案。
换句话来说现在我们所讨论的vue、react都是我们将他们武装之后他们有了一整套解决方案了。成为了一个框架我们再来讨论他们的架构模式。
下面两层是不变的先提前声明
Model数据模型: 原始数据模型的管理。
View视图用户接触操作的页面。
MVC:
Controller应用逻辑控制层将用户的操作反馈给Model通知其进行数据更新业务逻辑的中心。 我们可以先暂时抛开框架MVC的流程大概就是htmlView操作告知jsController要更新数据Model啦jsController经过请求也好啥也好更新了数据Model然后再告诉html(View)找指定的UI节点去更新数据。当然这里也可以直接由jsController发起对数据Model的更新流程差不多也是一样的。
其实流程列出来我们就可以看到这样的架构模式在早期的web应用中可以适应的很好。因为早期的web应用页面的作用基本也就作为数据展示使用。Model层可以将数据处理好后通知View层渲染就像jquery拿到ajax数据之后找到元素一顿innerHtml啥的。
但随着web的发展业务逻辑的复杂可以发现这种架构模式以下两个问题
1、View更新的时候必须要通过Controller去更新一遍Model同样的Model更新的时候也要去更新一遍视图。此时开发者是在同时维护View层和Model层。当页面复杂的时候开发者不得不做许多繁琐的工作来保证数据的状态、页面的展示都是正确的。
2、View层与Model层耦合复用性差。比方说我点击一个按钮更新了Model并将数据渲染为List这是我再点击一个按钮同样更新这份数据但是渲染为Table。这个时候由于之前逻辑已经连成一块我们不得不再写一套渲染代码。
3、同样是由于View和Model耦合数据流会十分混乱。比如改变了Model这时View的更新又触发了另一个Controller使得另一个Model又更新了这就会使数据流像意大利面条一样缠在一起。
MVP
诶这个时候我们想好像这个Controller并没有什么卵用啊就传递一下信号就完事儿了。不行活干的这么少让他再多干点
如果我们能将数据返回给Controller让Controller来控制View的渲染那么View和Model不就释放了吗于是MVP模式诞生了操作流如下图所示 不过此时的Controller层变成了Presenter中介者层Presenter层既能将页面操作告知Model进行数据更新又能在数据更新时负责通知View进行更新视图使View层与Model层解耦。
针对上述问题2在MVP架构模式下Model层将数据返回给Presenter再由Presenter决定我是渲染Table呢还是渲染List。这种架构模式下加强了Presenter的职能这样就解决了上述问题2、3。
但问题1依然存在啊开发者依旧需要在Presenter中同时兼顾Dom和Data。
MVVM
在此基础上如果说视图层View与数据层Model是在某个环境下是绑定的可以实现通过数据驱动视图那么上述两个问题就都可以得到解决。于是MVVM诞生了先看操作流 在中间的ViewModel层中会构建一份状态数据视图层根据其渲染视图。这样 开发者的精力被释放只要聚焦在业务逻辑中。所以我的理解是MVVM就是实现了数据绑定的MVP注意是绑定而不是双向绑定单向数据流和双向数据流。
----------------------------------------------------------------------------------------------
Vue
个人认为这是毫无争议的一个MVVM框架对MVVM理念的贯彻也是最显而易见的。
Model层接口层原始数据模型。
View层视图层template中的html代码。
ViewModel层基于一个html元素构建的vue实例。将Model中的原始数据模型构建成一份View层可以使用的视图模型。这个时候Model层、View层完全解耦。开发者已经完全不需要顾及View的展示更新了只需要专注业务逻辑以及ViewModel层与Model的交互逻辑就ok。
AngularJs
Model层接口层原始数据模型。
View层html页面。
ViewModel层基于ng-app构建的应用实例与vue类似数据双向绑定机制不同。
React
Model层接口层原始数据模型。
View层编译之后的Dom。
ViewModel层基于jsx语法以及react构建的VDom单向数据流。
这么一看vue、react、angularJS不就都是MVVM框架吗唯一的区别就是VM层中的Model与Viewvue与angular是数据双向绑定而react由于是单向数据流所以需要手动更改状态。
-----------------------------------------------------------------------------------------------
最后说下感受吧其实之前一直以为自己是对这三种架构模式心里有底但现在越看越绕感觉归根结底就是在结合现有框架进行分析的时候对model 层与 中间层cp或vm的边界界定十分模糊没有一个清晰的划分。但是现在想来也没必要这么钻牛角尖其实吧每一层专注于每一层的任务这即是核心。在此基础上的扩展以及如何对代码进行组织管理是看需求来界定的这也是框架架构模式不断发展的原因。
最后的最后由于只是用过这三个框个人理解肯定存在局限性和不足的地方希望各位大佬指正
参考看了很多感觉就这三篇算是干货比较多的
前端框架模式的变迁
一篇文章了解架构模式MVC/MVP/MVVM
MVCMVP 和 MVVM 的图示
