装饰器模式-前端设计模式

首先装饰器这个词语

所谓的装饰 就是在原有的基础进行改进，不会破坏原有的结构
比如手机壳， 它就是一个装饰品

有这样的一个功能需要在一个圆上添加一个红色边框

	 class Circle {
            draw() {
                console.log('画一个圆');
            }
        }
      let circle = new Circle()
      circle.draw()

我们有两种选择
第一种, 不美观的写法

	class Circle {
            draw() {
                console.log('画一个圆');
            }
            setRedBorder() {
				console.log('添加红色边框');
			}
            
        }
      let circle = new Circle()
      circle.draw()
      circle.setRedBorder()

第二种装饰器模式
不会破坏原有的结构

        class Circle {
            draw() {
                console.log('画一个圆');
            }
        }

        class Decorator {
            constructor(circle) {
                this.circle = circle
            }
            
            draw() {
                this.circle.draw()
                this.setRedBorder()

            }
            setRedBorder() {
                console.log('添加红色边框');
            }
        }

        let circle = new Circle()
        circle.draw()
        console.log('----分割线----');
        let p = new Decorator(circle)
        p.draw()

装饰器装饰类

	@testDec
	class Demo {
	
	}
	
	function testDec(target) {
	    target.isDec = true
	}
	alert(Demo.isDec)

装饰器装饰类传参数

	@testDec('我是参数')
	class Demo {
	
	}
	
	function testDec(isDec) {
	    return function(target) {
	        target.isDec = isDec
	    }
	    
	}
	alert(Demo.isDec)

接下来看这个mixins装饰器

下面这个有一点难以理解，最后敲代码实现来理解，但是需要安装插件
代码我会放到码云里面，最下面有地址

1. 需要注意的是 MyClass这个类 怎么来的 foo boo

首先我们定义了一个对象， 对象里面有两个方法
我们使用ES6语法 rest传参 得到的 list = [{foo: () {} ， boo: () {} }]
通过数组解析成 {foo:() {} , boo: () {} }
最主要的是 这个 target = ƒ MyClass() {}
MyClass本质还是构造函数
target.prototype = MyClass.prototype = {foo: () {} ， boo: () {} } 在构造函数上添加了两个方法
Object.assign()浅拷贝

	function mixins(...list) {
	    return function (target) {
	        console.log('list', ...list);
	        console.log('target', target.prototype);
	        Object.assign(target.prototype, ...list)
	    }
	    
	}
	
	let Foo = {
	    foo() {
	        console.log('foo');
	    },
	    boo() {
	        console.log('boo');
	    }
	}
	
	@mixins(Foo)
	class MyClass {
	
	}
	
	let p = new MyClass()
	p.foo()
	p.boo()

前面讲的是装饰类，接下来看装饰方法

1. @readonly只读属性
   descriptor.writable = false 不能修改

	function readonly (target, name, descriptor) {
	    descriptor.writable = false
	    return descriptor
	}
	
	class Person {
	    constructor() {
	        this.first = 'A'
	        this.last = 'B'
	}
	
	    // 装饰方法
	    @readonly
	    name() { return `${this.first} ${this.last}`}
	}
	
	var p = new Person()
	console.log(p.name());
	
	// 报错，只读属性 不能修改
	p.name = function() {}

Tip:这段代码有点难懂
会写一篇关于 apply bind call 方法的文章

解释代码

// name add 这个方法名
// target 目标类
// descriptor 装饰方法的属性
function log(target, name, descriptor) {
    console.log(target, name, descriptor, arguments);
    // descriptor.value 表示就是这个 add 方法
    let oldValue = descriptor.value
    descriptor.value = function() {
        console.log(`calling ${name} width`, this);
        // 这个this指向的就是  Math {} 这个类
        // arguments 指的是传入的参数 [2, 4] 是一个伪数组
        // oldValue.apply(this, arguments) = add.apply(this, arguments)
        // add.apply(Math {}, arguments)
        // 把 add 这个方法应用到 Math {} ，传入的参数是 arguments = [2, 4]
        return oldValue.apply(this, arguments)
        // return oldValue.apply(this, [8, 8]) 这样会return 16
    }
    return descriptor
}

总体代码

	function log(target, name, descriptor) {
	    console.log(target, name, descriptor, arguments);
	    let oldValue = descriptor.value
	    descriptor.value = function() {
	        console.log(`calling ${name} width`, this);
	        return oldValue.apply(this, arguments)
	    }
	    return descriptor
	}
	
	class Math {
	    // 装饰方法
	    @log
	    add(a,b) {
	        return a + b
	    }
	}
	
	let math = new Math()
	const result = math.add(2,4)
	console.log('result', result);

成熟的第三方库 core-decorators

npm install core-decorators --save

readonly 只读属性， 不能修改

import {readonly} from ‘core-decorators’

decorate 废弃，比如版本升级废弃一些方法

import {decorate} from ‘core-decorators’

还可以传入" 提示信息，已经废弃了 "

代码在这个目录
之前用来做webpack的案例的，其他代码不要管
npm run serve 指令启动