持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情
建造者设计模式
建造者设计模式和工厂设计模式都是创建对象使用的,工厂设计模式比较注重创建对象的整体思路,建造者设计模式比较注重对象创建的细节,使用这种模式创建出复杂对象或者符合对象结构会非常清晰;
小案例
在班级中需要统计个人信息,都是使用纸质进行填写信息,我们现在需要将这些信息统一整理做成电子版的,我们该如何去做?
首先我们需要把他们的信息都规整起来,然后使用一个函数,里面定义一些对象和属性及方法的操作,然后最后返回出去一个新对象
//存放信息
let data = [{
name: '若水',
age: '20',
hobby: "编程"
}, {
name: '菜菜',
age: '20',
hobby: "篮球"
}, {
name: '牛牛',
age: '20',
hobby: "足球"
}];
// 功能函数
function Structure(prame) {
let info = {}
info.name = prame.name;
info.age = prame.age;
//对于爱好进行整理
info.hobby = {};
// 对于学生的爱好进行整理和描述
switch (prame.hobby) {
case '编程':
info.hobby = {
name: '编程',
deg: '喜欢专研'
}
break;
case '篮球':
info.hobby = {
name: '篮球',
deg: '喜欢运动'
}
break;
default:
info.hobby = {
name: prame.hobby,
deg: '无'
}
break;
};
// 修改学生的爱好以及爱好描述
info.hobby.ochangeHobby = function(hobby) {
this.name = hobby
}
info.hobby.ochangeDeg = function(deg) {
this.deg = hobby
}
// 我们再将包装好的对象在return出去
return info;
}
// 使用
//声明一个空数组,用于接收修改过后的对象
let studentArr = []
data.map(res => {
studentArr.push(Structure(res));
})
// 使用修改爱好方法
studentArr[0].hobby.ochangeHobby('跑步');
这个功能也不是太大,逻辑也不复杂,但是我们写的代码却不够清晰有条理,以后维护的情况下,需要花很长时间去搞清楚代码的逻辑,我们接下来用建造者模式实现这个小案例
建造者模式实现
建造者模式实现的看起来比较清晰,每个功能我们都会尽量的做抽离处理,这样也便于以后维护
//存放信息
let data = [{
name: '若水',
age: '20',
hobby: "编程"
}, {
name: '菜菜',
age: '20',
hobby: "篮球"
}, {
name: '牛牛',
age: '20',
hobby: "足球"
}];
// 建造者模式
function Structure(prame) {
let info = new Prems(prame);
info.hobby = new CreateHobby(prame.hobby);
// 我们再将包装好的对象在return出去
return info;
}
//用户基本信息构造函数
function Prems(prame) {
this.name = prame.name;
this.age = prame.age;
}
//用户爱好构造函数
function CreateHobby(hobby) {
switch (hobby) {
case '编程':
this.hobby.name = '编程';
this.hobby.deg = '喜欢专研';
break;
case '篮球':
this.hobby.name = '篮球';
this.hobby.deg = '喜欢运动';
break;
default:
this.hobby.name = hobby;
this.hobby.deg = '无';
break;
};
}
// 修改学生的爱好以及爱好描述
CreateHobby.prototype.ochangeHobby = function(hobby) {
this.name = hobby
}
CreateHobby.prototype.ochangeDeg = function(deg) {
this.deg = hobby
}
// 使用
//声明一个空数组,用于接收修改过后的对象
let studentArr = []
data.map(res => {
studentArr.push(Structure(res));
})
// 使用修改爱好方法
studentArr[0].hobby.ochangeHobby('跑步');
在正常模式中,我们把属性和方法都写在了一个函数中,但是在建造者设计模式中,我们对此进行了进一步的封装和抽离,让我们代码变得更为清晰,也可以说是建造者模式把每个功能进行单独进行管理,也便于我们功能复用
坚持努力,无惧未来!