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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
UserData用法总结 lanyu出品
Jul 01 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
redux-saga 初识和使用
Mar 10 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 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
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue实现微信分享功能
2018/11/28 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
Python中的字符串替换操作示例
2016/06/27 Python
python下载图片实现方法(超简单)
2017/07/21 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
PHP面试题及答案二
2015/05/23 面试题
实习求职信
2013/12/01 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
单位委托书格式范本
2014/09/29 职场文书
结婚通知短信大全
2015/04/17 职场文书
2015大一新生军训感言
2015/08/01 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL