首页 >> js开发 >> js代码javascript设计模式 – 建造者模式原理与应用实例分析
js代码javascript设计模式 – 建造者模式原理与应用实例分析
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本文实例讲述了javascript设计模式 – 建造者模式原理与应用。分享给大家供大家参考,具体如下:介绍:建造者模式又称为生成器模式,它是一种较为复杂、使用频率相对较低的创建型模式。建造者模式为客户端返回的不是一个简单的产品,而是一个由多个部件组成的复杂产品介绍:定义:将一个复杂对象的构建与他的表示分离,使得同样的构建过程可以创建不同的表示。建造者模式是一种对象创建型模式。定义:示例:示例:
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
function construct(ab){
ab.setType();
ab.setName();
ab.setElement();
return ab.getDialog();
}
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
noticeIns.show(); //公告: notice
toastIns.show(); //提示: toast
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
function construct(ab){
ab.setType();
ab.setName();
ab.setElement();
return ab.getDialog();
}
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
noticeIns.show(); //公告: notice
toastIns.show(); //提示: toast
在建造者模式中,客户端需要通过指挥类(construct方法)一步一步建造一个完整的产品,相同的构造过程可以创建完全不同的产品。建造者模式可以将复杂对象的构建与其表示相分离,使用相同构建过程可以创建不同的表示层,用户只需要指定需要建造的类型就可以,而具体的建造过程和细节就不需要知道了。为了简化系统结构,去掉construct参数,可以将construct合并到builder:
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var Construct = function(){
this.construct = function(){
this.setType();
this.setName();
this.setElement();
return this.getDialog();
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
noticeIns.show(); //公告: notice
toastIns.show(); //提示: toast
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var Construct = function(){
this.construct = function(){
this.setType();
this.setName();
this.setElement();
return this.getDialog();
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
}
this.getDialog = function(){
return this.dialog;
}
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
noticeIns.show(); //公告: notice
toastIns.show(); //提示: toast
* 建造者模式中,客户端不需要知道产品内部组成的细节,将产品使用与其创建解耦,使得相同创建过程可以创建不同的产品对象
* 每个具体的建造类都相对独立,方便替换和新增,满足开关原则优点:
缺点:
* 建造者模式需要多个产品存在相同的创建流程,如果产品差异性大,就不适用建造者模式。
* 如果产品内部结构复杂多变,就需要定义很多建造类来实现这种变化,会导致系统变得庞大缺点:感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
notice
';}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
toast
';}
this.getDialog = function(){
return this.dialog;
}
}
function construct(ab){
ab.setType();
ab.setName();
ab.setElement();
return ab.getDialog();
}
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
noticeIns.show(); //公告: notice
notice
toastIns.show(); //提示: toast
toast
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
notice
';}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
toast
';}
this.getDialog = function(){
return this.dialog;
}
}
function construct(ab){
ab.setType();
ab.setName();
ab.setElement();
return ab.getDialog();
}
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = construct(notice);
var toastIns = construct(toast);
noticeIns.show(); //公告: notice
notice
toastIns.show(); //提示: toast
toast
在建造者模式中,客户端需要通过指挥类(construct方法)一步一步建造一个完整的产品,相同的构造过程可以创建完全不同的产品。建造者模式可以将复杂对象的构建与其表示相分离,使用相同构建过程可以创建不同的表示层,用户只需要指定需要建造的类型就可以,而具体的建造过程和细节就不需要知道了。为了简化系统结构,去掉construct参数,可以将construct合并到builder:
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var Construct = function(){
this.construct = function(){
this.setType();
this.setName();
this.setElement();
return this.getDialog();
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
notice
';}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
toast
';}
this.getDialog = function(){
return this.dialog;
}
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
noticeIns.show(); //公告: notice
notice
toastIns.show(); //提示: toast
toast
var Dialog = function (){
this.type = '';
this.name = '';
this.element = '';
this.show = function(){
console.log(this.name + ': ' + this.type + this.element);
}
}
var Construct = function(){
this.construct = function(){
this.setType();
this.setName();
this.setElement();
return this.getDialog();
}
}
var noticeBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'notice';
}
this.setName = function(){
this.dialog.name = '公告';
}
this.setElement = function(){
this.dialog.element = '
notice
';}
this.getDialog = function(){
return this.dialog;
}
}
var toastBuilder = function(){
this.dialog = new Dialog();
this.setType = function(){
this.dialog.type = 'toast';
}
this.setName = function(){
this.dialog.name = '提示';
}
this.setElement = function(){
this.dialog.element = '
toast
';}
this.getDialog = function(){
return this.dialog;
}
}
noticeBuilder.prototype = new Construct();
toastBuilder.prototype = new Construct();
var notice = new noticeBuilder();
var toast = new toastBuilder();
var noticeIns = notice.construct();
var toastIns = toast.construct();
noticeIns.show(); //公告: notice
notice
toastIns.show(); //提示: toast
toast
建造者模式总结:建造者模式总结:优点:* 建造者模式中,客户端不需要知道产品内部组成的细节,将产品使用与其创建解耦,使得相同创建过程可以创建不同的产品对象
* 每个具体的建造类都相对独立,方便替换和新增,满足开关原则优点:
缺点:
* 建造者模式需要多个产品存在相同的创建流程,如果产品差异性大,就不适用建造者模式。
* 如果产品内部结构复杂多变,就需要定义很多建造类来实现这种变化,会导致系统变得庞大缺点:感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools./code/HtmlJsRun测试上述代码运行效果。在线HTML/CSS/JavaScript代码运行工具在线HTML/CSS/JavaScript代码运行工具http://tools./code/HtmlJsRun关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》javascript面向对象入门教程JavaScript错误与调试技巧总结JavaScript数据结构与算法技巧总结JavaScript遍历算法与技巧总结JavaScript数学运算用法总结希望本文所述对大家JavaScript程序设计有所帮助。
相关文章:
- js解决Vue中的生命周期beforeDestory不触发的问题js大全
- jsvue通过过滤器实现数据格式化js大全
- js解决vue项目router切换太慢问题js大全
- jsjquery实现简单拖拽效果js大全
- js微信小程序实现时间戳格式转换js大全
- js解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题js大全
- js简单了解前端渐进式框架VUEjs大全
- jsecharts实现获取datazoom的起始值(包括x轴和y轴)js大全
- jsVue 解决父组件跳转子路由后当前导航active样式消失问题js大全
- js解决Echarts2竖直datazoom滑动后显示数据不全的问题js大全