JavaScript设计模式(五):分即是合-建造者模式

简介: 分即是合-建造者模式

建造者模式(Builder)

将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。

需求:

  • 简历录入:
    • 要求除了可以将他们的兴趣爱好以及一些特长发布在页面里,其他信息,如他们的联系方式,不要发布在网站上;
    • 应聘者想找的工作是可以分类的
      • 比如对于喜欢编程的人来说他们要找的职位就是工程师(engineer)了,当然这里可能还有一些描述。比如‘每天沉醉于编程……’”;
      • 比如创建用户信息如用户姓名等要独立处理,因为他们是要隐藏显示的;
      • 比如这些应聘者也要独立创建,因为他们代表一个整体;
      • 还有这些工作职位也要独立创建,他们是应聘者拥有的一部分,而且种类很多;
    • 不仅仅应聘者需要创建,每位应聘者的信息、应聘职位都要创建
  • ⚠ 注意:我们需要的不仅仅是应聘者的一个实例,还要在创建过程中注意一下这位应聘者都有哪些兴趣爱好、他的姓名等信息,他所期望的职位是什么,等等。那么这些关注点都是需要我们创建的,因此用到了建造者模式
// 人类
let Human = function (param) {
   
    // 技能
    this.skill = param && param.skill || '保密';
    // 兴趣爱好
    this.hobby = param && param.hobby || '保密';
}

// 人类原型上的方法
Human.prototype = {
   
    // 获取技能
    getSkill: function () {
   
        console.log(this.skill);
    },
    // 获取爱好
    getHobby: function () {
   
        console.log(this.hobby);
    }
};

// 姓名类
let Named = function (name) {
   
    var that = this;
    // 构造器
    // 构造函数解析姓名的姓与名
    (function (name, that) {
   
        if (name.indexOf('-') > -1) {
   
            that.fullName = name.split('-').join('');   // 全名
            that.lastName = name.split('-')[0];         // 姓
            that.firstName = name.split('-')[1];        // 名
        }
    })(name, that);
};

// 职位类 (对应的职位和职位描述)
let Work = function (workType) {
   
    var that = this;
    // 构造器
    // 构造函数中通过传入的职位特征来设置相应职位以及默认的描述
    (function (workType, that) {
   
        switch (workType) {
   
            case 'code':
                that.workType = '工程师';
                that.workDescript = '每天沉醉于编程';
                break;
            case 'UI':
            case 'UE':
                that.workType = '设计师';
                that.workDescript = '设计更似一种艺术';
                break;
            case 'teach':
                that.workType = '教师';
                that.workDescript = '分享也是一种快乐';
                break;
            default:
                that.workType = workType;
                that.workDescript = '对不起,我们还不清楚您所选择职位的相关描述';
        }
    })(workType, that);
}

// 期望的职位
Work.prototype.changeWorkType = function (workType) {
   
    this.hopeWork = new Work(workType);
};

// 对期望职位的描述
Work.prototype.changeDescript = function (desc) {
   
    this.hopeWork.workDescript = desc;
};

/**
 * 应聘者建造者
 * @param {*} name      姓名(全名)
 * @param {*} workType  期望职位类别
 * @returns 应聘者对象
 */
let Person = function (param, name, workType) {
   
    // 创建应聘者缓存对象
    var _person = new Human(param);
    // 创建应聘者姓名解析对象
    _person.name = new Named(name);
    // 创建应聘者期望职位
    _person.nowWork = new Work(workType);
    // 将创建的应聘者对象返回
    return _person;
};

let person = new Person({
    skill: '没有技能', hobby: '爱好女' }, '张-三疯', 'code');
/**
 * Human {
 *      skill: "没有技能",
 *      hobby: "爱好女",
 *      name: Named {fullName: '张三疯', lastName: '张', firstName: '三疯'},
 *      nowWork: Work {workType: '工程师', workDescript: '每天沉醉于编程'}
 * }
 */
person.getSkill();  // 没有技能
person.getHobby();  // 爱好女
console.log(person);
/**
 * Human {
 *      skill: "没有技能",
 *      hobby: "爱好女",
 *      name: Named {fullName: '张三疯', lastName: '张', firstName: '三疯'},
 *      nowWork: Work {
 *          hopeWork: Work {workType: '设计师', workDescript: '设计更似一种艺术'},
 *          workType: '工程师', workDescript: '每天沉醉于编程'
 *      }
 * }
 */
person.nowWork.changeWorkType('UE');
console.log(person);
/**
 * Human {
 *      skill: "没有技能",
 *      hobby: "爱好女",
 *      name: Named {fullName: '张三疯', lastName: '张', firstName: '三疯'},
 *      nowWork: Work {
 *          hopeWork: Work {workType: '设计师', workDescript: '躺着就能拿钱'},
 *          workType: '工程师', workDescript: '每天沉醉于编程'
 *      }
 * }
 */
person.nowWork.changeWorkType('UE');
person.nowWork.changeDescript('躺着就能拿钱');
console.log(person);

与工厂模式的区别

  • 【工厂模式】 - 注重的是生产出来的结果
    • 工厂模式主要是为了创建对象实例或者类簇(抽象工厂),关心的是最终产出(创建)的是什么。不关心你创建的整个过程,仅仅需要知道你最终创建的结果,所以通过工厂模式我们得到的都是对象实例或者类簇;
  • 【建造者模式】 - 注重的是生产过程中的细节
    • 建造者模式在创建对象时要更为复杂一些,虽然其目的也是为了创建对象,但是它更多关心的是创建这个对象的整个过程,甚至于创建对象的每一个细节;
    • 比如创建一个人,我们创建的结果不仅仅要得到人的实例,还要关注创建人的时候,这个人应该穿什么衣服,男的还是女的,兴趣爱好都是什么;
目录
相关文章
|
2月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
66 8
|
1天前
|
设计模式 算法
设计模式--建造者模式 builder
这篇文章通过一个电脑购买的例子,详细解释了建造者模式的四个角色(产品类、抽象构建者、实体构建类和指导者类),并提供了相应的代码实现,阐述了建造者模式在设计复杂对象时的应用和优势。
设计模式--建造者模式 builder
|
2天前
|
设计模式 算法 Java
Java设计模式-建造者模式(6)
Java设计模式-建造者模式(6)
|
29天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
21 0
|
1月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
1月前
|
设计模式 XML 存储
【四】设计模式~~~创建型模式~~~建造者模式(Java)
文章详细介绍了建造者模式(Builder Pattern),这是一种创建型设计模式,用于将复杂对象的构建与其表示分离,允许分步骤创建一个复杂的对象而无需指定其内部的具体构造细节。通过定义抽象建造者、具体建造者、指挥者和产品角色,建造者模式允许通过相同的构建过程创建不同的产品表示,提高了系统的灵活性和扩展性。
|
2月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
44 7
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
51 6
|
2月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
40 6
|
2月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
40 6