资讯专栏INFORMATION COLUMN

TySheMo 前端数据管理模型

SimonMa / 2680人阅读

摘要:项目地址使用文档使用案例是一个前端数据状态管理工具。它面向复杂的前端数据管理,用于在前端结构化数据的不断变化中,清晰地控制数据变动,使数据变动不引起错误,并且方便表单数据的恢复校验格式化提交。

项目地址:https://github.com/tangshuang...

使用文档:https://www.tangshuang.net/71...

使用案例:https://github.com/tangshuang...

TySheMo是一个前端数据(状态)管理工具。它面向复杂的前端数据管理,用于在前端结构化数据的不断变化中,清晰地控制数据变动,使数据变动不引起错误,并且方便表单数据的恢复、校验、格式化提交。

在需要对数据类型进行校验,数据变动引发界面变动,数据校验,格式化后输出数据,保证数据运算时得到想要的结果等一系列复杂的数据变化需求,TySheMo可以在项目中发挥不错的的作用。虽然它不追求性能,但是在确保数据类型和格式安全上,它具有非常优秀的思想,让对数据有强烈依赖的业务可以在复杂的逻辑中保证不出错。

类型检查系统

虽然我们已经有typescript这样的类型检查系统,但是,typescript是在编译时进行类型检查的,在运行时,我们需要对一些动态的数据(特别是从后台api返回的数据)进行类型和格式检查。在支持graphql的系统中似乎不必这么担心,但目前大多数的restful应用,还是需要有一个工具去做这样的一件事。

TySheMo将数据类型的检查抽象出三个层面的对象:原型、类型、规则。它们分别在原子、结构、逻辑层面对数据进行校验,而且是在运行时。如果校验失败,你还可以通过抛出的错误得到更为详细的信息。

TySheMo内部提供了多个数据原型(类似基础数据类型)扩展,并且直接使用js标准库中的内置对象作为原型,免去需要用字符串来定义类型的麻烦。内置了Dict, List, Enum, Tuple, Range这几种类型。通过对后台api数据的检查,就可以即时避免由于api返回数据类型或结构引起的错误。同时,它还提供了更为丰富的类型检查规范,你可以阅读它的文档了解更多用法。

数据模式

TySheMo提供了一种定义结构化数据的方式,用于对一个结构化数据进行规范化定义。数据模式是一个抽象的数据结构范型,它不是具体的数据,但规定了数据本身的结构规范。并且,作为工具库,TySheMo提供了Schema类,schema实例拥有根据定义规范数据的能力。

更为重要的是Schema是一种数据结构和行为逻辑约束的范例。行业里有json schema这样的先驱,我们在这些先行者的基础上,提炼出对业务有帮助的部分,形成一套类似后台数据库结构描述一样的定义语言,用以在前端去描述一个结构化,但随时变化的数据对象。

它基于数据类型检查系统,你需要在type属性传入对应的类型。对于Schema实例而言,它是无状态的,它所提供的接口是纯粹的工厂,不会产生任何内部资源。这样的设计,使得Schema有可能成为规范,在开发中/测试中,确保业务中给的数据是按照规范给定的,否则,就会抛出错误。

数据模型

TySheMo提供了基于Schema的数据模型Model,是一个管理状态数据的容器。数据被放在数据模型中管理时,由于Schema的约束,数据不得不按照规范运行。它提供了当代数据响应的特性,你可以观察数据变化,从而来决定如何变动界面。

作为工具库,TySheMo从业务出发对数据模型的写作方式进行了约束。一个数据模型,是一个class,并且需要定义它的schema。要将数据放到模型中进行管理,你必须实例化模型,并且使用模型接口进行数据修改和格式化。但到最后,你会发现,模型的使用异常简单,真正复杂的部分,往往在于,如何通过Schema制定你的数据规范。

这只是对Model的数据响应最简单的一个演示,你还可以通过Model提供的能力,完成更多的事情。你可以把它和react, vue, angular结合使用,你可以在任何应用中使用它。特别是在表单数据管理上,TySheMo可以做到非常出色。关于Model的细节和更多特性,你可以阅读使用文档了解。

结语

TySheMo不解决所有问题,而是专注将一个应用中的某个局部的数据管理做到极致。你从来没有体验过,同一个表单的业务逻辑,你不需要修改业务逻辑代码部分,而只需要修改UI交互的逻辑,就可以完全适应react, vue, angular。你也许不需要它,但也许也需要它,这取决于你如何在你但应用中管理你的数据。如果你对这个项目感兴趣,可以通过github参与项目。

(完)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104923.html

相关文章

  • [ 前端框架 ] 前端 MV*框架的意义

    摘要:从协作关系上讲,很多前端开发团队每个成员的职责不是很清晰,有了前端的框架,这个状况会大有改观。框架的理念是把前端按照职责分层,每一层都相对比较独立,有自己的价值,也有各自发挥的余地。 简介: MV框架又是为什么兴起的呢?它的出现,伴随着一些 Web 产品逐渐往应用方向发展,遇到了在 C/S 领域相同的问题:由于前端功能的增强、代码的膨胀,导致不得不做前端的架构这个事情了。经常有人质疑...

    fxp 评论0 收藏0
  • 通过项目逐步深入了解Spring MVC(一)

    摘要:是一个基于的框架。控制器将视图响应给用户通过视图展示给用户要的数据或处理结果。有了减少了其它组件之间的耦合度。 相关阅读: 本文档和项目代码地址:https://github.com/zhisheng17/springmvc 转载请注明出处和保留以上文字! 了解 Spring: Spring 官网:http://spring.io/ 一个好的东西一般都会有一个好的文档解释说明,如果你...

    whataa 评论0 收藏0
  • 前端培训-中级阶段(3) - DOM 文档对象模型(2019-06-27期)

    摘要:文档对象模型是和文档的编程接口文档对象模型将页面与到脚本或编程语言连接起来。通常是指,但将或文档建模为对象并不是语言的一部分。文档对象模型文档对象模型圈起来的是比较常用的接口。目前接口继承于接口。 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平...

    张红新 评论0 收藏0

发表评论

0条评论

SimonMa

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<