简写设计模式

发布订阅模式

vue的事件总线

代理模式

当有好多子时，在父中添加点击事件

单例模式

单例模式的核心是确保只有一个实例，并提供全局访问 闭包（另一个函数访问另一个函数使用）：经常使用惰性抽离单例模式

常用闭包的方式创建单例模式

var createDiv= (function(){
    var div;  
    return function(){
        if(!div) {
            div = document.createElement("div");
            div.style.width = '100px';
            div.style.height = '100px';
            div.style.background = '#e4e4e4';
            document.body.appendChild(div);
        }
        return div;
    }
})();
 
var div1=createDiv();
var div2=createDiv();
console.log(div1===div2); //true

blog.csdn.net/yisuowushin…

工厂模式

工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。

比如：我们想在网页面里插入一些元素，而这些元素类型不固定，可能是图片、链接、文本，根据工厂模式的定义，在工厂模式下，工厂函数只需接受我们要创建的元素的类型，其他的工厂函数帮我们处理。

// 文本工厂
class Text {
    constructor(text) {
        this.text = text
    }
    insert(where) {
        const txt = document.createTextNode(this.text)
        where.appendChild(txt)
    }
}

// 链接工厂
class Link {
    constructor(url) {
        this.url = url
    }
    insert(where) {
        const link = document.createElement('a')
        link.href = this.url
        link.appendChild(document.createTextNode(this.url))
        where.appendChild(link)
    }
}

// 图片工厂
class Image {
    constructor(url) {
        this.url = url
    }
    insert(where) {
        const img = document.createElement('img')
        img.src = this.url
        where.appendChild(img)
    }
}

// DOM工厂
class DomFactory {

  constructor(type) {
    return new (this[type]())
  }

  // 各流水线
  link() { return Link }
  text() { return Text }
  image() { return Image }
}

// 创建工厂
const linkFactory = new DomFactory('link')
const textFactory = new DomFactory('text')

linkFactory.url = 'https://surmon.me'
linkFactory.insert(document.body)

textFactory.text = 'HI! I am surmon.'
textFactory.insert(document.body)

装饰者模式

装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责（方法或属性）。与继承相比，装饰者是一种更轻便灵活的做法。

简单说：可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象。

ES7装饰器
function isAnimal(target) {
    target.isAnimal = true
    return target
}

// 装饰器
@isAnimal
class Cat {
    // ...
}
console.log(Cat.isAnimal)    // true

为什么修饰器不能用于函数： 修饰器只能用于类和类的方法，不能用于函数，因为存在函数提升

详细可查找资料