莽夫

原型模式

原型模式: 用原型实例指向创建对象的类, 使用于创建新的对象的类共享原型对象的属性及方法. 实质上也是一种继承.

需求

对轮播图的多种特效的开发

需求解析

对于轮播图的封装, 其切换动画应该是多样化的. 可能是上下切换, 左右切换, 渐隐切换等. 因此创建的轮播图片结构也应该是多样化的. 因此我们应该抽象出一个基类, 让不同特效类去继承这个基类, 然后对于差异化的需求通过重写这些继承下来的属性或方法来解决.

创建一个轮播图基类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var LoopImages = function (imgArr, container) {
    this.imagesArray = imgArr // 轮播图片数组
    this.container = container // 轮播图片容器
}
LoopImages.prototype = {
    // 创建轮播图片
    createImage: function () {
        console.log('LoopImages createImage function')
    },
    // 切换下一张图片
    changeImage: function () {
        console.log('LoopImages changeImage function')
    },
}

上下滑动切换类

1
2
3
4
5
6
7
8
9
var slideLoopImg = function (imgArr, container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container)
}
slideLoopImg.prototype = new LoopImages()
// 重写继承的切换下一张图片方法
slideLoopImg.prototype.changeImage = function () {
    console.log('slideLoopImg changeImage function')
}

渐隐切换类

1
2
3
4
5
6
7
8
9
var FadeLoopImg = function (imgArr, container, arrow) {
    LoopImages.call(this, imgArr, container)
    // 切换箭头私有变量
    this.arrow = arrow
}
FadeLoopImg.prototype = new LoopImages()
FadeLoopImg.prototype.changeImage = function () {
    console.log('FadeLoopImg changeImage function')
}

实例化一个渐隐切换图片类

1
2
3
4
5
var fadeImg = new FadeLoopImg(['1.jpg', '2.jpg', '3.jpg', '4.jpg'], 'slide', [
    'left.jpg',
    'right.jpg',
])
fadeImg.changeImage()

原型继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 基于已存在的模板对象克隆出新对象的模式
 * argument[0], argument[1], argument[2]: 参数1, 参数2, 参数3 表示模板对象
 * 注意: 这里对模板引用类型的属性实质上进行了浅复制(引用类型属性共享), 当然根据需求可以自行深复制(引用类型属性复制)
 */
function prototypeExtend() {
    var F = function () {} // 缓存类, 为实例化返回对象临时创建
    var args = arguments // 模板对象参数序列
    for (var i = 0, len = args.length; i < len; i++) {
        // 遍历每个模板对象中的属性
        for (const j in args[i]) {
            // 将这些属性复制到缓存类原型中
            F.prototype[j] = args[i][j]
        }
    }
    // 返回缓存类的一个实例
    return new F()
}

测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var penguin = prototypeExtend({
    speed: 20,
    swim: function () {
        console.log('游泳速度: ' + this.speed);
    }
}, {
    run: function (speed) {
        console.log('奔跑速度: ' + speed);
    }
}, {
    jump: function () {
        console.log('跳跃动作');
    }
})

penguin.swim() // 游泳速度: 20
penguin.run(10) // 奔跑速度: 10
penguin.jump() // 跳跃动作