TySheMo 开发手册

TySheMo 开发手册

使数据变化可预测,前后端数据耦合规范化

前言

适用版本:v10

本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】

TySheMo是为解决前端数据层问题而生原创内容,盗版必究。【版权所有,侵权必究】的模式库。TySheMo这个单词由Typ未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.nete Schema Modal三个单词缩写【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。而成。你可以使用TySheMo在前端代码转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。中完成数据类型和结构检查,在前端构建领域著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net模型。

原创内容,盗版必究。【本文首发于唐霜的博客】

和TypeScript不同,TySheM本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。o的类型检查是运行时的,而非编译时的,因著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】此是两个不同的工具。

【本文首发于唐霜的博客】原创内容,盗版必究。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。ang.net

如果你在开发一个业务系统,比如围绕某个具【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。体的销售、物流、物业、采购等等业务,那么【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。你很有可能需要tyshemo。它是为业务著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】系统而生的,简单说,这里指的业务系统,是本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。具有非常强业务属性,作为一个公司的全部或转载请注明出处:www.tangshuang.net【转载请注明来源】部分收益的来源,该业务在在线系统上进行操原创内容,盗版必究。原创内容,盗版必究。作时,不允许出错。之所以会开发tyshe【作者:唐霜】未经授权,禁止复制转载。mo,是因为我发现,现有的前端开发,在怎原创内容,盗版必究。原创内容,盗版必究。么维护数据的可靠性这一点上,极其匮乏。前转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。端应用由于数据的类型、格式、字段逻辑等原原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。因造成的bug数不胜数。大部分前端开发者【本文首发于唐霜的博客】【转载请注明来源】都没有认真考虑过前端数据层的问题,甚至,【原创不易,请尊重版权】【未经授权禁止转载】他们根本不知道应用开发还需要分层考虑。正【原创内容,转载请注明出处】【版权所有,侵权必究】是这一点,让我认真对待tyshemo这个原创内容,盗版必究。原创内容,盗版必究。库。

【版权所有】唐霜 www.tangshu【未经授权禁止转载】转载请注明出处:www.tangshuang.netang.net未经授权,禁止复制转载。转载请注明出处:www.tangshua【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】ng.net未经授权,禁止复制转载。

目前,tyshemo这个库,已经在腾讯内【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net多个业务系统中在使用,随着需求的增多,我本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】会在现有的基础上持续迭代更新。

转载请注明出处:www.tangshua未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ng.net【本文受版权保护】本文作者:唐霜,转载请注明出处。【转载请注明来源】

概念

由于它是一个模式库,在设计时,我从前端领未经授权,禁止复制转载。【本文首发于唐霜的博客】域模型的实际声明模式出发,创建了一些概念【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。。只有掌握这些概念之后,你才能更好的使用本文版权归作者所有,未经授权不得转载。【本文受版权保护】这个库。

【转载请注明来源】【未经授权禁止转载】本文作者:唐霜,转载请注明出处。

这些概念包括:原型、规则、类型、元、模式【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net、模型。

【原创内容,转载请注明出处】【访问 www.tangshuang.n【转载请注明来源】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】

原型

原型(Prototype)是用来描述数据【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】的原子属性或特征方式。什么是“原子属性”【版权所有,侵权必究】【未经授权禁止转载】,就是作为一个数据,在计算机中,它是怎么【转载请注明来源】【本文受版权保护】被对待的,即一个变量是如何对待的,以什么本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。方式存储和运算它。

本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。

举一个例子,我们在代码中常会写 var a = 10 这样的代码,这时候,我们知道 a 是一【本文受版权保护】【作者:唐霜】个数值,在浏览器或其他环境中,js 引擎本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。会按照数值型数据对它进行存储和运算。但是未经授权,禁止复制转载。【未经授权禁止转载】,你怎么知道 a 是一个数值呢?我的意思【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】是,计算机怎么知道它是一个数值呢?这是由著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。 a 的原子属性决定的。一个 js 中的本文版权归作者所有,未经授权不得转载。【转载请注明来源】数值,它具备数值模型的特征,并且拥有数值【版权所有,侵权必究】未经授权,禁止复制转载。模型上的一些接口。数值可以进行精度求值,本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。可以进行小数位计算等,这些特定的特征使得【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】程序运行时,a 按照数值进行存储和运算。

【原创不易,请尊重版权】【转载请注明来源】

在 js 中,基本的数据类型有 6 种:【原创不易,请尊重版权】原创内容,盗版必究。number, string, bool【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】ean, null, undefined【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。, symbol. 未来 js 还会出现【作者:唐霜】本文作者:唐霜,转载请注明出处。 bigint,甚至还会有 bigflo【未经授权禁止转载】未经授权,禁止复制转载。at 这样的新数据类型。这些基础的数据类转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net型构成了 js 世界的原子属性。同样的道【版权所有,侵权必究】【作者:唐霜】理,在 TySheMo 的体系里,对一个著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net数据的原型进行判定,是一切的基础。问题在【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。于,怎么去判定一个原型呢?实际上,我们要找到一种方法,可以判断某个变量是否本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。符合某种原型,比如,我们常见的 typeof 就是一转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】种判断方法。但在 TySheMo 的体系【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】里,typeof 这种方法不适用。

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。

TySheMo 判定一个变量是否符合某个【原创内容,转载请注明出处】【原创内容,转载请注明出处】原型主要通过创建一个判定逻辑,返回 tr本文版权归作者所有,未经授权不得转载。【转载请注明来源】ue 或者 false。这个过程主要依托【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】 TySheMo 内建的接口,你可以使用本文作者:唐霜,转载请注明出处。【转载请注明来源】 js 的原生接口作为原型,也可以使用 【未经授权禁止转载】【版权所有,侵权必究】TySheMo 内置的原型。

未经授权,禁止复制转载。未经授权,禁止复制转载。

在学习下面的 Prototype 的使用【作者:唐霜】【本文首发于唐霜的博客】方法之后你可以创建自己的原型,用来作为数【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。据类型判定的原子属性判定方法。

【作者:唐霜】【本文受版权保护】【未经授权禁止转载】

规则

属性规则(Rule,本文简称“规则”)是原创内容,盗版必究。【转载请注明来源】在一个对象中,属性的存在形式和值的逻辑的【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。描述。属性规则用于对象属性的类型进行逻辑著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】判定,它的主要效果是根据对象本身的特征或未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。人为逻辑,决定当前属性是否必须存在,或者【本文首发于唐霜的博客】原创内容,盗版必究。当前属性应该以怎样的方式进行类型判定。也转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。因为规则是对属性的描述,所以,只有在 D【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ict、Tuple 中可以使用规则。

【本文首发于唐霜的博客】【本文首发于唐霜的博客】

在下文学习完 Rule 之后,你可以通过【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。它定义自己的任意规则。

本文作者:唐霜,转载请注明出处。【未经授权禁止转载】

类型

数据类型(Type,本文简称“类型”),【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】是指一个变量的本质特征,TySheMo 【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】中的类型关注数据结构,以及结构上每个节点本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net的类型。什么是“变量的本质特征”呢?就是【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】你需要知道这个变量,它的内在结构,以及嵌著作权归作者所有,禁止商业用途转载。【本文受版权保护】套在它结构节点上的更深层级的类型。

未经授权,禁止复制转载。转载请注明出处:www.tangshua原创内容,盗版必究。【作者:唐霜】ng.net【本文首发于唐霜的博客】

复杂类型由原型和规则构成。

【作者:唐霜】【原创内容,转载请注明出处】【本文首发于唐霜的博客】

例如,你称呼一个小男孩是一个“人”,这里【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net的“人”就是“小男孩”的本质特征,“人”本文作者:唐霜,转载请注明出处。【转载请注明来源】所拥有的结构体系,“小男孩”也应该拥有,【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。否则“小男孩”就不是“人”。明白这一点之【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。后,“人”拥有什么结构,“一个小男孩”就【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】会拥有什么结构,而且还会在“人”的共性上未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net多出一些特征。如果将“小男孩”视为一个变著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】量,那么“人”就是他的数据类型。他具备“【本文受版权保护】转载请注明出处:www.tangshuang.net人”的结构,以及人“可以说话”“可以走路【未经授权禁止转载】【原创不易,请尊重版权】”等方法。

【转载请注明来源】【转载请注明来源】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netang.net【原创内容,转载请注明出处】

从某种意义上讲,原型也是一种类型,但是由【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】于原型是原子层面的,它无法描述有结构的数【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。据,只能描述无结构的数据。举个例子,原型【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。可以指出某个变量应该是一个数组,但是,它转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。无法描述这个数据的内部结构,无法描述数组【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net内每个元素的类型。

【作者:唐霜】原创内容,盗版必究。

现在我们要反过来思考,作为“人”这个概念本文作者:唐霜,转载请注明出处。【作者:唐霜】,怎么去检测这个小男孩是不是“人”。一个【版权所有,侵权必究】【转载请注明来源】数据类型,如何去判别一个变量是不是该数据【未经授权禁止转载】【本文受版权保护】类型?在 TySheMo 中,我们需要借未经授权,禁止复制转载。【作者:唐霜】助“类型容器”来实现这个目的。数据类型本身无法用代码来【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】表述(这句话有误,因为我们定义一个 cl【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】ass 本质上就是在定义一个数据类型),【版权所有,侵权必究】【版权所有,侵权必究】但是,我们可以通过一个类型容器,使得数据转载请注明出处:www.tangshuang.net【作者:唐霜】类型是可以被表达的。而要得到这个类型容器本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】,就是 TySheMo 提供的 Type【作者:唐霜】【原创不易,请尊重版权】

著作权归作者所有,禁止商业用途转载。【本文受版权保护】

TySheMo 将抽象的“数据类型”进行【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】提炼,用“类型容器”这个可以用代码表达的著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】东西代替。

原创内容,盗版必究。【未经授权禁止转载】【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】
【未经授权禁止转载】【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。ngnet】【本文首发于唐霜的博客】

基于 Type,我们可以定义任意的数据类【原创不易,请尊重版权】原创内容,盗版必究。型。等你学了 Type 的使用方法之后,【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】你也可以定义自己的数据类型了。

【本文受版权保护】【关注微信公众号:wwwtangshua【未经授权禁止转载】【转载请注明来源】ngnet】【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netang.net

元(Meta)是指对一个字段的描述,即字【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。段的元数据。对应 SQL 数据库中字段结转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】构的各个配置项。Meta 是对模型字段的原创内容,盗版必究。【原创不易,请尊重版权】描述,tyshemo 目标是完成前端数据【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。建模,前端数据建模主要目标是解决在业务数转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net据进行展示和交互时,保持其准确性。所以,未经授权,禁止复制转载。【原创内容,转载请注明出处】在 tyshemo 中,我们用 Meta【作者:唐霜】【本文首发于唐霜的博客】 来描述一个字段,通过阅读这个 Meta本文版权归作者所有,未经授权不得转载。【作者:唐霜】,可以了解系统中该字段的各个方面。

【作者:唐霜】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【未经授权禁止转载】ang.net本文作者:唐霜,转载请注明出处。

元由多个属性(Attribute)组成,本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】每一个方面的描述就是一个 Attribu本文作者:唐霜,转载请注明出处。【未经授权禁止转载】te。类型是其中的一个属性,除了类型之外【原创不易,请尊重版权】原创内容,盗版必究。,还有字段默认值、是否必填、是否禁用、校【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】验逻辑等属性。下文会详细阐述 Meta 未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。的用法。

【原创不易,请尊重版权】转载请注明出处:www.tangshua【原创不易,请尊重版权】未经授权,禁止复制转载。ng.net

模式

模式(Schema)是指用于描述数据每个本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net属性的详细描述的集合。说的简单点,就是元本文作者:唐霜,转载请注明出处。【本文受版权保护】数据的集合,有点类似 sql 数据库的结【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】构描述,“包含了那些字段,每个字段的结构本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】是怎样的”。模式开始针对业务场景进行抽象【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】。在业务代码中,我们对一个对象的每一个属【作者:唐霜】本文版权归作者所有,未经授权不得转载。性(类似字段)进行描述(类似字段结构),原创内容,盗版必究。本文作者:唐霜,转载请注明出处。得到的一个完整的数据描述就是 Schem【未经授权禁止转载】转载请注明出处:www.tangshuang.neta。

【本文首发于唐霜的博客】转载请注明出处:www.tangshua【本文首发于唐霜的博客】【原创内容,转载请注明出处】ng.net

模式由多个元组成。

【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n未经授权,禁止复制转载。【原创不易,请尊重版权】et 获取更多精彩内容】【原创内容,转载请注明出处】

TySheMo 的模式是一个 js cl原创内容,盗版必究。【转载请注明来源】ass,可以用来定义一个对象数据包含了那【作者:唐霜】【原创不易,请尊重版权】些属性字段,每个属性的具体逻辑是怎样的。【本文受版权保护】本文版权归作者所有,未经授权不得转载。它并不关心实际的数据是怎样的,它关心的是未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net数据的抽象逻辑。当数据还不存在时,这个数未经授权,禁止复制转载。【原创不易,请尊重版权】据的每个字段要符合哪些逻辑。它相当于是一【未经授权禁止转载】【本文首发于唐霜的博客】个无状态的武器库,用来控制数据应该如何产【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。生、变化和读取。

【本文首发于唐霜的博客】【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】

在 TySheMo 中,通过 Schem本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】a 这个类来创建一个 schema 实例原创内容,盗版必究。【本文受版权保护】。一个 schema 实例是无状态的,它【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。不保存数据,它就像一个管道一样,接收数据【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。,并处理数据,输出一个完全符合校验逻辑,本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。不会报错的数据。通过下文对 Schema未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】 的学习,你可以快速掌握这项技术。

转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netng.net【转载请注明来源】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

模型

数据模型是一个数据管理器,它通过内部状态本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】管理着数据,在你需要使用的时候从中取出数转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。据,也可以更新数据。TySheMo 的 原创内容,盗版必究。【作者:唐霜】Model 是基于 Schema 的,也【本文受版权保护】本文版权归作者所有,未经授权不得转载。就是说,一个 Model 它必须保持着一原创内容,盗版必究。【作者:唐霜】个 schema 实例,用来作为模型提供【未经授权禁止转载】未经授权,禁止复制转载。数据的抽象结构的基础,通过 schema【转载请注明来源】【关注微信公众号:wwwtangshuangnet】,模型中的数据变化具有非常严格控制逻辑,转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】不会让用户随便就能对数据进行任意值的修改原创内容,盗版必究。【原创内容,转载请注明出处】和提交。除此之外,TySheMo Mod【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。el 还提供数据观察和响应能力,在调用模【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。型的更新方法之后,你所设置的观察回调会被原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】执行。

本文版权归作者所有,未经授权不得转载。【作者:唐霜】【作者:唐霜】未经授权,禁止复制转载。

Model 将会是和业务代码结合紧密的一转载请注明出处:www.tangshuang.net【作者:唐霜】个东西,因此,当我在设计 Model 时原创内容,盗版必究。转载请注明出处:www.tangshuang.net,所站在的角度就不再是纯粹的技术抽象层面未经授权,禁止复制转载。【本文首发于唐霜的博客】去思考问题,而是更多的要考虑实际的业务场【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】景。我们可以想象一种业务场景,就是从后端本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。拿到数据后,通过数据模型,将后端给的数据转载请注明出处:www.tangshuang.net【版权所有,侵权必究】回写到模型中,这样,我可以在不做任何多余本文作者:唐霜,转载请注明出处。【转载请注明来源】操作的情况下,让数据高可用。

【本文受版权保护】【未经授权禁止转载】

在设计时,我将一个模型设计为 Model本文版权归作者所有,未经授权不得转载。【本文受版权保护】 的继承类,也就是如下的写法:

转载请注明出处:www.tangshua【本文受版权保护】【本文首发于唐霜的博客】ng.net未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。
import { Model } from 'tyshemo'

class SomeModel extends Model {
  static some = {
    type: String,
    default: '',
  }
}

这样,创建一个模型之后,你需要实例化这个原创内容,盗版必究。【原创内容,转载请注明出处】模型为一个具体的对象,才能使用这个模型。原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net这主要是考虑到:1. 模型不应该在应用一著作权归作者所有,禁止商业用途转载。【作者:唐霜】运行时就消耗内存,而是在使用的时候再去实【原创内容,转载请注明出处】【原创不易,请尊重版权】例化出来。2. 同一个模型可能在同一个页【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。面需要实例化多个。

【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【本文首发于唐霜的博客】ngnet】本文作者:唐霜,转载请注明出处。【未经授权禁止转载】【本文首发于唐霜的博客】

这样的设计也是经过了实践验证的。这有利于转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。我们不断的去扩展模型,根据不同的业务场景本文作者:唐霜,转载请注明出处。【本文受版权保护】和实际的代码逻辑来进行控制。

【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。

总而言之,模型是业务中,对数据进行管理、本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】使用的对象。也是 TySheMo 的最顶【本文首发于唐霜的博客】【原创不易,请尊重版权】层设计。

未经授权,禁止复制转载。【本文受版权保护】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。

Store

在模型中,我们需要保管一个状态,用来存放原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。数据。而在 TySheMo 中,这个用来【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】保管数据的状态容器,就是 Store。S转载请注明出处:www.tangshuang.net【版权所有,侵权必究】tore 是基于响应式编程所开发的状态容【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。器,它是可观察的,开发者可以根据它内部的转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】状态变化来决定做什么事情。在 TyShe【作者:唐霜】【版权所有,侵权必究】Mo 中,每一个 Model 内部都有一【原创内容,转载请注明出处】未经授权,禁止复制转载。个 Store 的实例,用来管理和存储模【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。型上的数据。但是 Store 也可以脱离【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】 Model 单独使用,这样,作为开发者【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】,你可以根据自己的需要来使用 TyShe【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】Mo 中的 Store 管理自己的数据。

【本文受版权保护】【原创不易,请尊重版权】原创内容,盗版必究。

在后面的章节中,我们有详细的教程告诉你如【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。何使用 Store。

未经授权,禁止复制转载。原创内容,盗版必究。

小结

TySheMo 从微观的数据规则到宏观的【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。数据模型,给出了一个完成的前端数据建模的【转载请注明来源】本文版权归作者所有,未经授权不得转载。实现。Tyshemo 的知识体系,大致为【作者:唐霜】本文版权归作者所有,未经授权不得转载。一个层层递进的设计:

本文作者:唐霜,转载请注明出处。【作者:唐霜】未经授权,禁止复制转载。
                               Validator      Store ----+
                                   |                    |
Prototype ----+                    |                    |
              |                    |                    |
              +------ Type ------ Meta ----- Schema ----+--> Model
              |        |
Rule ---------+        |
                       |
                +------+------+
                |             |
                v             v
               Ty       Parser, Mocker

TySheMo 体系结构,它们处于数据的著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。:Prototype 原子级别;Rule【作者:唐霜】【本文受版权保护】 逻辑级别;Type 校验级别;Meta【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。 字段级别;Schema 结构级别;Mo【版权所有,侵权必究】【作者:唐霜】del 应用级别(包含了 Store 这未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。个响应式的状态管理工具)。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。ng.net【未经授权禁止转载】转载请注明出处:www.tangshua【未经授权禁止转载】【版权所有,侵权必究】ng.net

这样的设计不仅将每一个层级的概念提炼后仍【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】然具有可行性,同时还符合我们对建模的认知【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。。经过抽象之后的概念,完全脱离了业务逻辑【本文首发于唐霜的博客】原创内容,盗版必究。,形成一个可以脱离实际需求,完全服务于建转载请注明出处:www.tangshuang.net【本文受版权保护】模的 js 模块。这有利于在任何业务中,转载请注明出处:www.tangshuang.net【本文受版权保护】如果有需要,都可以把 TySheMo 拿【原创不易,请尊重版权】【原创内容,转载请注明出处】过来用,而不会受到限制。

【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。

快速入门

本章主要教会你如何快速的在你的项目中使用未经授权,禁止复制转载。【本文首发于唐霜的博客】 TySheMo。

本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【作者:唐霜】ang.net

安装

npm i tyshemo

引入到项目

tyshemo 这个 npm 包提供了多【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net种被引用的方式。

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【作者:唐霜】原创内容,盗版必究。ang.net本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】
 import { Model } from 'tyshemo' // webpack构建环境中使用
const { Model } = require('tyshemo') // nodejs等环境中使用

tyshemo 导出的默认方式是 com原创内容,盗版必究。【作者:唐霜】monjs,但是它的源码不是纯的 ES6【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。 源码,它引入了第三方 npm 库,所以未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。,不能直接在 ES6 系统中直接使用,需【原创不易,请尊重版权】【本文首发于唐霜的博客】要通过构建工具打包。

著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】ng.net

为了方便使用,tyshemo 输出一个完未经授权,禁止复制转载。【作者:唐霜】整的 bundle 文件,以 umd 规本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。范导出接口,可以直接在页面引入。

【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ang.net【原创不易,请尊重版权】
<script src="/node_modules/tyshemo/dist/tyshemo.min.js"></script>
<script>
const { Model } = window['tyshemo']
</script>

因为遵循 umd 规范,所以你可以在 r【原创内容,转载请注明出处】【本文首发于唐霜的博客】equire.js 等 amd 规范的框原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。架中使用 bundle 方式。另外,你可【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。以使用 dist/ty.min.js,如未经授权,禁止复制转载。【版权所有,侵权必究】果你只需要使用到类型系统,而不需要其他部【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】件的话。ty 是 TySheMo 的类型著作权归作者所有,禁止商业用途转载。【转载请注明来源】系统,你可以使用它完成类型系统的构建,以【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】及 tyshemo-service 的搭【关注微信公众号:wwwtangshuangnet】【本文受版权保护】配使用。

【访问 www.tangshuang.n未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【本文首发于唐霜的博客】

使用

TySheMo 有很多接口。我们在业务中【版权所有,侵权必究】【未经授权禁止转载】最常用的是两个,一个是利用类型校验能力,【版权所有,侵权必究】【未经授权禁止转载】对拿到的数据进行检验。另一个则是使用 M【作者:唐霜】【本文受版权保护】odel 在业务中管理数据,确保数据的可本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。靠性。

【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【作者:唐霜】ang.net著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】

数据类型校验

本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【本文受版权保护】
// person.type.js

import { Dict, List, Range } from 'tyshemo'

export PersonDict = new Dict({
  name: String,
  age: Number,
})

export PersonList = new List([PersonDict])

export PersonResponse = new Dict({
  code: new Range({ min: 0, max: 100000, minBound: true }),
  data: PersonList,
})
// 业务代码 person.service.js

import { PersonResponse } from './person.type.js'

export getPersons(params) {
  // 当从用户接口返回的数据不符合 PersonResponse 定义时,会报错
  return fetch('xxx', params).then(res => res.json()).then((data) => {
    PersonResponse.assert(data) // 当类型校验失败时,会抛出错误,你可以在 catch 中捕获该错误提示
    return data
  })
}

数据规整化

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】未经授权,禁止复制转载。未经授权,禁止复制转载。

在你的业务代码中使用后台返回的数据直接渲【本文受版权保护】著作权归作者所有,禁止商业用途转载。染?No!你应该建立自己的数据模型,该数【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】据模型拥有你渲染需要的字段,后台返回的数【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net据作为源输入到模型中,经过解析和调整,由【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】模型输出统一规格的数据,这样,未来你的接本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net口数据发生变化,你只需要在模型的解析方法【转载请注明来源】【本文首发于唐霜的博客】中进行调整,而无需修改渲染层面的数据来适本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】应。

【未经授权禁止转载】转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netng.net
import { Model } from 'tyshemo'

export class PersonModel extends Model {
  static name = {
    type: String,
    default: 'unknow',
  }
  static age = {
    type: Number,
    default: 0,
  }
}
export class PersonPage extends React.Component {
  constructor(props) {
    super(props)

    const person = new PersonModel()
    this.person = person

    // 监听 model 中的数据变化,当数据发生变化时,强制重新渲染组件
    person.watch('*', () => this.forceUpdate())
  }
  grow() {
    直接修改模型属性,由于其内部的响应式系统,会触发上面 watch 所绑定的回调函数,从而触发 this.forceUpdate,最终带来视图重绘
    this.person.age ++
  }
  render() {
    const { name, age } = this.person
    return (
      <div>
        <span>{name}</span>
        <span onClick={() => this.grow()}>{age}</span>
      </div>
    )
  }
}

在下文中,我会详细的去讲解 Model 本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】的接口,学习完之后,你就可以理解上面这段【原创内容,转载请注明出处】未经授权,禁止复制转载。代码是怎么工作的了。

【转载请注明来源】【本文首发于唐霜的博客】

原型

你可以使用 js 原生接口(标准库或特定【本文首发于唐霜的博客】【原创不易,请尊重版权】结构)作为原型:

本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net原创内容,盗版必究。ng.net著作权归作者所有,禁止商业用途转载。

上面的规则利用了 js 原生的能力来进行【作者:唐霜】原创内容,盗版必究。判断,虽然上面列举了不多,但是,任何一个实例对象,都可以用它的类来作为原本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net型,例如 let some = new 未经授权,禁止复制转载。【本文受版权保护】Some() 中 Some 作为 som【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】e 的原型。因此,基于这种内置逻辑,其实原型是有无转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。穷多的。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【未经授权禁止转载】【原创不易,请尊重版权】

使用 TySheMo 内置原型:

【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。

在具体写代码的时候,这些原型总是位于数据【转载请注明来源】【原创内容,转载请注明出处】校验链的最末端。

本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。

类型

本章详细讲解类型容器的使用。前文讲到,类【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】型容器是 TySheMo 对数据的结构类【本文受版权保护】【作者:唐霜】型的具体化,帮助开发者判断某个变量是否符【转载请注明来源】原创内容,盗版必究。合某种结构类型。

本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。

TySheMo 中内置了 6 种常见的结【版权所有,侵权必究】原创内容,盗版必究。构类型。Dict, List, Tupl【版权所有】唐霜 www.tangshuang.net【本文受版权保护】e, Enum, Range, Mapp著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。ing, 其中最常用的莫过于 Dict 原创内容,盗版必究。本文作者:唐霜,转载请注明出处。和 List。我们在 TySheMo 体【转载请注明来源】【本文受版权保护】系下使用类型容器,不是去定义某个数据结构【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。,而是用来判断某个变量是否符合某个结构类著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。型。

【未经授权禁止转载】转载请注明出处:www.tangshua原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】ng.net原创内容,盗版必究。未经授权,禁止复制转载。

TySheMo 中创建类型容器的基础是 【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。Type 类,Dict, List, T【作者:唐霜】未经授权,禁止复制转载。uple, Enum, Range, M未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netapping 全都是基于Type 扩展出【本文受版权保护】转载请注明出处:www.tangshuang.net来的。

【本文受版权保护】未经授权,禁止复制转载。

Type

作为类型容器的基础,Type 类创建基于【原创不易,请尊重版权】【本文首发于唐霜的博客】 Prototype 的类型容器。也就是未经授权,禁止复制转载。【版权所有,侵权必究】说,在进行实例化的时候,你应该传入 pr【原创内容,转载请注明出处】未经授权,禁止复制转载。ototype 作为参数。

【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。ang.net
const SomeType = new Type(String)

但是在实际编程的时候,你不会这样去做,我原创内容,盗版必究。【本文受版权保护】们 100% 只会用到 Dict, Li著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。st, Tuple, Enum, Ran【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netge, Mapping. 在这些扩展出来原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。的类型中,每个节点,可以直接接收 pro【未经授权禁止转载】【原创不易,请尊重版权】totype,而无需自己写一个 new 本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】Type。

【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】

得到一个类型容器之后,你就可以使用类型容未经授权,禁止复制转载。未经授权,禁止复制转载。器的方法进行类型校验了。下方的方法是 D【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ict, List, Tuple, En转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。um, Range, Mapping 都【转载请注明来源】【版权所有】唐霜 www.tangshuang.net具备的。

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【未经授权禁止转载】未经授权,禁止复制转载。ang.net转载请注明出处:www.tangshua【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。ng.net

assert

断言某个值是否符合当前类型。

转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【原创内容,转载请注明出处】ng.net【关注微信公众号:wwwtangshua【本文受版权保护】本文版权归作者所有,未经授权不得转载。ngnet】
import { Dict } from 'tyshemo'

const SomeDict = new Dict({
  name: String,
  age: Number,
})

SomeDict.assert({
  name: 'tomy',
  age: 10,
})

assert 方法不返回任何内容,但是它著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。会在断言失败时使用 throw 抛出错误本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。,中断程序执行。

【作者:唐霜】【本文受版权保护】【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。ngnet】【访问 www.tangshuang.n【作者:唐霜】【原创内容,转载请注明出处】et 获取更多精彩内容】

catch

catch 方法用于抓取类型校验过程中的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】错误,如果错误发生,返回错误(一个 Ty【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。peError 实例),如果没有错误,返【作者:唐霜】【转载请注明来源】回 null。

【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】【本文首发于唐霜的博客】
const error = SomeDict.catch({
  name: 'tomy',
  age: 10,
})

test

test 方法用于判定校验是否通过,通过【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】返回 true,不通过返回false。

转载请注明出处:www.tangshua未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ng.net原创内容,盗版必究。
const data = {
  name: 'some',
  age: 0,
}
if (SomeDict.test(data)) {
  // do something
}

track

track 方法返回一个 Promise转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】 实例,在校验过程中会抓取错误,如果错误本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。发生,会 reject 抛出错误,如果通【未经授权禁止转载】未经授权,禁止复制转载。过,则 resolve null。

【关注微信公众号:wwwtangshua【本文受版权保护】【版权所有】唐霜 www.tangshuang.netngnet】原创内容,盗版必究。
SomeDict.track({
  name: null,
}).catch(error => console.log(error))

trace

trace 方法和 track 方法的使著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net用是一模一样的,但是 trace 在进行著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net数据校验的时间点上不同。track 会在【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】你输入数据的时候进行校验,而 trace【未经授权禁止转载】【本文受版权保护】 会在一个异步执行中去校验数据,也就是延未经授权,禁止复制转载。【版权所有,侵权必究】后校验。这样做的好处是,在一些数据类型不转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net影响业务的场景中,你仅想知道数据是否符合本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。类型,而不想让校验过程阻塞界面渲染,就可【本文首发于唐霜的博客】【原创内容,转载请注明出处】以使用 trace 替代 track。

【版权所有,侵权必究】【未经授权禁止转载】

但是,你需要注意的是,由于是异步校验,如本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】果你在异步任务没有执行之前修改了传入的数【转载请注明来源】本文作者:唐霜,转载请注明出处。据,就会发生不可预测的问题,因为当异步校【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net验开始时,已经不是要校验原始数据了。

【作者:唐霜】【本文受版权保护】【版权所有,侵权必究】

Strict/strict/toBeStrict

严格模式主要是为规则设定的。在严格模式下【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net,某些规则会失效,例如 ifexist。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】严格模式会带来如下影响:

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。

其中 Strict 和 strict 是本文作者:唐霜,转载请注明出处。【未经授权禁止转载】属性,它们是完全一样的,只是为了给开发者【本文受版权保护】【本文受版权保护】提供不同大小写使用习惯的选择。

未经授权,禁止复制转载。【原创内容,转载请注明出处】【本文首发于唐霜的博客】
const SomeStrictDict = SomeDict.Strict

你会得到一个全新的 Dict 实例,这个【原创不易,请尊重版权】原创内容,盗版必究。实例复用了原来实例的配置参数,但是和原来【原创内容,转载请注明出处】【版权所有,侵权必究】的实例没有任何关系。

著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。

toBeStrict 是一个方法。调用它未经授权,禁止复制转载。【原创不易,请尊重版权】,你会将当前这个实例转化为一个严格模式的【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。实例。

本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【版权所有,侵权必究】
SomeDict.toBeStrict(true)

在使用时,应该小心。因为一般情况下,我们本文作者:唐霜,转载请注明出处。【转载请注明来源】经常复用定义好的类型容器,如果你在业务中【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】修改了严格模式,可能导致在另外的地方的校【转载请注明来源】未经授权,禁止复制转载。验会失败。一般仅仅在一次性使用一个类型容【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net器时,可能用到 toBeStrict.

【版权所有,侵权必究】【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。

Dict

Dict 用于校验字典结构,对应 js 【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。中的对象,和 python 中的 dic转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】t。在实例化时,你必须传入一个对象,这个著作权归作者所有,禁止商业用途转载。【作者:唐霜】对象规定了所有内部结构,你可以通过阅读内【未经授权禁止转载】【原创内容,转载请注明出处】部结构就可以了解后台 api 应该返回什原创内容,盗版必究。【本文首发于唐霜的博客】么数据给你。基于这种想法,TySheMo【本文受版权保护】【作者:唐霜】 可以作为前后端确定返回数据结构和类型的【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。一个协商工具。

转载请注明出处:www.tangshua【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】ng.net【关注微信公众号:wwwtangshua【原创不易,请尊重版权】【原创不易,请尊重版权】ngnet】本文作者:唐霜,转载请注明出处。
const SomeDict = new Dict({
  name: String,
  age: 10,
})
const OtherDict = new Dict({
  some: SomeDict, // 复用定义好的类型
  other: ifexist(SomeDict), // 使用规则
  total: ifnotmatch(Number, 0), // 通过 ifnotmatch 可以在类型校验失败时设置默认值
})

可以说,Dict 是我们用到最多的一种类【版权所有,侵权必究】【版权所有,侵权必究】型。它的使用场景及其广泛,而且有非常高的【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。复用需求,因此,在 Type 的基础上,转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】Dict 还拥有另外 2 个方法。

本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【版权所有,侵权必究】转载请注明出处:www.tangshuang.netang.net【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【作者:唐霜】ang.net转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】ng.net

extend

扩展当前 dict 得到一个新 dict【转载请注明来源】原创内容,盗版必究。。新 dict 天生拥有当前 dict 【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。的全部属性,但是你可以通过传入新的属性值原创内容,盗版必究。原创内容,盗版必究。进行覆盖,同时,你可以传入原本没有的属性转载请注明出处:www.tangshuang.net【版权所有,侵权必究】来添加属性。

【版权所有】唐霜 www.tangshu【本文受版权保护】【作者:唐霜】ang.net【作者:唐霜】
const Some2Dict = SomeDict.extend({
  age: Numeric, // 修改一个原有属性
  height: Number, // 添加一个新属性
})

extract

从当前 dict 中提炼部分属性得到一个本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。新 dict。新 dict 的属性一定是【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。原 dict 属性的子集。如果你需要该属【转载请注明来源】【作者:唐霜】性被提炼,只需要设置为 true 即可。

原创内容,盗版必究。未经授权,禁止复制转载。
const Some3Dict = Some2Dict.extract({
  // some3 将只有 name 和 height 这两个属性
  name: true,
  height: true,
})

你可以将 extract 和 exten原创内容,盗版必究。未经授权,禁止复制转载。d 连起来用,起到一定的效果。

【转载请注明来源】【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。
const Some4Dict = Some2Dict.extract({
  name: true,
  height: true,
}).extend({
  weight: Number,
})

这在一些必要的场景下非常有用,可以减少代【本文受版权保护】【作者:唐霜】码量,但同时又可以非常明晰的知道一个 d【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ict 都必须拥有那些校验规则。

【作者:唐霜】【访问 www.tangshuang.n【本文受版权保护】【未经授权禁止转载】et 获取更多精彩内容】【访问 www.tangshuang.n【转载请注明来源】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】

List

List 用于校验列表结构,对数组进行检转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】查,对应 python 中的 list。【未经授权禁止转载】【未经授权禁止转载】在 js 中,一个数组的内部结构是随意的【本文首发于唐霜的博客】【作者:唐霜】,但是,在真实的业务场景中,一个列表总是【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。要求内部元素是具备结构化特征的。一个列表原创内容,盗版必究。【转载请注明来源】中的元素,往往只会有一种类型,而不会像 【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】js 的数组中一样,任意类型都可以。

【转载请注明来源】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】ang.net【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】et 获取更多精彩内容】
const SomeList = new List([SomeDict])

这样规定之后,要求被检查的数组的每一个元转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。素必须符合 SomeDict 类型。

未经授权,禁止复制转载。【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ngnet】【本文受版权保护】【版权所有】唐霜 www.tangshu原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。ang.net
const SomeList = new List([SomeDict, Some2Dict])

这样规定之后,要求被检查的数组的元素,必未经授权,禁止复制转载。【原创内容,转载请注明出处】须是 SomeDict 或 Some2D【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ict 中任意一种类型,适合列表中有多种【未经授权禁止转载】未经授权,禁止复制转载。结构类型的时候用。

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ang.net

List 结构往往对应后台输出的数组,因【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。此,如果这个数组中一个元素都没有,也不会【作者:唐霜】【转载请注明来源】引发错误。因为正常业务中,数组中不存在数【未经授权禁止转载】未经授权,禁止复制转载。据是常有的事。

【关注微信公众号:wwwtangshua【未经授权禁止转载】【本文受版权保护】ngnet】转载请注明出处:www.tangshua【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ng.net

Tuple

Tuple 用于校验元组结构,对数组进行【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。检查,对应 python 中的 tupl未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】e。在业务场景中,我们有时需要一个数组的【原创不易,请尊重版权】【转载请注明来源】元素个数是确定的,每一个位置上元素的类型原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】也是确定的。例如对函数的参数列表进行检查【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】的时候,Tuple 则是最佳的选择。

【本文受版权保护】【本文受版权保护】
const SomeTupe = new Tuple([String, Number])
function some(...args) {
  SomeTuple.assert(args)
}

Tuple 的末尾元素可以使用 ifex【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netist,非末尾元素使用 ifexist 原创内容,盗版必究。【作者:唐霜】无意义。

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ang.net

Enum

Enum 表示枚举,被校验的值必须符合被【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】枚举的值中的某一个。在业务场景中,实际上原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。我们可能经常用到 Enum,因为我们要检【未经授权禁止转载】【原创内容,转载请注明出处】验的数据,经常只要符合两种类型的其中之一转载请注明出处:www.tangshuang.net原创内容,盗版必究。即可。

【作者:唐霜】本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【未经授权禁止转载】
const SomeEnum = new Enum([Number, Numeric]) // 数字或则数字形式的字符串都行

Range

Range 表示区间,被校验的数字必须在【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。规定的区间内。这个类型比较少用到。

【版权所有】唐霜 www.tangshu原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。
const SomePercent = new Range({
  min: 0,
  max: 100,
  minBound: true, // 是否包含最小值,默认 true
  maxBound: false, // 是否包含最大值,默认 true
})

Mapping

Mapping 表示映射关系表,可用于规转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。定结构单一的对象类型结构。例如:

原创内容,盗版必究。【作者:唐霜】
const SomeMapping = new Mapping({
  key: Numeric, // 属性名的类型
  value: Number, // 属性值的类型
})

可用于检查类似如下数据:

未经授权,禁止复制转载。【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【本文受版权保护】ngnet】【转载请注明来源】【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。ang.net
{
  201908: 12,
  201909: 20,
  201910: 19
}

这种 key-value 类型规律且单一【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。的对象,且最重要的是 key 是在规律性原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。变化的,可以用 Mapping 来检查。

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

规则

TySheMo 体系中的属性规则,仅适用【本文受版权保护】本文版权归作者所有,未经授权不得转载。于 Dict 和 Tuple。为什么呢?著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】只有 Dict 和 Tuple 中我们可【版权所有】唐霜 www.tangshuang.net【转载请注明来源】以确定属性,List 虽然也是数组,但是未经授权,禁止复制转载。【版权所有,侵权必究】它的元素个数是不定的,是一个弹性结构,无【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】法运用属性规则。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。

你必须在属性的位置上使用这些规则,而不能转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net直接传给 Type 构造器。

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netngnet】
const SomeDict = new Dict({
  some: ifexist(String),
})
const SomeTuple = new Tuple([
  Number,
  ifexist(String),
])

Tuple 相当于有确定的索引号的对象,【本文受版权保护】【原创不易,请尊重版权】因此,可以使用规则。但是在使用一些规则的原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net时候,要考虑它存在的意义,例如 ifex本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】ist 仅适用末尾的元素,非末尾元素使用【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】无意义。

著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【版权所有,侵权必究】

内置规则

TySheMo 的内置规则全部是函数,规未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】则函数一般接收原型、类型和规则作为参数。【原创不易,请尊重版权】原创内容,盗版必究。它们包含:

【版权所有,侵权必究】【本文受版权保护】原创内容,盗版必究。

lazy

异步规则。当一个类型需要异步加载的时候,【本文受版权保护】转载请注明出处:www.tangshuang.net可以使用该规则。它接收一个函数,用于返回【本文受版权保护】【转载请注明来源】最终的类型。在最终的类型返回之前,所有的【转载请注明来源】本文作者:唐霜,转载请注明出处。校验都会被直接通过。

【版权所有,侵权必究】【版权所有,侵权必究】【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】未经授权,禁止复制转载。
const SomeType = new Dict({
  some: lazy(fetchType), // 定义一个 fetchType 函数,用于从服务端抓取数据类型
})

在 fetchType 没有完成之前,s【未经授权禁止转载】【本文受版权保护】ome 属性相当于遵循 Any。fetc【原创内容,转载请注明出处】原创内容,盗版必究。hType也可以是一个同步函数,用于同步【本文受版权保护】【转载请注明来源】生成规则。

【作者:唐霜】【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。原创内容,盗版必究。ang.net【本文受版权保护】【版权所有】唐霜 www.tangshu【转载请注明来源】转载请注明出处:www.tangshuang.netang.net

shouldmatch

必须满足传入的类型,如果不满足,则会抛出【本文受版权保护】著作权归作者所有,禁止商业用途转载。传入的 message 作为错误信息。

【作者:唐霜】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。
const SomeType = new Dict({
  some: shouldmatch(String, '{keyPath} 必须是一个字符串'),
})

shouldnotmatch

和 shouldmatch 相反,检查时【原创内容,转载请注明出处】【原创不易,请尊重版权】,不能是传入的类型,如果符合传入的类型,【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】反而会抛出错误,并用传入的 messag转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。e 作为错误信息。

原创内容,盗版必究。转载请注明出处:www.tangshua【本文首发于唐霜的博客】【转载请注明来源】ng.net
const SomeType = new Dict({
  some: shouldnotmatch(String, '{keyPath} 不能是一个字符串'),
})

match

同时满足多条规则。match 接收一个数未经授权,禁止复制转载。【转载请注明来源】组,但比较常用的场景是搭配 should【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。match 和 shouldnotmat【未经授权禁止转载】转载请注明出处:www.tangshuang.netch 这两个规则来用。

【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【作者:唐霜】ang.net本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua【作者:唐霜】未经授权,禁止复制转载。ngnet】
const SomeType = new Dict({
  some: match([
    shouldmatch(String, '必须是一个字符串'),
    shouldmatch(Numeric, '必须是一个数字'),
  ]),
})

这样可以起到根据不同类型错误返回不同错误【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】提示的效果。

【版权所有,侵权必究】【关注微信公众号:wwwtangshua未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。ngnet】【版权所有,侵权必究】【本文首发于唐霜的博客】

determine

判定规则。用于根据不同的情况使用不同的规原创内容,盗版必究。【本文受版权保护】则。例如,你想先判定数据中是否存在某个字【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。段,如果存在的话,使用某个类型,如果不存【本文首发于唐霜的博客】【未经授权禁止转载】在的话使用另外一个类型。

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】
const SomeType = new Dict({
  some: determine(data => 'type' in data, String, Any),
})

它接收的参数为:

【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【本文受版权保护】et 获取更多精彩内容】【本文受版权保护】【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】【作者:唐霜】ang.net【原创内容,转载请注明出处】

ifexist

根据属性存在情况进行校验。当属性不存在时【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】,不进行任何校验。当属性存在时,必须符合【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】传入的类型。ifexist 是一个非常重未经授权,禁止复制转载。【转载请注明来源】要的规则,它可以让属性更加灵活。而且由于本文作者:唐霜,转载请注明出处。【本文受版权保护】规则本身是可以嵌套的,你还可以在 ife本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。xist 里面嵌套另外一个规则,例如 i本文版权归作者所有,未经授权不得转载。【转载请注明来源】fnotmatch。

【本文首发于唐霜的博客】【作者:唐霜】
const SomeType = new Dict({
  some: ifexist(String), // some 属性可以不存在,如果存在,必须是一个 String
})

ifnotmatch

如果被校验的属性不符合类型,则用传入的参本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】数作为默认值进行替代。

【关注微信公众号:wwwtangshua【本文受版权保护】本文作者:唐霜,转载请注明出处。ngnet】著作权归作者所有,禁止商业用途转载。【转载请注明来源】本文作者:唐霜,转载请注明出处。
const SomeType = new Dict({
  some: ifnotmatch(Number, 0), // 如果 some 属性值不是 Number,那么直接将 some 属性设置为 0
})

它的第二个参数可以是一个函数,如果是一个转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】函数的话,会在校验失败时,执行该函数,并【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】把该函数的返回结果作为默认值。

原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu原创内容,盗版必究。转载请注明出处:www.tangshuang.netang.net

ifmatch

和 ifnotmatch 相反,当接收到未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】到值和传入到类型一致时,第二个参数会被使著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。用。

【未经授权禁止转载】【版权所有】唐霜 www.tangshu【作者:唐霜】原创内容,盗版必究。ang.net

shouldexist

判定该属性是否必须存在。它接收一个函数用未经授权,禁止复制转载。【未经授权禁止转载】来进行判定如,如果返回 true,当被检【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net查的数据没有该属性,就会报错。如果返回 本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netfalse,当被检查的数据没有该属性,不原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。会报错。但无论返回 true 或 fal【原创内容,转载请注明出处】原创内容,盗版必究。se,只要该属性存在,都应该满足传入的第本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】二个参数的类型。该函数接收的参数和 de【转载请注明来源】【版权所有,侵权必究】termine 规律一致。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。
const SomeType = new Dict({
  some: shouldexist(data => !!data.should, String),
})

shouldnotexist

和 shuldexist 相反,当函数返【关注微信公众号:wwwtangshuangnet】【本文受版权保护】回 true 时,不允许该属性存在,当函【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】数返回 fasle 时,该属性可存在也可【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】不存在,存在时必须满足传入的类型。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【本文受版权保护】【访问 www.tangshuang.n【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】
const SomeType = new Dict({
  some: shouldnotexist(data => !!data.shouldnot, String),
})

这个规则有点绕,需要你在实践中多尝试。

【转载请注明来源】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net原创内容,盗版必究。ng.net【本文受版权保护】

instance

校验值是否为传入的类的实例。在 TySh【未经授权禁止转载】原创内容,盗版必究。eMo 中,类似 String, Boo本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】lean 这些系统自带的变量都被作为校验未经授权,禁止复制转载。【原创不易,请尊重版权】使用的原型去了。但是,如果真的想去校验一【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。个 new String(‘【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】xx’) 是否是 Strin【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。g 的实例时,就需要用到 instanc本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。e。

【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【关注微信公众号:wwwtangshua原创内容,盗版必究。未经授权,禁止复制转载。ngnet】
const SomeType = new Dict({
  some: instance(String),
})

equal

用于对对象等需要进行深度比较的值。

【转载请注明来源】【原创内容,转载请注明出处】【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netngnet】【本文首发于唐霜的博客】
const SomeType = new Dict({
  some: equal({ ok: true }),
})

nullable

允许被检查到值为 null。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。ng.net著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netang.net
const SomeType = dict({
  some: nullable(String), // null 或者 String
})

当 some 属性值为 null 时,不著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。会返回错误。

【本文受版权保护】转载请注明出处:www.tangshua【转载请注明来源】原创内容,盗版必究。ng.net原创内容,盗版必究。

lambda

用于对属性方法进行重写,以此让该方法拥有【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】参数和返回值校验的能力。lambda 规【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。则接收两个参数,第一个参数必须是一个 T【转载请注明来源】【原创不易,请尊重版权】uple 类型容器,用于对方法函数对传入本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net参数进行校验,第二个参数是用于对函数返回转载请注明出处:www.tangshuang.net【作者:唐霜】值进行校验的类型容器。

【版权所有,侵权必究】【作者:唐霜】未经授权,禁止复制转载。【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】ngnet】
const SomeTuple = new Tuple([Number, Number])
const SomeType = new Dict({
  do: lambda(SomeTuple, Number),
})

为了方便起见,我将它的第一个参数允许传入【转载请注明来源】【版权所有】唐霜 www.tangshuang.net一个数组,该数组会自动实例化为一个 Tu【本文受版权保护】未经授权,禁止复制转载。ple。

本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshua【作者:唐霜】本文版权归作者所有,未经授权不得转载。ngnet】
const SomeType = new Dict({ 
  do: lambda([Number, Number], Number), 
})

Rule

在学习了前面的所有内置规则之后,我们来学本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net习这些规则背后的 Rule 这个类。

原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】
const SomeRule = new Rule({
  name: 'Some',
  validate: v => v !== 0,
  message: 'value should not be 0.',
})

所有上述规则生成器函数的最后,都是返回一本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net个 Rule 的实例。因此,你实际上可以原创内容,盗版必究。【本文首发于唐霜的博客】使用这些 Rule 实例来做一些事。

【作者:唐霜】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netng.net【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netang.net

validate

validate 方法用于对数据进行校验原创内容,盗版必究。本文作者:唐霜,转载请注明出处。,并返回一个 error 或 null。

原创内容,盗版必究。【本文首发于唐霜的博客】

bind

bind 方法用于绑定一个函数,当 va转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】lidate 校验中返回了错误,这个函数【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。一定会执行,接收 error 实例。

【本文受版权保护】【原创内容,转载请注明出处】【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。

在一些规则中,例如 ifnotmatch【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】, ifmatch 中,数据会被校验和改【本文首发于唐霜的博客】【作者:唐霜】写。但是,如果你这个时候想要对被校验的原转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。始所抛出的错误进行监控时,可以使用 bi【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。nd 方法:

【本文受版权保护】本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。
const SomeRule = ifnotmatch(Number, 0)
const SomeType = new Dict({ some: SomeRule, })

SomeRule.bind(error => console.log(error))

这样,无论任何情况下,你都可以抓取到 S未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。omeRule 校验失败时抛出的错误。

本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】ng.net本文作者:唐霜,转载请注明出处。

unbind

解除 bind 的函数。

【本文首发于唐霜的博客】【本文受版权保护】原创内容,盗版必究。

Ty

Ty 是 TySheMo 中的类型系统的原创内容,盗版必究。【作者:唐霜】快捷集成工具,它让校验接口更接近我们的编【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net程直觉,而且,在我们写代码过程中,有的时【版权所有,侵权必究】【本文受版权保护】候你需要通过编辑器搜索功能,一次性搜索出本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。某些特定的校验逻辑,直接使用 Type 【作者:唐霜】【转载请注明来源】实例进行校验会让这种操作很麻烦,而如果有【本文首发于唐霜的博客】未经授权,禁止复制转载。一个基于 Ty 开头的标识,搜索就会方便本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net很多。

著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。ang.net
import {
  Ty,
  Numeric, // 获取原型
  Dict, // 获取类型
  ifexist, // 获取规则
} from 'tyshemo/cjs/ty'

上面是 tyshemo 类型系统的导出快未经授权,禁止复制转载。【原创内容,转载请注明出处】捷入口,通过 tyshemo/cjs/t著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。y.js 这个文件,你可以使用有关 ty【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。shemo 中定义的类型系统的所有功能。著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】另外,Ty 这个特殊接口,具有更令人喜欢著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。的方法可以使用。

【转载请注明来源】未经授权,禁止复制转载。【关注微信公众号:wwwtangshua【未经授权禁止转载】【原创内容,转载请注明出处】ngnet】
if (Ty.is(10).of(Number)) {
  // do something
}

Ty 上提供了如下的便捷方法。这些方法,【本文受版权保护】未经授权,禁止复制转载。大部分都是链式的,理解起来会比较舒服。

【原创内容,转载请注明出处】【本文受版权保护】

expect.to.be

类似于 assert 的功能。

【转载请注明来源】原创内容,盗版必究。【原创内容,转载请注明出处】未经授权,禁止复制转载。
Ty.expect(10).to.be(Number)

你也可以使用它的别名 expect.to原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】.match 这样看上去更符合词语的意思【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【作者:唐霜】ang.net本文作者:唐霜,转载请注明出处。
Ty.expect(10).to.match(Number)

两则之间仅仅是一个别名而已,作用完全相同原创内容,盗版必究。转载请注明出处:www.tangshuang.net

【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。

catch.by

类似于 type 实例的 catch 功【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】能。

【未经授权禁止转载】【本文首发于唐霜的博客】未经授权,禁止复制转载。
const error = Ty.catch(10).by(Numeric)

track.by

类似于 track 功能。

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【作者:唐霜】
Ty.track(10).by(Numeric).catch(error => console.log(error))

trace.by

Ty.tracc(10).by(Numeric).catch(error => console.log(error))

is.typeof

用于判断一个类型是否是某值的类型。

原创内容,盗版必究。【转载请注明来源】【未经授权禁止转载】
if (Ty.is(Number).typeof(10)) {
  ...
}

is.of

用于判断一个值是否符合一个类型。

本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】ng.net【未经授权禁止转载】【本文受版权保护】
if (Ty.is(10).of(Number)) {
  ...
}

decorate.with

这是一个高级功能,用于对 ES6+ 的 转载请注明出处:www.tangshuang.net原创内容,盗版必究。class 进行修饰。你需要了解“装饰器【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。”这种操作符之后再来使用。而且,就目前而【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】言,使用装饰器要求你的编译工具支持。

【转载请注明来源】【本文受版权保护】【作者:唐霜】

它支持对属性、方法的输入和输出进行装饰。

【原创不易,请尊重版权】【原创内容,转载请注明出处】未经授权,禁止复制转载。
@Ty.decorate.with(SomeDict) // 修饰 constructor
class Some {
  constructor(some) {
    this.data = some
  }
  
  @Ty.decorate.with(String) // 修饰属性
  // 当修改类实例的时候,会检查这个属性的类型
  name = ''

  @Ty.decorate.with([Number, Number], Number) // 修饰方法返回值
  // 对
  plus(a, b) {
    return a + b
  }
}

装饰器本身不会识别被装饰成员是属性还是方【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net法,只能靠开发者传入对应的格式来控制。对【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。于属性而言,只接收一个值,作为类型。而如本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】果是函数,一定是接收参数列表和返回值的类著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。型。

原创内容,盗版必究。【原创内容,转载请注明出处】【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。

除了用来对类进行装饰,还可以用来生成可监本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】测对象和函数。

【版权所有】唐霜 www.tangshu原创内容,盗版必究。【本文首发于唐霜的博客】ang.net著作权归作者所有,禁止商业用途转载。
const fn = Ty.decorate((a, b) => a + b).with([Number, Number], Number)

fn(1, 2) // ok
fn('1', '2') // throw error

const o = Ty.decorate({}).with({
  name: String,
  age: Number,
})

o.name = 'xxx' // ok
o.name = null // throw error

Ty.decorate 既是一个函数,也【本文首发于唐霜的博客】【转载请注明来源】是一个装饰器宿主。

【版权所有】唐霜 www.tangshu【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】ngnet】【本文受版权保护】【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【作者:唐霜】ngnet】

create

在某些情况下,你并不知道你应该创建一个 【原创内容,转载请注明出处】【本文首发于唐霜的博客】Dict 还是一个 List,Ty.cr本文版权归作者所有,未经授权不得转载。【作者:唐霜】eate 帮助你完成这个任务。

【作者:唐霜】未经授权,禁止复制转载。
const SomeType = Ty.create(unknown)

监听功能

Ty 提供一个监听错误的功能。在一些特殊【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。的情况下,而要获得监听能力,你必须实例化本文作者:唐霜,转载请注明出处。原创内容,盗版必究。一个 Ty 对象:

【本文首发于唐霜的博客】【作者:唐霜】【未经授权禁止转载】
const ty = new Ty()

此时,实例对象 ty 才拥有监听能力。

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】【未经授权禁止转载】

bind

绑定一个函数,用于在监听到错误发生时执行【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。。这个函数接收一个 Error 实例,即未经授权,禁止复制转载。【版权所有,侵权必究】错误发生时的错误实例。

转载请注明出处:www.tangshua【本文受版权保护】【版权所有】唐霜 www.tangshuang.netng.net本文作者:唐霜,转载请注明出处。【转载请注明来源】
const watch = error => record(error) // 创建一个函数,用于和你的监控系统对接,将错误信息记录到监控系统中
ty.bind(watch)

unbind

用于解绑一个监听函数。

【原创不易,请尊重版权】【本文首发于唐霜的博客】【作者:唐霜】著作权归作者所有,禁止商业用途转载。
ty.unbind(watch)

silent

是否开启安静模式。开启安静模式后,不会在本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】阻断程序运行,不在控制台输出错误。一旦开【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net启安静模式,Ty 中使用 throw 抛【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】出错误的地方将受到影响,例如 expec【版权所有,侵权必究】未经授权,禁止复制转载。t.to.be, track.by, t未经授权,禁止复制转载。原创内容,盗版必究。race.by。

著作权归作者所有,禁止商业用途转载。【作者:唐霜】【原创不易,请尊重版权】【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】et 获取更多精彩内容】
ty.silent(true)

一般来说,不建议开启安静模式,但是在监听未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】了错误的时候,你可以通过开启安静模式减少著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】报错。

本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ng.net

错误

当我们使用 TySheMo 的类型检查系【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。统去检查一个数据时,在检查到数据不符合类【转载请注明来源】转载请注明出处:www.tangshuang.net型结构时,会有错误抛出。这个错误 err【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netor 是一个错误实例,即 Error 的原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。实例。Type 的错误是一个 Error原创内容,盗版必究。原创内容,盗版必究。 的子集,具有特殊的属性。

【作者:唐霜】【本文首发于唐霜的博客】原创内容,盗版必究。

错误收集和展示

TySheMo 内部检查时会收集所有错误未经授权,禁止复制转载。原创内容,盗版必究。,而非遇到检查失败就立即停止后续检查。也【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】就是说,它是遍历整个被检查对象后才把错误【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net返回的。在返回的错误中,你可以通过打印错【原创内容,转载请注明出处】【转载请注明来源】误 message 查看所有错误。例如:

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。ang.net
const SomeType = dict({
  a: ifexist(tuple([
    new Enum([String, Boolean]),
    Number,
  ])),
  b: {
    title: String,
    count: Number,
  },
  c: shouldmatch(dict({
    name: String,
    age: Number,
  }), '{keyPath} 不是一个用户。'),
})
test(() => SomeType.assert({
  a: [1],
  b: 'null',
  c: null,
}))

TySheMo 抛出的错误将是一个包含了【原创不易,请尊重版权】【原创不易,请尊重版权】该对象所有错误的信息。比如上面这个校验,本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】会抛出如下的错误:

【转载请注明来源】【版权所有,侵权必究】【原创不易,请尊重版权】【原创不易,请尊重版权】

【未经授权禁止转载】【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。

它有4条信息,a[0], a[1], b【转载请注明来源】【关注微信公众号:wwwtangshuangnet】, c,告诉了你四个位置上具体是什么错误著作权归作者所有,禁止商业用途转载。【作者:唐霜】

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】ng.net【原创不易,请尊重版权】【转载请注明来源】【作者:唐霜】

错误信息模板

你可以看到,上面的错误信息,前 3 条使【关注微信公众号:wwwtangshuangnet】【作者:唐霜】用了内置的错误信息模板。你可以通过修改模【未经授权禁止转载】【原创内容,转载请注明出处】板来调整内置信息模板。

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。
import { TyError } from 'tyshemo'

TyError.defaultMessages = {
  ...TyError.defaultMessages,
  exception: '{keyPath} 位置错误。',
}

模板以键值对形式存在,包括如下:

【作者:唐霜】【访问 www.tangshuang.n【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】

在消息值里面,你可以使用字符串模板例如上【本文受版权保护】【版权所有,侵权必究】面示例代码里面的 {keyPath},可未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】以用到的有:

本文作者:唐霜,转载请注明出处。【本文受版权保护】未经授权,禁止复制转载。

错误信息序列化

当你的 should 或 receive【转载请注明来源】转载请注明出处:www.tangshuang.net 过长的适合,你阅读起来非常麻烦,TyS本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。heMo 提供了可以换行展示的能力,这样本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】可以方便你阅读,要开启这个功能,你只需要本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。

本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】未经授权,禁止复制转载。原创内容,盗版必究。
import { TyError } from 'tyshemo'

TyError.shouldBreakLongMessage = true

开启这个功能之后,你的消息里面的对象、数著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net组,会自动进行换行,这样可以方便你阅读,【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】可以更好的知道错误的详情。

【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】转载请注明出处:www.tangshua未经授权,禁止复制转载。【原创内容,转载请注明出处】ng.net

【作者:唐霜】【本文首发于唐霜的博客】【访问 www.tangshuang.n【作者:唐霜】【原创不易,请尊重版权】et 获取更多精彩内容】

你可以看到,开启之后,b 那条错误里面的未经授权,禁止复制转载。【未经授权禁止转载】对象换行了。

未经授权,禁止复制转载。【转载请注明来源】

错误信息脱敏

在一些系统中,你希望你收到的错误信息进行【转载请注明来源】【未经授权禁止转载】脱敏,而非把错误内容完整的展示出来。你需【作者:唐霜】本文作者:唐霜,转载请注明出处。要关闭对应的功能:

【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ang.net【原创内容,转载请注明出处】
import { TyError } from 'tyshemo'

TyError.shouldHideSensitiveData = true

关闭之后,最终打印出来的值会被脱敏。字符【未经授权禁止转载】【未经授权禁止转载】串显示为 “***̶【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】1; 数字显示为 ***。

【本文受版权保护】本文作者:唐霜,转载请注明出处。

错误信息格式化

针对单条错误,你希望对这一条错误信息进行【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。单独格式化。你可以通过 error.fo本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。rmat 方法实现。

原创内容,盗版必究。转载请注明出处:www.tangshua【版权所有,侵权必究】【版权所有,侵权必究】ng.net
const error = SomeType.catch(some)
error.format({ templates, jointag, shouldbreak, shouldusesensitive, keyPathPrefix })

注意:格式化之后,error 的 mes【作者:唐霜】【未经授权禁止转载】sage 被永久化转变。

著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。

为了方便快速格式化,不要传入那么多参数,本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。我提供了 error.trnaslate【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。 方法,只需要传入一个 message 未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。就可以替换掉内部的 message。

【原创内容,转载请注明出处】【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua【版权所有,侵权必究】【原创不易,请尊重版权】ngnet】

Parser

基于描述语言的类型解析器。

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】【转载请注明来源】

描述语言

Parser 是用以解析基于字符串描述的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net Type 构造器。它的目标是,一个类型【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】容器的配置,由服务端返回。它类似于一些描未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】述语言,用字符串描述类型结构。

【原创内容,转载请注明出处】原创内容,盗版必究。【转载请注明来源】【原创不易,请尊重版权】

例如,服务端返回了如下的 json 作为本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net类型结构描述:

【未经授权禁止转载】【本文受版权保护】【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】et 获取更多精彩内容】
{
  "__def__": [
    {
      "name": "book",
      "def": {
        "name": "string",
        "price": "float"
      }
    }
  ],
  "name": "string",
  "age": "number",
  "has_football": "?boolean",
  "sex": "0|1",
  "dot": "='xxx'",
  "belong": "?='animal'",
  "vioce": "!number",
  "num": "string,numeric",
  "parents": "[string,string]",
  "books": [
    {
      "name": "string",
      "age": "number"
    }
  ],
  "body": {
    "head": "boolean",
    "neck": "boolean"
  }
}

它完全是基于字符串的描述的。但是很明显,【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net你可以大致读懂它的描述内容。只是有些符号原创内容,盗版必究。【本文首发于唐霜的博客】代表什么意义,你还需要学一下而已。前端在【本文受版权保护】本文版权归作者所有,未经授权不得转载。拿到这样一段描述 json 之后,怎么把【原创内容,转载请注明出处】未经授权,禁止复制转载。它解析为一个类型容器呢?

【未经授权禁止转载】【本文受版权保护】【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】ngnet】
import Parser from 'tyshemo/cjs/parser'

const parser = new Parser()
const SomeType = parser.parse(json)

这样你就可以将描述文本转化为可运行的类型【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。容器。

【关注微信公众号:wwwtangshua原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netngnet】【本文首发于唐霜的博客】转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】ng.net

基本语法

以JSON文件的形式作为DSL文件。

【转载请注明来源】原创内容,盗版必究。【作者:唐霜】
{
  属性名:表达式,
}

以一个对象的形式约束接口返回的数据结构和【转载请注明来源】著作权归作者所有,禁止商业用途转载。节点上数据的类型。表达式可以包含如下内容【转载请注明来源】【版权所有】唐霜 www.tangshuang.net

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】ng.net【未经授权禁止转载】【本文首发于唐霜的博客】未经授权,禁止复制转载。

原始类型

{
  "name": "string", // name字段为string类型
  "age": "number" // age字段为number类型
}

所有的原始类型有如下:

著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【未经授权禁止转载】ngnet】【版权所有,侵权必究】
string: 字符串
string8: 长度不超过8的字符串
string16: 
string32: 
string64: 
string128: 
number: 数字
int: 整数
float: 小数
negative: 负数
positive: 正数
zero: 零
natural: 自然数
infinity: 数字,无限大/无限小
finity: 数字,有限数
nan: NaN,
boolean: true或false
null: 
undefined: 
none: null或undefined或nan
symbol: Symbol
function: Function
array: 不限制内部元素的数组
object: 不限制内部节点的对象
numeric: 数字形式的字符串
any: 
date: Date实例,注意,不是字符串形式的 '2021-01-22' 这种形式
promise: Promise实例
error: Error实例
regexp: RegExp实例

到具体项目中,可由前后端约定,在以上基础本文作者:唐霜,转载请注明出处。原创内容,盗版必究。类型基础上进行补充或覆盖。

本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】【本文首发于唐霜的博客】

复合类型

支持如下复合类型:

转载请注明出处:www.tangshua【转载请注明来源】原创内容,盗版必究。ng.net著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.n【转载请注明来源】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【作者:唐霜】ang.net
{
  "names": "string[]", // 字符串列表
  "ids": "[number]", // 数字列表
  "dogs": ["object"], // 对象列表
  "uids": "[string|number]", // 列表元素可以是字符串也可以是数字
  "files": [{ "filename": "string" }, { "fileName": "string" }], // 列表元素是字典类型,可以是两种类型中的一种

  "color": "'red'|'blue'|'yellow'", // 枚举,只能从red, blue, yellow这三个字符串中取一个
  "no.": "numeric|number", // 枚举,数字字符串或纯数字

  "user": "(number,string)", // 元组,代表固定个数的数组,比如用户信息,这里用 [12233, 'tommy'] 即 [uid, username] 的形式返回

  "info": { // 字典,其内部结构遵循相同语法
    "name": "string",
    "age": "number"
  },

  "data": "{numeric:number}", // 映射,键必须是数字字符串,而值必须是数字,在一些统计场景下常用到,例如 { 2000: 9, 2001: 40, 2002: 90, 2003: 140 }

  "range": "10<->20" // 数字区间,range字段的值必须 >=10 & <=20
}

逻辑类型

表示该字段和给定类型之间的关系,目前支持未经授权,禁止复制转载。【转载请注明来源】5种:

【版权所有】唐霜 www.tangshu【转载请注明来源】本文作者:唐霜,转载请注明出处。ang.net【访问 www.tangshuang.n原创内容,盗版必究。【原创不易,请尊重版权】et 获取更多精彩内容】【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【转载请注明来源】et 获取更多精彩内容】【本文受版权保护】
{
  "name": "?string",
  "age": "&number",
  "type": "='dog'",
  "id": "string,numeric",
  "data": "!undefined",
  "some": "?&string"
}

前三种规则必须置于描述最前面,? 可以和未经授权,禁止复制转载。【转载请注明来源】其他规则混用,例如 “?=&原创内容,盗版必究。【转载请注明来源】#8217;tomy'” 表【转载请注明来源】【未经授权禁止转载】示如果存在该属性,必须等于字符串 本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。216;tomy’。

【原创内容,转载请注明出处】未经授权,禁止复制转载。

逻辑类型的优先级高于复合类型,例如 &#原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】8220;string,number|n本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】umeric” 解释之后是 本文作者:唐霜,转载请注明出处。【转载请注明来源】string 与 number|nume【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netric 的并集。

本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】【版权所有,侵权必究】

扩展语法

__def__

用以解决无法用复合类型的情况下,提前定义原创内容,盗版必究。【本文受版权保护】复合类型,例如枚举语法,无法枚举字典类型【原创不易,请尊重版权】【作者:唐霜】,”{}|{}”【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。 大概意思是这样,比如,我有两种字典类型原创内容,盗版必究。转载请注明出处:www.tangshuang.net Dog, Cat,现在我想要一个字典为原创内容,盗版必究。未经授权,禁止复制转载。这两个中的一个,则无法使用上述语法实现。【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】此时用 __def__ 前置进行定义。

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。
{
  "__def__": [
    {
      "name": "Dog", // 定义名字
      "def": { // 定义类型的内容,一般是复合类型才需要在 __def__ 中定义
        "name": "string",
        "type": "='dog'"
      }
    },
    {
      "name": "Cat",
      "def": {
        "name": "string",
        "color": "'white'|'grey'"
      }
    }
  ],
  "animal": "Dog|Cat" // 现在这里可以使用预先定义好的两个类型
}

__def__ 必须是数组,它里面的定义【未经授权禁止转载】【本文首发于唐霜的博客】是有顺序的,后面的定义可以引用前面的定义【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。et 获取更多精彩内容】原创内容,盗版必究。未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。

__self__

自引用类型,只能在 __def__ 中使【关注微信公众号:wwwtangshuangnet】【作者:唐霜】用。当我们需要在某些场景下,使用复合类型【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。本身时,需要用到它。

【本文受版权保护】【原创内容,转载请注明出处】【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。
{
  "__def__": [
    {
      "name": "Person",
      "def": {
        "name": "string",
        "age": "number",
        "children": "?__self__[]" // 如果存在children这个字段时,它必须是Person列表
      }
    }
  ]
}

注:__self__ 是一个实现上的限制【转载请注明来源】【未经授权禁止转载】,我们没有办法直接在 def 中使用 P著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】erson,只能使用 __self__ 【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。作为占位符。

【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ngnet】未经授权,禁止复制转载。【未经授权禁止转载】

注释

在DSL文件(JSON)中对某个节点进行【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。注释,注释内容将在文档服务中显示出来。注【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。释通过特殊的标记字段来完成,比如需要对 【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】name 字段进行注释,那么在 JSON【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。 中提供一个 #name 字段即可。

【转载请注明来源】未经授权,禁止复制转载。【版权所有,侵权必究】
{
  "#name": "对name进行注释",
  "name": "string"
}

支持通过keyPath对嵌套节点进行注释【原创不易,请尊重版权】【原创不易,请尊重版权】,例如:

转载请注明出处:www.tangshua原创内容,盗版必究。本文作者:唐霜,转载请注明出处。ng.net【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netang.net著作权归作者所有,禁止商业用途转载。
  "#books[0]": "对书本的对象进行注释",
  "books": [
    {
      "title": "string"
    }
  ]
}

类型嵌套

由于 TySheMo 仅支持非常简单的描【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。述语言,它不支持在描述文本中嵌套,因此,【未经授权禁止转载】未经授权,禁止复制转载。如果你需要有多层的嵌套规则,例如某个字段著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是对象,然后你需要对对象内部进行约束,你著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net必须使用自定义规则,例如最前面代码里面的【作者:唐霜】【版权所有,侵权必究】 books 那个属性一样。

未经授权,禁止复制转载。【本文首发于唐霜的博客】

自定义类型逻辑如下:

【访问 www.tangshuang.n未经授权,禁止复制转载。未经授权,禁止复制转载。et 获取更多精彩内容】【版权所有,侵权必究】原创内容,盗版必究。

TySheMo Parser 会首先去读【作者:唐霜】【本文受版权保护】取 __def__ 中的内容,它必须是一转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】个数组,Parser 会去遍历这个数组,【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】这个数组的元素结构如 { name, d【本文首发于唐霜的博客】【转载请注明来源】ef },每遍历一个元素,这个元素的解析【版权所有,侵权必究】【版权所有,侵权必究】结果就会加入到 Parser 中,成为一【本文首发于唐霜的博客】【本文首发于唐霜的博客】个定义,在后面的任何描述中,都可以使用这本文版权归作者所有,未经授权不得转载。【转载请注明来源】个元素。遍历完 __def__ 之后,再著作权归作者所有,禁止商业用途转载。【本文受版权保护】对整个 json 进行解析。

本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【作者:唐霜】【本文受版权保护】
本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【本文受版权保护】【本文受版权保护】ang.net【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【原创内容,转载请注明出处】ngnet】

以前面的 books 为例。我们首先在 转载请注明出处:www.tangshuang.net【版权所有,侵权必究】__def__ 中定义了一个 name 本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】为 book 的类型,这个类型的具体描述【作者:唐霜】未经授权,禁止复制转载。在 def 中,它实际上也是一个对象结构【作者:唐霜】【关注微信公众号:wwwtangshuangnet】。在 books 的描述中,我们使用了 【转载请注明来源】著作权归作者所有,禁止商业用途转载。“book[]”【原创内容,转载请注明出处】【版权所有,侵权必究】,表示 books 是一个 book 的未经授权,禁止复制转载。【原创内容,转载请注明出处】数组。

原创内容,盗版必究。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ng.net【版权所有,侵权必究】

自定义类型

在一些场景下,你需要使用预设好的类型。你转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。可以这样做:

【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。
// 预设类型
const types = {
  some: new Tuple([String, Number]),
}

// 将预设类型加入到该解析器,仅该解析器可以读懂预设类型
const parser = new Parser(types)

// 使用预设类型
parser.parse({
  list: "some", // some 为预设类型中对应的属性名
})

在 Parser 实例化的时候传入预设类本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。型,这些预设类型只会在该解析器解析的时候未经授权,禁止复制转载。【本文首发于唐霜的博客】生效,而不会影响其他解析器。

【版权所有】唐霜 www.tangshu【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ang.net著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【作者:唐霜】本文作者:唐霜,转载请注明出处。ang.net

注释

我们通过 json 来描述时,支持特殊的原创内容,盗版必究。【作者:唐霜】方式表示注释。注释非常简单,就是在需要注【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net释的字段名字前加 #,这样就可以了。

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】未经授权,禁止复制转载。ang.net【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有,侵权必究】ang.net
{
  "#name": "对 name 进行注释",
  "name": "string"
}

注释支持对象嵌套,但不支持数组嵌套:

【本文首发于唐霜的博客】【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ng.net转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ng.net
{
  "body": {
    "#hand": "对象支持嵌套注释",
    "hand": "boolean",
    "foot": "boolean"
  },
  "#books[0].price": "数组不支持嵌套注释,只能在数组外部通过 keyPath 的方式进行注释",
  "books": [
    {
      "price": "number"
    }
  ],
  "#body.foot": "对象也支持 keyPath 的方式进行注释"
}

注意,__def__ 为关键字。在生成类【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。型容器时,这些注释字段会按照规则,被添加【转载请注明来源】【版权所有】唐霜 www.tangshuang.net到 __comments__ 属性中,方未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。便在 TyshemoService 中使【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net用。

【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【转载请注明来源】et 获取更多精彩内容】【版权所有,侵权必究】【转载请注明来源】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】

但是在实际生产环境中需要注意,你需要在工转载请注明出处:www.tangshuang.net【版权所有,侵权必究】具(例如 webpack)中将这些注释字【作者:唐霜】【转载请注明来源】段从 json 中移除,以尽可能的减小代转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net码体积。

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ang.net原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。

接口

parse(description)

将描述文本 json 对象解析为 tys著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。hemo 的类型系统实例。

著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【原创不易,请尊重版权】【版权所有,侵权必究】ng.net【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ang.net【本文受版权保护】

describe(type)

将 tyshemo 的类型系统实例(Ty【作者:唐霜】原创内容,盗版必究。pe 实例)抽象为描述文本 json。

【转载请注明来源】【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【关注微信公众号:wwwtangshua【原创内容,转载请注明出处】【本文受版权保护】ngnet】原创内容,盗版必究。

define(type, description)

定义一个解析对组。

【原创不易,请尊重版权】转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ng.net转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】ng.net
parser.define('some', SomeType)

经过 define 之后,你就可以在描述【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。文本中使用 some 代表 SomeTy【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。pe 了。

【访问 www.tangshuang.n【未经授权禁止转载】【本文首发于唐霜的博客】et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。【关注微信公众号:wwwtangshua未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netngnet】

技巧

一般而言,只会在一些特殊场景下去使用解析【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net器。基于性能的考虑,不应该在前端大面积使转载请注明出处:www.tangshuang.net【转载请注明来源】用这种方案,因为解析器本身在解析的时候,【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】就会消耗一定的性能。

【访问 www.tangshuang.n【作者:唐霜】【本文受版权保护】et 获取更多精彩内容】【转载请注明来源】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。ng.net

前后端通信时

【版权所有,侵权必究】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】ng.net

由于前后端通信时,你无法直接传递运行时变【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】量,不可能把 String, Numbe【原创不易,请尊重版权】原创内容,盗版必究。r 这种传给前端,因此,只能选择 jso【本文受版权保护】【原创不易,请尊重版权】n 字符串等通用描述方式。

【原创内容,转载请注明出处】【版权所有,侵权必究】

前后端同构时

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netang.net未经授权,禁止复制转载。【转载请注明来源】

使用同一套类型校验时,前后端使用相同的预【本文首发于唐霜的博客】原创内容,盗版必究。设类型,可以减少传输成本。例如上面的一段【转载请注明来源】本文作者:唐霜,转载请注明出处。代码,其中的 some 类型,我们可以提原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。前预设好,这样,在发送的描述文件时,就不转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net需要再在描述文件中使用 __def__ 【原创不易,请尊重版权】【原创内容,转载请注明出处】去定义 some。

本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】原创内容,盗版必究。

由于一些规则,特别是 determine【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 是无法直接获取计算后的类型的,因此,在【作者:唐霜】【版权所有,侵权必究】这种情况下,我们要使用自定义类型来实现这【未经授权禁止转载】【本文首发于唐霜的博客】些特殊规则的解析。

原创内容,盗版必究。【本文受版权保护】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ngnet】原创内容,盗版必究。
export const SomeRule = determine(data => data.type === 'die' ? DieType : LifeType)

事先定义 determine 规则的时候【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net,就是这样使用。让外部可以获取它。接着,【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】使用独立作用域:

转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ng.net【版权所有,侵权必究】【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【本文受版权保护】ngnet】
import { SomeRule } from './rules'

const parser = new Parser({
  tobeornottobe: SomeRule,
})

另外,还有一个技巧是,在解析器中,它会去【未经授权禁止转载】【原创内容,转载请注明出处】主动读取 Rule 实例的 patter【原创不易,请尊重版权】未经授权,禁止复制转载。n 属性。因此,在解析代码中,我们可以自【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。己覆盖 pattern 属性,而非使用自【本文首发于唐霜的博客】原创内容,盗版必究。定义类型。

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net【转载请注明来源】ngnet】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。ang.net著作权归作者所有,禁止商业用途转载。
import { SomeRule } from './rules'

SomeRule.pattern = [DieType, LifeType]

但是这样做明显是带有污染性质的,不建议这著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】么做,本文只是告诉开发者,在特殊情况下,【本文首发于唐霜的博客】【作者:唐霜】我们可以通过覆盖 pattern 来得到【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】想要的结果。

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。

Mocker

上面,我们利用 Parser.descr著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.netibe 可以生成描述文件。差不多同样的道【转载请注明来源】转载请注明出处:www.tangshuang.net理,我们可以生成 mock 数据。问题的原创内容,盗版必究。转载请注明出处:www.tangshuang.net关键在于,我们如何生成每种原型对应的随机【原创内容,转载请注明出处】【转载请注明来源】值。用法和 Parser 很像,但随机值【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。的产生不同。

【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net原创内容,盗版必究。ngnet】【本文首发于唐霜的博客】未经授权,禁止复制转载。
const = loaders = [
  [String, function() {
    return 'a random string'
  }],
  [Number, function() {
    return Math.random() * 100
  }],
]
const mocker = new Mocker(loaders)

const dict = new Dict({
  name: String,
  age: Number,
})

const mock = mocker.mock(dict)

mock 方法可以提炼出一个 mock 【作者:唐霜】著作权归作者所有,禁止商业用途转载。数据,loaders 中的函数会返回一个原创内容,盗版必究。原创内容,盗版必究。经过随机算法返回的字符串。最终,mock著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。 方法会返回一个符合 dict 的假数据本文版权归作者所有,未经授权不得转载。【作者:唐霜】。Mocker 只有一个方法 mock,因此这里就不再深入赘述。

【作者:唐霜】【未经授权禁止转载】

Service

基于 Parser 和 Mocker,我著作权归作者所有,禁止商业用途转载。【作者:唐霜】开发了一个用于提供 nodejs 服务的未经授权,禁止复制转载。原创内容,盗版必究。包: tyshemo-service,你可以阅读这篇文章了解我的设计思路。这个包的主要目的是通过【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】项目中的 types 实例,自动生成文档【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】和 mock 数据接口。这样,我们就可以【本文首发于唐霜的博客】【本文首发于唐霜的博客】重复利用项目中已经写好的 types 文原创内容,盗版必究。原创内容,盗版必究。件,很快输出开发阶段需要的东西。例如,我【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】们在我们的项目中写了一些 type 文件转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】未经授权,禁止复制转载。
// book.type.js
import { Dict } from 'tyshemo'

export const BookType = new Dict({
  name: String,
  price: Number
})

现在,我们有一个关于 book 的 re著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。stful 接口,在前后端同学都是黑盒的【版权所有】唐霜 www.tangshuang.net【作者:唐霜】情况下,我们可以启动一个这样的服务:

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。原创内容,盗版必究。未经授权,禁止复制转载。
// book.api.doc.js
const Service = require('tyshemo-service')

BookType.__comments__ = {
  'name': '书的名字',
  'price': '书的价格',
}

const server = new Service({
  getResponseType: (type) => {
    return {
      code: 0,
      data: type,
    }
  },
  getErrorType: (type) => {
    return {
      code: 10000,
      error: type,
    }
  },
  errorMapping: {
    10000: 'Database broken',
    10005: 'network error',
  },
  basePath: '/api/v2',
  data: [
    {
      name: 'Default Group',
      items: [
        {
          name: 'Book',
          description: '书本接口',
          method: 'get',
          path: '/book/:id',
          response: BookType,
        },
      ],
    },
  ], 
})

server.doc({ port: 4000 })

然后用 node 运行这个文件:

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】ang.net【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。
node book.api.doc.js

这样就可以在本地启用一个服务,打开 lo【本文首发于唐霜的博客】【未经授权禁止转载】calhost:4000 就可以阅读文档【本文受版权保护】原创内容,盗版必究。。把这个文档另存为一个 html 发给后【转载请注明来源】未经授权,禁止复制转载。端同学,大家就可以对该接口进行约定了。这【版权所有,侵权必究】【转载请注明来源】样可以大大节约开发前期的沟通时间。同时,本文版权归作者所有,未经授权不得转载。【转载请注明来源】对于已经写好的 *.type.js 文件转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】,可以被重复用在运行时数据检查和做 ap【版权所有,侵权必究】【本文首发于唐霜的博客】i 测试中。api 测试,实际上就是在本未经授权,禁止复制转载。【转载请注明来源】地写 ajax 去不断请求和校验的过程。

【版权所有】唐霜 www.tangshu原创内容,盗版必究。本文作者:唐霜,转载请注明出处。ang.net【原创不易,请尊重版权】

初始配置

在实例化Service的时候,需要传入一转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。个初始配置,这个配置是一个非常大的配置,原创内容,盗版必究。【本文受版权保护】它包含了所有和接口、类型相关的配置。通过本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。这个配置,你可以描述所有的接口,以及输入【原创内容,转载请注明出处】未经授权,禁止复制转载。输出的一些规则。

【版权所有,侵权必究】【转载请注明来源】
{
  // 接口返回时,统一经过该方法进行处理。
  // 在大部分restful api接口中,都会在最外层包一层,但是我们没有必要把这些通用的东西写在response type里面,可以通过该方法来适配
  // 它接收下面接口配置的类型,返回一个新类型容器,也可以直接写成下面这种方式
  getResponseType(type) {
    return {
      code: 0,
      data: type,
    }
  },
  // 和 getResponsType一样的功效,只是在返回错误时进行包裹
  getErrorType(type) {
    return {
      code: Number,
      error: type,
    }
  },
  // 和getResponsType一样的功效,只是在请求数据外包裹
  getRequestType(type) {
    return type
  },
  // 规定全局的错误码对应文本,一般这个可以直接在项目的某个配置文件中引入
  errorMapping: {
    10000: 'Database broken',
    10005: 'network error',
  },
  // 接口访问时的基本路径,不包含域名部分
  basePath: '/api/v2',
  // 所有接口的配置信息
  data: [
    {
      // 先定义一个组
      id: 'default_group',
      name: 'Default Group',
      // 这个组里面包含了哪些接口,每个接口的具体配置下文详细解释
      items: [
        Person,
        Desk,
      ],
    },
  ],
}

其中最主要的部分就是 data 的配置。【转载请注明来源】【版权所有,侵权必究】这个里面首先需要对接口进行分组,这是必须原创内容,盗版必究。【本文首发于唐霜的博客】的一个设计,因为一个接口的集合,不可能完【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】全不分组一次性给到开发者。每一个组的配置本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net包含三个字段,id, name, ite【转载请注明来源】【本文受版权保护】ms,其中items就是将该组下的所有接【未经授权禁止转载】【转载请注明来源】口按顺序排列,这个顺序会影响输出文档中的【版权所有,侵权必究】【本文受版权保护】顺序。

【本文首发于唐霜的博客】【转载请注明来源】

每一个item的配置如下:

本文版权归作者所有,未经授权不得转载。【本文受版权保护】
{
  id: 'person',
  name: 'Person',
  // 接口请求方式,必须是小写,因为express的路由中将会使用到这个值
  method: 'post',
  // 接口请求的路径,不包含basePath部分
  path: '/person/:id',
  // 请求发出的数据类型容器,method为get时表示queryString的参数
  request: RequestType,
  // 接口的响应数据类型容器
  response: ResponseType,
  // 用于单元测试的配置
  test: [
    {
      // 该单元测试多久执行一次,设置为0时取消自动循环功能
      frequency: 60000,
      name: '123',
      // 用于替换path中的占位符
      params: { id: 123 },
      // 用于覆盖单元测试随机值,保证某些字段是固定值
      request: { age: '10' },
    },
  ],
}

除了上述这些配置之外,还支持getRes原创内容,盗版必究。转载请注明出处:www.tangshuang.netponseType getErrorTy【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。pe getRequestType ba【本文首发于唐霜的博客】【原创不易,请尊重版权】sePath 这几个配置,这几个配置如果本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】在 item 中配置了,那么这个接口不会【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。再使用全局配置中的这几个配置,而是使用自本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】己的配置,不配置的情况下,会直接使用全局【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】配置。errorMapping 会和全局【作者:唐霜】【关注微信公众号:wwwtangshuangnet】配置中的 errorMapping 合并未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。后作为当前接口的输出结果。

【本文受版权保护】【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】ang.net

文档服务器

通过Service可以快速启用一个文档服本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。务器,让前后端的同学可以同时看着文档进行【原创内容,转载请注明出处】【转载请注明来源】开发,避免复杂的沟通交流。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。ng.net

当我们通过 new Service 得到【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net一个 server 之后,我们可以通过 【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。doc 方法快速启动一个服务器来展示文档【转载请注明来源】【版权所有,侵权必究】

【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ang.net著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。
server.doc(options)

使用 node 去运行这段脚本,就可以在【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。浏览器中打开对应的端口访问默认提供的网页【版权所有,侵权必究】原创内容,盗版必究。进行阅读。这里当 options 是对文未经授权,禁止复制转载。【本文受版权保护】档服务器启动时的配置。具体如下:

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。
{
  // 服务器端口
  port: 9000,
  // 文档页面的title
  title: 'My App API DOC', // the doc page title
  // 文档页面一进入的欢迎语
  description: '', // the doc page description
  // 文档模版文件的路径,注意要使用绝对路径
  docTemplateFile: null,
}

怎么解决一些注释呢?我们怎么知道哪个字段【版权所有,侵权必究】【未经授权禁止转载】是什么意思呢?我们有一个 hook 用以本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】解决注释问题。

本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【作者:唐霜】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netngnet】
RequestType.__comments__ = {
  // body.head 是对应的请求参数的键路径,而非单纯一个键
  'body.head': '这是 body.head 属性的注释',
}

通过 __comments__ 属性来定义一些字段的备注。其中需要注意【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。的是,__comments__ 的键名是著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】基于 RequestType 的路径,这未经授权,禁止复制转载。【版权所有,侵权必究】些路径形式如 prop[i].prop.prop 是用来表示比较深层次的节点的。

【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。

Mock服务器

通过启用一个Mock服务器,前端同学不需【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】要后台同学完成开发,就可以在前端调通接口原创内容,盗版必究。【本文首发于唐霜的博客】,避免前端开发中,被后台接口开发卡住脖子【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。的情况。

【转载请注明来源】【作者:唐霜】

我们通过 server 的 mock 方【本文受版权保护】原创内容,盗版必究。法来开启Mock服务器。

【本文首发于唐霜的博客】转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】ng.net著作权归作者所有,禁止商业用途转载。
server.mock(options)

目前,options 中只支持 port【转载请注明来源】【未经授权禁止转载】 参数。

【本文受版权保护】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netang.net【本文首发于唐霜的博客】【版权所有,侵权必究】

Mock 服务器启动之后,前端同学直接通【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】过代理等方式,将前端的请求转发到 Moc【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netk 服务器,就可以在让 ajax 得到需本文版权归作者所有,未经授权不得转载。【本文受版权保护】要的数据,这些数据全部是根据数据类型描述未经授权,禁止复制转载。未经授权,禁止复制转载。随机生成的。这样,就不用得到后台同学开发原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net完之后再进行接口联调了。

【本文受版权保护】原创内容,盗版必究。【版权所有】唐霜 www.tangshu【作者:唐霜】著作权归作者所有,禁止商业用途转载。ang.net【版权所有】唐霜 www.tangshu原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】ang.net

但是在一些情况下,你需要对某些节点的 m【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netock 数据做一个硬性的规定,你可以使用 __mocks__ 属性来进行处理。这个属性的用法和 __本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。comments__ 很像。它的值接收两本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。种形式,一种是固定值,另一种是函数,如果【转载请注明来源】【原创不易,请尊重版权】是一个函数,那么函数的运行结果就会作为该【转载请注明来源】转载请注明出处:www.tangshuang.net节点的值。

【未经授权禁止转载】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
ResponseType.__mocks__ = {
  'body.feet[0]': true,
}

但是有的情况下,对于一个 list,它的著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。值的类型是重复的,这个时候,你需要使用 [*] 来表示这种情况:

原创内容,盗版必究。【本文受版权保护】【版权所有,侵权必究】
ResponseType.__mocks__ = {
  'books[*].pages[*].num': function(data, indexes) {
    // data 是指整个 response 的 mock 数据(被 __mocks处理之前)
    // indexes 用于存储 * 所代表的索引值,之所以是一个数组,是表示 keyPath 中对应的 *
    // 例如这个例子里面,keyPath 中有两个 *,那么 indexes 中就会有两个值,第一个值代表 books[i],第二个代表 pages[i]
    // 该函数每次执行的时候,indexes 里面的值都不一样,具体要看 mock 所产生的数据条数
    const [bookIndex, pageIndex] = indexes
    return 'page-' + (pageIndex + 1)
  },
}

自动测试服务器

后端同学开发完接口之后,不知道自己开发好【转载请注明来源】【版权所有,侵权必究】的接口是否符合前端同学的需要,因此,需要【原创不易,请尊重版权】【转载请注明来源】有一个测试工具,用来检查写好的接口是否是著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。 ok 的。tyshemo 提供一个自动本文版权归作者所有,未经授权不得转载。【作者:唐霜】测试服务器,用来在这个阶段辅助完成接口测原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。试(仅开发人员参与)。

【版权所有】唐霜 www.tangshu【转载请注明来源】【未经授权禁止转载】ang.net本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua【本文受版权保护】著作权归作者所有,禁止商业用途转载。ng.net
server.test(options)

options 支持如下配置:

转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netng.net【本文受版权保护】【版权所有,侵权必究】转载请注明出处:www.tangshua【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netng.net
{
  port = 8087,
  // target 用于指向后端同学开发好后端代码后部署的服务器地址
  target = 'http://localhost:8089',
  title = 'TySheMo',
  description = 'This is an api doc generated by TySheMo.',
  // 自定义测试界面模板
  testTemplateFile = path.resolve(__dirname, 'test.html'),
}

用 node 去启动这个脚本之后,就可以著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。在浏览器中打开页面,去观看写好的测试用例未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net,并且运行测试用例来检查后台代码返回的结未经授权,禁止复制转载。【本文首发于唐霜的博客】果是否符合前端同学的要求。

【未经授权禁止转载】【转载请注明来源】

测试用例依赖于最前面 Service 配【原创内容,转载请注明出处】【未经授权禁止转载】置中的每个接口的 test 配置,通过这著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】些用例,可以很好的检查后台代码返回结果的转载请注明出处:www.tangshuang.net【版权所有,侵权必究】可用性。

本文版权归作者所有,未经授权不得转载。【转载请注明来源】【版权所有,侵权必究】

统一服务器

上述三个服务器在介绍中,都是独立启动的。转载请注明出处:www.tangshuang.net【转载请注明来源】你也可以一次性把三个服务器都起起来。

著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua【本文受版权保护】【作者:唐霜】ng.net著作权归作者所有,禁止商业用途转载。
server.serve(options)

这里的 options 是上述三个服务器原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。的 options 的并集。当服务器起来原创内容,盗版必究。【原创不易,请尊重版权】之后,在浏览器中打开对应的地址,根页面是著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】文档页面,/_test 是测试页面。

【作者:唐霜】转载请注明出处:www.tangshua原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netng.net【作者:唐霜】著作权归作者所有,禁止商业用途转载。

Meta

元(Meta)是有关一个字段的属性集合,【原创内容,转载请注明出处】【原创不易,请尊重版权】这个字段有哪些特征,有些什么逻辑,我们都转载请注明出处:www.tangshuang.net原创内容,盗版必究。将这些描述放到 Meta 中进行描述。一【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。个 Meta 继承于 tyshemo 的【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net基类:

【本文首发于唐霜的博客】原创内容,盗版必究。转载请注明出处:www.tangshua原创内容,盗版必究。本文作者:唐霜,转载请注明出处。ng.net
import { Meta } from 'tyshemo'

class Count extends Meta {
  static default = ''
  static type = Numeric
}

这些构成 Meta 的,被称之为“属性”著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】(Attribute)。目前支持的属性包【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。含如下:

原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。未经授权,禁止复制转载。

setter 和 getter 是两个格【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。式化函数,例如你要求当前属性必须是数字,【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】但是在表单中会使用字符串输入,因此,在 【版权所有,侵权必究】转载请注明出处:www.tangshuang.netsetter 中将字符串转化为数字,就可本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】以解决问题。setter 具有比较高的优【版权所有】唐霜 www.tangshuang.net【转载请注明来源】先级,它会在 validate, ens【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】ure 之前发挥作用,这样你就不用担心本本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】来想用 ’12’原创内容,盗版必究。【本文首发于唐霜的博客】 得到 12 时由于类型校验不符合要求而转载请注明出处:www.tangshuang.net【作者:唐霜】得到 default 了。

【原创不易,请尊重版权】【作者:唐霜】

drop, map, flat 接收的参【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】数格式一致。它们都接收三个参数:

未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。

以上就是一个属性描述的所有配置项。在接下【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。来的接口详解时,可能会涉及到,你可以继续【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。往下读。

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netng.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】ang.net【未经授权禁止转载】转载请注明出处:www.tangshua未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ng.net

Schema

数据模式(Schema,本文简称“模式”【原创内容,转载请注明出处】【原创不易,请尊重版权】)是一种抽象结构。它的作用更多是描述,描【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】述一个结构应该是怎么构成的。Schema【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。 是 TySheMo 提供的一个类,它用本文作者:唐霜,转载请注明出处。原创内容,盗版必究。于生成一个模式描述。而这个描述有一些方法著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。,去保证你所提供的数据符合这个结构。

【关注微信公众号:wwwtangshua【未经授权禁止转载】【原创内容,转载请注明出处】ngnet】【转载请注明来源】本文作者:唐霜,转载请注明出处。

基于业务场景的思考,目前 Schema 【转载请注明来源】【未经授权禁止转载】仅做了一层数据结构的描述。也就是说,Sc著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】hema 是不嵌套的。它只能描述当前这一【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net层的数据,深层结构数据是无法进行描述的(原创内容,盗版必究。【未经授权禁止转载】虽然你可以用 object 来表示)。

本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】
import { Schema } from 'tyshemo'

const PersonSchema = new Schema({
  name: {
    type: String,
    default: 'unknown',
  },
  age: {
    type: Number,
    default: 0,
  },
})

这就是一个 schema,创建一个 sc本文版权归作者所有,未经授权不得转载。【转载请注明来源】hema,你需要传入配置对象。对象的属性原创内容,盗版必究。【作者:唐霜】,就是所描述的数据的属性,属性值,则是该转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】属性的描述。

【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。ang.net【原创内容,转载请注明出处】

编程上,一个 Model 内保持着一个 本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netSchema 实例,这个实例一般是不对外【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】暴露的。因此,它只是对 Model 起作【未经授权禁止转载】【转载请注明来源】用,不提供接口。

【本文受版权保护】未经授权,禁止复制转载。【原创内容,转载请注明出处】

Store

TySheMo 提供了一个状态管理工具 原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。Store,它是一个状态管理器,一个 s【版权所有,侵权必究】原创内容,盗版必究。tore 管理一个 state,它的特征【原创内容,转载请注明出处】【未经授权禁止转载】是可被观察,让开发者可以通过 watch【原创内容,转载请注明出处】原创内容,盗版必究。 监听哪一个属性发生变化,并进行对应的下本文作者:唐霜,转载请注明出处。原创内容,盗版必究。一个操作。要使用 Store 也很方便。

转载请注明出处:www.tangshua【原创内容,转载请注明出处】【作者:唐霜】ng.net【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】ang.net【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】ang.net【转载请注明来源】
import { Store } from 'tyshemo'

Store 是比 redux, mobx【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net 更便捷高效的状态管理器,它可以在 re【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。act, vue, angular 中被【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。无缝使用。而且,它的设计极其简单,没有任【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。何复杂概念,接口也很少,只能做这些操作。

【原创内容,转载请注明出处】【作者:唐霜】

初始化

初始化动作超级简单。

【未经授权禁止转载】【版权所有,侵权必究】【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。
const store = new Store({
  name: 'tomy',
  age: 10,
})

没错,这样就创建了一个 store,st【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ore 内保管着一份 state,初始化【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】之后,state 的值如上所示。

【原创不易,请尊重版权】【访问 www.tangshuang.n【转载请注明来源】【作者:唐霜】et 获取更多精彩内容】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。ang.net

State

你可以读取 store.state 来进【作者:唐霜】【本文受版权保护】行任意操作。利用 Proxy 技术,st【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】ate 比任何响应式库做的都要有意思。

【本文首发于唐霜的博客】【本文首发于唐霜的博客】原创内容,盗版必究。【原创内容,转载请注明出处】
const { state } = store

// 新增一个属性
state.sex = 'F'
// 修改原有属性
state.age ++
// 删除原有属性
delete state.name

state 的所有修改操作都是响应式的,原创内容,盗版必究。本文作者:唐霜,转载请注明出处。可以通过 watch 监听到这些修改。

著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【未经授权禁止转载】

计算属性

Store 支持计算属性。在创建一个 s著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。tore 实例的时候,我们通过传入计算属【转载请注明来源】本文作者:唐霜,转载请注明出处。性来定义该属性。

【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【作者:唐霜】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
const store = new Store({
  name: 'tomy',
  birth: 2009, 

  // age 是一个双向计算属性,可通过 get 实时动态计算值,可设置值时反写当前对象属性
  get age() {
    return new Date().getFullYear() - this.birth
  },
  set age(age) {
    this.birth = new Date().getFullYear() - age
  },

  // height 是一个单向计算属性,只能读取其计算结果值,不能向 height 设置值
  get height() {
    return this.age * 5
  },
  
  // fatherAge 是一个单向计算属性,任何情况下,读取结果都是 undefined,对它设置值时,只会对其他属性产生影响,而不会更新自己的值
  set fatherAge(fage) {
    this.age = fage - 28
  },
})

计算属性具有缓存,在第一次产生值之后,后【作者:唐霜】【版权所有】唐霜 www.tangshuang.net续只有当该值,或它内部所依赖的值,发生变本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。化时,才会更新缓存。因此,上面使用了 n【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ew Date().getFullYea【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。r() 并不会每次都执行,倘若在年度之交未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。使用上面代码,就会造成问题。因此,使用时【转载请注明来源】【关注微信公众号:wwwtangshuangnet】需要特别注意。

【原创内容,转载请注明出处】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。

计算属性的计算器中的 this 指向 s【未经授权禁止转载】【版权所有,侵权必究】tore.state,在其内部读取值时需未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。要注意,有的时候,被读取属性不存在时,会著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。报错,例如现在读取 this.body.著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。feet 就会报错,因为 this.bo本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netdy 并不存在。而且由于传入 Store【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】 中的对象仅仅是一个初始值,在 stor转载请注明出处:www.tangshuang.net原创内容,盗版必究。e 的运行过程中,是会改变的。那么,怎么【版权所有,侵权必究】【版权所有,侵权必究】调整计算属性呢?

未经授权,禁止复制转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu原创内容,盗版必究。转载请注明出处:www.tangshuang.netang.net原创内容,盗版必究。

添加计算属性

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ang.net【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】原创内容,盗版必究。ang.net【作者:唐霜】

当初始值中不存在你需要的计算属性时,你可【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。以通过 define 方法定义一个新的计未经授权,禁止复制转载。【本文受版权保护】算属性。

【版权所有】唐霜 www.tangshu【版权所有,侵权必究】原创内容,盗版必究。ang.net转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】ng.net著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.n【未经授权禁止转载】【转载请注明来源】et 获取更多精彩内容】
store.define('key', { get, set })

在第二个参数中传入 getter 和 s【转载请注明来源】原创内容,盗版必究。etter 函数。

本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】ang.net本文作者:唐霜,转载请注明出处。

修改计算属性

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。

修改计算属性和添加计算属性的方法是一样的【版权所有】唐霜 www.tangshuang.net【作者:唐霜】

未经授权,禁止复制转载。转载请注明出处:www.tangshua【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】ng.net未经授权,禁止复制转载。

删除计算属性

【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。ang.net本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】

使用 del 方法可以删除任意属性,计算【版权所有,侵权必究】【原创内容,转载请注明出处】属性也会被它所删除。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】【未经授权禁止转载】
store.del('key')

实例方法

store 适应所有的框架,因为你可以选本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。择使用 state 来进行对象式操作,还著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】是方法接口操作。

【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。【版权所有,侵权必究】

get(keyPath)

通过 keyPath 获取属性值。key转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。Path 是用来描述一个深层次路径的表达【本文首发于唐霜的博客】【本文受版权保护】式,可以是一个字符串,也可以是一个数组,著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net例如 [‘booksR未经授权,禁止复制转载。【未经授权禁止转载】17;, 1] 表示 state.boo未经授权,禁止复制转载。【转载请注明来源】ks[1],也可以用字符串表示 R【作者:唐霜】【版权所有,侵权必究】16;books[1]’。

【版权所有】唐霜 www.tangshu【本文受版权保护】本文作者:唐霜,转载请注明出处。ang.net转载请注明出处:www.tangshua【转载请注明来源】转载请注明出处:www.tangshuang.netng.net本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。
const name = store.get('name')

set(keyPath, value)

通过 keyPath 设置某个属性的值为【原创内容,转载请注明出处】【本文首发于唐霜的博客】 value。

原创内容,盗版必究。未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ang.net
store.set('name', 'tomy')

del(keyPath)

删除对应 keyPath 的属性。删除操【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。作虽然只是一个方法,但是实际上内部比较复【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。杂,因为它要处理原有的依赖收集逻辑。

【作者:唐霜】【原创不易,请尊重版权】【本文首发于唐霜的博客】
store.del('name')

update(data, async)

一次性更新多个属性值。

【未经授权禁止转载】【版权所有,侵权必究】
store.update({
  name: 'tomy',
  age: 23,
})

它的第二个参数 async 表示是否异步著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。更新。异步更新的好处在于,我们建立一个很【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】小的事务,当同一个属性被多次更新的时候,【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。只有最后一次更新会被作为结果,这样可以提【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】升性能。

【版权所有,侵权必究】【作者:唐霜】【本文首发于唐霜的博客】
store.watch('age', () => console.log(111)) // 只会出现一次 console,因为两次 update 都是更新 age,而只有第二次更新被使用
store.update({ age: 24 }, true)
store.update({ age: 25 }, true)

它返回一个 Promise,你可以使用 【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】then/catch await 进行下原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】一步操作。

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【转载请注明来源】【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】ang.net

需要注意,由于更新有先后顺序,使用 up【原创内容,转载请注明出处】【本文首发于唐霜的博客】date 更新数据时,尽量避免具有相互依【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】赖关系的数据同时更新。

【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ang.net本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】

define(key, options)

新增或修改计算属性。 当 options本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。 是一个函数时,直接被认为是 gette【版权所有,侵权必究】【本文首发于唐霜的博客】r。

著作权归作者所有,禁止商业用途转载。【本文受版权保护】【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。ngnet】

需要注意,define 只能定义顶层属性著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。,不能定义深层属性。

本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【本文首发于唐霜的博客】

watch(keyPath, fn, deep)

监听某个 keyPath 的变动,当对应【本文首发于唐霜的博客】【作者:唐霜】 keyPath 值变化时,fn 这个回【本文首发于唐霜的博客】【本文首发于唐霜的博客】调函数就会执行。deep 表示是否深层监未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net听,默认为 false,表示只有精确当 本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。keyPath 变化时才会触发响应。而如【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。果 deep 为 true 时,表示如果【未经授权禁止转载】【转载请注明来源】 keyPath 对应的是一个对象,那么【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net该对象的子属性变化时,也会触发 fn。

【作者:唐霜】原创内容,盗版必究。

当 keyPath 为 ‘*【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。’ 时,表示任意变动都能被监【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。听到。

转载请注明出处:www.tangshua未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ng.net【原创内容,转载请注明出处】【原创不易,请尊重版权】

unwatch(keyPath, fn)

解除 watch 绑定的监听函数。

原创内容,盗版必究。【作者:唐霜】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【转载请注明来源】ng.net

bind(key)(store, key)

将当前 store 的一个 key 和另未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。外一个 store 的某个 key 进行【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。绑定,绑定之后,另外那个 store 的转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net那个 key 对应的值发生变化时,当前 本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。store 对应的 key 也会重新计算【本文受版权保护】本文版权归作者所有,未经授权不得转载。。这可以用在一些计算属性中使用了其他 s【未经授权禁止转载】【转载请注明来源】tore 的情况。

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】

Model

终于进入到真正的数据建模讲解中。数据模型本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。(Model,本文简称“模型”)是关于业【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】务的数据管理工具。把前端的数据想象成需要著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。一个数据库来进行管理。当你的数据需要自己原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。把控的时候,你需要怎么入手?你会涉及到哪【版权所有】唐霜 www.tangshuang.net【作者:唐霜】些操作?在我看来,比较复杂的场景是:编辑【作者:唐霜】著作权归作者所有,禁止商业用途转载。表单。你需要从 api 读取数据,并且恢【版权所有,侵权必究】转载请注明出处:www.tangshuang.net复到表单模型中,表单本身会需要自己的状态本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net来维护,提交表单时需要校验数据,提交结果【本文受版权保护】未经授权,禁止复制转载。需要进行规整化(根据后天 api 的接收【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】要求)。在这个过程中,对于本质其实只是一【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。份数据,却要考虑 3 种状态,这种时候,本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net通过 TySheMo 模型进行管理,会非【本文首发于唐霜的博客】【作者:唐霜】常方便。

【版权所有】唐霜 www.tangshu【作者:唐霜】未经授权,禁止复制转载。ang.net本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】

TySheMo 的模型具备如下功能:

【访问 www.tangshuang.n未经授权,禁止复制转载。【作者:唐霜】et 获取更多精彩内容】【未经授权禁止转载】

Model 中保持着一份 Store 和【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】 Schema。Store 用于数据的响【未经授权禁止转载】【未经授权禁止转载】应式管理,Schema 用于字段规则的管【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。理。Model 基于 Store,因此,【本文首发于唐霜的博客】原创内容,盗版必究。Model 上的数据具有可被观察性,你可【本文受版权保护】未经授权,禁止复制转载。以通过 watch 来观察 Model 【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】上的数据变化,从而触发界面更新。Mode【本文首发于唐霜的博客】【未经授权禁止转载】l 基于 Schema 来做数据的模式,【本文受版权保护】本文版权归作者所有,未经授权不得转载。也就是说 Model 内管理的数据遵循 【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】Schema 的描述。

【版权所有】唐霜 www.tangshu【本文受版权保护】未经授权,禁止复制转载。ang.net未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】

创建模型

一个模型是对数据的定义,但 Model 著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。类不是数据本身,而是数据的规定。一个模型【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。是一个数据的抽象,通过定义模型,就定义了【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】这一个数据的字段规则以及变化逻辑。

本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netngnet】

Schema 声明

创建模型类具有非常强的场景意识,开发者应未经授权,禁止复制转载。【原创内容,转载请注明出处】该非常清楚自己的模型将会需要哪些字段。前【版权所有】唐霜 www.tangshuang.net【转载请注明来源】面我们提到模型是基于 Schema 的,未经授权,禁止复制转载。【本文首发于唐霜的博客】那么我们怎么去确定一个模型的 Schem【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】a 呢?我们需要这样规定一个模型:

【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ngnet】【本文首发于唐霜的博客】
import { Model } from 'tyshemo'

export class SomeModel extends Model {
  static field = {
    type: String,
    default: '',
  }
}

创建一个继承自 Model 的类,这个类【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】,就是模型本身,将这个模型需要的字段以静著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。态属性的方式进行写作。每个字段所需包含的【转载请注明来源】【作者:唐霜】配置信息,就是 Schema 属性的配置转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】信息。

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netang.net原创内容,盗版必究。【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】et 获取更多精彩内容】【本文受版权保护】

有了一个模型之后,我们就可以实例化得到一著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】个模型的实例,这个实例则是数据的容器。

本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【原创内容,转载请注明出处】ang.net【未经授权禁止转载】未经授权,禁止复制转载。
const model = new SomeModel()

实例化的时候,你可以传入一个初始数据,如【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。果不传,则会使用 schema 中的 d转载请注明出处:www.tangshuang.net【版权所有,侵权必究】efault 打造一个初始数据。也就是说本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】,模型实例化之后,立即拥有了一个符合 s【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。chema 规定的数据。我们可以直接通过【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。 model 读取模型实例的数据。

【版权所有,侵权必究】【未经授权禁止转载】
const field = model.field

而此时,因为 schema 中规定了 f【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。ield 的 default 为 【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。221;,所以我们读取到的 field 本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】也是 ”.

【作者:唐霜】原创内容,盗版必究。

将 Schema 引入到 Model 中未经授权,禁止复制转载。【未经授权禁止转载】是 TySheMo 最重要的一个点。因为转载请注明出处:www.tangshuang.net【未经授权禁止转载】有了 Schema,Model 中的数据【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】不再是不可预测的。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。
【关注微信公众号:wwwtangshua【本文受版权保护】【转载请注明来源】ngnet】【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netngnet】【版权所有,侵权必究】【本文首发于唐霜的博客】

创建一个 Model 原来如此简单。

【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。

钩子函数

在创建模型时,你可以通过覆盖钩子函数,来【作者:唐霜】【作者:唐霜】实现模型上特定时期的动作。其中最重要的是【本文首发于唐霜的博客】【本文首发于唐霜的博客】 onInit 和 onError。

【访问 www.tangshuang.n【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】【未经授权禁止转载】原创内容,盗版必究。
class SomeModel extends Model {
  // 实例化完成时被调用
  onInit() {
    this.watch('*', () => this.doSomeThing())
  }
  // 当数据变换过程中,发生错误时,被调用
  onError(error) {
    console.log(error.message)
  }
}

自定义方法

像普通的 js 类一样,你可以在模型中自【本文受版权保护】著作权归作者所有,禁止商业用途转载。定义一些方法,将一些特殊的逻辑集合通过方本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。法的形式对外暴露,从而可以集中管理某些特【作者:唐霜】著作权归作者所有,禁止商业用途转载。定业务逻辑。

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】【原创不易,请尊重版权】【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。转载请注明出处:www.tangshuang.netang.net
class SomeModel extends Model {
  doSomeThing() {
    this.name = ''
    this.age = 0
  }
}

使用数据

在你的业务中使用模型上的数据,实际就是要【原创不易,请尊重版权】【转载请注明来源】从模型读取数据。由于模型上数据是完全的 本文作者:唐霜,转载请注明出处。原创内容,盗版必究。js 对象,是一种引用型数据,因此你获得本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】数据之后,还能获得它的变化结果。虽然这和著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】流行的 immutable 不同,但是很原创内容,盗版必究。【作者:唐霜】明显,有的时候我们需要这种效果。

【原创内容,转载请注明出处】【本文受版权保护】【本文受版权保护】

get

你可以使用 get 方法读取数据。

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。ng.net转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【作者:唐霜】ng.net未经授权,禁止复制转载。【访问 www.tangshuang.n【转载请注明来源】【未经授权禁止转载】et 获取更多精彩内容】
const some = model.get('some')

get 方法有一个优势,它可以使用连字符本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。读取更深层级的属性。例如

转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】ng.net转载请注明出处:www.tangshua【原创不易,请尊重版权】未经授权,禁止复制转载。ng.net【未经授权禁止转载】未经授权,禁止复制转载。
const some = model.get('body.some')

而且,不会因为 body 不存在而报错。

【原创不易,请尊重版权】未经授权,禁止复制转载。【关注微信公众号:wwwtangshua原创内容,盗版必究。原创内容,盗版必究。ngnet】转载请注明出处:www.tangshua【版权所有,侵权必究】原创内容,盗版必究。ng.net

[property]

除了上述方法获取数据之外,在 schem【本文首发于唐霜的博客】【本文首发于唐霜的博客】a 中定义了的字段,可以在 model 未经授权,禁止复制转载。【版权所有,侵权必究】上直接读取。例如:

【本文首发于唐霜的博客】【本文受版权保护】
class SomeModel extends Model {
  static some = {
    type: String,
    default: 'a',
  }
}

const model = new SomeModel()
console.log(model.some) // 'a'
这些字段是响应式的,如果你用过 vue 【关注微信公众号:wwwtangshuangnet】【作者:唐霜】的话,this.age ++ 这样的操作【原创内容,转载请注明出处】【原创不易,请尊重版权】应该很不陌生。通过 model.some【本文受版权保护】【转载请注明来源】 = ‘b’ 会【作者:唐霜】原创内容,盗版必究。触发对 some 的 watch 监听。
本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。ang.net未经授权,禁止复制转载。【本文受版权保护】

$views

在模型上,你可能需要即时的获取当前模型上著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net的一些数据状态,你可以通过读取 $vie【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ws 来得到对于单个字段的一些必要信息。

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
const { $views } = model
const { some } = $views // 获取字段视图
const { 
  value, // 该字段当前的值
  required, // 该字段当前是否必填
  readonly, // 该字段当前是否只读
  disabled, // 该字段当前是否禁用
  errors, // 该字段当前是否校验不通过,如果不通过,会返回失败的 error 列表,否则返回空数组
  ...extra, // 你可以在定义 schema 时,定一个 extra 对象,该对象的值会被解构到 view 中,方便使用
} = some

value 具有响应式效果,例如:

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。ng.net转载请注明出处:www.tangshua【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。ng.net本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】
some.value = 'b'

也会触发 watch 监听。这在 ang本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netular 中有非常好的效果。对于某个字段本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。而言,你只需要得到该字段的 view,你未经授权,禁止复制转载。【原创内容,转载请注明出处】就可以得到它的全部。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】ng.net【本文受版权保护】本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。

这在一些系统中非常有用。因为你需要即使的【本文首发于唐霜的博客】【本文首发于唐霜的博客】了解一个字段它当前的一些状态情况,以此决【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】定是否要做一些事。最常见的就是错误提示:

【转载请注明来源】著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。
<input v-model="model.view.some.value" />
<span v-for="error in model.view.some.errors">{{ error.message }}</span>

通过这种方式非常容易的解决了错误提示问题【未经授权禁止转载】本文作者:唐霜,转载请注明出处。

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】

但是需要注意,errors 仅包含 va原创内容,盗版必究。【转载请注明来源】lidators 中的校验逻辑极其结果,【版权所有】唐霜 www.tangshuang.net【作者:唐霜】而不包含必填和类型校验错误。

【版权所有,侵权必究】【未经授权禁止转载】【版权所有,侵权必究】

$views.$errors

在 $views 上存在一个特殊的属性 【本文受版权保护】原创内容,盗版必究。$errors,它用于获取 $views转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。 所有字段的所有 errors 的并集,本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。通过读取 model.$views.$e【作者:唐霜】【作者:唐霜】rrors,可以知道当前模型上,所有校验【本文受版权保护】【关注微信公众号:wwwtangshuangnet】规则都有哪些是没有通过的。这里的校验规则【版权所有】唐霜 www.tangshuang.net【作者:唐霜】仅包含 validators 规则中配置本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。的规则。

【本文受版权保护】著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。【未经授权禁止转载】

更新数据

更新 model 的数据是一个比较复杂的【作者:唐霜】【未经授权禁止转载】操作。看上去不就是修改一个数据吗?但是,本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。你要是考虑到具体的业务场景,你就会发现,原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。太复杂了。我们不可能考虑到所有的场景,所【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。以,我提供了以下方式。

【本文首发于唐霜的博客】【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。et 获取更多精彩内容】

set

通过 set 方法更新一个属性。

【本文受版权保护】原创内容,盗版必究。未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
model.set('name', 'lily')

set 遵循 schema 的 set 【版权所有,侵权必究】转载请注明出处:www.tangshuang.net逻辑,如果该字段是 disabled, 未经授权,禁止复制转载。【原创内容,转载请注明出处】readonly, computed,都未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net是不能被修改的,set 会无效,如果 s转载请注明出处:www.tangshuang.net【版权所有,侵权必究】et 的值不符合字段类型的规定(sett本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】er 处理之后),也是不能修改的。这些错未经授权,禁止复制转载。【版权所有,侵权必究】误,都可以在 onError 中被捕获到本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】

未经授权,禁止复制转载。未经授权,禁止复制转载。【访问 www.tangshuang.n【转载请注明来源】【作者:唐霜】et 获取更多精彩内容】【访问 www.tangshuang.n【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】

$views

利用 view 也可以更新数据。

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【本文受版权保护】转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【本文受版权保护】ng.net
model.$views.some.value = 'new value'

[property]

通过直接修改 model 上的属性来更新著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】数据:

原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】原创内容,盗版必究。
class SomeModel extends Model {
  static some = {
    type: String,
    default: 'a',
  }
}

const model = new SomeModel()
console.log(model.some) // 'a'

model.some = 'b'
console.log(model.some) // 'b'

update

一次性更新多个字段的值。

【转载请注明来源】【转载请注明来源】本文作者:唐霜,转载请注明出处。
model.update({
  name: 'lily',
  age: 12,
})

类似 react 的 setState,本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。update 是一个接收一个对象,批量更【原创不易,请尊重版权】【原创内容,转载请注明出处】新,带事务管理的(当更新失败时,数据会恢【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net复到初始状态),异步的操作。完成数据更新【转载请注明来源】【版权所有】唐霜 www.tangshuang.net之后,compute 和 watch 回【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。调都会被执行。在短时间内多次调用 upd【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。ate,多次传入的对象会被合并,并且一次【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。性更新,并且返回一个 Promise 实【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net例。如果是 resolved 状态,表示原创内容,盗版必究。本文作者:唐霜,转载请注明出处。没有问题,可以更新。但是如果是 reje【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netcted 状态,则表示更新的数据不符合校【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net验规则,整个更新都不会被执行,数据不会发【转载请注明来源】转载请注明出处:www.tangshuang.net生任何变化。

【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ang.net著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。

它支持第二个参数 async 表示异步更新,当第二个参数为 true 时,它的事务机制才能生效。

【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【转载请注明来源】et 获取更多精彩内容】【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。
model.update({
  name: 'lily',
  age: 12,
}, true)

数据监听

和 angular 一样,你可以通过一个【本文受版权保护】【转载请注明来源】方法来监听某个属性值的变化。

本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。
本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。【未经授权禁止转载】

watch

使用 watch 监听某个属性的变化,并【版权所有,侵权必究】【本文首发于唐霜的博客】且在监听函数中,可以更新另外一个属性。但本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】和 angular 不同的是,watch【本文受版权保护】本文作者:唐霜,转载请注明出处。 默认支持深检查。在监听函数中,可使用 转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。this 指向当前 model。

【本文首发于唐霜的博客】【作者:唐霜】【作者:唐霜】
model.watch('name', ({ key next, prev }) => {
  // key: 当前被修改的属性的 keyPath,数组,注意,key 不一定是这里的 name,而有可能是 name.length 等子属性
  // next: 被修改为什么值
  // prev: 被修改前的值
})

unwatch

取消 watch 绑定的回调函数。

【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。ang.net本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。原创内容,盗版必究。

监听任何变动

使用 * 可以监听 model 数据的所【本文首发于唐霜的博客】【作者:唐霜】有变动,只要数据变动,回调函数都会被执行【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】

【作者:唐霜】转载请注明出处:www.tangshua【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。ng.net本文作者:唐霜,转载请注明出处。
model.watch('*', () => {})

数据校验

在 TySheMo 模型中,进行模型的数转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】据校验非常方便。因为我们在 schema【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】 中已经定义好了所有的校验规则,所以实际未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.net上,你只需要对上文中关于 Schema 原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net的 validate 的部分进行了解,就【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】可以知道 Model 的校验逻辑是怎样的未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。

【本文首发于唐霜的博客】【转载请注明来源】

validate

直接调用 Model 的 validat本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。e 方法进行数据校验。

【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【作者:唐霜】et 获取更多精彩内容】【版权所有,侵权必究】
const errors = model.validate()

它不接收任何参数,直接对 model 的未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】数据进行全量校验。返回一个数组,该数组包【本文受版权保护】未经授权,禁止复制转载。含了所有校验错误。当全部校验都通过的情况本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。下,返回一个空数组。

【版权所有,侵权必究】【本文受版权保护】本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。

需要注意,这里的校验会使用 type, 【版权所有,侵权必究】未经授权,禁止复制转载。required, validators【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】 进行校验。它的结果和 $views.$【原创不易,请尊重版权】转载请注明出处:www.tangshuang.neterrors 不同,多出了 type, 著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。required 的校验结果。

【未经授权禁止转载】【原创内容,转载请注明出处】原创内容,盗版必究。原创内容,盗版必究。

你也可以针对单个 字段进行校验。

本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshua【本文首发于唐霜的博客】未经授权,禁止复制转载。ng.net【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【本文受版权保护】et 获取更多精彩内容】转载请注明出处:www.tangshua【作者:唐霜】未经授权,禁止复制转载。ng.net
const errors = model.validate('key')

甚至,你还可以用一个值去看看,这个值是否原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】符合该字段的规则。例如,我现在有一个值 本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。some,我并不知道它是否符合 name原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net 字段的规则,在我打算使用它之前,我先通转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net过下面的方法进行检验。

【版权所有,侵权必究】【访问 www.tangshuang.n【版权所有,侵权必究】原创内容,盗版必究。et 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。
const errors = model.validator('name', some)

如果 errors 是空的,则说明 so著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。me 符合 name 的所有校验逻辑,可本文版权归作者所有,未经授权不得转载。【本文受版权保护】以放心使用。当然,一般情况下,不会这样去著作权归作者所有,禁止商业用途转载。【作者:唐霜】操作。

【原创不易,请尊重版权】【关注微信公众号:wwwtangshua【本文受版权保护】著作权归作者所有,禁止商业用途转载。ngnet】【版权所有】唐霜 www.tangshu【作者:唐霜】【作者:唐霜】ang.net【关注微信公众号:wwwtangshua【本文受版权保护】原创内容,盗版必究。ngnet】

数据重置

前文提到,围绕 Model 实际上有三种本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】状态的数据。我们现在要对第一种数据进行处转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】理,然后让数据变为第二种状态的数据。即我著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。们像 model 中注入新数据,使 mo未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】del 重新拥有一个全新的状态数据。

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshu【本文受版权保护】未经授权,禁止复制转载。ang.net【未经授权禁止转载】【原创不易,请尊重版权】

fromJSON

恢复数据调用 fromJSON 方法即可【未经授权禁止转载】原创内容,盗版必究。。这个方法接收新的数据。

本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】ang.net【访问 www.tangshuang.n【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】
model.fromJSON(data)

它实际上用到了 schema 上的多个方【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net法(最主要是 create 规则),保证【作者:唐霜】著作权归作者所有,禁止商业用途转载。了恢复的数据的完整性和可靠性。

转载请注明出处:www.tangshua【原创内容,转载请注明出处】【作者:唐霜】ng.net【转载请注明来源】【作者:唐霜】

onParse

在后台 api 返回的数据和 model【转载请注明来源】未经授权,禁止复制转载。 进行数据恢复之间,有一个 hook 方原创内容,盗版必究。本文作者:唐霜,转载请注明出处。法会被调用,即 onParse 方法。你本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net可以在创建模型时重写该方法,在 rest【本文受版权保护】【未经授权禁止转载】ore 一开始时,该方法会被调用。

【版权所有,侵权必究】【作者:唐霜】【本文受版权保护】【转载请注明来源】
class SomeModel extends Model {
  static some = { ... }
  onParse(data) {
    return {
      ...data,
      user: localStoreage.getItem('USER'),
    }
  }
}

onParse 方法只能在创建模型时进行【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】规定。在 restore 执行之前,on原创内容,盗版必究。未经授权,禁止复制转载。Parse 会被调用,得到一个新的数据之本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】后在 restore。因此,你可以在 o【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。nParse 里面做任何事情,特别是你知转载请注明出处:www.tangshuang.net【版权所有,侵权必究】道你的 api 接口返回的数据需要进行结【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】构或字段名调整的时候。

【版权所有】唐霜 www.tangshu【作者:唐霜】未经授权,禁止复制转载。ang.net【关注微信公众号:wwwtangshua【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】【本文首发于唐霜的博客】ang.net本文版权归作者所有,未经授权不得转载。

toJSON

toJSON 方法将 Model 导出为一个纯 ob本文作者:唐霜,转载请注明出处。【本文受版权保护】ject 保存,依赖于 save 属性的导出结果。save 属性和 as【本文受版权保护】【未经授权禁止转载】set 属性影响了 toJSON 的字段未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。导出值。

本文作者:唐霜,转载请注明出处。【未经授权禁止转载】
class Time extends Meta {
  static create(value) {
    return new Date(value)
  }
  static save(date, key) {
    const value = formatDate(date, 'YYYY-MM-DD')
    return { [key]: value } // 注意此处
  }
}

上面 save 属性返回了一个对象,并不【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】是说当前这个字段的值将以这个对象进行保存【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。,而是将这个对象合并到导出的整体对象上去【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net,这样,save 属性可以返回一个特定 【版权所有,侵权必究】【原创不易,请尊重版权】key 的对象,甚至多个 key 的对象【原创内容,转载请注明出处】【未经授权禁止转载】,产生保存需要的数据。

本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】
class Time extends Meta {
  static asset = 'time_at'
  static create(value) {
    return new Date(value)
  }
  static save(date, key) {
    const value = formatDate(date, 'YYYY-MM-DD')
    return value // 注意此处
  }
}

当存在 asset 属性时,行为逻辑就不【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。同了,asset 属性表示当字段一定是从【转载请注明来源】著作权归作者所有,禁止商业用途转载。 json 对象的该字段获取,save 本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。的结果也一定放在该字段上。

【未经授权禁止转载】【未经授权禁止转载】【关注微信公众号:wwwtangshua原创内容,盗版必究。【原创内容,转载请注明出处】ngnet】

数据提取

将数据输出为另外一个个数,用于表单提交之【未经授权禁止转载】未经授权,禁止复制转载。类的。这是我在工作中积累出来的经验。在提未经授权,禁止复制转载。原创内容,盗版必究。交表单之前,你所需要的数据格式跟你实际在【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】模型中管理的状态格式大部分情况下不同,前本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】端和后段对数据格式的要求非常不一致,这很未经授权,禁止复制转载。【原创不易,请尊重版权】常见。通过 schema 中的配置选项,【作者:唐霜】【版权所有】唐霜 www.tangshuang.net你都不需要动脑筋就可以得到一个规整后的数本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net据。

【作者:唐霜】【版权所有】唐霜 www.tangshu【未经授权禁止转载】【未经授权禁止转载】ang.net原创内容,盗版必究。【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【转载请注明来源】ngnet】

toData

通过 toJson 方法,你可以得到一个【未经授权禁止转载】【作者:唐霜】基于规整规则后输出的 js 对象。

【原创内容,转载请注明出处】【未经授权禁止转载】【版权所有】唐霜 www.tangshu【本文受版权保护】本文版权归作者所有,未经授权不得转载。ang.net
const json = model.toJson()

toParams

通过 toParams 方法,你可以得到转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】一个 urlencoded 的数据。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。
const params = model.toParams()

它的结果如下:

【版权所有】唐霜 www.tangshu【本文受版权保护】原创内容,盗版必究。ang.net著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【本文首发于唐霜的博客】
{
  'books[1].name': 'A',
  'books[1].price': 12.5
}

它的属性层级被打平为一个字符串。

【转载请注明来源】【关注微信公众号:wwwtangshua【原创内容,转载请注明出处】原创内容,盗版必究。ngnet】未经授权,禁止复制转载。

toFormData

通过 toFormData 方法,得到一【原创不易,请尊重版权】【作者:唐霜】个 FormData 的实例。在一些要上本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】传文件的情况下会用到。

【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ang.net本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua【未经授权禁止转载】【未经授权禁止转载】ngnet】
const formdata = model.toFormData()

onExport

在利用 schema 中的规整规则格式化本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】数据之后,你可能还需要再对数据进行一次转原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net化,这时我们提供了一个 hook 方法,【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。即 onExport 方法。它和 onP【版权所有】唐霜 www.tangshuang.net【作者:唐霜】arse 有异曲同工之妙。
著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。
class SomeModel extends Model {
  onExport(data) { // 这里的 data 是 toJson 之后得到的对象
    return {
      ...data,
      user: localStoreage.getItem('USER'),
    }
  }
}

这能保证你提交的数据,一定是按照后台 a【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netpi 需要的。

【转载请注明来源】【转载请注明来源】

onParse 和 onExport 这【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】两个 hook 的设计,让模型具有可调整【转载请注明来源】【未经授权禁止转载】性。当后台 api 返回的数据结构发生变本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。化,或对你提交的数据提出要求时,你完全不著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】必去修改业务中的代码,而是直接修改模型这【本文受版权保护】【作者:唐霜】两个 hook 中的逻辑即可。

【作者:唐霜】转载请注明出处:www.tangshua原创内容,盗版必究。【版权所有,侵权必究】ng.net【版权所有,侵权必究】【作者:唐霜】
【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【转载请注明来源】

嵌套模型

在某些场景下,我们会创建多个模型,并且在本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】模型中嵌套模型。这种情况其实比较常见,因【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net此,tyshemo 内部做了处理,你可以转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】这样使用:

【转载请注明来源】【原创内容,转载请注明出处】【作者:唐霜】
import { Model } from 'tyshemo'

class PersonModel extends Model {
  static name = {
    type: String,
    default: '',
  }
  static age = {
    type: Number,
    default: 0,
  }
}

class InvestorModel extends Model {
  // 复用其他模型的单个属性
  static name = PersonModel.name
  static age = PersonModel.age

  static money = {
    type: Number,
    default: 0,
    setter: v => +v,
    getter: v => v + '',
  }
}

class ProjectModel extends Model {
  // 直接使用其他模型,表示 investor 这个属性的值是 InvestorModel 的一个实例
  // 它将直接继承整个 InvestorModel 的校验、规整化等等规则
  static investor = InvestorModel

  // 数组表示这是一个子模型列表
  static investors = [InvestorModel]

  static name = {
    type: String,
    default: '',
    required: true,
  }
}

const project = new ProjectModel()
console.log(project.investor.money)

同时,它也支持传入一个数组,表示这是一个本文版权归作者所有,未经授权不得转载。【转载请注明来源】元素全部是该模型的列表。但是,此时需要注本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】意,它是不支持多元素的模型的。

转载请注明出处:www.tangshua原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】ng.net【转载请注明来源】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。ngnet】

Validator

Tyshemo内置了一些校验器,而在Me本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ta中,使用Validator来实例化一转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】个校验器。我们可以这样获取Validat【本文首发于唐霜的博客】未经授权,禁止复制转载。or:

【作者:唐霜】原创内容,盗版必究。
import { Validator } from 'tyshemo'

它是一个类,你可以通过实例化该类来获得一著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net个校验器。

【本文受版权保护】著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。

该类上有一些静态方法,这些静态方法可以生原创内容,盗版必究。【原创不易,请尊重版权】成特定的校验器,你可以这样获取它们:

原创内容,盗版必究。【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。
const {
  required,
  integer,
  decimal,
  max,
  min,
  email,
  url,
  date,
  match,
  maxLen,
  minLen,
  merge,
  enume,
} = Validator

required(message, emptyFn)

这个校验器生成器比较特殊,它会根据Met转载请注明出处:www.tangshuang.net【转载请注明来源】a上的required属性来决定是否要执【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net行必填校验。如果Meta上的requir转载请注明出处:www.tangshuang.net【版权所有,侵权必究】ed为true,那么就会执行必填校验,如【转载请注明来源】【原创内容,转载请注明出处】果校验没有通过,就会在tyshemo的校【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。验结果中增加一条以message作为信息【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】的错误。emptyFn可以让你自己定义怎【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net么样算是not required的逻辑。

著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】原创内容,盗版必究。【未经授权禁止转载】

integer(len, message)

用于校验一个数整数部分,len表示该数整【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】数部分支持多少位,比如 100 表示 3著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。 位。integer(3, '整数部分不能超过3位') 这个校验器会在遇到 1000 的时候报【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net错。

未经授权,禁止复制转载。【作者:唐霜】转载请注明出处:www.tangshua【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。ng.net

decimal(len, message)

校验逻辑和integer一致,只是作用于著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】小数部分。

【本文首发于唐霜的博客】未经授权,禁止复制转载。

max(num, message)

用于校验一个数是否大于临界值,比如 max(100, '不能超过100') 在遇到101时,就会报错。

【本文首发于唐霜的博客】未经授权,禁止复制转载。【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】et 获取更多精彩内容】

mix(num, message)

和max一致,只是用于校验最小值。

未经授权,禁止复制转载。【转载请注明来源】本文版权归作者所有,未经授权不得转载。【转载请注明来源】

email(message)

用于校验字符串是否是一个邮箱格式。

转载请注明出处:www.tangshua【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ng.net本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】原创内容,盗版必究。

url(message)

用于校验字符串是否是一个url格式。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。

date(message)

用于校验字符串是否是一个日期格式。

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】未经授权,禁止复制转载。ang.net本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】

maxLen(len, message)

用于校验一个字符串的最大长度是否超过le【本文受版权保护】【转载请注明来源】n。

【转载请注明来源】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。

minLen(len, message)

用于校验一个字符串长度是否少于len个字【本文受版权保护】【未经授权禁止转载】

【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。ang.net未经授权,禁止复制转载。

match(validator:Function, message)

用于创建一个根据validator函数返【原创不易,请尊重版权】未经授权,禁止复制转载。回结果的校验器。validator返回t原创内容,盗版必究。本文作者:唐霜,转载请注明出处。rue表示通过了校验。

原创内容,盗版必究。【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.n未经授权,禁止复制转载。【本文受版权保护】et 获取更多精彩内容】

另外,为了方便使用validator还可【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net以是其他任何Type,比如:

【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netang.net【访问 www.tangshuang.n【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】et 获取更多精彩内容】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netng.net
[
  match(/[0-9]+/, 'Some should must be a number'),
  match(v => v > 10, 'Some should be greater than 10'),
  match(String, 'Some should be a string'),
  match(NaN, 'Some should not be a number'),
  match(Promise, 'Some should be a promise'),
  match('aaa', 'Some should equal `aaa`'),
]

allOf(validators:Function[], message)

用于创建一个根据全部validators【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。返回结果的校验器。和match不同的是,未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】validators是一个函数数组,必须转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。全部函数都返回true,才算通过校验。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua原创内容,盗版必究。【本文受版权保护】ngnet】

anyOf(validators:Function[], message)

和allOf不同,只要validator本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。s中任何一个validator函数返回t【原创内容,转载请注明出处】原创内容,盗版必究。rue,就算通过校验。

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。ng.net【转载请注明来源】【转载请注明来源】【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】et 获取更多精彩内容】

AsyncGetter

AsyncGetter是一个tyshem【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】o中特殊的方法,它用于处理某些特殊场景,著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】即当你的前端应用需要从接口拉取某些数据作【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】为应用的特定数据时,可以使用这个方法。

【未经授权禁止转载】【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netngnet】原创内容,盗版必究。
import { AsyncGetter } from 'tyshemo'

AsyncGetter(defaultValue:Any, AsyncGetter:Function)

比如,用于选取地址的省市县数据,我们不可未经授权,禁止复制转载。【转载请注明来源】能打包到js里面,都是通过接口返回的,这【作者:唐霜】【版权所有,侵权必究】个时候,我们就可能需要用到AsyncGe【作者:唐霜】【本文受版权保护】tter:

【转载请注明来源】著作权归作者所有,禁止商业用途转载。
class Address extends Meta {
  static default = []
  static options = AsyncGetter([], () => fetch('http://...').then(res => res.json()).then(data => data.locations))
}

这样,当Address对应字段生成时,它【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。会先以[]作为options属性的默认值未经授权,禁止复制转载。【未经授权禁止转载】,随后发送一个ajax请求,并将执行的结【转载请注明来源】【版权所有,侵权必究】果作为新的值作为options的值。此时【本文首发于唐霜的博客】【作者:唐霜】,还会触发Model上的!事件,你可以通【本文首发于唐霜的博客】【版权所有,侵权必究】过watch来监听:

未经授权,禁止复制转载。【未经授权禁止转载】
model.watch('!', fn)

AsyncGetter除了作为Meta属原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】性的值之外,也支持作为state的值。例【版权所有】唐霜 www.tangshuang.net【本文受版权保护】

【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】【本文受版权保护】ang.net未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。
import { Model, AsyncGetter } from 'tyshemo'

class SomeModel extends Model {
  state() {
    return {
      some: AsyncGetter('', () => fetch('...').then(res => res.text())),
    }
  }
}

但是这种情况下,它不会触发!,而是直接触【作者:唐霜】转载请注明出处:www.tangshuang.net发some这个模型属性的change事件

【转载请注明来源】著作权归作者所有,禁止商业用途转载。
model.watch('some', ...)

Loader

Loader是tyshemo中更高集成的【版权所有,侵权必究】【作者:唐霜】工具,它用于解析JSON,基于JSON来原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】创建模型。

转载请注明出处:www.tangshua【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。ng.net原创内容,盗版必究。
import { Loader } from 'tyshemo'

class SomeLoader extends Loader {
  fetchJSON(url) {
    return axios.get(url).(res => res.data)
  }
}

new SomeLoader().load(url).then((SomeModel) => {
  const model = new SomeModel()
  ...
})

JSON协议

{
  "schema": {
    "name": {
      "default": "tomy",
      "type": "string",
      "required()": "age > 10" // use () after a key to mean a function attribute
    },
    "age": {
      "default": 10,
      "type": "number"
    }
  },
  "state": {
    "is_adult": false
  },
  "attrs": {
    "is_empty": "false"
  },

  // methods for Model
  "methods": {
    "getWeight()": "age * 5"
  }
}

它将被解析为

转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【本文受版权保护】ng.net【版权所有,侵权必究】
class SomeModel extends Model {
  schema() {
    return {
      "name": {
        "default": "tomy",
        "type": "string",
        required() {
          return this.age > 10
        },
      },
      "age": {
        "default": 10,
        "type": "number"
      }
    }
  }
  state() {
    return {
      "is_adult": false
    }
  }
  attrs() {
    return {
      "is_empty": "false"
    }
  }

  getWeight() {
    return this.age * 5
  }
}

如果JSON中的key形式为 <...> ,会认为这是一个子模型。例如:

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ng.net【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】ngnet】【版权所有,侵权必究】【版权所有,侵权必究】
{
  "schema": {
    "<submodel>": {
      // the structure of a json schema for submodel
      "schema": { }
    },
    "<submodels>": [ // be an array
      {
        "schema": { }
      }
    ]
  }
}

特殊语法

await fetch

该语法会调用Loader实例的fetch著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】方法,进行异步请求。例如:

转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】ng.net【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。
{
  "methods": {
    "fetchBookPrice(id)": "await fetch('...' + id).price"
  }
}

它有两个注意点:1.只能在methods转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。中使用;2.它直接返回loader.fe【作者:唐霜】原创内容,盗版必究。tch的结果,你直接通过.price的方本文作者:唐霜,转载请注明出处。【原创内容,转载请注明出处】式得到对应属性值,而不需要用then之类【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net的语法。

【未经授权禁止转载】【未经授权禁止转载】

:fetch

它是AsyncGetter的语法糖,例如【作者:唐霜】未经授权,禁止复制转载。

【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。原创内容,盗版必究。
{
  "schema": {
    "book": {
      "default": null,
      "priceRange": "[0,100]:fetch('....').range"
    },
  },
  "state": {
    "someGlobalOptions": "[]:fetch('....')"
  }
}

上面的 []:fetch(...) 就算 AsyncGetter([], ...) 的语法糖。

【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。ngnet】未经授权,禁止复制转载。

结语

TySheMo 是一款全新的思考前端数据著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。管理的类库。它主要解决的是在前端不同的使原创内容,盗版必究。未经授权,禁止复制转载。用场景下,如何抽象数据类型和规则逻辑,特【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。别是在一些前后端数据耦合比较严重的系统中【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。。使用 TySheMo 不仅可以解决数据【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。校验问题,还可以解决数据的输入输出结构调本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。整问题。当然,它还会有一些不足,如果你觉【原创内容,转载请注明出处】【版权所有,侵权必究】得这样的想法对你有一些借鉴意义,或者任何【原创不易,请尊重版权】未经授权,禁止复制转载。想法,欢迎在下方留言和我讨论。

【作者:唐霜】【原创不易,请尊重版权】【未经授权禁止转载】

如果你觉得本书对你有帮助,通过下方的二维码向我打赏吧,帮助我写出更多有用的内容。

2019-06-04

已有6条评论
  1. degen.lin 2022-12-06 18:09

    对象太大了 当列表加载数据时 转换成model很耗时

    • 否子戈 2022-12-07 11:54

      列表的场景可能不适合,因为模型实例化需要建立非常多的对象,这就会导致占用比较多的资源,一般是在需要严格控制业务逻辑的地方才用模型建模,展示数据的场景用模型就比较重

  2. yefz 2022-04-12 10:55

    当使用 state 字段定义的时候,会报 TypeError: this.state is not a function

    import { Model, meta } from ‘tyshemo’;

    export class FormModel extends  Model {
      @meta({ type: String, label: ‘状态’, required: true })
      state = 1
    }

    • 否子戈 2022-04-13 22:47

      state是保留属性,是model上用于初始化state的方法,不可以作为字段来使用

  3. bigsir 2020-02-27 12:45

    good!

  4. 高清壁纸 2019-06-22 15:11

    学习了