亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

基于 Decorator 實現(xiàn)對象校驗

劉厚水 / 1919人閱讀

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

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

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

前言

有了 Decorator，我認為表單校驗方式會有更多的玩法。所以基于 Decorator 實現(xiàn)了一個純凈的對象校驗的庫 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 基礎(chǔ) 
“裝飾者模式：在不改變原對象的基礎(chǔ)上，通過對其進行包裝拓展（添加屬性或者方法）使原有對象可以滿足用戶的更復雜需求?！?br>--《JavaScript 設計模式》

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

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

初始化時從上至下運行，執(zhí)行時從內(nè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ōu)點

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

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

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

安裝 
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 屬性

調(diào)用 $validate 時，會根據(jù) rules 對整個對象進行校驗，返回 Promise，校驗失敗會返回所有失敗信息

參考

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104807.html

相關(guān)文章

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

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

    Gemini 評論0 收藏0

  • Javascript裝飾器的妙用

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

    phodal 評論0 收藏0

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

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

    LinkedME2016 評論0 收藏0

  • 學習es7的Decorator(順帶寫個react高階組件)

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

    xiyang 評論0 收藏0

  • Decorator:從原理到實踐，我一點都不虛~

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

    XanaHopper 評論0 收藏0

發(fā)表評論

0條評論

劉厚水

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<