zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    msp430入门学习21--TA
    msp430入门学习20
    msp430入门学习17
    msp430入门学习16
    msp430入门学习15--时钟
    msp430入门学习14
    msp430入门学习13
    msp430入门学习12
    msp430入门学习11
    msp430入门学习10
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11005358.html
Copyright © 2011-2022 走看看