JavaScript设计模式(五)【原型模式】

最新推荐文章于 2024-11-05 09:00:00 发布

.NET跨平台

最新推荐文章于 2024-11-05 09:00:00 发布

阅读量148

点赞数

分类专栏： Javascript设计模式

原文链接：blog.youkuaiyun.com/WuLex

版权

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

初级-图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型模式-焦点图</title>
</head>
<body>
<script>
    //图片轮播类
    var LoopImages = function(imgArr, container) {
        this.imagesArray = imgArr; //轮播图片数组
        this.container = container; //轮播图片容器
        this.createImage = function() {
        }; //创建轮播图片
        this.changeImage = function() {
        }; //切换下一张图片
    }
    //上下滑动切换类
    var SlideLoopImg = function(imgArr, container) {
        //构造函数继承图片轮播类
        LoopImages.call(this, imgArr, container);
        //重写继承的切换下一张图片方法
        this.changeImage = function() {
            console.log('SlideLoopImg changeImage function');
        }
    }
    //渐隐切换类
    var FadeLoopImg = function(imgArr, container, arrow) {
        LoopImages.call(this, imgArr, container);
        //切换箭头私有变量
        this.arrow = arrow;
        this.changeImage = function() {
            console.log('FadeLoopImg changeImage function');
        }
    }

    window.onload = function() {
        //实例化一个渐隐切换图片类
        var fadeImg = new FadeLoopImg([
                '01.jpg',
                '2.jpg',
                '3.jpg',
                '4.jpg'
            ],
            'slide',
            [
                'left.jpg',
                'right.jpg'
            ]);
        fadeImg.changeImage();
    }
</script>
</body>
</html>

最优-图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型模式-图片轮播</title>
</head>
<body>
<script>
    //图片轮播类
    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();
    //重写继承的切换下一张图片方法
    SlideLoopImg.prototype.changeImage = function() {
        console.log('SlideLoopImg changeImage function');
    }
    //渐隐切换类
    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');
    }
    //测试用例
    var fadeImg = new FadeLoopImg([
            '01.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg'
        ],
        'slide',
        [
            'left.jpg',
            'right.jpg'
        ]);
    console.log(fadeImg.container);
    fadeImg.changeImage();
</script>
</body>
</html>