【JS】建造者模式和原型模式

建造者模式

在这里插入图片描述

//创建一个人类
var Human = function(param) {
    this.skill = param && param.skill || '保密'; //技能
    this.hobby = param && param.hobby || '保密'; //兴趣爱好
};
//人类原型方法
Human.prototype = {
    getSkill: function() {
        return this.skill;
    },
    getHobby: function() {
        return this.hobby;
    }
};
//实例化姓名类
var Named = function(name) {
    var that = this;
    //构造器
    (function(name, that) { //构造函数解析姓名和姓和名
        that.wholeName = name;
        if (name.indexOf(' ') > -1) {
            that.FirstName = name.slice(0, name.indexOf(' ')); //姓
            that.LastName = name.slice(name.indexOf(' ')); //名
        }
    })(name, that);
};
//实例化职位类
var Work = function(work) {
    var that = this;
    (function(work, that) {
        switch (work) {
            case '程序员':
                that.work = '程序员';
                that.workDescript = '热爱编程';
                break;
            case 'UI':
                that.work = 'UI设计师';
                that.workDescript = '热爱UI设计';
            case '教师':
                that.work = '教师';
                that.workDescript = '分享也是一种快乐';
            default:
                that.work = work;
                that.workDescript = '无该职业相关描述';
                break;
        }
    })(work, that);
};
Work.prototype = {
    changeWork: function(work) { //更换期望职业
        this.work = work;
    },
    changeDescript: function(setence) { //更改职业描述
        this.workDescript = setence;
    }
};

在这里插入图片描述

/**
 * 应聘者建造者
 * @param {string} name 姓名(全名)
 * @param {string} work 期望职位
 */
 var Person = function(name, work) {
    //创建应聘者缓存对象
    var _person = new Human();
    //创建应聘者姓名解析对象
    _person.name = new Named(name);
    //创建应聘者期望职位
    _person.work = new Work(work);
    //返回创建的应聘者
    return _person;
};
//实例化一个应聘者
var person = new Person('张 三', '程序员');
//改一下张三的职位描述
person.work.changeDescript('这辈子都不可能再敲代码的了');
console.log(person); //打印一下简历

在这里插入图片描述
在这里插入图片描述

原型模式

在这里插入图片描述

//图片轮播类
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr; //轮播图片数组
    this.container = container; //图片容器
    this.createImage = function() {}; //创建轮播图
    this.changeImage = function() {}; //切换下一张图片
}

在这里插入图片描述

//图片轮播类
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');
    }
}
//创建一个显隐轮播图测试实例
var fadeImg = new FadeLoopImg([
    '1.jpg',
    '2.jpg',
    '3.jpg'
], 'slide', [
    'left.jpg',
    'right.jpg'
]);
fadeImg.changeImage(); //每次点击箭头的时候就执行这个函数

在这里插入图片描述

//图片轮播类
var LoopImages = function(imgArr, container) {
    this.imagesArray = imgArr; //轮播图片数组
    this.container = container; //图片容器
};
//创建共享机制
LoopImages.prototype = {
    //创建轮播图片
    createImgage: 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 slideImg = new SlideLoopImg([
    '1.jpg',
    '2.jpg',
    '3.jpg'
], 'slide');
console.log(slideImg);
console.log(slideImg.container); //打印出轮播图的容器
slideImg.changeImage(); //切换下一张图片

在这里插入图片描述
在这里插入图片描述

//接着上面的代码继续写
LoopImages.prototype.getImageLength = function() {
    return this.imagesArray.length;
}
SlideLoopImg.prototype.getContainer = function() {
    return this.container;
}
console.log(slideImg.getImageLength(), slideImg.getContainer());

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值