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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 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依赖注入原理与用法分析
2018/08/21 PHP
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
jcrop基本参数一览
2013/07/16 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
python hash每次调用结果不同的原因
2019/11/21 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
ORACLE十问
2015/04/20 面试题
汽车驾驶求职信
2013/10/25 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
交通事故委托书范本
2014/09/28 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
离职信范本
2015/06/23 职场文书