成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于 Decorator 實(shí)現(xiàn)對(duì)象校驗(yàn)

劉厚水 / 1874人閱讀

摘要：文章首發(fā)于已經(jīng)提案很久了，已經(jīng)有過(guò)很大的改動(dòng)。本文基于老的提案實(shí)現(xiàn)。前言有了，我認(rèn)為表單校驗(yàn)方式會(huì)有更多的玩法。所以基于實(shí)現(xiàn)了一個(gè)純凈的對(duì)象校驗(yàn)的庫(kù)。

文章首發(fā)于 shuaizhang.top

Decorator 已經(jīng)提案很久了，已經(jīng)有過(guò)很大的改動(dòng)。本文基于老的提案實(shí)現(xiàn)。

前言

有了 Decorator，我認(rèn)為表單校驗(yàn)方式會(huì)有更多的玩法。所以基于 Decorator 實(shí)現(xiàn)了一個(gè)純凈的對(duì)象校驗(yàn)的庫(kù) dvalidator。
在無(wú)任何校驗(yàn)庫(kù)的幫助下，我們可能會(huì)寫出這樣的代碼

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("昵稱已被注冊(cè)")
    })
}

使用 dvalidator 我們可以這樣寫

import dvalidator from "dvalidator"

let form = {
  @dvalidator(remoteValid)("昵稱已被注冊(cè)")
  @dvalidator(checkNickName)("昵稱格式不正確")
  nickname: "",
  @dvalidator(checkPassword)("密碼格式不正確")
  password: ""
}

function submit() {
  form
    .$validate()
    .then(() => {
      // do next
    })
    .catch(error => alert(error[0].message))
}
Decorator 基礎(chǔ) 
“裝飾者模式：在不改變?cè)瓕?duì)象的基礎(chǔ)上，通過(guò)對(duì)其進(jìn)行包裝拓展（添加屬性或者方法）使原有對(duì)象可以滿足用戶的更復(fù)雜需求?！?br>--《JavaScript 設(shè)計(jì)模式》

許多面向?qū)ο蟮恼Z(yǔ)言都有修飾器（Decorator）函數(shù)，用來(lái)修改類的行為

可作用于類或?qū)ο笾械膶傩院头椒?/p>

初始化時(shí)從上至下運(yùn)行，執(zhí)行時(shí)從內(nèi)向外

代碼來(lái)源： 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 校驗(yàn)對(duì)象有這些優(yōu)點(diǎn)

代碼更加直觀，優(yōu)雅，便于后續(xù)維護(hù)

支持異步校驗(yàn)：傳遞的校驗(yàn)函數(shù)返回 Promise 即可實(shí)現(xiàn)

按順序校驗(yàn)：根據(jù) decorator 執(zhí)行的先后順序

安裝 
npm install dvalidator --save
npm install @babel/plugin-proposal-decorators --save-dev
使用

配置 babel

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

為對(duì)象增加 __rules 屬性，并不可枚舉，配置，寫

rules的屬性與obj屬性一一對(duì)應(yīng)

每申明一個(gè)Decorator，其實(shí)都是更新 __rules 屬性

調(diào)用 $validate 時(shí)，會(huì)根據(jù) rules 對(duì)整個(gè)對(duì)象進(jìn)行校驗(yàn)，返回 Promise，校驗(yàn)失敗會(huì)返回所有失敗信息

參考

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104807.html

相關(guān)文章

  • JavaScript 中基于 swagger-decorator 的自動(dòng)實(shí)體類構(gòu)建與 Swagger

    摘要：中基于的自動(dòng)實(shí)體類構(gòu)建與接口文檔生成是筆者對(duì)于開源項(xiàng)目的描述，對(duì)于不反感使用注解的項(xiàng)目中利用添加合適的實(shí)體類或者接口類注解，從而實(shí)現(xiàn)支持嵌套地實(shí)體類校驗(yàn)與生成等模型生成基于的接口文檔生成等等功能。 JavaScript 中基于 swagger-decorator 的自動(dòng)實(shí)體類構(gòu)建與 Swagger 接口文檔生成是筆者對(duì)于開源項(xiàng)目 swagger-decorator 的描述，對(duì)于不反感使...

    Gemini 評(píng)論0 收藏0

  • Javascript裝飾器的妙用

    摘要：最近新開了一個(gè)項(xiàng)目，采用來(lái)開發(fā)，在數(shù)據(jù)庫(kù)及路由管理方面用了不少的裝飾器，發(fā)覺這的確是一個(gè)好東西。在中的使用該裝飾器會(huì)在定義前調(diào)用，如果函數(shù)有返回值，則會(huì)認(rèn)為是一個(gè)新的構(gòu)造函數(shù)來(lái)替代之前的構(gòu)造函數(shù)。函數(shù)參數(shù)裝飾器最后，還有一個(gè)用于函數(shù)參 最近新開了一個(gè)Node項(xiàng)目，采用TypeScript來(lái)開發(fā)，在數(shù)據(jù)庫(kù)及路由管理方面用了不少的裝飾器，發(fā)覺這的確是一個(gè)好東西。 裝飾器是一個(gè)還處于草案中...

    phodal 評(píng)論0 收藏0

  • 基于Decorator的React高階組件的思路分析與實(shí)現(xiàn)

    摘要：在深入技術(shù)棧一書中，提到了基于的。書里對(duì)基于的沒有給出完整的實(shí)現(xiàn)，在這里實(shí)現(xiàn)并記錄一下實(shí)現(xiàn)的思路。在這里最小的組件就是。對(duì)比范式與父組件的范式，如果完全利用來(lái)實(shí)現(xiàn)的，將操作與分離，也未嘗不可，但卻不優(yōu)雅。 在深入react 技術(shù)棧一書中，提到了基于Decorator的HOC。而不是直接通過(guò)父組件來(lái)逐層傳遞props，因?yàn)楫?dāng)業(yè)務(wù)邏輯越來(lái)越復(fù)雜的時(shí)候，props的傳遞和維護(hù)也將變得困難且冗...

    LinkedME2016 評(píng)論0 收藏0

  • 學(xué)習(xí)es7的Decorator(順帶寫個(gè)react高階組件)

    摘要：為了代碼進(jìn)一步解耦，可以考慮使用高階組件這種模式。開源的高階組件使用提供了一系列使用的高階組件，可以增強(qiáng)組件的行為，可以利用此庫(kù)學(xué)習(xí)高階組件的寫法。通過(guò)使用此庫(kù)提供的高階組件，可以方便地讓列表元素可拖動(dòng)。 1. Decorator基本知識(shí) 在很多框架和庫(kù)中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。 修飾器（Decorator）是一個(gè)函數(shù)，用來(lái)修改類的...

    xiyang 評(píng)論0 收藏0

  • Decorator:從原理到實(shí)踐，我一點(diǎn)都不虛~

    摘要：描述符必須是這兩種形式之一不能同時(shí)是兩者?？梢允侨魏斡行У闹禂?shù)值，對(duì)象，函數(shù)等。當(dāng)且僅當(dāng)該屬性的為時(shí)，才能被賦值運(yùn)算符改變。特點(diǎn)就是不影響之前對(duì)象的特性，而新增額外的職責(zé)功能。 前言 原文鏈接:[Nealyang/personalBlog]() showImg(https://segmentfault.com/img/remote/1460000018958861); ES6 已經(jīng)不必...

    XanaHopper 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

劉厚水

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<