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 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
获取body标签的两种方法
Oct 13 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
JS中Object对象的原型概念基础
Jan 29 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
JavaScript实现简单轮播图效果
Dec 01 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
BootStrap selectpicker
2016/06/20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
元旦晚会主持词
2014/03/24 职场文书
金融事务专业求职信
2014/04/25 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
求职自我推荐信
2014/06/25 职场文书
国贸专业求职信
2014/06/28 职场文书
丧事主持词
2015/07/02 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
《比的意义》教学反思
2016/02/18 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python