Design Patterns Iterator mode

Iterator pattern: a set of sequential access (sequential access requires is ordered). User does not know the internal structure of the set (package)

<body>
　　<div id="div1">
　　　　<p>jquery each</p>
　　　　<p>jquery each</p>
　　　　<p>jquery each</p>
　　</div>
　　<script>
　　　　var arr = [1, 2, 3];
　　　　var nodeList = document.getElementsByTagName('p');
　　　　There are $ p = $ ( ' p ' );

　　　　// To traverse the three variables, the need to write three traversals 
　　　　// first 
　　　　arr.forEach ( function (Item) {
　　　　　　console.log(item);
　　　　})
　　　　// 第二
　　　　var i, length = nodeList.length;
　　　　for(i = 0; i < length; i++) {
　　　　　　console.log(nodeList[i]);
　　　　}
　　　　// third 
　　　　$ p.each ( function (Key, P) {
　　　　　　console.log(key, p);
　　　　})
　　</script>
</body>

These three data structures are not the same, but they all have one characteristic is that they are very aware of this data structure looks like, then we can write a function that supports all three traversal

<body>
　　<div id="div1">
　　　　<p>jquery each</p>
　　　　<p>jquery each</p>
　　　　<p>jquery each</p>
　　</div>

　　<script>
　　　　var arr = [1, 2, 3];
　　　　var nodeList = document.getElementsByTagName('p');
　　　　var $p = $('p');

　　　　function each (Data) {
　　　　　　var $ Data = $ (Data); // iterator that generates 
　　　　　　$ data.each ( function (Key, Val) {
　　　　　　　　console.log(key, val)
　　　　　　})
　　　　}

　　　　// order traversal ordered collection 
　　　　// use this need not know the internal structure of the set of 
　　　　each (arr);
　　　　each(nodeList);
　　　　each($p);
　　</script>
</body>

Jquery are transformed into objects.

FIG class uml

Code

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);
　　}
}


// test code 
var ARR = [1,2,3,4,5,6,7,8 ]
let container = new Container(arr);
let iterator = container.getIterator();
while(iterator.hasNext()) {
　　console.log(iterator.next())
}

Scene: ES6 Iterator

Why ES6 Iterator exist? Because the iterator pattern is commonly used design patterns, there is certainly reasonable, es6 syntax, data types, ordered sets has a lot, but you can also define your own more. There must be a mechanism to unify them.

For example, Array, Map, Set, String, TypedArray, arguments, NodeList. If you want to traverse these, we need to have a unified interface to iterate through all the data types (note that object is not ordered collection)

What ES6 Iterator that? The above data types, can be implemented by Iterator. Have [Symbol.iterator] property. Attribute value is a function, performing the function returns an iterator. The iterator method may have the next iteration of the order of child elements. Run Array.prototype [Symbol.iterator] to test.

The first returns a function see the source code, indicating that the array does have such a property, the property value is a function

Perform this function returns an iterator.

Iterator has a next method, the hasNext he does not, by determining whether there are values which next to the rear done

Code

function each (Data) {
　　// generate walker 
　　the let Iterator = Data [Symbol.iterator] ();
　　let item = { done: false };
　　while(!item.done) {
　　　　item = iterator.next();
　　　　if(!item.done){
　　　　　　console.log(item.value)
　　　　}
　　}
}

was arr = [1,2,3,4,5,6 ]
each(arr);

Symbol.iterator not everyone knows that not everyone needs a package each method, so there is for ... of grammar, for ... of an object with a walker against property, that is, data [ Symbol.iterator] has a value.

function each(data) {
　　for(let item of data) {
　　　　console.log(item);
　　}
}

was arr = [1,2,3,4,5,6 ]
each(arr);

Design Principles verification

Iterators and target objects separated, the iterator will isolate the user and the target object, conforms to the Open Closed Principle

Design Patterns Iterator mode

Guess you like