前言

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

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

目錄

• 主要的Decorator依賴
  • vue-class-component
  • vuex-class
  • vue-property-decorator
  • core-decorators
• 自定義Decorator示例
• 哪些功能適合用Decorator實現(xiàn)
• Decorator實現(xiàn)小Tips
• See also

主要的Decorator依賴

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

vue-class-component

• @Component 如果您在聲明組件時更喜歡基于類的 API，則可以使用官方維護的 vue-class-component 裝飾器
• 實時計算computed屬性, get computedMsg () {return 'computed ' + this.msg}
• 生命周期鉤子 mounted () {this.greet()}

vuex-class

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

• @State
• @Getter
• @Action
• @Mutation

vue-property-decorator

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

• @Component (完全繼承于vue-class-component)
• @Prop：父子組件之間值的傳遞
• @Emit：子組件向父組件傳遞
• @Model：雙向綁定
• @Watch：觀察的表達式變動
• @Provice：在組件嵌套層級過深時。父組件不便于向子組件傳遞數(shù)據(jù)。就把數(shù)據(jù)通過Provide傳遞下去。
• @Inject：然后子組件通過Inject來獲取
• Mixins (在vue-class-component中定義);

core-decorators

• @readonly
• @autobind : TSX 回調(diào)函數(shù)中的 this，類的方法默認是不會綁定 this 的，可以使用autobind裝飾器
• @override

總結(jié)一下主要就分成這三類:

• 修飾類的：@Component、@autobind；
• 修飾方法的：@Emit、@Watch、@readonly、@override；
• 修飾屬性的：@Prop、@readonly；

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

自定義Decorator示例

@Logger，Logger日志裝飾器通常是修飾方法，Decorater則是在 運行時就被觸發(fā)了 ，日志記錄是在 方法被調(diào)用時觸發(fā) ,示例中通過自動發(fā)布事件實現(xiàn)調(diào)用時觸發(fā)。為增加日志記錄的靈活性，需要通過暴露鉤子函數(shù)的方式來改變?nèi)罩居涗浀膬?nèi)容。
期望的日志格式

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

實現(xiàn)

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 => {
    // 根據(jù)業(yè)務邏輯來處理日志
    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(',')})`;
        // 執(zhí)行原方法
        const value = oldValue.apply(this, arguments);
        loggerInfo.output = value;
        hander && (loggerInfo.custom = hander(loggerInfo.input, loggerInfo.output) || '');
        // 被調(diào)用時，會自動發(fā)出一個事件
        msgChannel.publish(logId, loggerInfo);
      }
      return descriptor
  }
}

使用

@Logger('event_get_detial1')
getDetial(id?: string, category?: string) {
  return "詳細內(nèi)容";
}
// 或者
@Logger('event_get_detial2', (input, output) => {
    return '我是自定義內(nèi)容';
})
getDetial2(id?: string, category?: string) {
  return "詳細內(nèi)容";
}
...
<button @click="getDetial2('1000', 'a')">獲取詳情</button>

效果: {logId: "event_get_detial2", input: "getDetial(1000,a)", output: "詳細內(nèi)容", custom: "我是自定義內(nèi)容"} , 每次點擊按鈕都會觸發(fā)一次。

TODO: 這里還需要對輸入?yún)?shù)和輸出參數(shù)中的引用數(shù)據(jù)類型做處理。

同時還需要掌握： 裝飾器工廠、裝飾器組合、裝飾器求值、參數(shù)裝飾器、元數(shù)據(jù)

哪些功能適合用Decorator實現(xiàn)

官網(wǎng)和社區(qū)提供的這些Decorator, 可以作為自己框架的底層設計。

日志功能全局都得用，調(diào)用方法基本一致，是最適合使用裝飾器來實現(xiàn)，并且每個項目的日志記錄各有差異，最適合自定義這部分。

Decorator實現(xiàn)小Tips

• 考慮下各類Decorator疊加和共存的問題,可以參考官網(wǎng)關于裝飾器組合描述
• Decorator 的目標是在原有功能基礎上，添加功能，切忌覆蓋原有功能
• 類裝飾器不能用在聲明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的類）
• 裝飾器只能用于類和類的方法，不能用于函數(shù)，因為存在函數(shù)提升。類是不會提升的，所以就沒有這方面的問題。
• 注意遷移速度、避免一口吃成胖子的做法
• 不要另起爐灶對主流庫創(chuàng)建Decorator庫，主流庫維護成本很高還是得有官方來維護，為保證質(zhì)量不使用個人編寫的Decorator庫。自己在創(chuàng)建Decorator庫時也要有這個意識，僅做一些有必要自定義的。
• Decorator 不是管道模式，decorator之間不存在交互，所以必須注意保持decorator獨立性、透明性
• Decorator 更適用于非業(yè)務功能需求
• 確定 decorator 的用途后，切記執(zhí)行判斷參數(shù)類型
• decorator 針對每個裝飾目標，僅執(zhí)行一次
  

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論