Bobril II Bobflux应用程序体系结构

分享于 

9分钟阅读

Web开发

  繁體

介绍

的文章中,我们已经了解了如何通过bobril创建页面( 查看网站应用程序的一部分)。 在本文中,我们将学习如何通过 bobflux 添加应用程序逻辑。

背景

Bobflux是一个基于流量和 redux redux的纯功能前端应用程序体系结构。 它是由 Karel Steinmetz ( 通用软件技术中的软件开发人员) 编写的。

bobflux生命周期可以由以下图片描述:

bobflux lifecycle

  • 应用程序有一些状态
  • 根据这里状态呈现视图
  • 视图用操作创建者创建的处理程序,以为代价的操作
  • 操作更改状态

有关更多信息,请参见项目页

开始吧

我们将创建一个简单的TODO应用程序。 首先,我们需要在计算机上准备 bobril。 按照上篇文章中的步骤执行构建安装。

现在你可以再次启动一个新项目,或者使用 bobril-build github知识库中的预定义框架 simpleApp:

下面的示例将使用它。

将bobflux添加到应用程序

simpleApp 文件夹的root 中运行以下命令:

npm i
npm i bobflux --save
bb

状态

首先,我们需要准备应用程序的状态,它的游标和创建默认状态的函数。

要定义状态,请添加文件 src/状态。ts,包含以下内容:

import * as flux from 'bobflux';exportinterface ITodoAppState extends flux.IState {
 todos: string[];
 todoName: string;
}exportconst todoAppCursor: flux.ICursor<ITodoAppState> = {
 key: ''};exportfunction createDefaultTodoAppState(): ITodoAppState {
 return {
 todos: [],
 todoName: '' };
}

状态是存储应用程序数据的地方。 状态和上下文的区别在于上下文只存储组件本身所需的数据,而应用程序的其余部分则不关心这些数据。 节的组件是否折叠或者不是( 当你不需要从外部管理它时),是 比如的信息。
我们将需要存储todos应用程序列表和当前编写的todo名称,因此必须为这些数据定义 ITodoAppState

Cursor Cursor将路径定义为应用状态的状态。 对于示例,我们只使用 root 应用程序游标,因此 todoAppCursor.key 中的路径是空的。

为了获得最佳的bobflux性能优势,建议在实际应用中定义尽可能多的特定游标。 这意味着 比如 要创建如下的游标:

exportconst todoNameCursor: flux.ICursor<ITodoAppState> = {
 key: 'todoName'};

为了简单起见,我们的示例只使用 root todoAppCursor

现在,我们需要初始化bobflux并向它提供应用程序状态,因此更改 /app。ts 如下所示:

import * as b from 'bobril';import * as flux from 'bobflux';import * as todoState from './state';import { mainPage } from './mainPage';
flux.bootstrap(todoState.createDefaultTodoAppState());
b.routes(
 b.route({ handler: mainPage })
);

现在,我们已经准备好了可以通过调用操作修改的应用程序状态。

操作

操作由游标定义的特定子状态上的处理程序更改状态。 在todo示例,我们将需要执行两个操作:

  • 根据文本框值更改待办事项的当前名称
  • 将写入的待办事项添加到to列表中

因此,我们将添加文件 src/actions/changeTodoName.ts:

import * as flux from 'bobflux';import { ITodoAppState, todoAppCursor } from '../state';exportconst changeTodoName =
 flux.createAction(todoAppCursor, (state: ITodoAppState, todoName: string): ITodoAppState => {
 if (todoName === state.todoName)
 return state;
 return flux.shallowCopy(state, copy => { copy.todoName = todoName; });
 });exportdefault changeTodoName;

和 src/actions/addTodo.ts:

import * as flux from 'bobflux';import { ITodoAppState, todoAppCursor} from '../state';exportconst addTodo = flux.createAction(todoAppCursor, (state: ITodoAppState): ITodoAppState => {
 if (!state.todoName || state.todoName.trim().length === 0)
 return state;
 return flux.shallowCopy(state, copy => {
 copy.todos = [...state.todos, state.todoName];
 copy.todoName = '';
 });
});exportdefault addTodo;

changeTodoName 操作由bobflux中的函数 createAction 定义,它接受将改变的状态的光标,并将使用的处理程序。

在处理程序的开头是一个检查是否要更改某些内容。

  • 如果没有,那么我们将返回状态的原始实例。
  • 如果是,那么我们将创建状态的浅表副本并返回修改后的副本。

Bobflux遵循不变的原则,以保持最佳性能。 它比较输入状态和输出状态,如果它不同,它调用 b.invalidate 来呈现视图。 必须注意复制的对象属性。 如果在 addTodo 操作中有一些referencial对象像 array,那么必须复制它。

用bobflux编写页面

现在,我们已经准备好在todo应用程序的页面上使用一切。 因此,让我们将 /mainpage。ts 更改为如下所示:

import * as b from 'bobril';import * as flux from 'bobflux';import { todoAppCursor } from './state';import { changeTodoName } from './actions/changeTodoName';import { addTodo } from './actions/addTodo';import { button } from './components/button';import { textbox } from './components/textbox';import { p } from './components/paragraph';import { h1 } from './components/header';exportconst mainPage = b.createComponent({
 render(_ctx: b.IBobrilCtx, me: b.IBobrilNode): void {
 const state = flux.getState(todoAppCursor);
 me.children = [
 h1({}, 'TODO'),
 p({}, [
 textbox({ value: state.todoName, onChange: newValue => changeTodoName(newValue) }),
 button({ title: 'ADD', onClick: () => addTodo() })
 ]),
 state.todos.map(item => p({}, item)),
 p({}, `Count: ${state.todos.length}`)
 ];
 }
});exportdefault mainPage;

组件定义不是本文的主题,因此你可以在附加的源代码中使用定义。

可以看到页通过定义的来解析当前应用程序状态。 可以这样做,因为bobflux在每次更改状态时都启动页面的呈现。

onChangeonClick 回调中,textbox 和b utton 组件使用定义的操作,因此来自视图的用户交互启动操作调用。

最后,render 函数的末尾是映射到 'p' 标签的映射 array,带有todo名称。

现在,我们可以在浏览器中打开应用程序并查看它是如何工作的。 是的,就是这么简单。

要调试状态历史记录,还可以尝试bobflux监视器( 请参见项目页或者示例)。

Bobflux还包含一些性能助手,如createRouteComponent到optimalize呈现组件或者在上下文中呈现状态。

要获得更多信息,请参见项目github页面:

https://github.com/karelsteinmetz/bobflux

历史记录

  • 2017-02-01 ( bobril-build@0.59.2.bobril@5.2.)
  • 2016-11-04修订版
  • 2016-05-29添加新的编码标准
  • 1 根据生成改为 simpleApp
  • 2015-11-15为bobflux版创建文章

相关文章