技术栈

主页 > 移动开发 >

Flux Pattern

Flux是Facebook提出的一种新的架构模式。一个Flux架构一般分为4个部分:

  • View:视图层(界面)
  • Action:视图层发出的消息或事件,如点击按钮
  • Dispatcher:派发器,用来接受Actions、执行回调函数
  • Store:数据层,用来存放应用状态,一旦发生变动,就要通知Views更新界面


执行流程

  •  用户操作(访问)View
  • View发出用户的Action给Dispatcher
  • Dispatcher接收到Action,通知Store更新数据(比如更新Store里checkbox的选中状态)
  • Store更新后,通知View进行界面刷新
  • View收到通知后,更新界面。


看个例子:

       现在有一个菜单叫MenuView 和一个目内容页叫ContentView,对应存储菜单数据的叫MenuStore、存储内容页数据的叫ContentStore,一个分发器Dispatcher、定义了两个动作叫MenuAction和ContentAction。我们现在模拟菜单的点击(itemClicked)看看数据是如何流转的,最后又是如何更新在界面上的。

先来看看涉及类的类图:

java代码:

/**
 * 
 * Flux is the application architecture that Facebook uses for building client-side web
 * applications. Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with
 * a React view, the view propagates an action through a central dispatcher, to the various stores
 * that hold the application's data and business logic, which updates all of the views that are
 * affected.
 * <p>
 * This example has two views: menu and content. They represent typical main menu and content area
 * of a web page. When menu item is clicked it triggers events through the dispatcher. The events
 * are received and handled by the stores updating their data as needed. The stores then notify the
 * views that they should rerender themselves.
 * <p>
 * http://facebook.github.io/flux/docs/overview.html
 *
 */
public class App {

  /**
   * Program entry point
   * 
   * @param args command line args
   */
  public static void main(String[] args) {

    // initialize and wire the system
    MenuStore menuStore = new MenuStore();
    Dispatcher.getInstance().registerStore(menuStore);
    ContentStore contentStore = new ContentStore();
    Dispatcher.getInstance().registerStore(contentStore);
    MenuView menuView = new MenuView();
    menuStore.registerView(menuView);
    ContentView contentView = new ContentView();
    contentStore.registerView(contentView);

    // render initial view
    menuView.render();
    contentView.render();

    // user clicks another menu item
    // this triggers action dispatching and eventually causes views to render with new content
    menuView.itemClicked(MenuItem.COMPANY);
  }
}
/**
 * 
 * Views define the representation of data.
 *
 */
public interface View {

  void storeChanged(Store store);

  void render();
}
/**
 * 
 * MenuView is a concrete view.
 *
 */
public class MenuView implements View {

  private static final Logger LOGGER = LoggerFactory.getLogger(MenuView.class);

  private MenuItem selected = MenuItem.HOME;

  @Override
  public void storeChanged(Store store) {
    MenuStore menuStore = (MenuStore) store;
    selected = menuStore.getSelected();
    render();
  }

  @Override
  public void render() {
    for (MenuItem item : MenuItem.values()) {
      if (selected.equals(item)) {
        LOGGER.info("* {}", item);
      } else {
        LOGGER.info(item.toString());
      }
    }
  }

  public void itemClicked(MenuItem item) {
    Dispatcher.getInstance().menuItemSelected(item);
  }
}
/**
 * 
 * ContentView is a concrete view.
 *
 */
public class ContentView implements View {

  private static final Logger LOGGER = LoggerFactory.getLogger(ContentView.class);

  private Content content = Content.PRODUCTS;

  @Override
  public void storeChanged(Store store) {
    ContentStore contentStore = (ContentStore) store;
    content = contentStore.getContent();
    render();
  }

  @Override
  public void render() {
    LOGGER.info(content.toString());
  }
}
/**
 * 
 * Store is a data model.
 *
 */
public abstract class Store {

  private List<View> views = new LinkedList<>();

  public abstract void onAction(Action action);

  public void registerView(View view) {
    views.add(view);
  }

  protected void notifyChange() {
    views.stream().forEach(view -> view.storeChanged(this));
  }
}
/**
 * 
 * MenuStore is a concrete store.
 *
 */
public class MenuStore extends Store {

  private MenuItem selected = MenuItem.HOME;

  @Override
  public void onAction(Action action) {
    if (action.getType().equals(ActionType.MENU_ITEM_SELECTED)) {
      MenuAction menuAction = (MenuAction) action;
      selected = menuAction.getMenuItem();
      notifyChange();
    }
  }

  public MenuItem getSelected() {
    return selected;
  }
}
/**
 * 
 * ContentStore is a concrete store.
 *
 */
public class ContentStore extends Store {

  private Content content = Content.PRODUCTS;

  @Override
  public void onAction(Action action) {
    if (action.getType().equals(ActionType.CONTENT_CHANGED)) {
      ContentAction contentAction = (ContentAction) action;
      content = contentAction.getContent();
      notifyChange();
    }
  }

  public Content getContent() {
    return content;
  }
}
/**
 * 
 * Action is the data payload dispatched to the stores when something happens.
 *
 */
public abstract class Action {

  private ActionType type;

  public Action(ActionType type) {
    this.type = type;
  }

  public ActionType getType() {
    return type;
  }
}
/**
 * 
 * MenuAction is a concrete action.
 *
 */
public class MenuAction extends Action {

  private MenuItem menuItem;

  public MenuAction(MenuItem menuItem) {
    super(ActionType.MENU_ITEM_SELECTED);
    this.menuItem = menuItem;
  }

  public MenuItem getMenuItem() {
    return menuItem;
  }
}
/**
 * 
 * ContentAction is a concrete action.
 *
 */
public class ContentAction extends Action {

  private Content content;

  public ContentAction(Content content) {
    super(ActionType.CONTENT_CHANGED);
    this.content = content;
  }

  public Content getContent() {
    return content;
  }
}
/**
 * 
 * Menu items.
 *
 */
public enum MenuItem {

  HOME("Home"), PRODUCTS("Products"), COMPANY("Company");

  private String title;

  MenuItem(String title) {
    this.title = title;
  }

  @Override
  public String toString() {
    return title;
  }
}
/**
 * 
 * Content items.
 *
 */
public enum Content {

  PRODUCTS("Products - This page lists the company's products."), COMPANY(
      "Company - This page displays information about the company.");

  private String title;

  private Content(String title) {
    this.title = title;
  }

  @Override
  public String toString() {
    return title;
  }
}

App.java中最后一行就是模拟的用户点击选择菜单的操作。

责任编辑:admin  二维码分享:
本文标签:
点击我更换图片

评论列表