」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 裝飾器和自動存取器

JavaScript 裝飾器和自動存取器

發佈於2024-08-01
瀏覽:241

JavaScript Decorators and Auto-Accessors

如何创建 JavaScript 装饰器以及使用自动访问器如何帮助改善开发人员体验的演练。

目录

  • 上下文和规范
  • 前言
  • 自动访问器
  • 创建装饰器
    • 一个简单的装饰器
    • 使用装饰器进行验证
    • 装饰器选项
  • 元数据

背景和规范

GitHub 上的装饰器提案已经在分解装饰器的基本用例方面做得很好。我的目标不是在那里重新创建这些示例,而是突出一些鲜为人知的功能和交互。此外,在本系列的下一篇文章中,我将重点介绍如何在单个类属性上组合或链接多个装饰器。

前言

每个代码示例都将附带一个交互式 Babel REPL 游乐场的链接,因此您可以自己尝试,而无需设置 polyfill 或启动存储库。在我的所有示例中,应选中左上角(“设置”下)的“评估”选项,这意味着您将能够查看代码、编辑它、打开浏览器的开发控制台,并在那里查看日志/结果。

你不需要关注 Babel REPL 右侧的转译代码,除非你想深入研究装饰器的 polyfill。 Babel REPL 的左侧是您可以编辑和编写代码来亲自尝试的地方。

要强调的是,您的开发人员工具的控制台应该显示控制台日志。如果没有,请确保在左上角选中“评估”。

自动存取器

装饰器规范的一个重要功能是自动访问器。我们将从学习它们是什么以及使用自动访问器如何使编写装饰器变得更容易开始。

装饰器提案在此处概述了自动访问器。但最终它只是一个简单的功能;让我们看一个基本的工作示例:Babel REPL。

class MyClass {
  accessor myBoolean = false
}

在此类定义中,访问器关键字位于属性名称之前。然而,这并没有真正改变属性的任何内容 - 接下来,我们将看到自动访问器与装饰器结合使用时有多么有用。

(注意,您还可以将 static 与自动访问器一起使用,例如静态访问器 myBoolean = false)

创建装饰器

为了更好地理解为什么我们使用自动访问器,让我们构建一些装饰器。

一个简单的装饰器

我们首先将自动访问器与实际上作用不大的装饰器结合起来,以便了解语法。

这是一个保留内部变量的函数装饰器,并允许您通过类上的属性获取和设置该变量:Babel REPL

function simpleDecorator(value, context) {
  let internalValue = false
  return {
    get() {
      return internalValue
    },
    set(val) {
      internalValue = val
      return internalValue
    }
  }
}

class MyClass {
  @simpleDecorator
  accessor myBoolean
}

这个装饰器返回一个对象,有两个方法:get()和set()。这就是自动访问器的装饰器如何“装饰”或将属性的 setter 和 getter 包装在一个地方;我们不必创建 simpleGetterDecorator 和 simpleSetterDecorator。相反,我们使用自动访问器将它们组合成一个定义,这更容易。

最后,到目前为止,这看起来是一个相当正常的函数 - 这非常适合介绍!

使用装饰器进行验证

为了让我们为本文的其余部分做好准备,让我们更新我们的装饰器,以便它实际上执行某种验证。我们将制作一个装饰器,它只允许您设置偶数,而不允许设置其他数字。看起来像这样:Babel REPL

function onlyEvenNumbers(value, context) {
  let internalNumber = 0
  return {
    get() {
      return internalNumber
    },
    set(val) {
      const num = Number(val)
      if(isNaN(num)) {
        // don't set the value if it's not a number or coerced to a number
        return internalNumber
      }
      if(num % 2 !== 0) {
        // don't allow odd numbers
        return internalNumber
      }
      internalNumber = val
      return internalNumber
    }
  }
}

class MyClass {
  @onlyEvenNumbers
  accessor myEvenNumber
}

因此,我们向 set() 方法添加逻辑,现在任何尝试在我们的类上设置 myEvenNumber 属性的人都将经历该验证逻辑。好的。

装饰器选项

现在我们有了一个很好的仅偶数装饰器,让我们让它处理偶数和奇数,并提供一个选项来配置我们想要的数字类型!

幸运的是,因为我们在这里编写的是看起来相当正常的 JavaScript,所以将其配置为以这种方式工作并不难。我们用一个接受选项的函数包装原始装饰器,然后返回装饰器。巴别塔 REPL

function evensOrOdds(onlyEvens = true) {
  return function decorator(value, context) {
    let internalNumber = 0
    return {
      get() {
        return internalNumber
      },
      set(val) {
        const num = Number(val)
        if(isNaN(num)) {
            // don't set the value if it's not a number
            return internalNumber
        }
        if(num % 2 !== (onlyEvens ? 0 : 1)) {
            return internalNumber
        }
        internalNumber = val
        return internalNumber
      }
    }
  }
}

class MyClass {
  @evensOrOdds(true)
  accessor myEvenNumber

  @evensOrOdds(false)
  accessor myOddNumber
}

我们现在已经将装饰器配置为接受任意选项,这允许装饰器的用户自定义其行为。耶。

元数据

装饰器可以使用的另一个工具是 context.metadata。该对象被传递给每个装饰器,您可以将其用于各种用途,但您需要小心,因为元数据对象对于每个装饰器的所有调用都是相同的。

继续学习

继续阅读本系列的下一篇文章,了解如何将装饰器组合(或应用多个)到单个属性!

版本聲明 本文轉載於:https://dev.to/frehner/javascript-decorators-and-auto-accessors-437i?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用Python理解有效地創建字典?
    如何使用Python理解有效地創建字典?
    在python中,詞典綜合提供了一種生成新詞典的簡潔方法。儘管它們與列表綜合相似,但存在一些顯著差異。 與問題所暗示的不同,您無法為鑰匙創建字典理解。您必須明確指定鍵和值。 For example:d = {n: n**2 for n in range(5)}This creates a dict...
    程式設計 發佈於2025-07-04
  • 如何使用Depimal.parse()中的指數表示法中的數字?
    如何使用Depimal.parse()中的指數表示法中的數字?
    在嘗試使用Decimal.parse(“ 1.2345e-02”中的指數符號表示法時,您可能會出現錯誤。這是因為默認解析方法無法識別指數符號。 成功解析這樣的字符串,您需要明確指定它代表浮點數。您可以使用numbersTyles.Float樣式進行此操作,如下所示:[&& && && &&華氏度D...
    程式設計 發佈於2025-07-04
  • 如何有效地轉換PHP中的時區?
    如何有效地轉換PHP中的時區?
    在PHP 利用dateTime對象和functions DateTime對象及其相應的功能別名為時區轉換提供方便的方法。例如: //定義用戶的時區 date_default_timezone_set('歐洲/倫敦'); //創建DateTime對象 $ dateTime = ne...
    程式設計 發佈於2025-07-04
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本編號的替代方法,它是使用以下語法:獲取最新版本:未壓縮)While these legacy URLs still remain in use, it is recommended ...
    程式設計 發佈於2025-07-04
  • 如何使用“ JSON”軟件包解析JSON陣列?
    如何使用“ JSON”軟件包解析JSON陣列?
    parsing JSON與JSON軟件包 QUALDALS:考慮以下go代碼:字符串 } func main(){ datajson:=`[“ 1”,“ 2”,“ 3”]`` arr:= jsontype {} 摘要:= = json.unmarshal([] byte(...
    程式設計 發佈於2025-07-04
  • 如何在php中使用捲髮發送原始帖子請求?
    如何在php中使用捲髮發送原始帖子請求?
    如何使用php 創建請求來發送原始帖子請求,開始使用curl_init()開始初始化curl session。然後,配置以下選項: curlopt_url:請求 [要發送的原始數據指定內容類型,為原始的帖子請求指定身體的內容類型很重要。在這種情況下,它是文本/平原。要執行此操作,請使用包含以下標頭...
    程式設計 發佈於2025-07-04
  • Go語言如何動態發現導出包類型?
    Go語言如何動態發現導出包類型?
    與反射軟件包中的有限類型的發現能力相反,本文探討了在運行時發現所有包裝類型(尤其是struntime go import( “ FMT” “去/進口商” ) func main(){ pkg,err:= incorter.default()。導入(“ time”) ...
    程式設計 發佈於2025-07-04
  • PHP與C++函數重載處理的區別
    PHP與C++函數重載處理的區別
    作為經驗豐富的C開發人員脫離謎題,您可能會遇到功能超載的概念。這個概念雖然在C中普遍,但在PHP中構成了獨特的挑戰。讓我們深入研究PHP功能過載的複雜性,並探索其提供的可能性。 在PHP中理解php的方法在PHP中,函數超載的概念(如C等語言)不存在。函數簽名僅由其名稱定義,而與他們的參數列表無關...
    程式設計 發佈於2025-07-04
  • 用戶本地時間格式及時區偏移顯示指南
    用戶本地時間格式及時區偏移顯示指南
    在用戶的語言環境格式中顯示日期/時間,並使用時間偏移在向最終用戶展示日期和時間時,以其localzone and格式顯示它們至關重要。這確保了不同地理位置的清晰度和無縫用戶體驗。以下是使用JavaScript實現此目的的方法。 方法:推薦方法是處理客戶端的Javascript中的日期/時間格式化和...
    程式設計 發佈於2025-07-04
  • Java為何無法創建泛型數組?
    Java為何無法創建泛型數組?
    通用陣列創建錯誤 arrayList [2]; JAVA報告了“通用數組創建”錯誤。為什麼不允許這樣做? 答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<my...
    程式設計 發佈於2025-07-04
  • 如何在GO編譯器中自定義編譯優化?
    如何在GO編譯器中自定義編譯優化?
    在GO編譯器中自定義編譯優化 GO中的默認編譯過程遵循特定的優化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    程式設計 發佈於2025-07-04
  • 查找當前執行JavaScript的腳本元素方法
    查找當前執行JavaScript的腳本元素方法
    如何引用當前執行腳本的腳本元素在某些方案中理解問題在某些方案中,開發人員可能需要將其他腳本動態加載其他腳本。但是,如果Head Element尚未完全渲染,則使用document.getElementsbytagname('head')[0] .appendChild(v)的常規方...
    程式設計 發佈於2025-07-04
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-07-04
  • 將圖片浮動到底部右側並環繞文字的技巧
    將圖片浮動到底部右側並環繞文字的技巧
    在Web設計中圍繞在Web設計中,有時可以將圖像浮動到頁面右下角,從而使文本圍繞它纏繞。這可以在有效地展示圖像的同時創建一個吸引人的視覺效果。 css位置在右下角,使用css float and clear properties: img { 浮點:對; ...
    程式設計 發佈於2025-07-04
  • 如何檢查對像是否具有Python中的特定屬性?
    如何檢查對像是否具有Python中的特定屬性?
    方法來確定對象屬性存在尋求一種方法來驗證對像中特定屬性的存在。考慮以下示例,其中嘗試訪問不確定屬性會引起錯誤: >>> a = someClass() >>> A.property Trackback(最近的最新電話): 文件“ ”,第1行, AttributeError: SomeClass...
    程式設計 發佈於2025-07-04

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3