flux沉思录:面向store和通信机制的前端框架

2023-05-30,,

一、综述

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和通信机制的前端框架的相关教程结束。

《flux沉思录:面向store和通信机制的前端框架.doc》

下载本文的Word格式文档,以方便收藏与打印。