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