TySheMo 开发手册

TySheMo 开发手册

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

前言

适用版本:v10

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

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

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

和TypeScript不同,TySheM转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.neto的类型检查是运行时的,而非编译时的,因未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。此是两个不同的工具。

【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。et 获取更多精彩内容】【本文首发于唐霜的博客】

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

【本文首发于唐霜的博客】【未经授权禁止转载】【本文受版权保护】

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

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

概念

由于它是一个模式库,在设计时,我从前端领【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】域模型的实际声明模式出发,创建了一些概念【关注微信公众号:wwwtangshuangnet】【作者:唐霜】。只有掌握这些概念之后,你才能更好的使用【转载请注明来源】【原创不易,请尊重版权】这个库。

未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】【转载请注明来源】ang.net【原创不易,请尊重版权】

这些概念包括:原型、规则、类型、元、模式转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】、模型。

【版权所有,侵权必究】【转载请注明来源】

原型

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

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

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

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

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

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

TySheMo 判定一个变量是否符合某个转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net原型主要通过创建一个判定逻辑,返回 tr【作者:唐霜】【转载请注明来源】ue 或者 false。这个过程主要依托著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】 TySheMo 内建的接口,你可以使用【关注微信公众号:wwwtangshuangnet】【转载请注明来源】 js 的原生接口作为原型,也可以使用 著作权归作者所有,禁止商业用途转载。【转载请注明来源】TySheMo 内置的原型。

【本文首发于唐霜的博客】【原创不易,请尊重版权】【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】ngnet】

在学习下面的 Prototype 的使用【本文首发于唐霜的博客】【转载请注明来源】方法之后你可以创建自己的原型,用来作为数原创内容,盗版必究。【未经授权禁止转载】据类型判定的原子属性判定方法。

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

规则

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

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

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

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

类型

数据类型(Type,本文简称“类型”),【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net是指一个变量的本质特征,TySheMo 未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。中的类型关注数据结构,以及结构上每个节点【版权所有】唐霜 www.tangshuang.net【转载请注明来源】的类型。什么是“变量的本质特征”呢?就是【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。你需要知道这个变量,它的内在结构,以及嵌未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。套在它结构节点上的更深层级的类型。

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

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

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

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

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

从某种意义上讲,原型也是一种类型,但是由【原创内容,转载请注明出处】【作者:唐霜】于原型是原子层面的,它无法描述有结构的数转载请注明出处:www.tangshuang.net【未经授权禁止转载】据,只能描述无结构的数据。举个例子,原型【本文受版权保护】本文作者:唐霜,转载请注明出处。可以指出某个变量应该是一个数组,但是,它未经授权,禁止复制转载。未经授权,禁止复制转载。无法描述这个数据的内部结构,无法描述数组【原创内容,转载请注明出处】未经授权,禁止复制转载。内每个元素的类型。

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

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

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

TySheMo 将抽象的“数据类型”进行原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。提炼,用“类型容器”这个可以用代码表达的【原创内容,转载请注明出处】【本文受版权保护】东西代替。

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

基于 Type,我们可以定义任意的数据类原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。型。等你学了 Type 的使用方法之后,【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。你也可以定义自己的数据类型了。

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

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

【版权所有,侵权必究】【访问 www.tangshuang.n【本文受版权保护】【未经授权禁止转载】et 获取更多精彩内容】【原创内容,转载请注明出处】

元由多个属性(Attribute)组成,原创内容,盗版必究。【作者:唐霜】每一个方面的描述就是一个 Attribu本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.nette。类型是其中的一个属性,除了类型之外【本文首发于唐霜的博客】【作者:唐霜】,还有字段默认值、是否必填、是否禁用、校【本文受版权保护】【版权所有】唐霜 www.tangshuang.net验逻辑等属性。下文会详细阐述 Meta 原创内容,盗版必究。【未经授权禁止转载】的用法。

【版权所有,侵权必究】【转载请注明来源】【未经授权禁止转载】

模式

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

【版权所有,侵权必究】【版权所有】唐霜 www.tangshu【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。ang.net【关注微信公众号:wwwtangshua【作者:唐霜】本文作者:唐霜,转载请注明出处。ngnet】【作者:唐霜】

模式由多个元组成。

【作者:唐霜】【本文受版权保护】【原创不易,请尊重版权】

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

本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。

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

【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netngnet】未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】

模型

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

转载请注明出处:www.tangshua【转载请注明来源】【转载请注明来源】ng.net未经授权,禁止复制转载。【关注微信公众号:wwwtangshua【版权所有,侵权必究】【转载请注明来源】ngnet】未经授权,禁止复制转载。

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

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

在设计时,我将一个模型设计为 Model【原创内容,转载请注明出处】【原创不易,请尊重版权】 的继承类,也就是如下的写法:

【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。ngnet】本文版权归作者所有,未经授权不得转载。【转载请注明来源】
import { Model } from 'tyshemo'

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

这样,创建一个模型之后,你需要实例化这个【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。模型为一个具体的对象,才能使用这个模型。【未经授权禁止转载】未经授权,禁止复制转载。这主要是考虑到:1. 模型不应该在应用一【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net运行时就消耗内存,而是在使用的时候再去实本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】例化出来。2. 同一个模型可能在同一个页【转载请注明来源】【原创不易,请尊重版权】面需要实例化多个。

本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】

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

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

总而言之,模型是业务中,对数据进行管理、【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。使用的对象。也是 TySheMo 的最顶原创内容,盗版必究。【原创不易,请尊重版权】层设计。

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

Store

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

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

在后面的章节中,我们有详细的教程告诉你如著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。何使用 Store。

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

小结

TySheMo 从微观的数据规则到宏观的【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。数据模型,给出了一个完成的前端数据建模的本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。实现。Tyshemo 的知识体系,大致为【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】一个层层递进的设计:

【作者:唐霜】【原创不易,请尊重版权】
                               Validator      Store ----+
                                   |                    |
Prototype ----+                    |                    |
              |                    |                    |
              +------ Type ------ Meta ----- Schema ----+--> Model
              |        |
Rule ---------+        |
                       |
                +------+------+
                |             |
                v             v
               Ty       Parser, Mocker

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

转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ng.net本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net

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

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

快速入门

本章主要教会你如何快速的在你的项目中使用【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。 TySheMo。

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

安装

npm i tyshemo

引入到项目

tyshemo 这个 npm 包提供了多转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】种被引用的方式。

未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.n【作者:唐霜】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】转载请注明出处:www.tangshua原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。ng.net
 import { Model } from 'tyshemo' // webpack构建环境中使用
const { Model } = require('tyshemo') // nodejs等环境中使用

tyshemo 导出的默认方式是 com【版权所有,侵权必究】转载请注明出处:www.tangshuang.netmonjs,但是它的源码不是纯的 ES6本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】 源码,它引入了第三方 npm 库,所以【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。,不能直接在 ES6 系统中直接使用,需本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。要通过构建工具打包。

【本文首发于唐霜的博客】未经授权,禁止复制转载。【原创不易,请尊重版权】

为了方便使用,tyshemo 输出一个完【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。整的 bundle 文件,以 umd 规本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】范导出接口,可以直接在页面引入。

原创内容,盗版必究。【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【版权所有,侵权必究】ang.net【版权所有】唐霜 www.tangshu原创内容,盗版必究。原创内容,盗版必究。ang.net未经授权,禁止复制转载。
<script src="/node_modules/tyshemo/dist/tyshemo.min.js"></script>
<script>
const { Model } = window['tyshemo']
</script>

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

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

使用

TySheMo 有很多接口。我们在业务中【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net最常用的是两个,一个是利用类型校验能力,【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】对拿到的数据进行检验。另一个则是使用 M【原创内容,转载请注明出处】【本文受版权保护】odel 在业务中管理数据,确保数据的可【未经授权禁止转载】原创内容,盗版必究。靠性。

【版权所有,侵权必究】【本文首发于唐霜的博客】【原创内容,转载请注明出处】

数据类型校验

转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【未经授权禁止转载】ng.net【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。
// 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.tangshua未经授权,禁止复制转载。【本文首发于唐霜的博客】ng.net【未经授权禁止转载】

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

本文作者:唐霜,转载请注明出处。【作者:唐霜】
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 获取更多精彩内容】【未经授权禁止转载】的接口,学习完之后,你就可以理解上面这段【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net代码是怎么工作的了。

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】ng.net转载请注明出处:www.tangshua【未经授权禁止转载】原创内容,盗版必究。ng.net

原型

你可以使用 js 原生接口(标准库或特定【原创内容,转载请注明出处】【作者:唐霜】结构)作为原型:

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

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

未经授权,禁止复制转载。【本文首发于唐霜的博客】原创内容,盗版必究。【未经授权禁止转载】

使用 TySheMo 内置原型:

【作者:唐霜】【转载请注明来源】【原创内容,转载请注明出处】转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】ng.net

在具体写代码的时候,这些原型总是位于数据未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】校验链的最末端。

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

类型

本章详细讲解类型容器的使用。前文讲到,类本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。型容器是 TySheMo 对数据的结构类【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。型的具体化,帮助开发者判断某个变量是否符本文作者:唐霜,转载请注明出处。【转载请注明来源】合某种结构类型。

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

TySheMo 中内置了 6 种常见的结著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。构类型。Dict, List, Tupl【作者:唐霜】转载请注明出处:www.tangshuang.nete, Enum, Range, Mapp【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ing, 其中最常用的莫过于 Dict 【本文受版权保护】转载请注明出处:www.tangshuang.net和 List。我们在 TySheMo 体转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.net系下使用类型容器,不是去定义某个数据结构【版权所有,侵权必究】未经授权,禁止复制转载。,而是用来判断某个变量是否符合某个结构类【原创不易,请尊重版权】【转载请注明来源】型。

【原创不易,请尊重版权】【作者:唐霜】转载请注明出处:www.tangshua【本文受版权保护】转载请注明出处:www.tangshuang.netng.net

TySheMo 中创建类型容器的基础是 【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】Type 类,Dict, List, T【原创不易,请尊重版权】【本文受版权保护】uple, Enum, Range, M【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。apping 全都是基于Type 扩展出【作者:唐霜】【原创不易,请尊重版权】来的。

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

Type

作为类型容器的基础,Type 类创建基于原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。 Prototype 的类型容器。也就是原创内容,盗版必究。【转载请注明来源】说,在进行实例化的时候,你应该传入 pr【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netototype 作为参数。

转载请注明出处:www.tangshua原创内容,盗版必究。【原创不易,请尊重版权】ng.net著作权归作者所有,禁止商业用途转载。
const SomeType = new Type(String)

但是在实际编程的时候,你不会这样去做,我【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net们 100% 只会用到 Dict, Li【本文受版权保护】【未经授权禁止转载】st, Tuple, Enum, Ran【本文受版权保护】原创内容,盗版必究。ge, Mapping. 在这些扩展出来【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】的类型中,每个节点,可以直接接收 pro【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。totype,而无需自己写一个 new 【原创内容,转载请注明出处】【原创内容,转载请注明出处】Type。

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

得到一个类型容器之后,你就可以使用类型容原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net器的方法进行类型校验了。下方的方法是 D【原创不易,请尊重版权】【本文受版权保护】ict, List, Tuple, En【版权所有,侵权必究】原创内容,盗版必究。um, Range, Mapping 都【作者:唐霜】【本文受版权保护】具备的。

原创内容,盗版必究。【版权所有,侵权必究】【关注微信公众号:wwwtangshua【转载请注明来源】【作者:唐霜】ngnet】

assert

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

【本文受版权保护】转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ng.net【未经授权禁止转载】【原创内容,转载请注明出处】
import { Dict } from 'tyshemo'

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

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

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

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

catch

catch 方法用于抓取类型校验过程中的原创内容,盗版必究。【作者:唐霜】错误,如果错误发生,返回错误(一个 Ty【原创内容,转载请注明出处】【本文首发于唐霜的博客】peError 实例),如果没有错误,返【未经授权禁止转载】【转载请注明来源】回 null。

著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。
const error = SomeDict.catch({
  name: 'tomy',
  age: 10,
})

test

test 方法用于判定校验是否通过,通过【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。返回 true,不通过返回false。

【本文首发于唐霜的博客】未经授权,禁止复制转载。【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。
const data = {
  name: 'some',
  age: 0,
}
if (SomeDict.test(data)) {
  // do something
}

track

track 方法返回一个 Promise【未经授权禁止转载】【作者:唐霜】 实例,在校验过程中会抓取错误,如果错误【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】发生,会 reject 抛出错误,如果通【作者:唐霜】著作权归作者所有,禁止商业用途转载。过,则 resolve null。

【作者:唐霜】本文作者:唐霜,转载请注明出处。
SomeDict.track({
  name: null,
}).catch(error => console.log(error))

trace

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

【原创内容,转载请注明出处】【转载请注明来源】【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【本文受版权保护】et 获取更多精彩内容】原创内容,盗版必究。

但是,你需要注意的是,由于是异步校验,如【未经授权禁止转载】【原创不易,请尊重版权】果你在异步任务没有执行之前修改了传入的数【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。据,就会发生不可预测的问题,因为当异步校【作者:唐霜】【转载请注明来源】验开始时,已经不是要校验原始数据了。

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

Strict/strict/toBeStrict

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

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

其中 Strict 和 strict 是【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。属性,它们是完全一样的,只是为了给开发者原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】提供不同大小写使用习惯的选择。

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

你会得到一个全新的 Dict 实例,这个【未经授权禁止转载】原创内容,盗版必究。实例复用了原来实例的配置参数,但是和原来【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】的实例没有任何关系。

原创内容,盗版必究。原创内容,盗版必究。

toBeStrict 是一个方法。调用它【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net,你会将当前这个实例转化为一个严格模式的本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】实例。

【版权所有,侵权必究】【转载请注明来源】【未经授权禁止转载】
SomeDict.toBeStrict(true)

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

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

Dict

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

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。
const SomeDict = new Dict({
  name: String,
  age: 10,
})
const OtherDict = new Dict({
  some: SomeDict, // 复用定义好的类型
  other: ifexist(SomeDict), // 使用规则
  total: ifnotmatch(Number, 0), // 通过 ifnotmatch 可以在类型校验失败时设置默认值
})

可以说,Dict 是我们用到最多的一种类原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net型。它的使用场景及其广泛,而且有非常高的【原创不易,请尊重版权】未经授权,禁止复制转载。复用需求,因此,在 Type 的基础上,【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netDict 还拥有另外 2 个方法。

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

extend

扩展当前 dict 得到一个新 dict【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】。新 dict 天生拥有当前 dict 【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。的全部属性,但是你可以通过传入新的属性值【转载请注明来源】【本文首发于唐霜的博客】进行覆盖,同时,你可以传入原本没有的属性转载请注明出处:www.tangshuang.net【作者:唐霜】来添加属性。

【本文首发于唐霜的博客】转载请注明出处:www.tangshua未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ng.net【版权所有】唐霜 www.tangshu【本文受版权保护】【本文受版权保护】ang.net【原创不易,请尊重版权】
const Some2Dict = SomeDict.extend({
  age: Numeric, // 修改一个原有属性
  height: Number, // 添加一个新属性
})

extract

从当前 dict 中提炼部分属性得到一个【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。新 dict。新 dict 的属性一定是【转载请注明来源】【本文首发于唐霜的博客】原 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,
})

这在一些必要的场景下非常有用,可以减少代【本文受版权保护】转载请注明出处:www.tangshuang.net码量,但同时又可以非常明晰的知道一个 d【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ict 都必须拥有那些校验规则。

本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【本文受版权保护】【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ang.net

List

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

【未经授权禁止转载】【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】
const SomeList = new List([SomeDict])

这样规定之后,要求被检查的数组的每一个元本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。素必须符合 SomeDict 类型。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】ng.net原创内容,盗版必究。
const SomeList = new List([SomeDict, Some2Dict])

这样规定之后,要求被检查的数组的元素,必著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。须是 SomeDict 或 Some2D【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ict 中任意一种类型,适合列表中有多种【作者:唐霜】【版权所有,侵权必究】结构类型的时候用。

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

List 结构往往对应后台输出的数组,因本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。此,如果这个数组中一个元素都没有,也不会【转载请注明来源】转载请注明出处:www.tangshuang.net引发错误。因为正常业务中,数组中不存在数【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net据是常有的事。

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

Tuple

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

【转载请注明来源】转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】ng.net【转载请注明来源】
const SomeTupe = new Tuple([String, Number])
function some(...args) {
  SomeTuple.assert(args)
}

Tuple 的末尾元素可以使用 ifex著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。ist,非末尾元素使用 ifexist 本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。无意义。

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

Enum

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

本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。ang.net【本文受版权保护】原创内容,盗版必究。
const SomeEnum = new Enum([Number, Numeric]) // 数字或则数字形式的字符串都行

Range

Range 表示区间,被校验的数字必须在著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。规定的区间内。这个类型比较少用到。

著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】
const SomePercent = new Range({
  min: 0,
  max: 100,
  minBound: true, // 是否包含最小值,默认 true
  maxBound: false, // 是否包含最大值,默认 true
})

Mapping

Mapping 表示映射关系表,可用于规本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。定结构单一的对象类型结构。例如:

原创内容,盗版必究。【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.netng.net
const SomeMapping = new Mapping({
  key: Numeric, // 属性名的类型
  value: Number, // 属性值的类型
})

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

未经授权,禁止复制转载。【未经授权禁止转载】
{
  201908: 12,
  201909: 20,
  201910: 19
}

这种 key-value 类型规律且单一未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。的对象,且最重要的是 key 是在规律性【本文首发于唐霜的博客】未经授权,禁止复制转载。变化的,可以用 Mapping 来检查。

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

规则

TySheMo 体系中的属性规则,仅适用【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】于 Dict 和 Tuple。为什么呢?未经授权,禁止复制转载。未经授权,禁止复制转载。只有 Dict 和 Tuple 中我们可转载请注明出处:www.tangshuang.net【转载请注明来源】以确定属性,List 虽然也是数组,但是原创内容,盗版必究。本文作者:唐霜,转载请注明出处。它的元素个数是不定的,是一个弹性结构,无原创内容,盗版必究。原创内容,盗版必究。法运用属性规则。

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

你必须在属性的位置上使用这些规则,而不能原创内容,盗版必究。【未经授权禁止转载】直接传给 Type 构造器。

【本文首发于唐霜的博客】【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】et 获取更多精彩内容】【作者:唐霜】原创内容,盗版必究。
const SomeDict = new Dict({
  some: ifexist(String),
})
const SomeTuple = new Tuple([
  Number,
  ifexist(String),
])

Tuple 相当于有确定的索引号的对象,【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。因此,可以使用规则。但是在使用一些规则的【版权所有,侵权必究】【转载请注明来源】时候,要考虑它存在的意义,例如 ifex著作权归作者所有,禁止商业用途转载。【作者:唐霜】ist 仅适用末尾的元素,非末尾元素使用【未经授权禁止转载】本文作者:唐霜,转载请注明出处。无意义。

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

内置规则

TySheMo 的内置规则全部是函数,规【转载请注明来源】转载请注明出处:www.tangshuang.net则函数一般接收原型、类型和规则作为参数。未经授权,禁止复制转载。原创内容,盗版必究。它们包含:

【转载请注明来源】转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ng.net

lazy

异步规则。当一个类型需要异步加载的时候,【本文受版权保护】【转载请注明来源】可以使用该规则。它接收一个函数,用于返回转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】最终的类型。在最终的类型返回之前,所有的【原创不易,请尊重版权】原创内容,盗版必究。校验都会被直接通过。

【原创内容,转载请注明出处】【关注微信公众号:wwwtangshua未经授权,禁止复制转载。【本文受版权保护】ngnet】
const SomeType = new Dict({
  some: lazy(fetchType), // 定义一个 fetchType 函数,用于从服务端抓取数据类型
})

在 fetchType 没有完成之前,s【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。ome 属性相当于遵循 Any。fetc【原创不易,请尊重版权】转载请注明出处:www.tangshuang.nethType也可以是一个同步函数,用于同步【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】生成规则。

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

shouldmatch

必须满足传入的类型,如果不满足,则会抛出【原创不易,请尊重版权】【版权所有,侵权必究】传入的 message 作为错误信息。

转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。ng.net未经授权,禁止复制转载。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。ng.net
const SomeType = new Dict({
  some: shouldmatch(String, '{keyPath} 必须是一个字符串'),
})

shouldnotmatch

和 shouldmatch 相反,检查时著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net,不能是传入的类型,如果符合传入的类型,未经授权,禁止复制转载。【转载请注明来源】反而会抛出错误,并用传入的 messag未经授权,禁止复制转载。【版权所有,侵权必究】e 作为错误信息。

转载请注明出处:www.tangshua【转载请注明来源】【未经授权禁止转载】ng.net未经授权,禁止复制转载。
const SomeType = new Dict({
  some: shouldnotmatch(String, '{keyPath} 不能是一个字符串'),
})

match

同时满足多条规则。match 接收一个数【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。组,但比较常用的场景是搭配 should【作者:唐霜】本文版权归作者所有,未经授权不得转载。match 和 shouldnotmat本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】ch 这两个规则来用。

本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.n原创内容,盗版必究。转载请注明出处:www.tangshuang.netet 获取更多精彩内容】【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【本文受版权保护】ang.net本文版权归作者所有,未经授权不得转载。
const SomeType = new Dict({
  some: match([
    shouldmatch(String, '必须是一个字符串'),
    shouldmatch(Numeric, '必须是一个数字'),
  ]),
})

这样可以起到根据不同类型错误返回不同错误【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。提示的效果。

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

determine

判定规则。用于根据不同的情况使用不同的规【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】则。例如,你想先判定数据中是否存在某个字本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。段,如果存在的话,使用某个类型,如果不存【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】在的话使用另外一个类型。

【本文受版权保护】【作者:唐霜】【原创不易,请尊重版权】【原创内容,转载请注明出处】
const SomeType = new Dict({
  some: determine(data => 'type' in data, String, Any),
})

它接收的参数为:

本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。原创内容,盗版必究。【未经授权禁止转载】

ifexist

根据属性存在情况进行校验。当属性不存在时未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。,不进行任何校验。当属性存在时,必须符合【原创不易,请尊重版权】【版权所有,侵权必究】传入的类型。ifexist 是一个非常重著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net要的规则,它可以让属性更加灵活。而且由于本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。规则本身是可以嵌套的,你还可以在 ife原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netxist 里面嵌套另外一个规则,例如 i【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.netfnotmatch。

原创内容,盗版必究。【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。ang.net【本文受版权保护】本文作者:唐霜,转载请注明出处。
const SomeType = new Dict({
  some: ifexist(String), // some 属性可以不存在,如果存在,必须是一个 String
})

ifnotmatch

如果被校验的属性不符合类型,则用传入的参【本文首发于唐霜的博客】【未经授权禁止转载】数作为默认值进行替代。

本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。未经授权,禁止复制转载。未经授权,禁止复制转载。
const SomeType = new Dict({
  some: ifnotmatch(Number, 0), // 如果 some 属性值不是 Number,那么直接将 some 属性设置为 0
})

它的第二个参数可以是一个函数,如果是一个本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】函数的话,会在校验失败时,执行该函数,并原创内容,盗版必究。【原创不易,请尊重版权】把该函数的返回结果作为默认值。

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

ifmatch

和 ifnotmatch 相反,当接收到著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】到值和传入到类型一致时,第二个参数会被使【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。用。

【原创不易,请尊重版权】【作者:唐霜】【本文首发于唐霜的博客】

shouldexist

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

【本文受版权保护】【原创不易,请尊重版权】转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。ang.net
const SomeType = new Dict({
  some: shouldexist(data => !!data.should, String),
})

shouldnotexist

和 shuldexist 相反,当函数返【关注微信公众号:wwwtangshuangnet】【作者:唐霜】回 true 时,不允许该属性存在,当函本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】数返回 fasle 时,该属性可存在也可【本文受版权保护】【关注微信公众号:wwwtangshuangnet】不存在,存在时必须满足传入的类型。

原创内容,盗版必究。【本文受版权保护】
const SomeType = new Dict({
  some: shouldnotexist(data => !!data.shouldnot, String),
})

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

本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua【转载请注明来源】【本文受版权保护】ng.net【版权所有,侵权必究】

instance

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

【未经授权禁止转载】本文作者:唐霜,转载请注明出处。
const SomeType = new Dict({
  some: instance(String),
})

equal

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

【作者:唐霜】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】ang.net【版权所有,侵权必究】原创内容,盗版必究。
const SomeType = new Dict({
  some: equal({ ok: true }),
})

nullable

允许被检查到值为 null。

转载请注明出处:www.tangshua原创内容,盗版必究。【原创不易,请尊重版权】ng.net未经授权,禁止复制转载。【版权所有,侵权必究】
const SomeType = dict({
  some: nullable(String), // null 或者 String
})

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

【关注微信公众号:wwwtangshua【版权所有,侵权必究】【原创不易,请尊重版权】ngnet】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。

lambda

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

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。et 获取更多精彩内容】【访问 www.tangshuang.n【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。
const SomeTuple = new Tuple([Number, Number])
const SomeType = new Dict({
  do: lambda(SomeTuple, Number),
})

为了方便起见,我将它的第一个参数允许传入转载请注明出处:www.tangshuang.net【版权所有,侵权必究】一个数组,该数组会自动实例化为一个 Tu【原创内容,转载请注明出处】【本文受版权保护】ple。

【版权所有,侵权必究】原创内容,盗版必究。原创内容,盗版必究。
const SomeType = new Dict({ 
  do: lambda([Number, Number], Number), 
})

Rule

在学习了前面的所有内置规则之后,我们来学转载请注明出处:www.tangshuang.net【作者:唐霜】习这些规则背后的 Rule 这个类。

转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】ng.net【关注微信公众号:wwwtangshua【转载请注明来源】本文作者:唐霜,转载请注明出处。ngnet】【未经授权禁止转载】
const SomeRule = new Rule({
  name: 'Some',
  validate: v => v !== 0,
  message: 'value should not be 0.',
})

所有上述规则生成器函数的最后,都是返回一【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】个 Rule 的实例。因此,你实际上可以【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net使用这些 Rule 实例来做一些事。

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

validate

validate 方法用于对数据进行校验未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net,并返回一个 error 或 null。

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

bind

bind 方法用于绑定一个函数,当 va本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】lidate 校验中返回了错误,这个函数【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。一定会执行,接收 error 实例。

【作者:唐霜】未经授权,禁止复制转载。

在一些规则中,例如 ifnotmatch【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。, ifmatch 中,数据会被校验和改未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。写。但是,如果你这个时候想要对被校验的原著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。始所抛出的错误进行监控时,可以使用 bi本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。nd 方法:

【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。
const SomeRule = ifnotmatch(Number, 0)
const SomeType = new Dict({ some: SomeRule, })

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

这样,无论任何情况下,你都可以抓取到 S未经授权,禁止复制转载。【转载请注明来源】omeRule 校验失败时抛出的错误。

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

unbind

解除 bind 的函数。

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

Ty

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

【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。ng.net
import {
  Ty,
  Numeric, // 获取原型
  Dict, // 获取类型
  ifexist, // 获取规则
} from 'tyshemo/cjs/ty'

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

【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netang.net原创内容,盗版必究。【未经授权禁止转载】
if (Ty.is(10).of(Number)) {
  // do something
}

Ty 上提供了如下的便捷方法。这些方法,【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。大部分都是链式的,理解起来会比较舒服。

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

expect.to.be

类似于 assert 的功能。

【转载请注明来源】【原创内容,转载请注明出处】转载请注明出处:www.tangshua未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netng.net
Ty.expect(10).to.be(Number)

你也可以使用它的别名 expect.to【版权所有】唐霜 www.tangshuang.net【转载请注明来源】.match 这样看上去更符合词语的意思【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。

著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua【本文受版权保护】【本文首发于唐霜的博客】ng.net
Ty.expect(10).to.match(Number)

两则之间仅仅是一个别名而已,作用完全相同本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。

转载请注明出处:www.tangshua原创内容,盗版必究。【原创不易,请尊重版权】ng.net【原创内容,转载请注明出处】

catch.by

类似于 type 实例的 catch 功本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。能。

本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】
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

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

原创内容,盗版必究。【版权所有】唐霜 www.tangshu【本文受版权保护】【版权所有,侵权必究】ang.net【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】ngnet】
if (Ty.is(Number).typeof(10)) {
  ...
}

is.of

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

转载请注明出处:www.tangshua【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netng.net【关注微信公众号:wwwtangshua【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netngnet】
if (Ty.is(10).of(Number)) {
  ...
}

decorate.with

这是一个高级功能,用于对 ES6+ 的 著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】class 进行修饰。你需要了解“装饰器著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net”这种操作符之后再来使用。而且,就目前而【转载请注明来源】本文作者:唐霜,转载请注明出处。言,使用装饰器要求你的编译工具支持。

【转载请注明来源】【本文受版权保护】

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

【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】【版权所有,侵权必究】【本文受版权保护】未经授权,禁止复制转载。
@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.n【本文受版权保护】【关注微信公众号:wwwtangshuangnet】et 获取更多精彩内容】

除了用来对类进行装饰,还可以用来生成可监【转载请注明来源】【关注微信公众号:wwwtangshuangnet】测对象和函数。

未经授权,禁止复制转载。【本文首发于唐霜的博客】【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【作者:唐霜】et 获取更多精彩内容】
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.tangshuang.net是一个装饰器宿主。

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

create

在某些情况下,你并不知道你应该创建一个 【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】Dict 还是一个 List,Ty.cr【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.neteate 帮助你完成这个任务。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。【转载请注明来源】
const SomeType = Ty.create(unknown)

监听功能

Ty 提供一个监听错误的功能。在一些特殊未经授权,禁止复制转载。【转载请注明来源】的情况下,而要获得监听能力,你必须实例化未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net一个 Ty 对象:

【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。ang.net【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】ang.net本文作者:唐霜,转载请注明出处。
const ty = new Ty()

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

【本文受版权保护】【转载请注明来源】【版权所有】唐霜 www.tangshu【本文受版权保护】本文版权归作者所有,未经授权不得转载。ang.net【原创内容,转载请注明出处】

bind

绑定一个函数,用于在监听到错误发生时执行【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net。这个函数接收一个 Error 实例,即【未经授权禁止转载】【原创不易,请尊重版权】错误发生时的错误实例。

【关注微信公众号:wwwtangshua【本文受版权保护】本文版权归作者所有,未经授权不得转载。ngnet】未经授权,禁止复制转载。【转载请注明来源】【作者:唐霜】
const watch = error => record(error) // 创建一个函数,用于和你的监控系统对接,将错误信息记录到监控系统中
ty.bind(watch)

unbind

用于解绑一个监听函数。

【版权所有】唐霜 www.tangshu【转载请注明来源】【未经授权禁止转载】ang.net原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。
ty.unbind(watch)

silent

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

【版权所有,侵权必究】【本文受版权保护】【作者:唐霜】【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】ang.net
ty.silent(true)

一般来说,不建议开启安静模式,但是在监听【本文首发于唐霜的博客】原创内容,盗版必究。了错误的时候,你可以通过开启安静模式减少未经授权,禁止复制转载。【原创内容,转载请注明出处】报错。

原创内容,盗版必究。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】未经授权,禁止复制转载。ang.net【本文受版权保护】

错误

当我们使用 TySheMo 的类型检查系转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】统去检查一个数据时,在检查到数据不符合类【原创不易,请尊重版权】【本文首发于唐霜的博客】型结构时,会有错误抛出。这个错误 err【未经授权禁止转载】未经授权,禁止复制转载。or 是一个错误实例,即 Error 的【作者:唐霜】【关注微信公众号:wwwtangshuangnet】实例。Type 的错误是一个 Error【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net 的子集,具有特殊的属性。

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

错误收集和展示

TySheMo 内部检查时会收集所有错误【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。,而非遇到检查失败就立即停止后续检查。也【版权所有,侵权必究】转载请注明出处:www.tangshuang.net就是说,它是遍历整个被检查对象后才把错误原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】返回的。在返回的错误中,你可以通过打印错未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。误 message 查看所有错误。例如:

【原创内容,转载请注明出处】【版权所有,侵权必究】
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.n【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。

它有4条信息,a[0], a[1], b【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net, c,告诉了你四个位置上具体是什么错误著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】

【访问 www.tangshuang.n【作者:唐霜】【本文首发于唐霜的博客】et 获取更多精彩内容】【作者:唐霜】著作权归作者所有,禁止商业用途转载。

错误信息模板

你可以看到,上面的错误信息,前 3 条使【原创不易,请尊重版权】【本文受版权保护】用了内置的错误信息模板。你可以通过修改模【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。板来调整内置信息模板。

原创内容,盗版必究。原创内容,盗版必究。
import { TyError } from 'tyshemo'

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

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

【原创不易,请尊重版权】原创内容,盗版必究。原创内容,盗版必究。

在消息值里面,你可以使用字符串模板例如上【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.net面示例代码里面的 {keyPath},可【原创不易,请尊重版权】【作者:唐霜】以用到的有:

【本文受版权保护】【关注微信公众号:wwwtangshua原创内容,盗版必究。【本文首发于唐霜的博客】ngnet】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【作者:唐霜】ngnet】【关注微信公众号:wwwtangshua原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。ngnet】

错误信息序列化

当你的 should 或 receive【未经授权禁止转载】转载请注明出处:www.tangshuang.net 过长的适合,你阅读起来非常麻烦,TyS本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。heMo 提供了可以换行展示的能力,这样【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】可以方便你阅读,要开启这个功能,你只需要原创内容,盗版必究。转载请注明出处:www.tangshuang.net

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。
import { TyError } from 'tyshemo'

TyError.shouldBreakLongMessage = true

开启这个功能之后,你的消息里面的对象、数【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】组,会自动进行换行,这样可以方便你阅读,转载请注明出处:www.tangshuang.net【作者:唐霜】可以更好的知道错误的详情。

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

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

你可以看到,开启之后,b 那条错误里面的本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】对象换行了。

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

错误信息脱敏

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

【本文受版权保护】【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【作者:唐霜】et 获取更多精彩内容】
import { TyError } from 'tyshemo'

TyError.shouldHideSensitiveData = true

关闭之后,最终打印出来的值会被脱敏。字符【本文首发于唐霜的博客】【未经授权禁止转载】串显示为 “***̶【转载请注明来源】【本文受版权保护】1; 数字显示为 ***。

【未经授权禁止转载】【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【本文受版权保护】et 获取更多精彩内容】转载请注明出处:www.tangshua未经授权,禁止复制转载。原创内容,盗版必究。ng.net

错误信息格式化

针对单条错误,你希望对这一条错误信息进行未经授权,禁止复制转载。原创内容,盗版必究。单独格式化。你可以通过 error.fo【本文受版权保护】【版权所有,侵权必究】rmat 方法实现。

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】【原创不易,请尊重版权】ang.net【未经授权禁止转载】
const error = SomeType.catch(some)
error.format({ templates, jointag, shouldbreak, shouldusesensitive, keyPathPrefix })

注意:格式化之后,error 的 mes【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netsage 被永久化转变。

转载请注明出处:www.tangshua【本文首发于唐霜的博客】【转载请注明来源】ng.net【本文首发于唐霜的博客】

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

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】【作者:唐霜】ang.net【原创不易,请尊重版权】

Parser

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

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

描述语言

Parser 是用以解析基于字符串描述的未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net Type 构造器。它的目标是,一个类型【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】容器的配置,由服务端返回。它类似于一些描著作权归作者所有,禁止商业用途转载。【转载请注明来源】述语言,用字符串描述类型结构。

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

例如,服务端返回了如下的 json 作为未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。类型结构描述:

【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。ngnet】【版权所有,侵权必究】
{
  "__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"
  }
}

它完全是基于字符串的描述的。但是很明显,【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。你可以大致读懂它的描述内容。只是有些符号【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。代表什么意义,你还需要学一下而已。前端在【本文受版权保护】【未经授权禁止转载】拿到这样一段描述 json 之后,怎么把著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。它解析为一个类型容器呢?

【本文首发于唐霜的博客】【本文首发于唐霜的博客】
import Parser from 'tyshemo/cjs/parser'

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

这样你就可以将描述文本转化为可运行的类型本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net容器。

【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。

基本语法

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

【本文受版权保护】【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。
{
  属性名:表达式,
}

以一个对象的形式约束接口返回的数据结构和转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】节点上数据的类型。表达式可以包含如下内容本文作者:唐霜,转载请注明出处。【转载请注明来源】

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

原始类型

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

所有的原始类型有如下:

【访问 www.tangshuang.n未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】未经授权,禁止复制转载。【本文首发于唐霜的博客】
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本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netng.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【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.netang.net
{
  "name": "?string",
  "age": "&number",
  "type": "='dog'",
  "id": "string,numeric",
  "data": "!undefined",
  "some": "?&string"
}

前三种规则必须置于描述最前面,? 可以和【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。其他规则混用,例如 “?=&【版权所有,侵权必究】转载请注明出处:www.tangshuang.net#8217;tomy'” 表本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】示如果存在该属性,必须等于字符串 【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。216;tomy’。

【本文首发于唐霜的博客】【未经授权禁止转载】【本文受版权保护】【原创内容,转载请注明出处】

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

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

扩展语法

__def__

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

转载请注明出处:www.tangshua【转载请注明来源】本文作者:唐霜,转载请注明出处。ng.net【转载请注明来源】【作者:唐霜】
{
  "__def__": [
    {
      "name": "Dog", // 定义名字
      "def": { // 定义类型的内容,一般是复合类型才需要在 __def__ 中定义
        "name": "string",
        "type": "='dog'"
      }
    },
    {
      "name": "Cat",
      "def": {
        "name": "string",
        "color": "'white'|'grey'"
      }
    }
  ],
  "animal": "Dog|Cat" // 现在这里可以使用预先定义好的两个类型
}

__def__ 必须是数组,它里面的定义本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。是有顺序的,后面的定义可以引用前面的定义【本文受版权保护】【本文首发于唐霜的博客】

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

__self__

自引用类型,只能在 __def__ 中使【未经授权禁止转载】未经授权,禁止复制转载。用。当我们需要在某些场景下,使用复合类型本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net本身时,需要用到它。

本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】【原创内容,转载请注明出处】【未经授权禁止转载】
{
  "__def__": [
    {
      "name": "Person",
      "def": {
        "name": "string",
        "age": "number",
        "children": "?__self__[]" // 如果存在children这个字段时,它必须是Person列表
      }
    }
  ]
}

注:__self__ 是一个实现上的限制【作者:唐霜】【未经授权禁止转载】,我们没有办法直接在 def 中使用 P本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.neterson,只能使用 __self__ 【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】作为占位符。

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

注释

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

原创内容,盗版必究。原创内容,盗版必究。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。ang.net
{
  "#name": "对name进行注释",
  "name": "string"
}

支持通过keyPath对嵌套节点进行注释【本文首发于唐霜的博客】【原创内容,转载请注明出处】,例如:

【原创内容,转载请注明出处】原创内容,盗版必究。
  "#books[0]": "对书本的对象进行注释",
  "books": [
    {
      "title": "string"
    }
  ]
}

类型嵌套

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

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

自定义类型逻辑如下:

【原创不易,请尊重版权】【关注微信公众号:wwwtangshua【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】

TySheMo Parser 会首先去读原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net取 __def__ 中的内容,它必须是一【作者:唐霜】转载请注明出处:www.tangshuang.net个数组,Parser 会去遍历这个数组,【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】这个数组的元素结构如 { name, d转载请注明出处:www.tangshuang.net【本文受版权保护】ef },每遍历一个元素,这个元素的解析【原创不易,请尊重版权】原创内容,盗版必究。结果就会加入到 Parser 中,成为一本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。个定义,在后面的任何描述中,都可以使用这【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】个元素。遍历完 __def__ 之后,再【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。对整个 json 进行解析。

本文作者:唐霜,转载请注明出处。【转载请注明来源】
【访问 www.tangshuang.n【版权所有,侵权必究】转载请注明出处:www.tangshuang.netet 获取更多精彩内容】【本文受版权保护】

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

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

自定义类型

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

【版权所有,侵权必究】【作者:唐霜】【版权所有,侵权必究】原创内容,盗版必究。
// 预设类型
const types = {
  some: new Tuple([String, Number]),
}

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

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

在 Parser 实例化的时候传入预设类转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。型,这些预设类型只会在该解析器解析的时候著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。生效,而不会影响其他解析器。

【访问 www.tangshuang.n原创内容,盗版必究。本文作者:唐霜,转载请注明出处。et 获取更多精彩内容】【本文受版权保护】本文作者:唐霜,转载请注明出处。【未经授权禁止转载】

注释

我们通过 json 来描述时,支持特殊的原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】方式表示注释。注释非常简单,就是在需要注转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。释的字段名字前加 #,这样就可以了。

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】ang.net
{
  "#name": "对 name 进行注释",
  "name": "string"
}

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

【版权所有】唐霜 www.tangshu【转载请注明来源】【作者:唐霜】ang.net原创内容,盗版必究。【转载请注明来源】
{
  "body": {
    "#hand": "对象支持嵌套注释",
    "hand": "boolean",
    "foot": "boolean"
  },
  "#books[0].price": "数组不支持嵌套注释,只能在数组外部通过 keyPath 的方式进行注释",
  "books": [
    {
      "price": "number"
    }
  ],
  "#body.foot": "对象也支持 keyPath 的方式进行注释"
}

注意,__def__ 为关键字。在生成类未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】型容器时,这些注释字段会按照规则,被添加本文作者:唐霜,转载请注明出处。【未经授权禁止转载】到 __comments__ 属性中,方【本文受版权保护】本文版权归作者所有,未经授权不得转载。便在 TyshemoService 中使原创内容,盗版必究。未经授权,禁止复制转载。用。

转载请注明出处:www.tangshua原创内容,盗版必究。【本文受版权保护】ng.net【本文首发于唐霜的博客】

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

【关注微信公众号:wwwtangshua【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netngnet】【转载请注明来源】

接口

parse(description)

将描述文本 json 对象解析为 tys【原创内容,转载请注明出处】原创内容,盗版必究。hemo 的类型系统实例。

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

describe(type)

将 tyshemo 的类型系统实例(Ty转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】pe 实例)抽象为描述文本 json。

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

define(type, description)

定义一个解析对组。

著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshua原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】【本文首发于唐霜的博客】
parser.define('some', SomeType)

经过 define 之后,你就可以在描述【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】文本中使用 some 代表 SomeTy【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】pe 了。

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

技巧

一般而言,只会在一些特殊场景下去使用解析【转载请注明来源】【转载请注明来源】器。基于性能的考虑,不应该在前端大面积使【原创内容,转载请注明出处】原创内容,盗版必究。用这种方案,因为解析器本身在解析的时候,【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。就会消耗一定的性能。

转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】ng.net【本文首发于唐霜的博客】

前后端通信时

【本文受版权保护】【本文首发于唐霜的博客】【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】未经授权,禁止复制转载。ang.net

由于前后端通信时,你无法直接传递运行时变【版权所有,侵权必究】【原创内容,转载请注明出处】量,不可能把 String, Numbe【作者:唐霜】【转载请注明来源】r 这种传给前端,因此,只能选择 jso原创内容,盗版必究。【本文受版权保护】n 字符串等通用描述方式。

原创内容,盗版必究。【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。

前后端同构时

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

使用同一套类型校验时,前后端使用相同的预【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。设类型,可以减少传输成本。例如上面的一段本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。代码,其中的 some 类型,我们可以提【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。前预设好,这样,在发送的描述文件时,就不【原创不易,请尊重版权】【原创不易,请尊重版权】需要再在描述文件中使用 __def__ 原创内容,盗版必究。本文作者:唐霜,转载请注明出处。去定义 some。

【访问 www.tangshuang.n【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】

由于一些规则,特别是 determine【原创不易,请尊重版权】【转载请注明来源】 是无法直接获取计算后的类型的,因此,在本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。这种情况下,我们要使用自定义类型来实现这【原创内容,转载请注明出处】未经授权,禁止复制转载。些特殊规则的解析。

转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】ng.net未经授权,禁止复制转载。未经授权,禁止复制转载。
export const SomeRule = determine(data => data.type === 'die' ? DieType : LifeType)

事先定义 determine 规则的时候【本文受版权保护】【转载请注明来源】,就是这样使用。让外部可以获取它。接着,原创内容,盗版必究。【本文首发于唐霜的博客】使用独立作用域:

【未经授权禁止转载】【原创不易,请尊重版权】
import { SomeRule } from './rules'

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

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

本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshua原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】ng.net【作者:唐霜】本文版权归作者所有,未经授权不得转载。
import { SomeRule } from './rules'

SomeRule.pattern = [DieType, LifeType]

但是这样做明显是带有污染性质的,不建议这【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。么做,本文只是告诉开发者,在特殊情况下,本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net我们可以通过覆盖 pattern 来得到【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net想要的结果。

【版权所有】唐霜 www.tangshu【本文受版权保护】【版权所有,侵权必究】ang.net【访问 www.tangshuang.n【本文受版权保护】原创内容,盗版必究。et 获取更多精彩内容】

Mocker

上面,我们利用 Parser.descr未经授权,禁止复制转载。【本文受版权保护】ibe 可以生成描述文件。差不多同样的道本文作者:唐霜,转载请注明出处。【本文受版权保护】理,我们可以生成 mock 数据。问题的本文作者:唐霜,转载请注明出处。【未经授权禁止转载】关键在于,我们如何生成每种原型对应的随机【版权所有】唐霜 www.tangshuang.net【转载请注明来源】值。用法和 Parser 很像,但随机值未经授权,禁止复制转载。【转载请注明来源】的产生不同。

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.netng.net
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 的假数据未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】。Mocker 只有一个方法 mock,因此这里就不再深入赘述。

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

Service

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

【版权所有,侵权必究】【原创不易,请尊重版权】【转载请注明来源】
// book.type.js
import { Dict } from 'tyshemo'

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

现在,我们有一个关于 book 的 re【作者:唐霜】【作者:唐霜】stful 接口,在前后端同学都是黑盒的【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。情况下,我们可以启动一个这样的服务:

本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。et 获取更多精彩内容】【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netang.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 运行这个文件:

【原创内容,转载请注明出处】【版权所有,侵权必究】【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。
node book.api.doc.js

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

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

初始配置

在实例化Service的时候,需要传入一【本文首发于唐霜的博客】【原创不易,请尊重版权】个初始配置,这个配置是一个非常大的配置,【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】它包含了所有和接口、类型相关的配置。通过著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】这个配置,你可以描述所有的接口,以及输入【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。输出的一些规则。

【访问 www.tangshuang.n【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。
{
  // 接口返回时,统一经过该方法进行处理。
  // 在大部分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【关注微信公众号:wwwtangshuangnet】这个里面首先需要对接口进行分组,这是必须【关注微信公众号:wwwtangshuangnet】【作者:唐霜】的一个设计,因为一个接口的集合,不可能完【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。全不分组一次性给到开发者。每一个组的配置转载请注明出处:www.tangshuang.net【未经授权禁止转载】包含三个字段,id, name, ite转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ms,其中items就是将该组下的所有接【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net口按顺序排列,这个顺序会影响输出文档中的【版权所有,侵权必究】【原创不易,请尊重版权】顺序。

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

每一个item的配置如下:

【版权所有】唐霜 www.tangshu【未经授权禁止转载】原创内容,盗版必究。ang.net【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】ngnet】未经授权,禁止复制转载。
{
  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.netpe getRequestType ba未经授权,禁止复制转载。原创内容,盗版必究。sePath 这几个配置,这几个配置如果转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。在 item 中配置了,那么这个接口不会【本文首发于唐霜的博客】【原创内容,转载请注明出处】再使用全局配置中的这几个配置,而是使用自转载请注明出处:www.tangshuang.net原创内容,盗版必究。己的配置,不配置的情况下,会直接使用全局【原创内容,转载请注明出处】【版权所有,侵权必究】配置。errorMapping 会和全局转载请注明出处:www.tangshuang.net【转载请注明来源】配置中的 errorMapping 合并【作者:唐霜】【版权所有】唐霜 www.tangshuang.net后作为当前接口的输出结果。

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

文档服务器

通过Service可以快速启用一个文档服本文版权归作者所有,未经授权不得转载。【转载请注明来源】务器,让前后端的同学可以同时看着文档进行【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。开发,避免复杂的沟通交流。

未经授权,禁止复制转载。【版权所有】唐霜 www.tangshu著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。ang.net转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。ng.net【关注微信公众号:wwwtangshua原创内容,盗版必究。【原创不易,请尊重版权】ngnet】

当我们通过 new Service 得到著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】一个 server 之后,我们可以通过 【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】doc 方法快速启动一个服务器来展示文档未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】

【作者:唐霜】【版权所有,侵权必究】【版权所有,侵权必究】
server.doc(options)

使用 node 去运行这段脚本,就可以在【本文首发于唐霜的博客】【作者:唐霜】浏览器中打开对应的端口访问默认提供的网页【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net进行阅读。这里当 options 是对文【转载请注明来源】著作权归作者所有,禁止商业用途转载。档服务器启动时的配置。具体如下:

未经授权,禁止复制转载。【作者:唐霜】转载请注明出处:www.tangshua【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netng.net
{
  // 服务器端口
  port: 9000,
  // 文档页面的title
  title: 'My App API DOC', // the doc page title
  // 文档页面一进入的欢迎语
  description: '', // the doc page description
  // 文档模版文件的路径,注意要使用绝对路径
  docTemplateFile: null,
}

怎么解决一些注释呢?我们怎么知道哪个字段【转载请注明来源】未经授权,禁止复制转载。是什么意思呢?我们有一个 hook 用以【未经授权禁止转载】【本文受版权保护】解决注释问题。

【关注微信公众号:wwwtangshua原创内容,盗版必究。原创内容,盗版必究。ngnet】本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】【本文受版权保护】
RequestType.__comments__ = {
  // body.head 是对应的请求参数的键路径,而非单纯一个键
  'body.head': '这是 body.head 属性的注释',
}

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

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

Mock服务器

通过启用一个Mock服务器,前端同学不需【作者:唐霜】本文版权归作者所有,未经授权不得转载。要后台同学完成开发,就可以在前端调通接口【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】,避免前端开发中,被后台接口开发卡住脖子【本文受版权保护】【版权所有】唐霜 www.tangshuang.net的情况。

【访问 www.tangshuang.n【本文受版权保护】【版权所有,侵权必究】et 获取更多精彩内容】【转载请注明来源】本文作者:唐霜,转载请注明出处。

我们通过 server 的 mock 方【作者:唐霜】本文版权归作者所有,未经授权不得转载。法来开启Mock服务器。

原创内容,盗版必究。【转载请注明来源】
server.mock(options)

目前,options 中只支持 port原创内容,盗版必究。【未经授权禁止转载】 参数。

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

Mock 服务器启动之后,前端同学直接通未经授权,禁止复制转载。【原创内容,转载请注明出处】过代理等方式,将前端的请求转发到 Moc【原创不易,请尊重版权】原创内容,盗版必究。k 服务器,就可以在让 ajax 得到需【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。要的数据,这些数据全部是根据数据类型描述【作者:唐霜】著作权归作者所有,禁止商业用途转载。随机生成的。这样,就不用得到后台同学开发【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。完之后再进行接口联调了。

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

但是在一些情况下,你需要对某些节点的 m著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ock 数据做一个硬性的规定,你可以使用 __mocks__ 属性来进行处理。这个属性的用法和 __【作者:唐霜】【版权所有,侵权必究】comments__ 很像。它的值接收两【作者:唐霜】【转载请注明来源】种形式,一种是固定值,另一种是函数,如果【本文首发于唐霜的博客】【未经授权禁止转载】是一个函数,那么函数的运行结果就会作为该本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。节点的值。

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。ang.net转载请注明出处:www.tangshua未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netng.net
ResponseType.__mocks__ = {
  'body.feet[0]': true,
}

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

【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【作者:唐霜】ang.net【本文受版权保护】【访问 www.tangshuang.n未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】【访问 www.tangshuang.n未经授权,禁止复制转载。未经授权,禁止复制转载。et 获取更多精彩内容】
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)
  },
}

自动测试服务器

后端同学开发完接口之后,不知道自己开发好【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。的接口是否符合前端同学的需要,因此,需要本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net有一个测试工具,用来检查写好的接口是否是本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】 ok 的。tyshemo 提供一个自动【本文首发于唐霜的博客】未经授权,禁止复制转载。测试服务器,用来在这个阶段辅助完成接口测本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.net试(仅开发人员参与)。

【本文首发于唐霜的博客】原创内容,盗版必究。未经授权,禁止复制转载。
server.test(options)

options 支持如下配置:

【本文首发于唐霜的博客】【原创内容,转载请注明出处】
{
  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 去启动这个脚本之后,就可以本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。在浏览器中打开页面,去观看写好的测试用例本文作者:唐霜,转载请注明出处。原创内容,盗版必究。,并且运行测试用例来检查后台代码返回的结【转载请注明来源】【版权所有,侵权必究】果是否符合前端同学的要求。

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

测试用例依赖于最前面 Service 配【本文首发于唐霜的博客】【版权所有,侵权必究】置中的每个接口的 test 配置,通过这著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】些用例,可以很好的检查后台代码返回结果的【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。可用性。

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

统一服务器

上述三个服务器在介绍中,都是独立启动的。未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】你也可以一次性把三个服务器都起起来。

【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。ang.net未经授权,禁止复制转载。
server.serve(options)

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

本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】ang.net【未经授权禁止转载】

Meta

元(Meta)是有关一个字段的属性集合,原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net这个字段有哪些特征,有些什么逻辑,我们都【本文受版权保护】本文版权归作者所有,未经授权不得转载。将这些描述放到 Meta 中进行描述。一本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net个 Meta 继承于 tyshemo 的【版权所有】唐霜 www.tangshuang.net【转载请注明来源】基类:

【本文受版权保护】著作权归作者所有,禁止商业用途转载。
import { Meta } from 'tyshemo'

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

这些构成 Meta 的,被称之为“属性”【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】(Attribute)。目前支持的属性包【作者:唐霜】【原创内容,转载请注明出处】含如下:

著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。ng.net著作权归作者所有,禁止商业用途转载。

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

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

drop, map, flat 接收的参本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。数格式一致。它们都接收三个参数:

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

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

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

Schema

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

【作者:唐霜】【关注微信公众号:wwwtangshua【转载请注明来源】转载请注明出处:www.tangshuang.netngnet】转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】ng.net

基于业务场景的思考,目前 Schema 【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。仅做了一层数据结构的描述。也就是说,Sc本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】hema 是不嵌套的。它只能描述当前这一本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net层的数据,深层结构数据是无法进行描述的(转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。虽然你可以用 object 来表示)。

【作者:唐霜】【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netngnet】
import { Schema } from 'tyshemo'

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

这就是一个 schema,创建一个 sc【未经授权禁止转载】【关注微信公众号:wwwtangshuangnet】hema,你需要传入配置对象。对象的属性本文版权归作者所有,未经授权不得转载。【转载请注明来源】,就是所描述的数据的属性,属性值,则是该本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。属性的描述。

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

编程上,一个 Model 内保持着一个 【版权所有,侵权必究】【版权所有,侵权必究】Schema 实例,这个实例一般是不对外著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。暴露的。因此,它只是对 Model 起作【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】用,不提供接口。

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

Store

TySheMo 提供了一个状态管理工具 【关注微信公众号:wwwtangshuangnet】【关注微信公众号:wwwtangshuangnet】Store,它是一个状态管理器,一个 s【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】tore 管理一个 state,它的特征【版权所有,侵权必究】【关注微信公众号:wwwtangshuangnet】是可被观察,让开发者可以通过 watch【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。 监听哪一个属性发生变化,并进行对应的下【原创不易,请尊重版权】【作者:唐霜】一个操作。要使用 Store 也很方便。

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。ng.net【本文受版权保护】本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】
import { Store } from 'tyshemo'

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

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

初始化

初始化动作超级简单。

【原创不易,请尊重版权】未经授权,禁止复制转载。
const store = new Store({
  name: 'tomy',
  age: 10,
})

没错,这样就创建了一个 store,st本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。ore 内保管着一份 state,初始化本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。之后,state 的值如上所示。

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

State

你可以读取 store.state 来进【作者:唐霜】著作权归作者所有,禁止商业用途转载。行任意操作。利用 Proxy 技术,st【版权所有,侵权必究】【版权所有,侵权必究】ate 比任何响应式库做的都要有意思。

原创内容,盗版必究。未经授权,禁止复制转载。【原创内容,转载请注明出处】【本文受版权保护】
const { state } = store

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

state 的所有修改操作都是响应式的,【原创不易,请尊重版权】【转载请注明来源】可以通过 watch 监听到这些修改。

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

计算属性

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

【本文受版权保护】【未经授权禁止转载】
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
  },
})

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

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

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

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

添加计算属性

【作者:唐霜】未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】

当初始值中不存在你需要的计算属性时,你可本文版权归作者所有,未经授权不得转载。【转载请注明来源】以通过 define 方法定义一个新的计未经授权,禁止复制转载。【本文首发于唐霜的博客】算属性。

转载请注明出处:www.tangshua未经授权,禁止复制转载。【转载请注明来源】ng.net【转载请注明来源】本文版权归作者所有,未经授权不得转载。
store.define('key', { get, set })

在第二个参数中传入 getter 和 s【本文首发于唐霜的博客】未经授权,禁止复制转载。etter 函数。

【版权所有】唐霜 www.tangshu【未经授权禁止转载】【作者:唐霜】ang.net【关注微信公众号:wwwtangshua【本文首发于唐霜的博客】【原创不易,请尊重版权】ngnet】【本文首发于唐霜的博客】【原创不易,请尊重版权】

修改计算属性

【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】ang.net【关注微信公众号:wwwtangshua【本文首发于唐霜的博客】【原创内容,转载请注明出处】ngnet】著作权归作者所有,禁止商业用途转载。【转载请注明来源】

修改计算属性和添加计算属性的方法是一样的【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。

本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】ngnet】转载请注明出处:www.tangshua【本文首发于唐霜的博客】【未经授权禁止转载】ng.net【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ngnet】

删除计算属性

【原创不易,请尊重版权】【原创不易,请尊重版权】【访问 www.tangshuang.n未经授权,禁止复制转载。【本文受版权保护】et 获取更多精彩内容】

使用 del 方法可以删除任意属性,计算转载请注明出处:www.tangshuang.net【未经授权禁止转载】属性也会被它所删除。

本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua【转载请注明来源】【关注微信公众号:wwwtangshuangnet】ngnet】【版权所有,侵权必究】转载请注明出处:www.tangshua【原创内容,转载请注明出处】【原创内容,转载请注明出处】ng.net
store.del('key')

实例方法

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

【作者:唐霜】【版权所有,侵权必究】【未经授权禁止转载】

get(keyPath)

通过 keyPath 获取属性值。key原创内容,盗版必究。未经授权,禁止复制转载。Path 是用来描述一个深层次路径的表达【版权所有,侵权必究】转载请注明出处:www.tangshuang.net式,可以是一个字符串,也可以是一个数组,【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】例如 [‘booksR【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。17;, 1] 表示 state.boo转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netks[1],也可以用字符串表示 R【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。16;books[1]’。

著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】【版权所有,侵权必究】
const name = store.get('name')

set(keyPath, value)

通过 keyPath 设置某个属性的值为转载请注明出处:www.tangshuang.net【未经授权禁止转载】 value。

【本文受版权保护】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netng.net未经授权,禁止复制转载。
store.set('name', 'tomy')

del(keyPath)

删除对应 keyPath 的属性。删除操【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】作虽然只是一个方法,但是实际上内部比较复【本文受版权保护】本文版权归作者所有,未经授权不得转载。杂,因为它要处理原有的依赖收集逻辑。

【未经授权禁止转载】原创内容,盗版必究。【转载请注明来源】
store.del('name')

update(data, async)

一次性更新多个属性值。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。
store.update({
  name: 'tomy',
  age: 23,
})

它的第二个参数 async 表示是否异步【原创内容,转载请注明出处】未经授权,禁止复制转载。更新。异步更新的好处在于,我们建立一个很【本文受版权保护】【转载请注明来源】小的事务,当同一个属性被多次更新的时候,【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。只有最后一次更新会被作为结果,这样可以提【转载请注明来源】【未经授权禁止转载】升性能。

本文作者:唐霜,转载请注明出处。【本文受版权保护】【未经授权禁止转载】【版权所有,侵权必究】
store.watch('age', () => console.log(111)) // 只会出现一次 console,因为两次 update 都是更新 age,而只有第二次更新被使用
store.update({ age: 24 }, true)
store.update({ age: 25 }, true)

它返回一个 Promise,你可以使用 【转载请注明来源】【版权所有】唐霜 www.tangshuang.netthen/catch await 进行下【本文受版权保护】【原创不易,请尊重版权】一步操作。

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

需要注意,由于更新有先后顺序,使用 up【本文受版权保护】转载请注明出处:www.tangshuang.netdate 更新数据时,尽量避免具有相互依【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。赖关系的数据同时更新。

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

define(key, options)

新增或修改计算属性。 当 options原创内容,盗版必究。【原创内容,转载请注明出处】 是一个函数时,直接被认为是 gette【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。r。

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

需要注意,define 只能定义顶层属性本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】,不能定义深层属性。

【本文首发于唐霜的博客】【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】ngnet】著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】

watch(keyPath, fn, deep)

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

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

当 keyPath 为 ‘*【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】’ 时,表示任意变动都能被监【未经授权禁止转载】【未经授权禁止转载】听到。

【访问 www.tangshuang.n【作者:唐霜】【本文首发于唐霜的博客】et 获取更多精彩内容】【原创内容,转载请注明出处】

unwatch(keyPath, fn)

解除 watch 绑定的监听函数。

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

bind(key)(store, key)

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

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

Model

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

【原创不易,请尊重版权】【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netet 获取更多精彩内容】【原创不易,请尊重版权】

TySheMo 的模型具备如下功能:

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ng.net原创内容,盗版必究。【关注微信公众号:wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netngnet】

Model 中保持着一份 Store 和【未经授权禁止转载】未经授权,禁止复制转载。 Schema。Store 用于数据的响【版权所有】唐霜 www.tangshuang.net【本文受版权保护】应式管理,Schema 用于字段规则的管【版权所有,侵权必究】未经授权,禁止复制转载。理。Model 基于 Store,因此,未经授权,禁止复制转载。【原创不易,请尊重版权】Model 上的数据具有可被观察性,你可未经授权,禁止复制转载。【未经授权禁止转载】以通过 watch 来观察 Model 【本文首发于唐霜的博客】【转载请注明来源】上的数据变化,从而触发界面更新。Mode【版权所有,侵权必究】【原创内容,转载请注明出处】l 基于 Schema 来做数据的模式,【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net也就是说 Model 内管理的数据遵循 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netSchema 的描述。

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

创建模型

一个模型是对数据的定义,但 Model 著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。类不是数据本身,而是数据的规定。一个模型未经授权,禁止复制转载。【未经授权禁止转载】是一个数据的抽象,通过定义模型,就定义了【本文受版权保护】【关注微信公众号:wwwtangshuangnet】这一个数据的字段规则以及变化逻辑。

【原创不易,请尊重版权】【访问 www.tangshuang.n【未经授权禁止转载】原创内容,盗版必究。et 获取更多精彩内容】

Schema 声明

创建模型类具有非常强的场景意识,开发者应【版权所有】唐霜 www.tangshuang.net【转载请注明来源】该非常清楚自己的模型将会需要哪些字段。前【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net面我们提到模型是基于 Schema 的,【原创内容,转载请注明出处】【作者:唐霜】那么我们怎么去确定一个模型的 Schem【关注微信公众号:wwwtangshuangnet】【本文受版权保护】a 呢?我们需要这样规定一个模型:

原创内容,盗版必究。【未经授权禁止转载】
import { Model } from 'tyshemo'

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

创建一个继承自 Model 的类,这个类未经授权,禁止复制转载。未经授权,禁止复制转载。,就是模型本身,将这个模型需要的字段以静本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net态属性的方式进行写作。每个字段所需包含的【未经授权禁止转载】原创内容,盗版必究。配置信息,就是 Schema 属性的配置转载请注明出处:www.tangshuang.net【转载请注明来源】信息。

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

有了一个模型之后,我们就可以实例化得到一【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net个模型的实例,这个实例则是数据的容器。

【作者:唐霜】【本文受版权保护】【原创不易,请尊重版权】【作者:唐霜】
const model = new SomeModel()

实例化的时候,你可以传入一个初始数据,如【本文首发于唐霜的博客】【本文受版权保护】果不传,则会使用 schema 中的 d本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。efault 打造一个初始数据。也就是说本文作者:唐霜,转载请注明出处。【转载请注明来源】,模型实例化之后,立即拥有了一个符合 s【关注微信公众号:wwwtangshuangnet】【本文受版权保护】chema 规定的数据。我们可以直接通过【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。 model 读取模型实例的数据。

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

而此时,因为 schema 中规定了 f【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】ield 的 default 为 未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。221;,所以我们读取到的 field 【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】也是 ”.

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

将 Schema 引入到 Model 中著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】是 TySheMo 最重要的一个点。因为本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。有了 Schema,Model 中的数据转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。不再是不可预测的。

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ng.net【作者:唐霜】【本文受版权保护】
【作者:唐霜】【未经授权禁止转载】转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】ng.net

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

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

钩子函数

在创建模型时,你可以通过覆盖钩子函数,来【作者:唐霜】未经授权,禁止复制转载。实现模型上特定时期的动作。其中最重要的是原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】 onInit 和 onError。

【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。ngnet】【版权所有,侵权必究】
class SomeModel extends Model {
  // 实例化完成时被调用
  onInit() {
    this.watch('*', () => this.doSomeThing())
  }
  // 当数据变换过程中,发生错误时,被调用
  onError(error) {
    console.log(error.message)
  }
}

自定义方法

像普通的 js 类一样,你可以在模型中自转载请注明出处:www.tangshuang.net【未经授权禁止转载】定义一些方法,将一些特殊的逻辑集合通过方转载请注明出处:www.tangshuang.net原创内容,盗版必究。法的形式对外暴露,从而可以集中管理某些特【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】定业务逻辑。

【访问 www.tangshuang.n【转载请注明来源】本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。【作者:唐霜】
class SomeModel extends Model {
  doSomeThing() {
    this.name = ''
    this.age = 0
  }
}

使用数据

在你的业务中使用模型上的数据,实际就是要原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net从模型读取数据。由于模型上数据是完全的 【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】js 对象,是一种引用型数据,因此你获得【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net数据之后,还能获得它的变化结果。虽然这和【版权所有,侵权必究】转载请注明出处:www.tangshuang.net流行的 immutable 不同,但是很【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】明显,有的时候我们需要这种效果。

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

get

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

本文作者:唐霜,转载请注明出处。原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】
const some = model.get('some')

get 方法有一个优势,它可以使用连字符【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】读取更深层级的属性。例如

【关注微信公众号:wwwtangshua未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。ngnet】【转载请注明来源】【转载请注明来源】【版权所有,侵权必究】
const some = model.get('body.some')

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

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

[property]

除了上述方法获取数据之外,在 schem【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】a 中定义了的字段,可以在 model 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有,未经授权不得转载。上直接读取。例如:

转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。ng.net【本文首发于唐霜的博客】【版权所有,侵权必究】
class SomeModel extends Model {
  static some = {
    type: String,
    default: 'a',
  }
}

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

$views

在模型上,你可能需要即时的获取当前模型上著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。的一些数据状态,你可以通过读取 $vie【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ws 来得到对于单个字段的一些必要信息。

【版权所有,侵权必究】【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ngnet】
const { $views } = model
const { some } = $views // 获取字段视图
const { 
  value, // 该字段当前的值
  required, // 该字段当前是否必填
  readonly, // 该字段当前是否只读
  disabled, // 该字段当前是否禁用
  errors, // 该字段当前是否校验不通过,如果不通过,会返回失败的 error 列表,否则返回空数组
  ...extra, // 你可以在定义 schema 时,定一个 extra 对象,该对象的值会被解构到 view 中,方便使用
} = some

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

【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。
some.value = 'b'

也会触发 watch 监听。这在 ang著作权归作者所有,禁止商业用途转载。著作权归作者所有,禁止商业用途转载。ular 中有非常好的效果。对于某个字段本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。而言,你只需要得到该字段的 view,你【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】就可以得到它的全部。

【原创不易,请尊重版权】【本文首发于唐霜的博客】

这在一些系统中非常有用。因为你需要即使的【关注微信公众号:wwwtangshuangnet】【本文受版权保护】了解一个字段它当前的一些状态情况,以此决【版权所有】唐霜 www.tangshuang.net本文版权归作者所有,未经授权不得转载。定是否要做一些事。最常见的就是错误提示:

未经授权,禁止复制转载。【未经授权禁止转载】
<input v-model="model.view.some.value" />
<span v-for="error in model.view.some.errors">{{ error.message }}</span>

通过这种方式非常容易的解决了错误提示问题原创内容,盗版必究。【本文受版权保护】

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

但是需要注意,errors 仅包含 va转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】lidators 中的校验逻辑极其结果,【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net而不包含必填和类型校验错误。

【转载请注明来源】著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】

$views.$errors

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

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

更新数据

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

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

set

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

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【作者:唐霜】【转载请注明来源】ang.net
model.set('name', 'lily')

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

【本文首发于唐霜的博客】未经授权,禁止复制转载。原创内容,盗版必究。

$views

利用 view 也可以更新数据。

【关注微信公众号:wwwtangshua【作者:唐霜】【转载请注明来源】ngnet】【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu本文版权归作者所有,未经授权不得转载。【版权所有】唐霜 www.tangshuang.netang.net
model.$views.some.value = 'new value'

[property]

通过直接修改 model 上的属性来更新【本文首发于唐霜的博客】未经授权,禁止复制转载。数据:

转载请注明出处:www.tangshua【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netng.net【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netang.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

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

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。ang.net
model.update({
  name: 'lily',
  age: 12,
})

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

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

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

著作权归作者所有,禁止商业用途转载。【转载请注明来源】本文作者:唐霜,转载请注明出处。【本文受版权保护】
model.update({
  name: 'lily',
  age: 12,
}, true)

数据监听

和 angular 一样,你可以通过一个【关注微信公众号:wwwtangshuangnet】【作者:唐霜】方法来监听某个属性值的变化。

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

watch

使用 watch 监听某个属性的变化,并【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net且在监听函数中,可以更新另外一个属性。但【本文受版权保护】本文版权归作者所有,未经授权不得转载。和 angular 不同的是,watch转载请注明出处:www.tangshuang.net本文作者:唐霜,转载请注明出处。 默认支持深检查。在监听函数中,可使用 【作者:唐霜】【访问 www.tangshuang.net 获取更多精彩内容】this 指向当前 model。

【转载请注明来源】著作权归作者所有,禁止商业用途转载。
model.watch('name', ({ key next, prev }) => {
  // key: 当前被修改的属性的 keyPath,数组,注意,key 不一定是这里的 name,而有可能是 name.length 等子属性
  // next: 被修改为什么值
  // prev: 被修改前的值
})

unwatch

取消 watch 绑定的回调函数。

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

监听任何变动

使用 * 可以监听 model 数据的所【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。有变动,只要数据变动,回调函数都会被执行【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【未经授权禁止转载】ang.net【关注微信公众号:wwwtangshua著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】ngnet】著作权归作者所有,禁止商业用途转载。
model.watch('*', () => {})

数据校验

在 TySheMo 模型中,进行模型的数【转载请注明来源】未经授权,禁止复制转载。据校验非常方便。因为我们在 schema【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net 中已经定义好了所有的校验规则,所以实际本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。上,你只需要对上文中关于 Schema 【本文首发于唐霜的博客】转载请注明出处:www.tangshuang.net的 validate 的部分进行了解,就转载请注明出处:www.tangshuang.net【转载请注明来源】可以知道 Model 的校验逻辑是怎样的未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net

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

validate

直接调用 Model 的 validat【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。e 方法进行数据校验。

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【本文受版权保护】
const errors = model.validate()

它不接收任何参数,直接对 model 的【转载请注明来源】【原创不易,请尊重版权】数据进行全量校验。返回一个数组,该数组包【本文受版权保护】转载请注明出处:www.tangshuang.net含了所有校验错误。当全部校验都通过的情况原创内容,盗版必究。【转载请注明来源】下,返回一个空数组。

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

需要注意,这里的校验会使用 type, 原创内容,盗版必究。未经授权,禁止复制转载。required, validators【未经授权禁止转载】原创内容,盗版必究。 进行校验。它的结果和 $views.$【本文受版权保护】【版权所有,侵权必究】errors 不同,多出了 type, 原创内容,盗版必究。原创内容,盗版必究。required 的校验结果。

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

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

未经授权,禁止复制转载。原创内容,盗版必究。
const errors = model.validate('key')

甚至,你还可以用一个值去看看,这个值是否【本文首发于唐霜的博客】【原创内容,转载请注明出处】符合该字段的规则。例如,我现在有一个值 【本文首发于唐霜的博客】【本文受版权保护】some,我并不知道它是否符合 name【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。 字段的规则,在我打算使用它之前,我先通转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】过下面的方法进行检验。

【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【本文受版权保护】et 获取更多精彩内容】【原创不易,请尊重版权】【作者:唐霜】【转载请注明来源】
const errors = model.validator('name', some)

如果 errors 是空的,则说明 so【本文首发于唐霜的博客】【作者:唐霜】me 符合 name 的所有校验逻辑,可【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net以放心使用。当然,一般情况下,不会这样去著作权归作者所有,禁止商业用途转载。【作者:唐霜】操作。

本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】

数据重置

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

【关注微信公众号:wwwtangshua【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。ngnet】本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】原创内容,盗版必究。

fromJSON

恢复数据调用 fromJSON 方法即可【本文受版权保护】【版权所有,侵权必究】。这个方法接收新的数据。

本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ngnet】转载请注明出处:www.tangshua【本文受版权保护】【关注微信公众号:wwwtangshuangnet】ng.net
model.fromJSON(data)

它实际上用到了 schema 上的多个方著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】法(最主要是 create 规则),保证【作者:唐霜】未经授权,禁止复制转载。了恢复的数据的完整性和可靠性。

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

onParse

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

【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。
class SomeModel extends Model {
  static some = { ... }
  onParse(data) {
    return {
      ...data,
      user: localStoreage.getItem('USER'),
    }
  }
}

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

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

toJSON

toJSON 方法将 Model 导出为一个纯 ob本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.netject 保存,依赖于 save 属性的导出结果。save 属性和 as著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】set 属性影响了 toJSON 的字段未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。导出值。

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

【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ang.net本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】【原创不易,请尊重版权】ang.net
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 属性表示当字段一定是从未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net json 对象的该字段获取,save 【本文首发于唐霜的博客】【原创不易,请尊重版权】的结果也一定放在该字段上。

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

数据提取

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

【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ang.net【作者:唐霜】【版权所有,侵权必究】

toData

通过 toJson 方法,你可以得到一个著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】基于规整规则后输出的 js 对象。

【本文受版权保护】【访问 www.tangshuang.n原创内容,盗版必究。【本文首发于唐霜的博客】et 获取更多精彩内容】【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。
const json = model.toJson()

toParams

通过 toParams 方法,你可以得到本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】一个 urlencoded 的数据。

【原创内容,转载请注明出处】转载请注明出处:www.tangshua原创内容,盗版必究。【作者:唐霜】ng.net【作者:唐霜】
const params = model.toParams()

它的结果如下:

本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。
{
  'books[1].name': 'A',
  'books[1].price': 12.5
}

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

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

toFormData

通过 toFormData 方法,得到一【本文受版权保护】【关注微信公众号:wwwtangshuangnet】个 FormData 的实例。在一些要上转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】传文件的情况下会用到。

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

onExport

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

这能保证你提交的数据,一定是按照后台 a【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】pi 需要的。

原创内容,盗版必究。转载请注明出处:www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】ng.net【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.netet 获取更多精彩内容】转载请注明出处:www.tangshua【本文受版权保护】【关注微信公众号:wwwtangshuangnet】ng.net

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

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

嵌套模型

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

【本文受版权保护】本文作者:唐霜,转载请注明出处。
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)

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

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

Validator

Tyshemo内置了一些校验器,而在Me【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。ta中,使用Validator来实例化一【原创内容,转载请注明出处】【原创内容,转载请注明出处】个校验器。我们可以这样获取Validat本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】or:

【本文首发于唐霜的博客】原创内容,盗版必究。
import { Validator } from 'tyshemo'

它是一个类,你可以通过实例化该类来获得一【本文受版权保护】【未经授权禁止转载】个校验器。

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

该类上有一些静态方法,这些静态方法可以生著作权归作者所有,禁止商业用途转载。【本文受版权保护】成特定的校验器,你可以这样获取它们:

转载请注明出处:www.tangshua【转载请注明来源】本文版权归作者所有,未经授权不得转载。ng.net【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】ngnet】【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。ngnet】原创内容,盗版必究。
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 获取更多精彩内容】行必填校验。如果Meta上的requir本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。ed为true,那么就会执行必填校验,如本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】果校验没有通过,就会在tyshemo的校【未经授权禁止转载】本文作者:唐霜,转载请注明出处。验结果中增加一条以message作为信息【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的错误。emptyFn可以让你自己定义怎转载请注明出处:www.tangshuang.net【作者:唐霜】么样算是not required的逻辑。

原创内容,盗版必究。【原创不易,请尊重版权】【版权所有,侵权必究】

integer(len, message)

用于校验一个数整数部分,len表示该数整本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。数部分支持多少位,比如 100 表示 3未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。 位。integer(3, '整数部分不能超过3位') 这个校验器会在遇到 1000 的时候报【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。错。

【转载请注明来源】本文作者:唐霜,转载请注明出处。

decimal(len, message)

校验逻辑和integer一致,只是作用于【本文首发于唐霜的博客】【作者:唐霜】小数部分。

【原创不易,请尊重版权】【原创内容,转载请注明出处】【访问 www.tangshuang.n【版权所有,侵权必究】原创内容,盗版必究。et 获取更多精彩内容】

max(num, message)

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

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

mix(num, message)

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

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

email(message)

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

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

url(message)

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

【访问 www.tangshuang.n著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】et 获取更多精彩内容】【作者:唐霜】【本文首发于唐霜的博客】

date(message)

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

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

maxLen(len, message)

用于校验一个字符串的最大长度是否超过le【作者:唐霜】【转载请注明来源】n。

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

minLen(len, message)

用于校验一个字符串长度是否少于len个字【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。

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

match(validator:Function, message)

用于创建一个根据validator函数返原创内容,盗版必究。【转载请注明来源】回结果的校验器。validator返回t原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.netrue表示通过了校验。

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

另外,为了方便使用validator还可著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net以是其他任何Type,比如:

【本文首发于唐霜的博客】【转载请注明来源】
[
  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不同的是,转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】validators是一个函数数组,必须【未经授权禁止转载】【原创不易,请尊重版权】全部函数都返回true,才算通过校验。

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

anyOf(validators:Function[], message)

和allOf不同,只要validator未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。s中任何一个validator函数返回t未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。rue,就算通过校验。

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

AsyncGetter

AsyncGetter是一个tyshem【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。o中特殊的方法,它用于处理某些特殊场景,【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。即当你的前端应用需要从接口拉取某些数据作【原创内容,转载请注明出处】原创内容,盗版必究。为应用的特定数据时,可以使用这个方法。

【本文首发于唐霜的博客】原创内容,盗版必究。【本文受版权保护】
import { AsyncGetter } from 'tyshemo'

AsyncGetter(defaultValue:Any, AsyncGetter:Function)

比如,用于选取地址的省市县数据,我们不可【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。能打包到js里面,都是通过接口返回的,这【原创不易,请尊重版权】原创内容,盗版必究。个时候,我们就可能需要用到AsyncGe【版权所有,侵权必究】未经授权,禁止复制转载。tter:

本文作者:唐霜,转载请注明出处。【转载请注明来源】【访问 www.tangshuang.n【关注微信公众号:wwwtangshuangnet】【未经授权禁止转载】et 获取更多精彩内容】本文作者:唐霜,转载请注明出处。
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来监听:

【关注微信公众号:wwwtangshua转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ngnet】【本文首发于唐霜的博客】转载请注明出处:www.tangshua【作者:唐霜】【未经授权禁止转载】ng.net
model.watch('!', fn)

AsyncGetter除了作为Meta属转载请注明出处:www.tangshuang.net【本文首发于唐霜的博客】性的值之外,也支持作为state的值。例【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net

【转载请注明来源】著作权归作者所有,禁止商业用途转载。
import { Model, AsyncGetter } from 'tyshemo'

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

但是这种情况下,它不会触发!,而是直接触【未经授权禁止转载】【转载请注明来源】发some这个模型属性的change事件

未经授权,禁止复制转载。转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】ng.net
model.watch('some', ...)

Loader

Loader是tyshemo中更高集成的未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net工具,它用于解析JSON,基于JSON来【本文受版权保护】【本文首发于唐霜的博客】创建模型。

【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】ngnet】【版权所有】唐霜 www.tangshu【未经授权禁止转载】【本文受版权保护】ang.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.tangshu【作者:唐霜】【本文首发于唐霜的博客】ang.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形式为 <...> ,会认为这是一个子模型。例如:

【未经授权禁止转载】【原创内容,转载请注明出处】【本文首发于唐霜的博客】【转载请注明来源】
{
  "schema": {
    "<submodel>": {
      // the structure of a json schema for submodel
      "schema": { }
    },
    "<submodels>": [ // be an array
      {
        "schema": { }
      }
    ]
  }
}

特殊语法

await fetch

该语法会调用Loader实例的fetch【作者:唐霜】本文作者:唐霜,转载请注明出处。方法,进行异步请求。例如:

【本文受版权保护】原创内容,盗版必究。【访问 www.tangshuang.n本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。et 获取更多精彩内容】【版权所有,侵权必究】
{
  "methods": {
    "fetchBookPrice(id)": "await fetch('...' + id).price"
  }
}

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

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

:fetch

它是AsyncGetter的语法糖,例如【本文首发于唐霜的博客】原创内容,盗版必究。

【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。
{
  "schema": {
    "book": {
      "default": null,
      "priceRange": "[0,100]:fetch('....').range"
    },
  },
  "state": {
    "someGlobalOptions": "[]:fetch('....')"
  }
}

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

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

结语

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

原创内容,盗版必究。转载请注明出处:www.tangshua【未经授权禁止转载】转载请注明出处:www.tangshuang.netng.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

    学习了