基于 Decorator 實現對象校驗

劉厚水發布于2019-08-23 18:11 / 1869人閱讀

摘要：文章首發于已經提案很久了，已經有過很大的改動。本文基于老的提案實現。前言有了，我認為表單校驗方式會有更多的玩法。所以基于實現了一個純凈的對象校驗的庫。

文章首發于 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...

GPU云服務器云服務器基于對象存儲基于對象的存儲基于對象的網絡存儲基于webrtc實現對講

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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