Js修饰器模式使用帮助_模式指南攻略

不会改变原有的对象,而是在其基础上进行拓展。实现原理创建一个 A 类A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能实现代码ts 修饰器语法如下是 ts 官方文档的例子:https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.htmlfunction

Js修饰器模式使用帮助

不会改变原有的对象,而是在其基础上进行拓展。

Js修饰器模式使用帮助_模式指南攻略

实现原理

  • 创建一个 A 类
  • A 类中的属性和方法使用 ES7 中的修饰器语法对类和类的属性增加功能

实现代码

ts 修饰器语法

如下是 ts 官方文档的例子:https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

函数式

let obj = {
  lname: "young",
  fname: "oliver",
  gender: "male",
  getInfo() {
    return "get user infomation";
  }
};

// 这时需要添加一些方法,可以使用修饰器模式
// 这是需要添加的方法
function getGender() {
  console.log(this.gender);
}
function getFullName() {
  console.log(`${this.fname} ${this.lname}`);
}

obj.getInfo = function() {
  let getInfo = obj.getInfo;
  return function() {
    getInfo();
    getGender.call(obj); // 需要手动绑定 this
    getFullName.call(obj); // 需要手动绑定 this
  };
};

obj.getInfo()();

AOP 装饰函数

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(new(self), arguments)
    return self.apply(new(self), arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(new(self), arguments)
    return fn.apply(new(self), arguments)
  }
}
const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

缺点是在 Function 的原型链上增加了 before、after 导致原生函数被污染

改成以下:

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()
海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容