【设计模式】模板方法模式和迭代器模式

模板方法模式

模板方法模式由两部分组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了

子类的算法框架，包括实现一此公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，

也继承了整个算结构，并且可以选择重写父类的方法。

js 复制代码

// 模板方法模式
const Template = function (params) {
    this.params = params
}

Template.prototype = {
    init() {
        this.start()
        this.end()
    },
    start() {
        console.log('start')
    },
    end() {
        console.log('end')
    }
}
const Child = function (params) {
    Template.call(this, params)
}

// 继承 Template 的原型
Child.prototype = Object.create(Template.prototype)
Child.prototype.constructor = Child

// 使用
const child = new Child()
child.init()

模板方法模式时一种典型的通过封装变化提高系统扩展性的设计模式。运用了模板方法模式的程序中，子类方法种类和执行顺序都是不变的，但是子类的方法具体实现则是可变的。父类是个模板，子类可以添加，就增加了不同的功能。

迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

为遍历不同数据结构的"集合"提供统一的接口
能遍历访问"集合"数据中的项，不关心项的数据结构

js 复制代码

// 1. 最简单的迭代器模式
const myEach = function (arr, fn) {
    for (let i = 0; i < arr.length; i++) {
        fn(i, arr[i])
    }
}
/**
 * 0 1
 * 1 2
 * 2 3
 * 3 4
 * 4 5
 */
myEach([1, 2, 3, 4, 5], (index, value) => {
    console.log(index, value)
})

// 2. es6 中的迭代器
const arr = [1, 2, 3, 4, 5]
// for (let item of arr) {
//     console.log(item)
// }
const it = arr[Symbol.iterator]()
/**
 * { value: 1, done: false }
 * { value: 2, done: false }
 * { value: 3, done: false }
 * { value: 4, done: false }
 * { value: 5, done: false }
 * { value: undefined, done: true }
 */
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())
console.log(it.next())

// 3. 自定义迭代器
// 具备迭代器的数据结构 Array Map Set String TypedArray arguments NodeList
// 类数组的对象
const obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3,
    [Symbol.iterator]: Array.prototype[Symbol.iterator]
}
for (const objElement of obj) {
    console.log(objElement)
}
// 普通对象
const obj2 = {
    a: 'a',
    b: ['b', 'b'],
    c: 1,
    length: 3,
    [Symbol.iterator]: function () {
        let index = 0
        // 要么保留 this，要么使用 箭头函数 使this 指向 obj2
        const that = this
        return {
            next: function () {
                if (index < that.length) {
                    return {
                        value: that[Object.keys(that)[index++]],
                        done: false
                    }
                } else {
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
}
for (let obj2Element of obj2) {
    console.log(obj2Element)
}