單例模式

• 例如頁(yè)面有一個(gè)modal彈窗，無(wú)論哪個(gè)頁(yè)面每次打開(kāi)彈窗，其實(shí)都可以用同一個(gè)彈窗實(shí)例，不需要多次創(chuàng)建
• 代碼實(shí)現(xiàn)： 多次調(diào)用 aa 只打印一次 111, a == b 結(jié)果為true

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

觀察者模式和發(fā)布訂閱模式

• 其實(shí)差不多，發(fā)布訂閱是觀察者模式的升級(jí)版
• 發(fā)布訂閱比觀察者模式多了一個(gè)事件調(diào)度中心
• 他們都是維持了對(duì)象/主題（subject）一對(duì)多依賴
• 觀察者：維持的是對(duì)象以及依賴這個(gè)對(duì)象的多個(gè)事件的關(guān)系；
• 發(fā)布訂閱：對(duì)象的不同主題以及依賴不同主題的多個(gè)事件的關(guān)系；

發(fā)布訂閱模式 - 賊簡(jiǎn)單實(shí)現(xiàn)

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變成一個(gè)單一的數(shù)組
• 訂閱直接往數(shù)組里面存事件
• 發(fā)布直接遍歷數(shù)組里面的事件并傳入新值

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}