Decorator:從原理到實踐

来源:https://www.cnblogs.com/Nealyang/archive/2019/09/25/11582781.html
-Advertisement-
Play Games

前言 原文鏈接: "Nealyang/personalBlog" ES6 已經不必在過多介紹，在 ES6 之前，裝飾器可能並沒有那麼重要，因為你只需要加一層 wrapper 就好了，但是現在，由於語法糖 class 的出現，當我們想要去在多個類之間共用或者擴展一些方法的時候，代碼會變得錯綜複雜，難以 ...


前言

原文鏈接:Nealyang/personalBlog

img

ES6 已經不必在過多介紹，在 ES6 之前，裝飾器可能並沒有那麼重要，因為你只需要加一層 wrapper 就好了，但是現在，由於語法糖 class 的出現，當我們想要去在多個類之間共用或者擴展一些方法的時候，代碼會變得錯綜複雜，難以維護，而這，也正式我們 Decorator 的用武之地。

Object.defineProperty

關於 Object.defineProperty 簡單的說，就是該方法可以精準的添加和修改對象的屬性

語法

Object.defineProperty(obj,prop,descriptor)

  • ojb:要在其上定義屬性的對象
  • prop:要定義或修改的屬性的名稱
  • descriptor:將被定義或修改的屬性描述符

該方法返回被傳遞給函數的對象

在ES6中，由於 Symbol類型的特殊性，用Symbol類型的值來做對象的key與常規的定義或修改不同，而Object.defineProperty 是定義key為Symbol的屬性的方法之一。

通過賦值操作添加的普通屬性是可枚舉的，能夠在屬性枚舉期間呈現出來（for...in 或 Object.keys 方法）， 這些屬性的值可以被改變，也可以被刪除。這個方法允許修改預設的額外選項（或配置）。預設情況下，使用 Object.defineProperty() 添加的屬性值是不可修改的

屬相描述符

對象里目前存在的屬性描述符有兩種主要形式：數據描述符和存取描述符。數據描述符是一個具有值的屬性，該值可能是可寫的，也可能不是可寫的。存取描述符是由getter-setter函數對描述的屬性。描述符必須是這兩種形式之一；不能同時是兩者。

數據描述符和存取描述符均具有以下可選鍵值：

configurable

當且僅當該屬性的 configurable 為 true 時，該屬性描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。預設為 false

enumerable

當且僅當該屬性的enumerable為true時，該屬性才能夠出現在對象的枚舉屬性中。預設為 false。

數據描述符同時具有以下可選鍵值：

value

該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。預設為 undefined。

writable

當且僅當該屬性的writable為true時，value才能被賦值運算符改變。預設為 false

存取描述符同時具有以下可選鍵值：

get

一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。當訪問該屬性時，該方法會被執行，方法執行時沒有參數傳入，但是會傳入this對象（由於繼承關係，這裡的this並不一定是定義該屬性的對象）。預設為 undefined。

set

一個給屬性提供 setter 的方法，如果沒有 setter 則為 undefined。當屬性值修改時，觸發執行該方法。該方法將接受唯一參數，即該屬性新的參數值。預設為 undefined。

如果一個描述符不具有value,writable,get 和 set 任意一個關鍵字，那麼它將被認為是一個數據描述符。如果一個描述符同時有(value或writable)和(get或set)關鍵字，將會產生一個異常

更多使用實例和介紹，參看：MDN

裝飾者模式

在看Decorator之前，我們先看下裝飾者模式的使用，我們都知道，裝飾者模式能夠在不改變對象自身基礎上，在程式運行期間給對象添加指責。特點就是不影響之前對象的特性，而新增額外的職責功能。

like...this:

IMAGE

這段比較簡單，直接看代碼吧：

let Monkey = function () {}
Monkey.prototype.say = function () {
  console.log('目前我只是個野猴子');
}
let TensionMonkey = function (monkey) {
  this.monkey = monkey;
}
TensionMonkey.prototype.say = function () {
  this.monkey.say();
  console.log('帶上緊箍咒，我就要忘記世間煩惱!');
}
let monkey = new TensionMonkey(new Monkey());
monkey.say();

執行結果：
IMAGE

Decorator

Decorator其實就是一個語法糖，背後其實就是利用es5的Object.defineProperty(target,name,descriptor),瞭解Object.defineProperty請移步這個鏈接:MDN文檔

其背後原理大致如下：

class Monkey{
  say(){
    console.log('目前，我只是個野猴子');
  }
}

執行上面的代碼，大致代碼如下：

Object.defineProperty(Monkey.prototype,'say',{
  value:function(){console.log('目前，我只是個野猴子')},
  enumerable:false,
  configurable:true,
  writable:true
})

如果我們利用裝飾器來修飾他

class Monkey{
@readonly
say(){console.log('現在我是只讀的了')}
}

在這種裝飾器的屬性，會在Object.defineProperty為Monkey.prototype註冊say屬性之前，執行以下代碼：

let descriptor = {
  value:specifiedFunction,
  enumerable:false,
  configurable:true,
  writeable:true
};

descriptor = readonly(Monkey.prototype,'say',descriptor)||descriptor;
Object.defineProperty(Monkey.prototype,'say',descriptor);

從上面的偽代碼我們可以看出，Decorator只是在Object.defineProperty為Monkey.prototype註冊屬性之前，執行了一個裝飾函數，其屬於一個類對Object.defineProperty的攔截。所以它和Object.defineProperty具有一致的形參：

  • obj：作用的目標對象
  • prop:作用的屬性名
  • descriptor:針對該屬性的描述符

下麵看下簡單的使用

在class中的使用

  • 創建一個新的class繼承自原有的class，並添加屬性
@name
class Person{
  sayHello(){
    console.log(`hello ,my name is ${this.name}`)
  }
}

function name(constructor) {  
  return class extends constructor{
    name="Nealyang"
  }
}

new Person().sayHello()
//hello ,my name is Nealyang
  • 針對當前class修改(類似mixin)
@name
@seal
class Person {
  sayHello() {
    console.log(`hello ,my name is ${this.name}`)
  }
}

function name(constructor) {
  Object.defineProperty(constructor.prototype,'name',{
    value:'一凨'
  })
}
new Person().sayHello()

//若修改一個屬性

function seal(constructor) {
  let descriptor = Object.getOwnPropertyDescriptor(constructor.prototype, 'sayHello')
  Object.defineProperty(constructor.prototype, 'sayHello', {
    ...descriptor,
    writable: false
  })
}

new Person().sayHello = 1;// Cannot assign to read only property 'sayHello' of object '#<Person>'

上面說到mixin，那麼我就來模擬一個mixin吧

class A {
  run() {
    console.log('我會跑步!')
  }
}

class B {
  jump() {
    console.log('我會跳!')
  }
}

@mixin(A, B)
class C {}

function mixin(...args) {
  return function (constructor) {
    for (const arg of args) {
      for (let key of Object.getOwnPropertyNames(arg.prototype)) {
        if (key === 'constructor') continue;
        Object.defineProperty(constructor.prototype, key, Object.getOwnPropertyDescriptor(arg.prototype, key));
      }
    }
  }
}

let c = new C();
c.jump();
c.run();
// 我會跳!
// 我會跑步!

截止目前我們貌似寫了非常多的代碼了，對。。。這篇，為了徹底搞投Decorator，這。。。只是開始。。。

img

在class成員中的使用

這類的裝飾器的寫法應該就是我們最為熟知了，會接受三個參數:

  • 如果裝飾器掛載在靜態成員上，則會返回構造函數，如果掛載在實例成員上，則返回類的原型
  • 裝飾器掛載的成員名稱
  • Object.getOwnPropertyDescriptor的返回值

首先，我們明確下靜態成員和實例成員的區別

class Model{
  //實例成員
  method1(){}
  method2 = ()=>{}
  
  // 靜態成員
  static method3(){}
  static method4 = ()=>{}
}

method1 和method2 是實例成員，但是method1存在於prototype上，method2只有實例化對象以後才有。

method3和method4是靜態成員，兩者的區別在於是否可枚舉描述符的設置，我們通過babel轉碼可以看到：

IMAGE

上述代碼比較亂，簡單的可以理解為：

function Model () {
  // 成員僅在實例化時賦值
  this.method2 = function () {}
}

// 成員被定義在原型鏈上
Object.defineProperty(Model.prototype, 'method1', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 設置不可被枚舉
  configurable: true
})

// 成員被定義在構造函數上，且是預設的可被枚舉
Model.method4 = function () {}

// 成員被定義在構造函數上
Object.defineProperty(Model, 'method3', {
  value: function () {}, 
  writable: true, 
  enumerable: false,  // 設置不可被枚舉
  configurable: true
})

可以看出，只有method2是在實例化時才賦值的，一個不存在的屬性是不會有descriptor的，所以這就是為什麼在針對Property Decorator不傳遞第三個參數的原因，至於為什麼靜態成員也沒有傳遞descriptor，目前沒有找到合理的解釋，但是如果明確的要使用，是可以手動獲取的。

就像上述的示例，我們針對四個成員都添加了裝飾器以後，method1和method2第一個參數就是Model.prototype，而method3和method4的第一個參數就是Model。

class Model {
  // 實例成員
  @instance
  method1 () {}
  @instance
  method2 = () => {}

  // 靜態成員
  @static
  static method3 () {}
  @static
  static method4 = () => {}
}

function instance(target) {
  console.log(target.constructor === Model)
}

function static(target) {
  console.log(target === Model)
}

函數、訪問器、屬性 三者裝飾器的使用

  • 函數裝飾器的返回值會預設作為屬性的value描述符的存在，如果返回為undefined則忽略
class Model {
  @log1
  getData1() {}
  @log2
  getData2() {}
}

// 方案一，返回新的value描述符
function log1(tag, name, descriptor) {
  return {
    ...descriptor,
    value(...args) {
      let start = new Date().valueOf()
      try {
        return descriptor.value.apply(this, args)
      } finally {
        let end = new Date().valueOf()
        console.log(`start: ${start} end: ${end} consume: ${end - start}`)
      }
    }
  }
}

// 方案二、修改現有描述符
function log2(tag, name, descriptor) {
  let func = descriptor.value // 先獲取之前的函數

  // 修改對應的value
  descriptor.value = function (...args) {
    let start = new Date().valueOf()
    try {
      return func.apply(this, args)
    } finally {
      let end = new Date().valueOf()
      console.log(`start: ${start} end: ${end} consume: ${end - start}`)
    }
  }
}
  • 訪問器的Decorator就是get set首碼函數了，用於控制屬性的賦值、取值操作，在使用上和函數裝飾器沒有任何區別

class Modal {
  _name = 'Niko'

  @prefix
  get name() { return this._name }
}

function prefix(target, name, descriptor) {
  return {
    ...descriptor,
    get () {
      return `wrap_${this._name}`
    }
  }
}

console.log(new Modal().name) // wrap_Niko
  • 對於屬性裝飾器是沒有descriptor返回的，並且裝飾器函數的返回值也會被忽略，如果我們需要修改某一個靜態屬性，則需要自己獲取descriptor
  class Modal {
    @prefix
    static name1 = 'Niko'
  }
  
  function prefix(target, name) {
    let descriptor = Object.getOwnPropertyDescriptor(target, name)
  
    Object.defineProperty(target, name, {
      ...descriptor,
      value: `wrap_${descriptor.value}`
    })
  }
  
  console.log(Modal.name1) // wrap_Niko

對於一個實例的屬性，則沒有直接修改的方案，不過我們可以結合著一些其他裝飾器來曲線救國。

比如，我們有一個類，會傳入姓名和年齡作為初始化的參數，然後我們要針對這兩個參數設置對應的格式校驗

  const validateConf = {} // 存儲校驗信息
  
  @validator
  class Person {
    @validate('string')
    name
    @validate('number')
    age
  
    constructor(name, age) {
      this.name = name
      this.age = age
    }
  }
  
  function validator(constructor) {
    return class extends constructor {
      constructor(...args) {
        super(...args)
  
        // 遍歷所有的校驗信息進行驗證
        for (let [key, type] of Object.entries(validateConf)) {
          if (typeof this[key] !== type) throw new Error(`${key} must be ${type}`)
        }
      }
    }
  }
  
  function validate(type) {
    return function (target, name, descriptor) {
      // 向全局對象中傳入要校驗的屬性名及類型
      validateConf[name] = type
    }
  }
  
  new Person('Niko', '18')  // throw new error: [age must be number]

函數參數裝飾器

  const parseConf = {}
  class Modal {
    @parseFunc
    addOne(@parse('number') num) {
      return num + 1
    }
  }
  
  // 在函數調用前執行格式化操作
  function parseFunc (target, name, descriptor) {
    return {
      ...descriptor,
      value (...arg) {
        // 獲取格式化配置
        for (let [index, type] of parseConf) {
          switch (type) {
            case 'number':  arg[index] = Number(arg[index])             break
            case 'string':  arg[index] = String(arg[index])             break
            case 'boolean': arg[index] = String(arg[index]) === 'true'  break
          }
  
          return descriptor.value.apply(this, arg)
        }
      }
    }
  }
  
  // 向全局對象中添加對應的格式化信息
  function parse(type) {
    return function (target, name, index) {
      parseConf[index] = type
    }
  }
  
  console.log(new Modal().addOne('10')) // 11

Decorator 用例

img

log

為一個方法添加 log 函數，檢查輸入的參數

    let log = type => {
      return (target,name,decorator) => {
        const method = decorator.value;
        console.log(method);

        decorator.value = (...args) => {
          console.info(`${type} 正在進行：${name}(${args}) = ?`);
          let result;
          try{
            result = method.apply(target,args);
            console.info(`(${type}) 成功 : ${name}(${args}) => ${result}`);
          }catch(err){
            console.error(`(${type}) 失敗: ${name}(${args}) => ${err}`);
          }
          return result;
        }
      }
    }

    class Math {
      @log('add')
      add(a, b) {
        return a + b;
      }
    }

    const math = new Math();

    // (add) 成功 : add(2,4) => 6
    math.add(2, 4);

img

time

用於統計方法執行的時間:

function time(prefix) {
  let count = 0;
  return function handleDescriptor(target, key, descriptor) {

    const fn = descriptor.value;

    if (prefix == null) {
      prefix = `${target.constructor.name}.${key}`;
    }

    if (typeof fn !== 'function') {
      throw new SyntaxError(`@time can only be used on functions, not: ${fn}`);
    }

    return {
      ...descriptor,
      value() {
        const label = `${prefix}-${count}`;
        count++;
        console.time(label);

        try {
          return fn.apply(this, arguments);
        } finally {
          console.timeEnd(label);
        }
      }
    }
  }
}

debounce

對執行的方法進行防抖處理

  class Toggle extends React.Component {
  
    @debounce(500, true)
    handleClick() {
      console.log('toggle')
    }
  
    render() {
      return (
        <button onClick={this.handleClick}>
          button
        </button>
      );
    }
  }
  
  function _debounce(func, wait, immediate) {
  
      var timeout;
  
      return function () {
          var context = this;
          var args = arguments;
  
          if (timeout) clearTimeout(timeout);
          if (immediate) {
              var callNow = !timeout;
              timeout = setTimeout(function(){
                  timeout = null;
              }, wait)
              if (callNow) func.apply(context, args)
          }
          else {
              timeout = setTimeout(function(){
                  func.apply(context, args)
              }, wait);
          }
      }
  }
  
  function debounce(wait, immediate) {
    return function handleDescriptor(target, key, descriptor) {
      const callback = descriptor.value;
  
      if (typeof callback !== 'function') {
        throw new SyntaxError('Only functions can be debounced');
      }
  
      var fn = _debounce(callback, wait, immediate)
  
      return {
        ...descriptor,
        value() {
          fn()
        }
      };
    }
  }

更多關於 core-decorators 的例子後面再
Nealyang/PersonalBlog中補充，再加註釋說明。

參考

學習交流

關註公眾號： 【全棧前端精選】 每日獲取好文推薦。

公眾號內回覆 【1】，加入全棧前端學習群，一起交流。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ES6新特性
    從ES6開始，JavaScript就朝著工程化和麵向對象的大步邁進，我們並不知道這對於年輕的JavaScript來說是好還是壞，因為它最開始是做為一款輕量級的腳本語言而風靡全球的。這個問題就留給時間來證明吧！ ...
  • 獲取Object對象的方法，Reflect.ownKeys, Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.keys,for in
    let triangle={ a:1, b:2, c:3 } function coloTriangle(){ this.color='red'; } coloTriangle.prototype=triangle; let color=new coloTriangle(); Object.defi ...
  • js 混合排序(類似中文手機操作系統中的通訊錄排序)
    在陽光明媚最適合打盹的下午, 特意靜音的手機竟然動起來了, 你沒看錯, 它震動了.... 上帝(顧客)來電, "報表查詢系統左側樹狀菜單中設備的中文名稱不能排序", 要增加排序功能....bu la...bu la... , 增加xxx ,增加xxx 開始乾吧! 原諒我上面那麼多廢話... 華麗的分 ...
  • 列印頁面內容，<input>不好使，用<textarea> 代替
    123 /*** 修改*/ function changeTextareaValue(obj) { $(obj).html(obj.value);} /** * 列印 */ function clickPrint(){ bdhtml = window.document.body.innerHTML;... ...
  • Cocos Creator 中 _worldMatrix 到底是什麼(上)
    Cocos Creator 中 _worldMatrix 到底是什麼(上) 1. (矩陣)Matrix是什麼，有什麼用 (矩陣)Matrix一個神奇的存在？在開發過程中對裡邊各項值的含義是不是抓耳撓腮，百思不得其解？今天我們就來庖丁解牛，撥開它的神秘面紗。由於內容較多，關於Cocos Creator ...
  • 使用<label>標簽修改input[type="checkbox"]的樣式
    因為<label>的特性有兩點 : ①不呈現任何效果, ②用戶點擊該標簽, 瀏覽器能自動將焦點轉移到相關的表單控制項上. 所以正適合用於修改input的樣式. 進入正文, 修改input[type="checkbox"]的樣式 預設樣式: 選定前選定後; 設置後的樣式：選定前選定後; 本文只是簡單描述 ...
  • js清除定時器註意點
    如何這篇文章所述：https://www.cnblogs.com/mmykdbc/p/7418575.html js多次調用創建定時器的函數，會使定時器速度越來越快，多次調用定時器的使用場景比如：監聽頁面尺寸變化，重新初始化定時器函數，但是如果不清除上一次的，定時器實際上會累加在一起，這裡需要註意： ...
  • js設置定時執行
    具體語法參考:https://www.runoob.com/jsref/met-win-setinterval.html ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類