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

可以说装饰器就是那个环，添加到手机上，使手机有了这个环所拥有的功能，而本身手机的功能并没有改变。

其中，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

常用装饰器举例：
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();

执行后。控制台出现了这样的东西

现在知道，控制台上黄色字提示是怎么来的了吧

！

感谢您的阅读，希望对您有帮助，如有错误，也欢迎您提出

发布于 2019-10-16 21:26

JavaScript

设计模式