单例模式、发布订阅、观察者模式、迭代器模式

单例模式

• 例如页面有一个modal弹窗，无论哪个页面每次打开弹窗，其实都可以用同一个弹窗实例，不需要多次创建
• 代码实现： 多次调用 aa 只打印一次 111, a == b 结果为true

var aa = (function () {
    var instance
    return function () {
        function Modal() {
            this.init();
        }
        Modal.prototype.init = function () {
            console.log('创建了modal')
        }
        if (!instance) { 
            console.log(111)  // 只打印一次 
            instance = new Modal();
        }
        return instance;
    }
})()
let a = aa()
let b = aa()
console.log(a, b , a == b)

观察者模式和发布订阅模式

• 其实差不多，发布订阅是观察者模式的升级版
• 发布订阅比观察者模式多了一个事件调度中心
• 他们都是维持了对象/主题（subject）一对多依赖
• 观察者：维持的是对象以及依赖这个对象的多个事件的关系；
• 发布订阅：对象的不同主题以及依赖不同主题的多个事件的关系；

发布订阅模式 - 贼简单实现

class Observable {
    private handlers: {
        [props: string]: fn[]
    } = {};
    subscribe(key: string, fun: fn) {
        if (!this.handlers[key]) this.handlers[key] = [];
        this.handlers[key].push(fun);
    }
    unSubscribe(key: string) { 
        delete this.handlers[key];
    }
    publish<K>(key: string, val: K) {
        let handlers = this.handlers[key] || [];
        handlers.forEach(item => {
            item(val)
        })
    }
 }
type fn = (v: any) => void;

// test
var observer = new Observable();
observer.subscribe('name', (val) => {
    console.log(`1 name is ${val}`)
})
observer.subscribe('name', (val) => {
    console.log(`2 name is ${val}`)
})
observer.subscribe('age', (val) => {
    console.log(`1 age is ${val}`)
})
observer.publish<string>('name', 'liuxinya')
observer.publish<number>('age', '18')

观察者模式

• handlers变成一个单一的数组
• 订阅直接往数组里面存事件
• 发布直接遍历数组里面的事件并传入新值

Iterator Pattern

class IteratorFromArray {
    _array: any[]
    _cursor: number
    constructor(arr: any[]) {
        this._array = arr;
        this._cursor = 0;
    }
  
    next() {
        return this._cursor < this._array.length ?
        { value: this._array[this._cursor++], done: false } :
        { done: true };
    }
    map(callback: (v: any) => {done: boolean, value: any}) {
        let iterator = new IteratorFromArray(this._array)
        return {
            next: () => {
                const { done, value } = iterator.next()
                return {
                    done,
                    value: value ? callback(value) : undefined
                }
            }
        }  
    }
}
let test = new IteratorFromArray([1, 2, 3, 4])
console.log(test.next()) // {value: 1, done: false}
console.log(test.next())  //  {value: 2, done: false}
console.log(test.next()) //  {value: 3, done: false}

let testMap = test.map(value => value + 1)
console.log(testMap.next()) //{done: false, value: 2}
console.log(testMap.next()) // {done: false, value: 3}
console.log(testMap.next())
console.log(testMap.next())
console.log(testMap.next()) // {done: true, value: undefined}