JavaScript 迭代器模式和观察者模式

迭代器模式

迭代器模式介绍

提供一种方法顺序访问一个聚合对象中的迭代各个元素，而又不需要暴露该对象的器模内部表示。

简单理解（白话理解）：统一 “集合” 型数据结构的式和式遍历接口，实现可循环遍历获取集合中各数据项（不关心数据项中的观察数据结构）

生活小栗子：清单 TodoList。每日清单有学习类、迭代生活类、器模工作类、式和式运动类等项目，观察清单列表只管罗列，迭代不管类别。器模

模式特点为遍历不同数据结构的式和式 “集合” 提供统一的接口；能遍历访问 “集合” 数据中的项，不关心项的观察数据结构代码实现var each = function (arr, callBack) {

for (let i = 0, len = arr.length; i < len; i++) {

// 将值，索引返回给回调函数callBack处理

if (callBack(i,迭代 arr[i]) === false) {

break; // 中止迭代器，跳出循环

}

}

}

// 外部调用

each([1,器模 2, 3, 4, 5], function (index, value) {

console.log(index, value);

})

观察者模式

观察者模式介绍

也叫发布订阅模式，在这种模式中，式和式一个订阅者订阅发布者，当一个特定的事件发生的服务器托管时候，发布者会通知（调用）所有的订阅者。

使用观察者模式的好处：

支持简单的广播通信，自动通知所有已经订阅过的对象。页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。发布订阅模式的构成

最常见的发布订阅模式就是咱们DOM事件，仔细回想一下我们要给一个按钮，绑定一个事件，当我点击按钮的时候我要让他的颜色变了，并且页面弹出一个弹出框

我们分析一下这个流程：

首先，我们得知道给哪个按钮的时候绑定事件，然后我们得知道触发事件以后需要干什么？那么在这其中谁是亿华云发布者？是DOM中的按钮，因为是在它身上绑定了事件，当我们点击按钮的时候它便像订阅者发布了这个消息那么谁是订阅者？是click事件，当点击按钮时，dom发布了一条消息，而事件订阅了它，所以当它被点击的时候，订阅者会接收到消息代码实现class Event {

constructor() { }

// 首先定义一个事件容器，用来装事件数组（因为订阅者可以是多个）

handlers = { }

// 事件添加方法，参数有事件名和事件方法

addEventListener(type, handler) {

// 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器

if (!(type in this.handlers)) {

this.handlers[type] = []

}

// 将事件存入

this.handlers[type].push(handler)

}

// 触发事件两个参数（事件名，参数）

dispatchEvent(type, ...params) {

// 若没有注册该事件则抛出错误

if (!(type in this.handlers)) {

return new Error(未注册该事件)

}

// 便利触发

this.handlers[type].forEach(handler => {

handler(...params)

})

}

// 事件移除参数（事件名，删除的事件，若无第二个参数则删除该事件的订阅和发布）

removeEventListener(type, handler) {

// 无效事件抛出

if (!(type in this.handlers)) {

return new Error(无效事件)

}

if (!handler) {

// 直接移除事件

delete this.handlers[type]

} else {

const idx = this.handlers[type].findIndex(ele => ele === handler)

// 抛出异常事件

if (idx === undefined) {

return new Error(无该绑定事件)

}

// 移除事件

this.handlers[type].splice(idx, 1)

if (this.handlers[type].length === 0) {

delete this.handlers[type]

}

}

}

}

var event = new Event() // 创建event实例

// 定义一个自定义事件:"load"

function load(params) {

console.log(load, params)

}

event.addEventListener(load, load)

// 再定义一个load事件

function load2(params) {

console.log(load2, params)

}

event.addEventListener(load, load2)

// 触发该事件

event.dispatchEvent(load, load事件触发)

// 移除load2事件

event.removeEventListener(load, load2)

// 移除所有load事件

event.removeEventListener(load)

很赞哦!（213）