在 React 工程中利用 Mota 编写面向对象的业务模型

React 是一个「视图层」的 UI 框架，以常见的 MVC 来讲 React 仅是 View，而我们在编写应用时，通常还需要关注更加重要的 model，对于 React 来讲，我们常常需要一个「状态管理」库。然而，目前大多数针对 React 的状态管理库都是「强依赖」过多的侵入本应该独立的业务模型中，导致「业务逻辑」对应的代码并不能轻易在其它地方重用，往往这些框架还具有「强排它性」，但是「业务模型」应该是没有过多依赖，应该是无关框架的，它应该随时可以被用在任何合适的 JavaScript 环境中，使用 mota 你可以用原生的普通的 JavaScript 代码编写你的「业务模型」，并让你的「业务模型」在不同框架、不同运行环境下重用更为容易。

mota 是一个主张「面向对象」的、支持「双向绑定」的 React 应用辅助库，基于 mota 你可以用纯 JavaScript 为应用编写完全面向对象的「业务模型」，并轻易的将「业务模型」关联到 React 应用中。

<a href="http://houfeng.net/dn-template-mota/example/">在线 TodoList 示例</a>

通过 npm 安装，如下

或通过 <code>dawn</code> 脚手脚加创建工程，如下

一个 <code>mota</code> 工程的通常结构如下

在 mota 中「模型」可以是由一个 <code>class</code> 或普通的的 <code>Object</code>，整个「业务模型层」会由多个 <code>class</code> 和多个 <code>Object</code> 组成，而编写模型所需要的知识就是 JavaScript 固有的面向对象编程的知识。

如下示例通过编写一个名为 <code>User</code> 的 <code>class</code> 创建了一个「用户模型」

也可以是一个 <code>Object</code>，通常这个模型需要是「单例」时，可采用这种方式，如下

在「业务模型」编写完成后，可以通过 <code>@model</code> 将某个「类」或「类的实例」关联到指定组件，关联后便可以在组件中使用 <code>this.model</code> 访问「模型的成员变量或方法」了，mota 还会自动「收集组件依赖」，在组件「依赖的模型数据」发生变化时，自动响应变化并「驱动组件重新渲染」，如下

值得注意的是，在使用 <code>@model</code> 时如果传入的是一个 <code>class</code> 最终每个组件实例都会自动创建一个 <code>独立的实例</code>，这样带来的好处是「当一个页面中有同一个组件的多个实例时，不会相互影响」。

在 React 中通常会将应用折分为多个组件重用它们，并在用时传递给它「属性」，mota 提供了将「组件属性」映射到「模型数据」的能力，基于 <code>model</code> 编程会让「视图层」更单一，专注于 UI 的呈现，，如下

上边的代码通过 <code>mapping</code> 将 <code>Demo</code> 这个组件的 <code>value</code> 属性映射到了 <code>model.value</code> 上，在组件的属性 <code>value</code> 发生变化时，会自动同步到 <code>model.value</code> 中。

通过一个 map 进行映射，还可以让「组件属性」和「模型的成员」使用不同名称，如下:

上边的代码，将组件 demo 的 <code>content</code> 属性映射到了 <code>model.value</code> 上。

mota 中提供了一个 <code>autorun</code> 函数，可用于装饰 React 组件的成员方法，被装饰的「成员方法」将会在组件挂载后自动执行一次，mota 将「收集方法中依赖的模型数据」，在依赖的模型数据发生变化时会「自动重新执行」对应的组件方法。

示例

上边的示例代码中，组件在被挂载后将会自动执行 <code>test</code> 方法，同时 mota 会发现方法中依赖了 <code>model.name</code>，那么，在 <code>model.name</code> 发生变化时，就会重新执行 <code>test</code> 方法。

mota 中提供了一个 <code>watch</code> 函数，可用于装饰 React 组件的成员方法，<code>watch</code> 可以指定要观察的「模型数据」，在模型数据发变化时，就会自动执行「被装饰的组件方法」，<code>watch</code> 还可以像 <code>autorun</code> 一样自动执行一次，但它和 <code>autorun</code> 还是不尽相同，主要有如下区别

<code>autorun</code> 会自动收集依赖，而 <code>watch</code> 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据

<code>watch</code> 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。

<code>autorun</code> 依赖的是「模型数据」本身，而 <code>watch</code> 依赖的是「计算函数」每次的「计算结果」

上边的代码，通过 <code>watch</code> 装饰了 <code>test</code> 方法，并指定了观察的模型数据 <code>model.name</code>，那么每当 <code>model.name</code> 发生变化时，都会打印 <code>name 发生了变化</code>.

<code>watch</code> 是否重新执行，取决于 <code>watch</code> 的作为第一个参数传给它的「计算函数」的计算结果，每当依赖的模型数据发生变化时 <code>watch</code> 都会重执行计算函数，当计算结果有变化时，才会执行被装饰的「组件方法」，示例

有时，我们希望 <code>watch</code> 能首先自动执行一次，那么可通过向第二个参数传一个 <code>true</code> 声明这个 <code>watch</code> 要自动执行一次。

上边的 <code>test</code> 方法，将会在「组件挂载之后自动执行」，之后在 <code>model.name</code> 发生变化时也将自动重新执行。

不要惊诧，就是「双向绑定」。<code>mota</code> 主张「面向对象」，同样也不排斥「双向绑定」，使用 mota 能够实现类似 <code>ng</code> 或 <code>vue</code> 的绑定效果。还是前边小节中的模型，我们来稍微改动一下组件的代码

其中的「关键」就是 <code>@binding</code>，使用 <code>@binding</code> 后，组件便具备了「双向绑定」的能力，在 <code>jsx</code> 中便可以通过名为 <code>data-bind</code> 的自定义 <code>attribute</code> 进行绑定了，<code>data-bind</code> 的值是一个「绑定表达式字符串」，绑定表达式执行的 <code>scope</code> 是 <code>model</code> 而不是 <code>this</code>，也就是只能与 <code>模型的成员</code> 进行绑定。

会有一种情况是当要绑定的数据是一个循环变量时，「绑定表达式」写起会较麻烦也稍显长，比如

因为「绑定表达式」的执行 <code>scope</code> 默认是 <code>this.model</code>，以及「表达式是个字符串」，看一下 <code>userList[${index}].selected</code> 这并不友好，为此 mota 还提供了一个名为 <code>data-scope</code> 的 <code>attribute</code>，通过它能改变要绑定的 <code>scope</code>，参考如下示例

通过 <code>data-scope</code> 将 <code>input</code> 的绑定上下文对象声明为当前循环变量 <code>user</code>，这样就可以用 <code>data-bind</code> 直接绑定到对应 <code>user</code> 的属性上了。

所有的原生表单控件，比如「普通 input、checkbox、radio、textarea、select」都可以直接进行绑定。其中，「普通 input 和 textrea」比较简单，将一个字符类型的模型数据与控件绑定就行了，而对于「checkbox 和 radio」 有多种不同的绑定形式。

将「checkbox 或 radio」绑定到一个 <code>boolean</code> 值，此时会将 checkbox 或 radio 的 checked 属性和模型数据建立绑定，checked 反应了 <code>boolean</code> 变量的值，参考如下示例

如上示例通过 <code>this.model.selected</code> 就能拿到当前 checkbox 或 radio 的选中状态。

将 checkbox 绑定到一个「数组」，通常是多个 checkbox 绑定同一个数组变量上，此时和数据建立绑定的是 checkbox 的 value，数据中会包含当前选中的 checkbox 的 value，如下

如上示例，通过 <code>this.selected</code> 就能知道当前有哪些 checkbox 被选中了，并拿到所有选中的 value

将多个 radio 绑定我到一个「字符类型的变量」，此时和数据建立绑定的是 raido 的 value，因为 radio 是单选的，所以对应的数据是当前选中的 radio 的 value，如下

通过 <code>this.model.selected</code> 就能拿到当前选中的 radio 的 value

但是对于一些「组件库」中的「部分表单组件」不能直接绑定，因为 mota 并没有什么依据可以判断这是一个什么组件。所以 mota 提供了一个名为 <code>bindable</code> 的函数，用将任意组件包装成「可绑定组件」。

bindable 有两种个参数，用于分别指定「原始组件」和「包装选项」

关建是 <code>bindable</code> 需要的 <code>opts</code>，通过 <code>opts</code> 我们可以造诉 mota 如何绑定这个组件，<code>opts</code> 中有两个重要的成员，它的结构如下

所以，我们可以这样包装一个自定义文本输入框

对这种「value 不需要转换，change 能通过 event 或 event.target.value 拿到值」的组件，通过如上的代码就能完成包装了。

对于有 <code>onChange</code> 和 <code>value</code> 的这类文本输入组件，因为 opts 的默认值就是

所以，可以更简单，这样就行，

而对于 checkbox 和 radio 来讲，如上边讲到的它「根据不同的数据型有不同的绑定形式」，这就需要指定处理函数了，如下

通过 <code>prop</code> 的第二个值，能指定「属性处理函数」，event 的第二个值能指取「事件处理函数」，处理函数的 <code>ctx</code> 是个特殊的对象

<code>ctx.getValue</code> 能获取「当前绑定的模型数据」

<code>ctx.setValue</code> 能设置「当前绑定的模型数据」

上边是 <code>radio</code> 的配置，首先，在「属性处理函数」中通过绑定的「模型数据的类型」决定 <code>checked</code> 最终的状态是什么，并在函数中返回。再次，在「事件处理函数」中通过绑定的「模型数据的类型」决定将什么值回写到模型中。

通过「属性处理函数」和「事件处理函数」几乎就能将任意的自定义组件转换为「可绑定组件」了。

另外，对于常见的 <code>CheckBox</code> 和 <code>Radio</code> 类型的组件 mota 也提供了内建的 <code>opts</code> 配置支持，如果一个自定义组件拥有和「原生 checkbox 一致的属性和事件模型」，那边可以直接用简单的方式去包装，如下

好了，关于绑定就这些了。

<a href="http://houfeng.net/mota/#!/zh/guide/quick">快速开始</a>

<a href="http://houfeng.net/mota/#!/zh/guide/model">编写业务模型</a>

<a href="http://houfeng.net/mota/#!/zh/guide/mapping">将组件属性映射到模型</a>

<a href="http://houfeng.net/mota/#!/zh/guide/autorun">自执行函数</a>

<a href="http://houfeng.net/mota/#!/zh/guide/watch">监听模型变化</a>

<a href="http://houfeng.net/mota/#!/zh/guide/binding">将模型数据与表单绑定</a>

<a href="https://github.com/Houfeng/mota">开源地址</a>

<a href="https://github.com/Houfeng/mota/releases">版本发布日志</a>

<a href="https://tldrlegal.com/license/mit-license">MIT 开源协议</a>