js设计模式之 装饰器模式与应用场景

1.介绍

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。

这种模式创建了一个装饰类，用来包装原有的类，并在保持类方法签名完整性的前提下，提供了额外的功能。

简而言之，就是：

• 为对象添加新功能
• 不改变其原有的结构和功能

可以说 装饰器 就是那个环，添加到手机上，使手机有了这个环所拥有的功能，而本身手机的功能并没有改变。
接下来看下简易版的UML图

其中，Decorator 给 circle 添加了新的，就是setRedBorder。

2.粗俗易懂的代码演示

class Circle {
     

    draw(){
     
        console.log("画一个圆形");
    }
}

class Decorator {
     
    constructor(circle){
     
        this.circle = circle;
    }

    draw(circle){
     
        this.circle.draw();
        this.setRedBorder(circle);
    }

    setRedBorder(circle){
     
        console.log("设置红色边框");
    }
}

//测试代码
let circle = new Circle();
circle.draw(); //画了一个圆形

//装饰器的作用
let decorator = new Decorator();
decorator.draw(circle); //画了一个圆形，并设置了红色边框

3.经典使用场景

场景1.ES7 装饰器

Decorator 是 ES7 的一个新语法，正如其“装饰器”的叫法所表达的，他可以对一些对象进行装饰包装然后返回一个被包装过的对象，可以装饰的对象包括：类，属性，方法等。Decorator 的写法与 Java 里的注解（Annotation）非常类似，但是一定不要把 JS 中的装饰器叫做是“注解”，因为这两者的原理和实现的功能还是有所区别的，在 Java 中，注解主要是对某个对象进行标注，然后在运行时或者编译时，可以通过例如反射这样的机制拿到被标注的对象，对其进行一些逻辑包装。而 Decorator 的原理和作用则更为简单，就是包装对象，然后返回一个新的对象描述（descriptor），其作用也非常单一简单，基本上就是获取包装对象的宿主、键值几个有限的信息。

简而言之
JS 的装饰器可以用来“装饰”三种类型的对象：类的属性/方法、访问器、类本身
接下来
看下简单的例子演示

function testDecorator(target) {
     
    target.isDec = true;
}


@testDecorator
class Demo {
     
    
}

console.log(Demo.isDec);//控制台输出true

我们看这段代码发现，类 Demo本身没有isDec这个属性的，但是通过头顶上的装饰@testDecorator装饰之后 就拥有了这个属性。

不仅如此，装饰器还可以传参数，看一段粗俗易懂的代码

function testDecorator(isDec) {
     
    return function (target) {
     
        target.isDec = isDec;
    }
}

@testDecorator(false)
class Demo {
     

}
console.log(Demo.isDec);//控制台输出false

场景2. mixins
我们在使用vue ，或者scss的时候， 不难发现 会经常碰到mixins，其实mixins的原理 就类似于装饰器,
不信我们看个简单的例子

function mixins(...list) {
     
    return function (target) {
     
        Object.assign(target.prototype,...list); //给target的添加上一个或多个属性或方法
    }
}


const Foo = {
     
    foo(){
     
        console.log("foo");
    }
};

@mixins(Foo) //给MyClass 这个类添加了Foo的所有属性和方法
class MyClass {
     
    
}

let obj = new MyClass();
obj.foo();//控制台输出

可猜想，在vue组件中 引入mixins 的时候，就是给这个组件 添加mixins 中的所有属性和方法。

场景3. core-decorators

• 第三方开源lib
• 提供常用的装饰器

常用装饰器举例：
readonly ：使该属性或方法只可读，而不能更改，当我们尝试去更改的话会发生什么呢，可以看下面的例子

import {
      readonly } from "core-decorators";

class Person {
     
    @readonly
    name(){
     
        return 'zhang san';
    }
}

let p = new Person();

//发现执行到这里报错
p.name=function () {
     
    alert("11");
};

贴上控制台报的错误

deprecate：注释，我们调用一些Api的时候，有一些过期api 常常会有提示该api已经呗抛弃，其实也是用这种方法来提醒程序员的。 可以看下面的例子

import {
      deprecate } from "core-decorator";

class Person {
     
    @deprecate("即将费用")
    name(){
     
        return 'zhang san';
    }
}

let p = new Person();
p.name();

现在知道，控制台上 黄色字提示是怎么来的了吧
！
感谢您的阅读，希望对您有帮助，如有错误，也欢迎您提出