Flux是Facebook在现有MVC框架数据流动复杂,难以设计和维护大型的前端应用的情况下设计的一种新的数据架构协议。叫做协议是因为Flux本身就像MVC一样,规定了一种机制,但是Facebook提供了官方的实现,实际上目前Flux总共有多达十几种实现,其中的佼佼者就是Redux,这就是Flux和Redux的关系。
Flux为了使数据流看起来更加清晰,应用结构更加清晰,不像传统的MVC框架允许数据在model、view、controller的双向流动,提出了一个action->dispatcher->store->view的模型,并只允许从左到右的单向流动,不能反过来操作。
其中的action就是一个action对象,可以由view生成,dispatcher相当于一个管理中心,注册了action和store的操作之间的关系,action的派发将带来store的一个操作;store的操作最终通过观察者模式(事件监听机制)触发view 的更新。

实际上这个模型和我们用的ExtJS也比较像,ExtJS虽然是MVC框架,但我感觉主要的流动方向如下图所示:

view->controller->model->view的一个流动,只是额外多了controller->view的流动。
所以可以说Flux和MVC总体上有很多相似的地方,这是正常的,新的东西脱胎于老的东西,继承了其中的一些好的东西,但是Flux从上图可以看出最大的不同是MVC核心是Controller,但是Flux处在controller位置上的dispatcher算是一个调度中心,这两者的区别在于controller包含了项目几乎所有的逻辑和事件处理、网络请求等等工作,甚至可以直接反过来操作view(图中多出的一个箭头),但是dispatcher感觉更像承上启下的一个环节,不能直接操作数据,更不能直接反过来操作view,只是一个调度意义上的中心,具体的还需要继续在项目中使用来体会Flux,只是一点粗浅的认识,不足之处请指正!

Flux和ExtJS MVC框架的异同点介绍的更多相关文章

  1. mvc框架 与vuex的介绍

    应用级的状态集中放在store中: 改变状态的方式是提交mutations,这是个同步的事物: 异步逻辑应该封装在action中. const vuex_store = new Vuex.store( ...

  2. 产品前端重构(TypeScript、MVC框架设计)

    最近两周完成了对公司某一产品的前端重构,本文记录重构的主要思路及相关的设计内容. 公司期望把某一管理类信息系统从项目代码中抽取.重构为一个可复用的产品.该系统的前端是基于 ExtJs 5 进行构造的, ...

  3. Extjs MVC学习随笔01

    Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...

  4. ExtJS MVC学习手记 2

    开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个 ...

  5. ExtJS MVC学习手记 1

    开发环境: ExtJS4.2 eclipse indigo 开发目标  搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...

  6. Extjs MVC模式开发,循序渐进(一)

    本文讲述extjs mvc的Helloworld,tabPanel,event,页面布局layout等内容. 本页包含:MVC模式案例(一)~MVC模式案例(六),从搭建extjs mvc到点击按钮生 ...

  7. 开源:Taurus.MVC 框架

    为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...

  8. 编写自己的PHP MVC框架笔记

    1.MVC MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller). ...

  9. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:    收藏 +322 Node.js 是一个基于Chrome JavaScri ...

随机推荐

  1. android的PackageManagerService详解

    PackageManagerService主要是一个包的管理服务,在开机的时候会解析以前保存的一些安装包的相关数据,android运行过程中新安装的apk也会保存到PackageManagerServ ...

  2. 9.3、Libgdx手势检测

    (官网:www.libgdx.cn) 触摸屏在输入的基础上增加了手势检测,比如两个手指实现缩放,单击或双击屏幕,长按屏幕等. Libgdx提供了GestureDetector来帮助你检测以下手势: t ...

  3. Python进阶 函数式编程和面向对象编程等

    函数式编程 函数:function 函数式:functional,一种编程范式.函数式编程是一种抽象计算机的编程模式. 函数!= 函数式(如计算!=计算机) 如下是不同语言的抽象 层次不同 高阶函数: ...

  4. IE11 开启F12开发人员工具中的 始终从服务器刷新

    在进行页面脚本调试时,经常需要清除浏览器缓存来获取最新的脚本文件,IE11之前的浏览器版本我们可以按F12调出开发人员工具,在缓存选项中开启"始终从服务器中刷新"的设置后我们就不需 ...

  5. Xcode中通过删除原先版本的程序来复位App

    可以在Xcode菜单中点击 Product->Clean Build Folder (按住Option键,在windows键盘中是Alt键.) 此时Xcode将会从设备中删除(卸载uninsta ...

  6. 通过CSS显示垂直文本

    原文链接: CSS Vertical Text 原文日期: 2014年03月18日 翻译日期: 2014年3月22日 翻译人员: 铁锚 示例地址: http://davidwalsh.name/dem ...

  7. Java进阶(十九)利用正则表达式批处理含链接内容文档

    利用正则表达式批处理含链接内容文档 由于项目需求,自己需要将带有链接的标签去除,例如 <a href="/zhaoyao/17-66.html">头晕</a> ...

  8. Linux常用命令(第二版) --权限管理命令

    权限管理命令 1.chmod[change the permissions mode of a file] : /bin/chmod 语法: chmod [{ugo}{+-=}{rwx}] [文件或目 ...

  9. 服务端技术进阶(二)JBoss和tomcat的区别

    JBoss和tomcat的区别 注意JBoss和tomcat是不一样,JBoss是一个可伸缩的服务器平台,当你的EJB程序编制完成后,如果访问量增加,只要通过增加服务器硬件就可以实现多台服务器同时运算 ...

  10. LeetCode之“数学”:Reverse Integer && Reverse Bits

    1. Reverse Integer 题目链接 题目要求: Reverse digits of an integer. Example1: x = 123, return 321 Example2:  ...