JavaScript 20 iterator pattern of 23 design patterns
Concept and characteristics
Concept: The
iterator pattern is to provide an object to sequentially access a series of data in the aggregated object, without exposing the internal representation of the aggregated object, nor caring about the internal structure of the aggregated object.
Features:
- Access the content of an aggregate object without exposing its internal representation.
- The traversal task is completed by the iterator, which simplifies the aggregation class.
- It supports traversing an aggregate object in different ways, and even customizes the subclass of the iterator to support new traversals.
- It is very convenient to add new iterator classes and aggregation classes.
- Good encapsulation, traversing different aggregation structures to provide a unified interface.
Structure and realization
Structure: The
iterator pattern includes abstract aggregation classes, concrete aggregation classes, abstract iterators and concrete iterators.
Abstract aggregation class: defines the interface for storing, adding, deleting aggregation objects and creating iterator objects.
Concrete aggregation class: implements the abstract aggregation class and returns an instance of a concrete iterator.
Abstract iterator: defines the interface for accessing and traversing aggregate elements, usually including methods such as hasNext(), first(), next(), etc.
Concrete iterator: implement the method defined in the abstract iterator, complete the traversal of the aggregate object, and record the current position of the traversal.
Case :
Realize a scenic spot to view the name and details of the scenic spot. And you can easily view the previous/next scenic spot, the first scenic spot and the last scenic spot, and so on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//获取景点名称和详情
class WyViewSpot{
constructor(name,des){
this.name = name;
this.des = des;
}
getName(){
return this.name;
}
getDes(){
return this.des;
}
}
//抽象聚合类-定义添加，删除，查看景点信息的方法
class ViewSpotSet{
add(){
};
del(){
};
getIterator(){
}
}
//具体聚合类-实现添加，删除，查看景点信息的方法
class WyViewSpotSet extends ViewSpotSet{
constructor(props){
super(props);
this.ArrayList = [];
}
add(item){
this.ArrayList.push(item)
};
del(index){
this.ArrayList.splice(index,1)
};
getIterator(){
return new WyViewSpotIterator(this.ArrayList);
}
}
//抽象迭代器-定义是否有下一个景点、获取第一个景点和最后一个景点、获取上一个景点和下一个景点的方法
class ViewSpotIterator{
hasNext(){
}
first(){
}
last(){
}
previous(){
}
next(){
}
}
//具体迭代器-实现是否有下一个景点、获取第一个景点和最后一个景点、获取上一个景点和下一个景点的方法
class WyViewSpotIterator extends ViewSpotIterator{
constructor(list){
super();
this.list = list;
this.index = -1;
this.item = {
};
}
//判断是否有下一个景点
hasNext(){
if(this.list.length-1>this.index){
return true;
}else {
return false;
}
}
//获取第一个景点
first(){
this.index = 0;
this.item = this.list[this.index];
return this.item;
}
//获取最后一个景点
last(){
this.index = this.list.length-1;
this.item=this.list[this.index];
return this.item;
}
//获取前一个景点
previous(){
if(this.index>0){
this.item=this.list[--this.index];
}
return this.item;
}
//获取后一个景点
next(){
if(this.hasNext()){
this.item=this.list[++this.index];
}
return this.item;
}
}
class Customer{
static main(){
let wyViewSpotSet = new WyViewSpotSet();
//添加景点
wyViewSpotSet.add(new WyViewSpot("东方明珠","在上海"));
wyViewSpotSet.add(new WyViewSpot("天安门","在北京"));
wyViewSpotSet.add(new WyViewSpot("九寨沟","在江西"));
//获取迭代器对象
let it = wyViewSpotSet.getIterator();
//获取最后一个景点
let item = it.last();
//获取上一个景点
let item1 = it.previous();
//打印景点名称和详情
console.log(item.getName(),item.getDes());
console.log(item1.getName(),item1.getDes())
}
}
Customer.main();
</script>
</body>
</html>
Application scenario
- When you need to provide multiple traversal methods for aggregated objects.
- When it is necessary to provide a unified interface for traversing different aggregation structures.
- When accessing the content of an aggregated object without exposing its internal details.
Applications
Refer to the above case.
to sum up
The iterator mode is very suitable for the application scenario of the front-end carousel. In the normal development of the carousel image function, each element is obtained through a cyclical traversal method, which exposes the internal structure of the entire image object, and the traversal behavior is strongly coupled with the aggregate object. If the traversal behavior is separated into the iterator object, it can be well decoupled. And in the iterator object, you can easily access each element in sequence without looping.
[Aggregation Object]:
1. Provide methods for adding and deleting and obtaining iterator objects.
[Iterator object]:
1. Define a list container to store aggregate objects.
2. Provide a method for whether hasNext has the next element, and provide a method for obtaining the first first, last last, previous, and next.