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生成asp.net服务器控件的代码
Feb 04 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
详解vue express启动数据服务
Jul 05 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
vue首次渲染全过程
Apr 21 Vue.js
JavaScript文档对象模型DOM
Nov 20 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从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
js一组验证函数
2008/12/20 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue全局使用axios的操作
2020/09/08 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
初学Python实用技巧两则
2014/08/29 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python 实现登录网页的操作方法
2018/05/11 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
用python解压分析jar包实例
2020/01/16 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
keras实现多种分类网络的方式
2020/06/11 Python
Python-split()函数实例用法讲解
2020/12/18 Python
python文件路径操作方法总结
2020/12/21 Python
大学毕业生自荐书怎么写?
2014/01/06 职场文书
贷款委托书范本
2014/04/08 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
防卫过当辩护词
2015/05/21 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
教师读书活动心得体会
2016/01/14 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
springboot实现string转json json里面带数组
2022/06/16 Java/Android