未加星标

Redux、Flux、Vuex

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
前言

这篇文章不会用具体的代码去阐述 redux 、 flux 或者 vuex ,因为我觉得它们所带来的更是一种编程思想。

前端进化和框架演变

在很久以前,前端没有 MVVM 的概念, MVVM 是对 MVC 细化的说法(个人觉得两者区别不大), MVC 的模式一直在后台使用,效果和优点都很明显。

后来前端工程师仿照 MVC 模式开发了很多框架出来: backbonejs 、 angularjs 、 emberjs 、 knockoutjs 等等。

再后来 nodejs 的崛起,出现了 reactjs 、 vuejs 、 avalonjs ,都是主打组件化,让数据来驱动视图,再配合像 grunt 和 webpack 前端工具更是让前端步入新的时代。

其实这里我想吐槽一下,前端从以前把注意力集中在布局和样式,转变成把精力投入到学习这些思想、工具、框架中,我做为一个前端工程师在这种过渡中觉得是一种力不从心(可能年龄大了, es6 普及后不知道还要了解多少新东西),虽然是一个把注意力从视图转到数据上的转变,但这过程其实要付出的挺多。

好,废话到此为止。

Redux思想

Redux 让你以一种新的方式思考开发应用个,这个方式是:状态从一个初始状态开始,被一系列动作序列改变,这种新方式是通往复杂Web应用的捷径。

这么一说,很多人一头雾水,啥意思?下面来个简单代码

var store = { state: { message: 'Hello!' }, actionA: function () { this.state.message = 'action A triggered' }, actionB: function () { this.state.message = 'action B triggered' } } //如果你想改变message的值,你可以调用actionA或者actionA去实现。

上面这段代码可以说就是 Redux 思想最简单的体现。

Flux

Flux 是Facebook用户建立客户端Web应用的前端架构, 它通过利用一个单向的数据流补充了 React 的组合视图组件,这更是一种模式而非正式框架,你能够无需许多新代码情况下立即开始使用 Flux

Flux 应用有三个主要部分: Dispatcher调度 、 存储Store 和 视图View (React 组件),这些不应该和MVC:Model-View-Controll(模型-视图-控制器)混淆,控制器在 Flux 应用中是存在的,但是他们是 controller-view(控制器-视图) ,视图通常在一个结构顶部,而这种结构是用来从 存储stroe 获得数据,然后将数据传递到自己的子结构们,此外, Action 创建者- Dispatcher 的帮助类的方法 -用于支持一个语义API,这个API是描述应用程序中所有变化的可能,通常可将它们看成是Flux更新循环的第四部分。

Flux 是以单向数据流方式支持 MVC ,当一个用户和 React 视图交互时,视图会将这个动作传播到一个中央 Dispatcher ,一直到各种存储,在那里保存着应用的数据和业务逻辑,这个使用 React 的声明式风格的过程是非常棒的,能够允许存储发送更新信息,而无需指定在状态之间如何切换视图。(传统方式更新状态后,会推出一个新的视图页面。)

Flux 最初是用于正确导出数据,比如如果我们要显示一系列消息的未读数字,而另外一个视图显示的是所有消息,其中未读的消息会高亮显示。这种情况使用 MVC 很难处理,将一个消息变为已读状态需要更新消息模型,然后再需要更新未读的计数模型(将未读模型数字减1,因为刚发生一个已读改变),这种依赖和级联更新经常发生在大型 MVC 应用,导致一个混乱的数据流编织和不可预知的结果。

控制器被存储反转控制:存储接受更新,适当地调节这些更新,而不是一致地依赖外部更新其数据,存储之外根本不知道它是如何管理领域数据的,这有助于实现一种清晰的分离关注。存储并没有直接的类似 setAsRead() 之类的方法,而是只有一个单一方式获取数据到其自成一体的世界中,这个方式就是回调,注册在 dispatcher 中的 callback 。

结构和数据流


Redux、Flux、Vuex

一个单向数据流是 Flux 模式的核心,上面示图应该是Flux程序员心中主要的模型图。 dispatcher 存储和视图是有着不同输入输出的独立节点, Action 动作是一个简单对象,只是包含新的数据和一个标识符类型的属性。

视图也许引起新的动作 Action ,这个动作作为用户交互的响应将在整个系统传播:


Redux、Flux、Vuex

所有通过 dispatcher 的数据流将作为一个集中式Hub,动作 Action 在一个action creator方法中被提供给 dispatcher ,这个动作通常来自于视图中用户的交互, dispatcher 然后调用存储已经注册其中的回调函数,分发 Action 动作到所有的存储,在它们注册的回调函数中,存储会响应每个和它保存的状态有关的每个动作 Action ,存储然后发射一个 change 改变的事件去提醒 controller-view (控制器-视图),更新到刚刚改变的新数据。controller-view监听这些事件,然后在一个事件处理器中从存储中获取数据,controller-view调用它们自己的"setState()"方法,这会触发视图的重新渲染,包括 DOM 组件树中所有更新

通过应用的数据流是一个方向,没有两边绑定(two-way bingding:Angular.js有此方式),应用状态在存储中维护,允许应用不同部分保持解耦,在存储之间发生依赖的地方,它们能够保持严格的层次关系(设计原则:尽量松耦合,无法回避的就变成树形层次结构),同步管理由dispatcher负责。

分享

说了那么多,重点还是上面两张图,知道了这个流程,就掌握了它的大概思想,如果你还是不懂,

这里分享个人认为比较好的文章:

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Redux、Flux、Vuex
本站链接:http://www.codesec.net/view/481266.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(35)