JavaScriptデザインパターン-iteratorパターン
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)
})
var i, length = nodeList.length
for (i = 0; i < length; i++) {
console.log(nodeList[i])
}
$p.each(function (key, p) {
console.log(key, p)
})
function each(data) {
var $data = $(data)
$data.each(function (key, val) {
console.log(key, val)
})
}
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
function each(data) {
var $data = $(data)
$data.each(function (key, p) {
console.log(key, p)
})
}
each(arr)
each(nodeList)
each($p)
1.5.2ES6イテレータ
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}
function each(data) {
let iterator = data[Symbol.iterator]()
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)
function each(data) {
for (let item of data) {
console.log(item)
}
}
each(arr)
each(nodeList)
each(m)
1.5.3ES6イテレータ与ジェネレータ
- Iteratorの値は、上記のタイプのトラバーサルに限定されません。
- そしてまた
Generator 函数的使用
- これは
只要返回的数据符合 Iterator 接口的要求
- これは
可使用 Iterator 语法,这就是迭代器模式
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
hw[Symbol.iterator]
f [Symbol.iterator]() {
[native code] }
1.6オブザーバーモードコードのデモ
function each(data) {
let iterator = data[Symbol.iterator]()
let item = {
done: false}
while(!item.done) {
item = iterator.next()
if (!item.done) {
console.log(item.value)
}
}
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オブザーバーパターンの設計原理の検証
迭代器对象和目标对象分离
迭代器将使用者与目标对象隔离开
符合开放封闭原则