这篇文章放在“杂”栏目下面，说明会是一篇本文作者：唐霜，转载请注明出处。【未经授权禁止转载】不成体系的文章。我想谈一下如何在前端优雅【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。的建模。直入正题！
【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。前端建模包括两个层面的建模：业务领域建模【转载请注明来源】【本文首发于唐霜的博客】和交互领域建模。这两者基本上没有本质联系【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，但是在前端这个场景下，有的时候又有一些著作权归作者所有，禁止商业用途转载。【作者：唐霜】特殊的情况。我们来看看如何在这两个层面建原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】模。
【转载请注明来源】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net业务领域建模
简单讲，业务领域建模，就是把业务实体与其【本文首发于唐霜的博客】【版权所有，侵权必究】逻辑进行建模。在知乎有小伙伴留言说，前端【版权所有，侵权必究】【未经授权禁止转载】不怎么适合DDD，因为前端是贫血模型。但【作者：唐霜】原创内容，盗版必究。在我实际实践中，我更多是充血模型。业务模【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。型需要包含字段本身，以及复杂的业务逻辑。转载请注明出处：www.tangshuang.net【本文受版权保护】你可能会讲，业务逻辑会被放在后端，但是实本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。际上前端也要这个业务逻辑，比如当一个订单转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。的负责人是组织中的某个职位的角色时，需要【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。在订单推进过程中填写审核时间这个信息。那【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】么，在前端，必须去判断当前用户是否是该角【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。色，或者获得当前用户的某个权限。这个逻辑【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。是跑不掉的。
原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。最近，我升级了tyshemo，支持了装饰未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。器的方式进行meta的定义。现在，你可以本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】这样定义自己的模型：
【作者：唐霜】著作权归作者所有，禁止商业用途转载。import { Model, meta, state } from 'tyshemo'
class OrderModel extends Model {
@meta({
type: {
user_id: String,
},
})
master = null
@meta({
type: Number,
})
total_price = 0
@state()
role = 'member'
canFillDate() {
return this.role === 'admin'
}
}
通过@meta来装饰字段，通过@stat【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】e来装饰状态属性。这样撰写模型，会有更舒【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。服的感觉，而且可以更好的兼容typesc未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netript，避免以前使用static属性定原创内容，盗版必究。未经授权，禁止复制转载。义时，无法与typescript很好结合本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】的问题。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。简单讲，通过业务建模，我们得到了一些模型【本文首发于唐霜的博客】原创内容，盗版必究。，这些模型是独立的，自治的，在不被使用的【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。时候，它独立描述了该业务对象的各种字段及【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】其逻辑，但由于不在具体的业务场景中被使用本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，因此也只能表现有限的业务信息，它只能告本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。诉读代码的人“我有什么，能做什么”，而不【版权所有，侵权必究】【原创内容，转载请注明出处】能告诉“我做了什么”。只有使用这些模型的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。实例，放到具体的业务模块中，才能完成真正【本文受版权保护】【作者：唐霜】的模块编程。所以，单纯讲，业务建模虽然重【本文首发于唐霜的博客】未经授权，禁止复制转载。要且有用，但是如果不被适当的人使用，就会【本文受版权保护】本文作者：唐霜，转载请注明出处。非常混乱，毫无头绪。
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。建立业务模型，可以把有关需求文档中，有关转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。核心业务的东西分出一层。
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【本文受版权保护】交互领域建模
这是后端没有的东西。直白讲，交互领域建模【本文首发于唐霜的博客】【原创不易，请尊重版权】就是写类似Vue一样的View Mode著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。l，但是没有template那块。简单说转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，就是建立一个模型，考虑到将来在view本文版权归作者所有，未经授权不得转载。【转载请注明来源】层使用它，所以该模型的所有api，都是为【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】view设计的，主要目标，是和需求文档中本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】有关交互相关的描述一一对应。在交互模型中未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，实例化业务模型，把业务模型变成交互模型【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】内部的状态。当在view中实例化交互模型未经授权，禁止复制转载。【转载请注明来源】，就看不到业务模型了，view拿着交互模本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。型的接口进行渲染和事件回调。
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。我在nautil中提供了可用于建立交互模【版权所有，侵权必究】【原创不易，请尊重版权】型的一个体系。举个例子：
原创内容，盗版必究。【原创内容，转载请注明出处】【作者：唐霜】本文作者：唐霜，转载请注明出处。import { Component } from 'nautil'
import { SomeController } from './some.controller' // 写好的交互模型
class MyPage extends Component {
controller = new SomeController() // 实例化交互模型
SubmitButton = this.controller.turn((props) => {
const { someModel } = this.controller // 读取交互模型内的某个业务模型
const { total_price } = someModel // 读取业务字段值
return (
<button className={total_price > 100 ? 'sale-count' : undefined}>Submit</button>
)
})
render() {
const { SubmitButton } = this // 读取定义好的组件
}
}
上面这段代码中，SomeControll转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】er是一个交互模型，里面使用了另外一个S【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。omeModel业务模型。但是，对于vi原创内容，盗版必究。【版权所有，侵权必究】ew层而言，你不需要知道它是一个业务模型【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net，你只需要调用它即可。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。Nautil在controller中提供著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net了turn方法，用于把一个用到contr转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netoller的普通的组件转化为一个被con【本文受版权保护】【本文首发于唐霜的博客】troller控制的组件，当contro【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ller中某些特定信息发生变化时，这些组本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】件就会自动更新。
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】分层
前端代码分层管理，从代码量上，并不比铁板本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。一块的管理多多少，毕竟所有的代码，都来自本文作者：唐霜，转载请注明出处。【转载请注明来源】产品的需求描述。但是，分层管理所带来的灵未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net活性、可维护性是不可估量的。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net如果你写一个有很多块的页面的vue组件，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net你就会发现，你的这个组件会越来越多交织在本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net一起的代码，从一开始很容易理解，这几个状转载请注明出处：www.tangshuang.net【转载请注明来源】态和这几个方法是关于最顶上这一块的，但是【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。，随着页面其他块的交互代码的增多，你就会【关注微信公众号：wwwtangshuangnet】【作者：唐霜】发现，这个状态会在哪块用？这个方法会在什转载请注明出处：www.tangshuang.net【未经授权禁止转载】么情况下调？能不能删？可不可以改？都需要【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】上下反复读代码来确认。
【作者：唐霜】【原创内容，转载请注明出处】而如果你采取代码分层，你会先针对业务本身【本文受版权保护】【本文受版权保护】的实体进行建模，然后对业务中的交互进行建【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】模，最后才是view层的编写。此时，vi【原创内容，转载请注明出处】【原创内容，转载请注明出处】ew层的代码会清晰很多，因为它不再去管理【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net属于业务的逻辑，而更多的是用和回调。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】依赖
在view层，我们用vue或react来转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】写，我更多使用react，因为react【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。没有使用Proxy或defineProp著作权归作者所有，禁止商业用途转载。【转载请注明来源】erty，可以使得我们建模时，使用更多魔【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net法。但是，有些时候，由于view层的特殊【本文首发于唐霜的博客】【原创不易，请尊重版权】机制，导致我们如果完全脱离框架进行建模时原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。，不得不提供一些多余的接口，来帮助和vi本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】ew进行依赖绑定。
【转载请注明来源】【本文首发于唐霜的博客】【转载请注明来源】【版权所有，侵权必究】以我工作的项目为例，我们使用angula【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netrjs作为主体框架，如果我单纯使用ESM【原创内容，转载请注明出处】【本文受版权保护】odule的模块，就没有办法直接使用$r转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。ootScope等这种angularjs【未经授权禁止转载】原创内容，盗版必究。内置的服务，但是如果我提供一个angul转载请注明出处：www.tangshuang.net【作者：唐霜】ar factory，就会牺牲模型的可移【版权所有，侵权必究】【本文首发于唐霜的博客】植性，为之后跨平台复用带来问题。所以，n原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】autil中提供了controller.【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】turn这个方法来实现模型层和视图层的连著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】接，简单说就是在框架层面调用forceU本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netpdate来实现重新渲染。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】
