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

单例模式

  • 例如页面有一个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}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容