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)
      }
    
    }
  • 相关阅读:
    postmessage
    input、textarea等输入框输入中文时,拼音在输入框内会触发input事件的问题
    h5判断设备是ios还是android
    js获取地址栏的参数
    BootStrap 响应式布局
    前端框架 BootStrap 快速入门(Hallo Word)
    HTML + CSS + JavaScript 实现注册页面信息验证(表单验证)
    HTML + CSS + JavaScript 实现勾选动态表格中的记录
    JavaScript常见的事件监听
    HTML + CSS + JavaScript 实现简单的动态表格
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9536195.html
Copyright © 2011-2022 走看看