flux沉思录:面向store和通信机制的前端框架
一、综述
Flux 被用来描述“单向”的数据流,且包含某些特殊的事件和监听器。
响应式编程是一种面向数据流和变化传播的编程范式
flux是响应式编程的一种?
Flux 在本质上采用了模型-视图-控制器 (MVC) 的结构,但引入了很高的复杂性。
https://www.ibm.com/developerworks/cn/web/wa-manage-state-with-redux-p1-david-geary/?mhq=使用%20Redux%20管理状态
二、store与model:
store相当于其它平台中的纯数据model;
或者java中的bean;
store在flux中处于中心节点的位置;
三、Flux架构中的结点:
事件源(包含UI)、store、UI组件;
四、flux中的通信机制
1、由事件源到store的通信机制;
1)通信信道:
var AppDispatcher = require('../dispatcher/AppDispatcher')
2)发送端表示层:将事件解释为通信数据并发送
var ButtonActions = {
addNewItem: function (text) {
AppDispatcher.dispatch({
actionType: 'ADD_NEW_ITEM',
text: text
});
},
};
3)接收端表示层:将通信数据解释为具体信息和操作
AppDispatcher.register(function (action) {
switch(action.actionType) {
case 'ADD_NEW_ITEM':
ListStore.addNewItemHandler(action.text);
ListStore.emitChange();
break;
default:
// no op
}
})
4)通信数据的格式:Action
actionType: 'ADD_NEW_ITEM',
text: text
5)表示层将通信信道和通信的端点进行了连接:事件源-信道-store;
2、由store到UI的通信机制;
1)EventEmitter.prototype提供了变化的订阅和发布的机制;
ListStore继承了EventEmitter.prototype,因此就能使用ListStore.on()和ListStore.emit(),来监听和触发事件了。
2)通信的信道即为EventEmitter.prototype,它提供的两个端点接口即位ListStore.emit(),ListStore.on();
3)通信的数据为store;
4)通信的端点为store和UI组件;
5)不需要表示层;
http://www.ruanyifeng.com/blog/2016/01/flux.html
Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework
android
flux沉思录:面向store和通信机制的前端框架的更多相关文章
- OOD沉思录 --- 面向动作与面向对象 --- 避免全能类
面向过程的软件开发通过非常集中化的控制机制来分解功能,在程序设计中表现就是大量的条件判断,深层次的循环嵌套等. 这种模式下,我们可以通过分析方法的参数,局部变量及其访问的全局变量来得到方法对数据的依赖 ...
- ios Aspects面向切面沉思录—面向结构编程—面向修改记录编程—面向运行时结构编程—元编程?
1.将主功能看成一个巨大的结构: 2.将切面注入的交叉业务看成是一组结构修改的注册:目标对象+方法是修改的键值: 3.Aspects引擎是修改的执行者.记录者.和维护者: 4.函数和方法是它操作和面对 ...
- OOD沉思录 --- 面向动作与面向对象 --- 避免泛滥成灾的类
3.7 从设计中取出不需要的类 只有Get/Set方法的类不算是一个必要的类,Get/Set方法也不算是有意义的行为.这种类降级为属性更加合适. 3.8 去除系统外部的类 如果一个类只调用系统领域的方 ...
- redux沉思录:基于flux、状态管理、函数式编程的前端状态管理框架
基于flux和reduce的通信和状态管理机制; 和数据库管理系统一样,redux是一个状态管理系统(或机制). const store = createStore( reducer, compose ...
- Binder通信机制介绍
1.Binder通信机制介绍 这篇文章会先对比Binder机制与Linux的通信机制的差别,了解为什么Android会另起炉灶,采用Binder.接着,会根据 Binder的机制,去理解什么是Serv ...
- .Net中Remoting通信机制简单实例
.Net中Remoting通信机制 前言: 本程序例子实现一个简单的Remoting通信案例 本程序采用语言:c# 编译工具:vs2013工程文件 编译环境:.net 4.0 程序模块: Test测试 ...
- .Net中Remoting通信机制
Remoting通信机制 Remoting介绍 主要元素 通道类型 激活方式 对象定义 Remoting介绍 什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式. 从微软的产品角度 ...
- 【单页应用之通信机制】view之间应该如何通信
前言 在单页应用中,view与view之间的通信机制一直是一个重点,因为单页应用的所有操作以及状态管理全部发生在一个页面上 没有很好的组织的话很容易就乱了,就算表面上看起来没有问题,事实上会有各种隐忧 ...
- Android多线程通信机制
掌握Android的多线程通信机制,我们首先应该掌握Android中进程与线程是什么. 1. 进程 在Android中,一个应用程序就是一个独立的进程(应用运行在一个独立的环境中,可以避免其他应用程序 ...
随机推荐
- 你不知道的js——数组 join
你可能对使用数组的 join 方法已经轻车熟路,但你也许不知道: 10.If element0 is undefined or null, let R be the empty String; oth ...
- HDU校赛 | 2019 Multi-University Training Contest 3
2019 Multi-University Training Contest 3 http://acm.hdu.edu.cn/contests/contest_show.php?cid=850 100 ...
- FusionInsight大数据开发---Redis应用开发
Redis应用开发 要求: 了解Redis应用场景 掌握Redis二次开发环境搭建 掌握Redis业务开发 Redis简介 Redis是一个基于网络的,高性能key-value内存数据库 Redis根 ...
- Entity Framework Core今日所得:避免 IEnumerable 以及 IQueryable 陷阱
避免 IEnumerable 以及 IQueryable 陷阱: IEnumerable示用Linq会先去数据库查询所有记录,然后再条件查询. IQueryable接口派生自IEnumerable,但 ...
- C#安装和卸载windowsService的bat指令
只需新建2个文本文档,将2个指令分别复制进去,再将txt格式改为bat格式,以管理员身份运行 安装指令 %SystemRoot%\Microsoft.NET\Framework\v4.0.30319\ ...
- C# Linq 使用总结
隐式类型匿名类型自动属性初始化器委托泛型泛型委托匿名方法Lambda表达式扩展方法迭代器LINQ System.Linq var arr = new[] { "c", " ...
- Bootstrap4 glyphicon 移除图标 glyphicon fonts-faces 解决方案
bootrap3是支持的图标 ,4不支持 4已经移除了 收费图标,取而代之建议使用其他的,比如 https://octicons.github.com/ 和http://fontawesome.io/ ...
- python基础05--深浅copy, set,bytes
1.1 深浅 copy 1. = 赋值操作, lis1=[1,2,3] list2 = list1 list1.append(4) 则list1,list2都变 赋值都指向同一个地址,改变一个 ...
- vue条形码生成插件vue-barcode
更详细的请查阅官方文档 https://github.com/lindell/vue-barcode vue-barcode是JsBarcode的一个简单包装.所以在使用时的配置属性需要在JsBarc ...
- Android源码分析(四)-----Android源码编译及刷机步骤
一 : 获取源码: 每个公司服务器地址不同,以如下源码地址为例: http://10.1.14.6/android/Qualcomm/msm89xx/branches/msm89xx svn环境执行: ...