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. UNIX环境高级编程——标准I/O库函数和Unbuffered I/O函数

    以写文件为例,C标准I/O库函数(printf(3) .putchar(3) .fputs(3) )与系统调用write(2) 的关 系如下图所示. 库函数与系统调用的层次关系 open .read ...

  2. oracle ebs应用产品安全性-安全性规则

    定义: 通过为段指定包括下限值与上限值的值范围,可以定义安全性规则要素.安全性规则要素适用于包括在指定值范围内的所有段值. 可以将每个安全性规则要素标识为"包括"或"排除 ...

  3. Java进阶(二十六)公司项目开发知识点回顾

    公司项目开发知识点回顾 前言 "拿来主义"在某些时候并不是最佳选择,尤其是当自己遇到问题的时候,毫无头绪. 在一次实验过程中,需要实现数据库的CRUD操作.由于之前项目开发过程中, ...

  4. ECMAScript 6之变量的解构赋值

    1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...

  5. mybatis 配置 log4j 日志

    mybatis 配置 log4j 日志 使用Mybatis的时候,可能需要输出(主要是指sql,参数,结果)日志,查看执行的SQL语句,以便调试,查找问题. 测试Java类中需要加入代码: stati ...

  6. 海量数据挖掘MMDS week1: MapReduce

    http://blog.csdn.net/pipisorry/article/details/48443533 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...

  7. 关于精灵帧(Sprite Frame)的尺寸大小

    一个对象的精灵帧(Sprite Frame)有若干关于大小的尺寸. 比较容易混淆,这里记录下来区别: CCSpriteFrame *spriteFrame = self.spriteFrame; CG ...

  8. AngularJS进阶(二)AngularJS路由问题解决

    AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...

  9. LeetCode之“散列表”:Isomorphic Strings

    题目链接 题目要求: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic i ...

  10. RedHat系列软件管理(第二版) --源码包安装

    RedHat系列软件管理 --源码包安装 源码包特点: 拥有广泛的平台支持性,可以装在所有的类UNIX操作系统上,不用考虑CPU架构. 灵活性,可以在安装过程中指定特有的选项. 定制度非常高,可以自己 ...