前端23种js设计模式中参见的7种设计模式的学习

创建型设计模式
是一类处理对象创建的设计模式，通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。

　　1）工厂模式

class Product {
    constructor(options) {
        this.name = options.name;
        this.time = options.time;
        this.init();
    }
    init() {
        console.log(`产品名：${this.name} 保质期：${this.time}`);
    }
}
class Factory {
    create(options) {
        return new Product(options);
    }
}

let factory = new Factory();
let product1 = factory.create({ name: "面包", time: "1个月" });

 

　　2）单例模式 (一个类只有一个实例)

function SingleObject() {
    this.name = "单例";
}

SingleObject.getInstance = function() {
    if (!this.instance) {
        this.instance = new SingleObject();
    } 
    return this.instance;
};

var obj1 = SingleObject.getInstance();
var obj2 = SingleObject.getInstance();

console.log(obj1 === obj2);

结构型设计模式
关注于如何将类或对象组合成更大、更复杂的结构，以简化设计。

　　1）适配器模式

// 新增加的适配器
class Adaptee {
    constructor() {
        this.name = "我是适配器";
    }
    parse() {}
}

// 原来的旧代码
class OldApi{
    constructor(){
        this.name = '我是旧的接口'
        this.adaptee = new Adaptee()
        this.adaptee.parse()
    }
}

var oldApi = new OldApi()

 

　　2）装饰器模式

class Circle {
    draw() {
        console.log("draw");
    }
}

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

    setRedBorder() {
        console.log('border装饰为红色')
    }

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

let circle = new Circle()
let decorator = new Decorator(circle)

circle.draw()
decorator.draw()

 

　　3）代理模式【无法直接访问时，通过代理来访问目标对象】

class Data{
    constructor(){
        this.name = '元数据'
    }

    getName(){
        console.log(this.name)
    }
}

class ProxyData{
    constructor(data){
        this.data = data
    }

    getName(){
        this.data.getName()
    }
}

let data = new Data()
let proxyData = new ProxyData(data)


data.getName()
proxyData.getName()

 

行为型设计模式
用于不同对象之间职责划分或者算法抽象，行为型设计模式不仅仅涉及类和对象，还涉及类或对象之间的交流模式并加以实现。

　　1）观察者模式

class EventEmitter {
    constructor() {
        this.eventMap = {};
    }

    on( type, fn ) {
        if ( !this.eventMap[type] ) {
            this.eventMap[type] = []
        } 
        this.eventMap[type].push(fn)
    }

    emit( type, ...params ) {
        this.eventMap[type].forEach(fn => {
            fn(...params);
        });
    }

    off( type, fn ) {
        let list = this.eventMap[type];
        let atIndex = list.indexOf(fn);
        
        if (atIndex !== -1) {
            list.splice(atIndex, 1);
        }
    }
}

 

　　2）迭代器模式【1.按顺序访问集合, 2.调用者不用关心内部的数据结构】

function each(data) {
    let iterator = data[Symbol.iterator]();

    let item = { done: false };
    while (item.done === false) {
        item = iterator.next();
        if ( item.done ) return item
        console.log(item)
    }
}

let arr = [1, 2, 3, 4];
let nodeList = document.querySelectorAll("p");
let m = new Map();
m.set("a", 100);
m.set("b", 100);

each(arr)
each(nodeList)
each(m)

class Iterator{
    constructor(wrapper) {
        this.list = wrapper.list
        this.index = 0
    }

    next() {
        if ( this.hasNext() ) {
            return this.list[this.index++]
        } else {
            return null            
        }
    }

    hasNext() {
        return this.index < this.list.length
    }
}


class Wrapper {
    constructor(list) {
        this.list = list
    }

    getIterator(iterator) {
        return new Iterator(this)
    }
}

var arr = [1, 2, 3]
var iterator = new Wrapper( arr ).getIterator()
while ( iterator.hasNext() ) {
    console.log(iterator.next())
}

 

参考文献： https://segmentfault.com/a/1190000017145504