前言

裝飾器是一種特殊類型的聲明，它能夠被附加到 類聲明，方法， 訪問符，屬性或參數 上。 裝飾器使用 @expression這種形式， expression求值 后必須為一個函數，它會在 運行時被調用 ，被裝飾的聲明信息做為參數傳入。

本篇先從項目的宏觀角度來總結一下Decorator如何組織。

目錄

主要的Decorator依賴

vue-cli3 默認支持Decorator, 年初重寫了一個design庫主要依賴官方和社區提供的Decorator來實現的組件。 Decorator可以非侵入的裝飾類、方法、屬性，解耦業務邏輯和輔助功能邏輯。以下是主要的三方Decorator組件：

vue-class-component

vuex-class

讓Vuex和Vue之間的綁定更清晰和可拓展

vue-property-decorator

這個組件完全依賴于vue-class-component.它具備以下幾個屬性:

core-decorators

總結一下主要就分成這三類:

以上引用方法等詳系內容可查看官方文檔。下面自定義部分來實現一個記錄日志功能的裝飾器。

自定義Decorator示例

@Logger，Logger日志裝飾器通常是修飾方法，Decorater則是在 運行時就被觸發了 ，日志記錄是在 方法被調用時觸發 ,示例中通過自動發布事件實現調用時觸發。為增加日志記錄的靈活性，需要通過暴露鉤子函數的方式來改變日志記錄的內容。
期望的日志格式

{  "logId":"", // 事件Id  "input":"", // 方法輸入的內容  "output":"", // 方法輸出的內容  "custom":"" // 自定義的日志內容}

實現

export function Logger(logId?: string, hander?: Function) {  const loggerInfo =Object.seal({logId:logId, input:'',output:'', custom: ''});  const channelName = '__logger';  const msgChannel = postal.channel(channelName);  msgChannel.subscribe(logId, logData => {    // 根據業務邏輯來處理日志    console.log(logData);  });  return function (target: any,    key: string,    descriptor: TypedPropertyDescriptor<any>): TypedPropertyDescriptor<any> {      const oldValue = descriptor.value      descriptor.value = function () {        const args: Array<any> = [];        for (let index in arguments) {        args.push(arguments[index]);        }        loggerInfo.input = `${key}(${args.join(',')})`;        // 執行原方法        const value = oldValue.apply(this, arguments);        loggerInfo.output = value;        hander && (loggerInfo.custom = hander(loggerInfo.input, loggerInfo.output) || '');        // 被調用時，會自動發出一個事件        msgChannel.publish(logId, loggerInfo);      }      return descriptor  }}