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

React 前端之家
前端之家收集整理的这篇文章主要介绍了在 React 工程中利用 Mota 编写面向对象的业务模型，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

简述@H_403_5@

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

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

链接@H_403_5@

示例@H_403_5@

在线 TodoList 示例
(示例源码)

安装@H_403_5@

通过 npm 安装，如下

$ npm i mota --save

或通过 dawn 脚手脚加创建工程，如下

$ mkdir your_path
$ cd your_path
$ dn init -t mota
$ dn dev

需要先安装 dawn（Dawn 安装及使用文档）

工程结构@H_403_5@

一个 mota 工程的通常结构如下

.
├── README.md
├── package.json
└── src
    ├── assets
    │ ├── common.less
    │ ├── favicon.ico
    │ └── index.html
    ├── components
    │ ├── todoApp.js
    │ └── todoItem.js
    ├── index.js
    └── models
        ├── TodoItem.js
        ├── TodoList.js
        └── index.js

编写业务模型@H_403_5@

在你编写模型之前，先放下 React 也放下 mota，就用单纯的 JavaScript 去编写你的业务模型，或有一个或多个类、或就是几个 Object，依它们应有的、自然的关系去抽像就行了，业务模型不依赖于 UI、也不依赖于某个框架，它易于测试，你可以针对它做单元测试。它易于重用，你可以将它用在合适的地方。最后， mota 只是出场把它关联到 react。

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

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

export default class User {
  firstName = 'Jack';
  lastName = 'Hou';
  get fullName(){
    reutrn `${this.firstName} ${this.lastName}`;
  }
}

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

export default {
  firstName: 'Jack',lastName: 'Hou',get fullName(){
    reutrn `${this.firstName} ${this.lastName}`;
  }
};

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

import { model,binding } from 'mota';
import React from 'react';
import ReactDOM from 'react-dom';
import User from './models/user';

@model(User)
class App extends React.Component {

  onChange(field,event){
    this.model[field] = event.target.value;
  }

  render(){
    return <div>
      <p>{this.model.fullName}</p>
      <p>
        <input onChange={this.onChange.bind(this,'firstName')}/>
        <br/>
        <input onChange={this.onChange.bind(this,'lastName')}/>
      </p>
    </div>;
  }
}

ReactDOM.render(<App/>,mountNode);

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

属性映射@H_403_5@

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

@model({ value: 'demo' })
@mapping(['value'])
class Demo extends React.Component {
  render () {
    return <div>{this.model.value}</div>;
  }
}

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

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

@model({ value: 'demo' })
@mapping({ content: 'value' })
class Demo extends React.Component {
  render () {
    return <div>{this.model.value}</div>;
  }
}

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

自执行函数@H_403_5@

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

示例

import { Component } from 'react';
import { model,autorun } from 'mota';
import DemoModel from './models/demo';

@model(DemoModel)
export default Demo extends Component {

  @autorun
  test() {
    console.log(this.model.name);
  }

}

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

监听模型变化@H_403_5@

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

  • autorun 会自动收集依赖，而 watch 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据
  • watch 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。
  • autorun 依赖的是「模型数据」本身，而 watch 依赖的是「计算函数」每次的「计算结果」

示例

import { Component } from 'react';
import { model,autorun } from 'mota';
import DemoModel from './models/demo';

@model(DemoModel)
export default Demo extends Component {

  @watch(model=>model.name)
  test() {
    console.log('name 发生了变化');
  }

}

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

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

export default Demo extends Component {

  @watch(model=>model.name+model.age)
  test() {
    console.log('name 发生变化');
  }

}

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

export default Demo extends Component {

  @watch(model=>model.name,true)
  test() {
    console.log('name 发生变化');
  }

}

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

数据绑定@H_403_5@

基本用法

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

import { model,binding } from 'mota';
import React from 'react';
import ReactDOM from 'react-dom';
import User from './models/user';

@model(User)
@binding
class App extends React.Component {
  render(){
    const { fullName,firstName,popup } = this.model;
    return <div>
      <p>{fullName}</p>
      <p>
        <input data-bind="firstName"/>
        <button onClick={popup}> click me </button>
      </p>
    </div>;
  }
}
ReactDOM.render(<App/>,mountNode);

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

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

@model(userModel)
@binding
class App extends React.Component {
  render(){
    const { userList } = this.model;
    return <ul>
     {userList.map((user,index)=>(
       <li key={user.id}>
         <input type="checkobx" data-bind={`userList[${index}].selected`}>
         {user.name}
       </li>
     ))}
    </ul>;
  }
}

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

@model(userModel)
@binding
class App extends React.Component {
  render(){
    const { userList } = this.model;
    return <ul>
     {userList.map(user=>(
       <li key={user.id}>
         <input type="checkobx" data-scope={user} data-bind="selected">
         {user.name}
       </li>
     ))}
    </ul>;
  }
}

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

原生表单控件

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

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

@model({ selected:false })
@binding
class App extends React.Component {
  render(){
    return <div>
      <input type="checkBox" data-bind="selected"/>
      <input type="radio" data-bind="selected"/>
    </div>;
  }
}

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

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

@model({ selected:[] })
@binding
class App extends React.Component {
  render(){
    return <div>
      <input type="checkBox" data-bind="selected" value="1"/>
      <input type="checkBox" data-bind="selected" value="2"/>
    </div>;
  }
}

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

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

@model({ selected:'' })
@binding
class App extends React.Component {
  render(){
    return <div>
      <input type="radio" data-bind="selected" value="1"/>
      <input type="radio" data-bind="selected" value="2"/>
    </div>;
  }
}

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

自定义组件

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

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

//可以这样
const MyComponent = bindable(opts,Component);
//也可这样
const MyCompoent = bindable(Component,opts);

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

{
  value: ['value 对应的属性名'],event: ['value 改变的事件名']
}

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

const MyInput = bindable(Input,{
  value: ['value'],event: ['onChange']
});

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

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

{
  value: ['value'],event: ['onChange']
}

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

const MyInput = bindable(Input);

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

const radioOpts = {
  prop: ['checked',(ctx,props) => {
    const mValue = ctx.getValue();
    if (typeof mValue == 'boolean') {
      return !!mValue;
    } else {
      return mValue == props.value;
    }
  }],event: ['onChange',event) => {
    const { value,checked } = event.target;
    const mValue = ctx.getValue();
    if (typeof mValue == 'boolean') {
      ctx.setValue(checked);
    } else if (checked) ctx.setValue(value);
  }]
};

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

  • ctx.getValue 能获取「当前绑定的模型数据」
  • ctx.setValue 能设置「当前绑定的模型数据」

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

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

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

const MyCheckBox = bindable('checkBox',CheckBox);
const MyRadio = bindable('radio',Radio);

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

文档@H_403_5@ 原文链接：https://www.f2er.com/react/301963.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作