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 相关文章推荐
关于jquery css的使用介绍
Apr 18 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
通俗讲解python 装饰器
2020/09/07 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
大学学年自我鉴定
2013/10/28 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
Python面试不修改数组找出重复的数字
2022/05/20 Python