基于 Decorator 实现对象校验

刘厚水发布于2019-08-23 18:11 / 1763人阅读

摘要：文章首发于已经提案很久了，已经有过很大的改动。本文基于老的提案实现。前言有了，我认为表单校验方式会有更多的玩法。所以基于实现了一个纯净的对象校验的库。

文章首发于 shuaizhang.top

Decorator 已经提案很久了，已经有过很大的改动。本文基于老的提案实现。

前言

有了 Decorator，我认为表单校验方式会有更多的玩法。所以基于 Decorator 实现了一个纯净的对象校验的库 dvalidator。
在无任何校验库的帮助下，我们可能会写出这样的代码

let form = {
  nickname: "",
  password: ""
}

function submit() {
  if (!checkNickName(form.nickname)) {
    alert("昵称格式不正确")
    return
  }
  if (!checkPassword(form.password)) {
    alert("密码格式不正确")
    return
  }

  remoteValid(form.nickname)
    .then(() => {
      // do next
    })
    .catch(() => {
      alert("昵称已被注册")
    })
}

使用 dvalidator 我们可以这样写

import dvalidator from "dvalidator"

let form = {
  @dvalidator(remoteValid)("昵称已被注册")
  @dvalidator(checkNickName)("昵称格式不正确")
  nickname: "",
  @dvalidator(checkPassword)("密码格式不正确")
  password: ""
}

function submit() {
  form
    .$validate()
    .then(() => {
      // do next
    })
    .catch(error => alert(error[0].message))
}

Decorator 基础

“装饰者模式：在不改变原对象的基础上，通过对其进行包装拓展（添加属性或者方法）使原有对象可以满足用户的更复杂需求。”
--《JavaScript 设计模式》

许多面向对象的语言都有修饰器（Decorator）函数，用来修改类的行为

可作用于类或对象中的属性和方法

初始化时从上至下运行，执行时从内向外

代码来源： http://es6.ruanyifeng.com/#docs/decorator#%E6%96%B9%E6%B3%95%E7%9A%84%E4%BF%AE%E9%A5%B0

function dec(id){
  console.log("evaluated", id);
  return (target, property, descriptor) => console.log("executed", id);
}

class Example {
    @dec(1)
    @dec(2)
    method(){}
}
// evaluated 1
// evaluated 2
// executed 2
// executed 1

使用 dvalidator

使用 dvalidator 校验对象有这些优点

代码更加直观，优雅，便于后续维护

支持异步校验：传递的校验函数返回 Promise 即可实现

按顺序校验：根据 decorator 执行的先后顺序

安装

npm install dvalidator --save

npm install @babel/plugin-proposal-decorators --save-dev

使用

配置 babel

plugins: [
  [
    "@babel/plugin-proposal-decorators",
    {
      legacy: true
    }
  ]
]

原理

为对象增加 __rules 属性，并不可枚举，配置，写

rules的属性与obj属性一一对应

每申明一个Decorator，其实都是更新 __rules 属性

调用 $validate 时，会根据 rules 对整个对象进行校验，返回 Promise，校验失败会返回所有失败信息

参考

http://es6.ruanyifeng.com/#do...

https://github.com/yiminghe/a...

云服务器海外云主机基于对象存储基于对象的存储基于对象的网络存储基于webrtc实现对讲

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

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

JavaScript 中基于 swagger-decorator 的自动实体类构建与 Swagger

摘要：中基于的自动实体类构建与接口文档生成是笔者对于开源项目的描述，对于不反感使用注解的项目中利用添加合适的实体类或者接口类注解，从而实现支持嵌套地实体类校验与生成等模型生成基于的接口文档生成等等功能。 JavaScript 中基于 swagger-decorator 的自动实体类构建与 Swagger 接口文档生成是笔者对于开源项目 swagger-decorator 的描述，对于不反感使...

Gemini 2019-08-20 18:06 评论0 收藏0
Javascript装饰器的妙用

摘要：最近新开了一个项目，采用来开发，在数据库及路由管理方面用了不少的装饰器，发觉这的确是一个好东西。在中的使用该装饰器会在定义前调用，如果函数有返回值，则会认为是一个新的构造函数来替代之前的构造函数。函数参数装饰器最后，还有一个用于函数参最近新开了一个Node项目，采用TypeScript来开发，在数据库及路由管理方面用了不少的装饰器，发觉这的确是一个好东西。装饰器是一个还处于草案中...

phodal 2019-08-22 18:35 评论0 收藏0
基于Decorator的React高阶组件的思路分析与实现

摘要：在深入技术栈一书中，提到了基于的。书里对基于的没有给出完整的实现，在这里实现并记录一下实现的思路。在这里最小的组件就是。对比范式与父组件的范式，如果完全利用来实现的，将操作与分离，也未尝不可，但却不优雅。在深入react 技术栈一书中，提到了基于Decorator的HOC。而不是直接通过父组件来逐层传递props，因为当业务逻辑越来越复杂的时候，props的传递和维护也将变得困难且冗...

LinkedME2016 2019-08-21 17:31 评论0 收藏0
学习es7的Decorator(顺带写个react高阶组件)

摘要：为了代码进一步解耦，可以考虑使用高阶组件这种模式。开源的高阶组件使用提供了一系列使用的高阶组件，可以增强组件的行为，可以利用此库学习高阶组件的写法。通过使用此库提供的高阶组件，可以方便地让列表元素可拖动。 1. Decorator基本知识在很多框架和库中看到它的身影，尤其是React和Redux，还有mobx中，那什么是装饰器呢。修饰器（Decorator）是一个函数，用来修改类的...

xiyang 2019-08-23 12:32 评论0 收藏0
Decorator:从原理到实践，我一点都不虚~

摘要：描述符必须是这两种形式之一不能同时是两者。可以是任何有效的值数值，对象，函数等。当且仅当该属性的为时，才能被赋值运算符改变。特点就是不影响之前对象的特性，而新增额外的职责功能。前言原文链接:[Nealyang/personalBlog]() showImg(https://segmentfault.com/img/remote/1460000018958861); ES6 已经不必...

XanaHopper 2019-08-23 17:05 评论0 收藏0