zoukankan      html  css  js  c++  java
  • [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts

    Aspect Oriented Programming, AOP, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. Kaop-ts bring us decorators in order to apply AOP. This lesson will show you how you can move cache and exception handling out of your business logic using TypeScript and Kaop-ts

    install:

    npm i --save kaop-ts

    HTML:

    <button @click="cacheIt">Cache</button>

    Import:

    import { beforeMethod, afterMethod, onException, Metadata } from "kaop-ts";

    Method:

      @beforeMethod(Advice.getCached)
      @afterMethod(Advice.setCached)
      @afterMethod((meta) => Advice.notify(meta, true))
      @onException(Advice.report)
      cacheIt() {
        console.log("Method executed");
        return fetch("https://jsonplaceholder.typicode.com/users/1")
          .then(res => res.json())
          .then(user => (this.userName = user.name));
      }

    Advice:

    class Advice {
      static getCached(meta: Metadata<any>) {
        // Access one prop value
        console.log(
          `Cache: ${meta.scope.checkbox.value} -- ${meta.scope.checkbox.checked}`
        );
        // Component name -- method name
        const key = `${meta.scope.$options["_componentTag"]}--${meta.key}`;
        const cached = localStorage.getItem(key);
        if (cached) {
          meta.scope.userName = cached;
          // if have cache then stop here, won't go though the method
          meta.prevent();
          console.log(meta.scope);
        }
      }
    
      static setCached(meta: Metadata<any>) {
        const key = `${meta.scope.$options["_componentTag"]}--${meta.key}`;
    
        // From value return by original method are stored in meta.result
        if (meta.result) {
          meta.result.then(() => {
            localStorage.setItem(key, meta.scope.userName);
            console.log(meta.scope);
          });
        }
      }
    
      static report(meta: Metadata<any>) {
          console.error('Exception ocurred', meta.exception)
      }
    
      static notify (meta, toServer) {
        // Adding extra params to the function  
        console.log('Notifying', toServer)
      }
    
    }
  • 相关阅读:
    GridView简单应用
    利用Field获取图片
    css的三种书写方式
    css选择器概述
    关于Object数组强转成Integer数组的问题:Ljava.lang.Object; cannot be cast to [Ljava.lang.Integer;
    easyUI按钮图表对照大全
    jquery绑定点击事件的三种写法
    css中关于table的相关设置
    Leetcode 287. 寻找重复数
    LeetCode 278. 第一个错误的版本
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9536195.html
Copyright © 2011-2022 走看看