單例模式
- 例如頁面有一個(gè)modal彈窗，無論哪個(gè)頁面每次打開彈窗原探，其實(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ā)布訂閱是觀察者模式的升級版
- 發(fā)布訂閱比觀察者模式多了一個(gè)事件調(diào)度中心
- 他們都是維持了對象/主題（subject）一對多依賴
- 觀察者：維持的是對象以及依賴這個(gè)對象的多個(gè)事件的關(guān)系咽弦；
- 發(fā)布訂閱：對象的不同主題以及依賴不同主題的多個(gè)事件的關(guān)系徒蟆；
發(fā)布訂閱模式 - 賊簡單實(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}
