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中,一个应用程序就是一个独立的进程(应用运行在一个独立的环境中,可以避免其他应用程序 ...
随机推荐
- Centos Docker 安装 Apache Guacamole
经常在ubuntu上折腾,偶尔在centos来也来玩一把吧 1.安装DOCKER cd /etc/yum.repos.d wget https://download.docker.com/linux/ ...
- golang 源码文件
Go源码文件分三个种类: 1)命令源码文件:如果一个源码文件被声明属于main代码包,且该文件代码中包含无参数声明和结果声明的main函数,则它就是命令源码文件.命令源码文件可以通过go run命令直 ...
- asp.net core 系列之Reponse caching 之 Response Caching Middleware(4)
这篇文章介绍 Response Caching Middleware . Response Caching Middleware in ASP.NET Core 通过在ASP.NET Core应用中 ...
- 【SQL】各取所需 | SQL JOIN连接查询各种用法总结
前面 在实际应用中,大多的查询都是需要多表连接查询的,但很多初学SQL的小伙伴总对各种JOIN有些迷糊.回想一下,初期很长一段时间,我常用的似乎也就是等值连接 WHERE 后面加等号,对各种JOIN也 ...
- 2019 东方财富网java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.东方财富网等公司offer,岗位是Java后端开发,因为发展原因最终选择去了东方财富网,入职一年时间了,也成为 ...
- 【转载】Jupyter Notebook 常用快捷键
原文:http://blog.csdn.net/lawme/article/details/51034543 Jupyter Notebook 有两种键盘输入模式.编辑模式,允许你往单元中键入代码或文 ...
- DOM创建节点
1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...
- 《JavaScript高级程序设计》笔记:新兴的API
requestAnimationFrame() 大多数电脑显示器的刷新频率60HZ,大概相当于每秒钟重绘60次.因此,最平滑动画的最佳循环间隔是1000ms/60,约等于17ms. mozReques ...
- Qt NetWork即时通讯网络聊天室(基于TCP)
本文使用QT的网络模块来创建一个网络聊天室程序,主要包括以下功能: 1.基于TCP的可靠连接(QTcpServer.QTcpSocket) 2.一个服务器,多个客户端 3.服务器接收到某个客户端的请求 ...
- 总结HTML5新增的标签及功能
https://my.oschina.net/chengkuan/blog/422306 标记意义及用法分析/示例 属性/属性值/描述 <article> 定义独立的内容,如论坛帖子.报纸 ...