JavaScript 设计模式----迭代器模式

1. 迭代器模式

1.1 迭代器模式介绍

• 顺序访问一个集合(基本为数组形式)
• 使用者无需知道集合的内部结构（封装）

1.2 迭代器模式示例

<p>jquery each</p>
<p>jquery each</p>
<p>jquery each</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
	var arr = [1, 2, 3]
	var nodeList = document.getElementsByTagName('p')
	var $p = $('p')

	// 要对这三个变量进行遍历，需要写三个遍历方法
	// 第一 遍历数组
	arr.forEach(function (item) {
		console.log(item)
	})
	// 第二 遍历 nodeList（不是纯数组，不能用forEach)
	var i, length = nodeList.length
	for (i = 0; i < length; i++) {
		console.log(nodeList[i])
	}
	// 第三 遍历 $p（利用 jquery 的 each 方法遍历）
	$p.each(function (key, p) {
		console.log(key, p)
	})

	// 统一遍历方法（兼容）
	// 顺序遍历有序集合
	// 使用者不必知道集合的内部结构
	function each(data) {
		var $data = $(data) // 生成迭代器
		$data.each(function (key, val) { // 继承 jquery 中的 each 函数 
			console.log(key, val)
		})
	}
	
	// 能同时遍历数组，nodeList，jquery对象
	each(arr)
	each(nodeList)
	each($p)
	
</script>

1.3 迭代器模式类图

• 传统 UML 类图
  
• 简化后的 UML 类图
  

1.4 迭代器模式演示

class Iterator {
	constructor(container) {
		this.list = container.list
		this.index = 0
	}
	next() {
		if (this.hasNext()) {
			return this.list[this.index++]
		}
		return null
	}
	hasNext() { // 判断有没有下一个
		if (this.index >= this.list.length) {
			return false
		}
		return true
	}
}

class Container {
	constructor(list) {
		this.list = list
	}
	// 生成遍历器
	getIterator() {
		return new Iterator(this)
	}
}

// 测试
let arr = [1,2,3,4,5,6]
let container = new Container(arr) // 兼容所有有序的数据类型
let iterator = container.getIterator()
while(iterator.hasNext()) {
	console.log(iterator.next())
}

1.5 迭代器模式场景

1.5.1 jQuery each

// 如何能写出一个方法来遍历这三种对象呢？
function each(data) {
	var $data = $(data) // 生成迭代器
	$data.each(function (key, p) {
		console.log(key, p)
	})
}
// 测试代码
each(arr)
each(nodeList)
each($p)

1.5.2 ES6 Iterator

• ES6 Iterator 为何存在？
  • ES6 语法中，有序集合的数据类型已经有很多
  • Array Map Set String TypedArray arguments NodeList
  • 需要有一个统一的遍历接口来遍历所有数据类型
  • （注意，object 不是有序集合，可以用 Map 代替）
• ES6 Iterator 是什么？
  • 以上数据类型，都有[Symbol.iterator]属性
  • 属性值是函数，执行函数返回一个迭代器
  • 这个迭代器就有 next 方法可顺序迭代子元素
  • 可运行 Array.prototype[Symbol.iterator]来测试

Array.prototype[Symbol.iterator]
f values() { [native code] }
Array.prototype[Symbol.iterator]()
Array Iterator {}
Array.prototype[Symbol.iterator]().next()
{value: undefined, done: true} // done为true就是遍历完了

• ES6 Iterator 示例

function each(data) {
	// 生成遍历器
	let iterator = data[Symbol.iterator]()

	// console.log(iterator.next()) // 有数据时返回 {value: 1, done: false}
	// console.log(iterator.next()) // 没有数据时返回 {value: undefined, done: true}

	let item = {done: false}
	while (!item.done) {
		item = iterator.next()
		if (!item.done) {
			console.log(item.value)
		}
	}
}

// 测试代码
let arr = [1,2,3,4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 200)

each(arr)
each(nodeList)
each(m)

// `Symbol.iterator` 并不是人人都知道
// 也不是每个人都需要封装一个 each 方法
// 因此有了 `for...of` 语法
function each(data) {
	for (let item of data) {
		console.log(item)
	}
}

each(arr)
each(nodeList)
each(m)

1.5.3 ES6 Iterator 与 Generator

• Iterator 的价值不限于上述几个类型的遍历
• 还有 Generator 函数的使用
• 即只要返回的数据符合 Iterator 接口的要求
• 即可使用 Iterator 语法，这就是迭代器模式

function* helloWorldGenerator() {
	yield 'hello';
	yield 'world';
	return 'ending';
}
var hw = helloWorldGenerator();
hw[Symbol.iterator]
f [Symbol.iterator]() { [native code] }
// 可以看到， Generator 函数返回的结果，也实现了 Iterator 接口

1.6 观察者模式代码演示

function each(data) {
	// 生成遍历器
	let iterator = data[Symbol.iterator]()
	
	// console.log(iterator.next())
	// console.log(iterator.next())
	// console.log(iterator.next())
	// console.log(iterator.next())

	let item = {done: false}
	while(!item.done) {
		item = iterator.next()
		if (!item.done) {
			console.log(item.value)
		}
	}
	
	// 带有遍历器特性的对象：data[Symbol.iterator] 有值
	for (let item of data) {
		console.log(item)
	}
}

let arr = [1,2,3,4]
let nodeList = document.getElementsByTagName('p')
let m = new Map()
m.set('a', 100)
m.set('b', 100)

each(arr)
each(nodeList)
each(m)

1.7 观察者模式设计原则验证

• 迭代器对象和目标对象分离
• 迭代器将使用者与目标对象隔离开
• 符合开放封闭原则