javascript设计模式 ? 建造者模式原理与应用实例分析


Posted in Javascript onApril 10, 2020

本文实例讲述了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 = '<div>notice</div>';
  }
  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 = '<div>toast</div>';
  }
  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<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

在建造者模式中,客户端需要通过指挥类(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 = '<div>notice</div>';
  }
  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 = '<div>toast</div>';
  }
  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<div>notice</div>
toastIns.show(); //提示: toast<div>toast</div>

建造者模式总结:

优点:
* 建造者模式中,客户端不需要知道产品内部组成的细节,将产品使用与其创建解耦,使得相同创建过程可以创建不同的产品对象
* 每个具体的建造类都相对独立,方便替换和新增,满足开关原则

缺点:
* 建造者模式需要多个产品存在相同的创建流程,如果产品差异性大,就不适用建造者模式。
* 如果产品内部结构复杂多变,就需要定义很多建造类来实现这种变化,会导致系统变得庞大

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
Vue路由权限控制解析
Nov 09 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 #Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 #Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 #Javascript
vue中的过滤器及其时间格式化问题
Apr 09 #Javascript
微信小程序保存图片到相册权限设置
Apr 09 #Javascript
微信小程序仿通讯录功能
Apr 09 #Javascript
vue cli4下环境变量和模式示例详解
Apr 09 #Javascript
You might like
PHP仿盗链代码
2012/06/03 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
python实现在pickling的时候压缩的方法
2014/09/25 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
高山背包:High Sierra
2017/11/23 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
某公司.Net方向面试题
2014/04/24 面试题
物理力学求职信
2014/02/18 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
房屋租房协议书范本
2014/12/04 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2017春节晚会开幕词
2016/03/03 职场文书