Bee AntJared's Blog

FE前端

BE后端

DB数据库

OPS运维

Snippet代码片段

Note笔记

I'm also on

GitHubIf you code

MailIf you talk

RSSIf you subscribe

About.meIf you recommend

Javascript设计模式 7 原型模式 snippet


snippet

// 图片轮播类
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');
    }
}

// 上下滑动切换类
var SlideLoopImg = function(imgArr, container) {
    // 构造函数继承图片轮播类
    LoopImages.call(this, imgArr, container);
}
SlideLoopImg.prototype = new LoopImages();
// 重写继承的切换下一张图片方法
SlideLoop.prototype.changeImage = function() {
    console.log('SlideLoopImg changeImage function');
}
// 渐隐切换类
var FadeLoopImage = function(imgArr, container, arrow) {
    LoopImages.call(this, imgArr, container);
    // 切换箭头私有变量
    this.arrow = arrow;
}
FadeLoopImage.prototype = new LoopImages();
FadeLoopImage.prototype.changeImage = function() {
    console.log('FadeLoopImg changeImage function');
}
var fadeImg = new FadeLoopImg([
    '01.jpg',
    '02.jpg',
    '03.jpg',
    '04.jpg'
], 'slide', [
    'left.jpg',
    'right.jpg'
]);
console.log(fadeImg.container); // slide
fadeImg.changeImage(); // FadeLoopImg changeImage function
LoopImages.prototype.getImageLength = function() {
    return this.imagesArray.length;
}
FadeLoopImg.prototype.getContainer = function() {
    return this.container;
}
console.log(fadeImg.getImageLength()); // 4
console.log(fadeImg.getContainer()); // slide
function prototypeExtend() {
    var F = function() {}, // 缓存类,为实例化返回对象临时创建
        args = arguments, // 模板对象参数序列
        i = 0,
        len = args.length;
    for (; i < len; i++) {
        // 遍历每个模板对象中的属性
        for (var j in args[i]) {
            // 将这些属性复制到缓存类原型中
            F.prototype[j] = args[i][j];
        }
    }
    // 返回缓存类的一个实例
    return new F();
}
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(); // 跳跃动作