JavaScript的设计模式经典之建造者模式


Posted in Javascript onFebruary 24, 2016

一、建造者模式模式概念

建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示。也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了。建造者模式实际就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作得出结果的客户。

建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化。

通俗的说:就是一个白富美需要建一个别墅,然后直接找包工头,包工头再找工人把别墅建好。这其中白富美不用直接一个一个工人的去找。而且包工头知道白富美的需求,知道哪里可以找到工人,工人可以干活,中间节省了白富美的和工人之间沟通的成本,白富美也不需要知道房子具体怎么建,最后能拿到房就可以了。

建造者模式结构图

JavaScript的设计模式经典之建造者模式

二、建造者模式的作用和注意事项

模式作用:

1.分步创建一个复杂的对象

2.解耦封装过程和具体创建组件

3.无需关心组件如何组装

注意事项:

1.一定要一个稳定的算法进行支持

2.加工工艺是暴露的--白富美不用关心如何建房子,但可以随时去看房子建得怎么样

三、建造者模式代码和实战总结

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//1.产出东西是房子
//2.包工头调用工人进行开工 而且他要很清楚工人们具体的某一个大项
//3.工人是盖房子的 工人可以建卧室 建客厅 建厨房
//4.包工头只是一个接口而已 他不干活 他只对外说我能建房子
function Fangzi(){//Fangzi可以理解为单例模式
if(!(this instanceof Fangzi)){
return new Fangzi();
}
this.woshi = "";
this.keting = "";
this.chufang = "";
}
function Baogongtou(){
if(!(this instanceof Baogongtou)){
return new Baogongtou();
}
this.jianfangzi = function(gongren){
gongren.jian_chufang();
gongren.jian_keting();
gongren.jian_woshi();
}
}
function Gongren(){
if(!(this instanceof Gongren)){
return new Gongren();
}
this.jian_woshi = function(){
console.log("建卧室");
}
this.jian_keting = function(){
console.log("建客厅");
}
this.jian_chufang = function(){
console.log("建厨房");
}
this.jiaofang = function(){
var _fangzi = new Fangzi();
_fangzi.woshi = "ok";
_fangzi.keting = "ok";
_fangzi.chufang = "ok";
return _fangzi;
}
}
var gongren = new Gongren();
var baogongtou = new Baogongtou();
baogongtou.jianfangzi(gongren);
var myfangzi = gongren.jiaofang();
console.log(myfangzi);
</script>
</body>
</html>
Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
js获取class的所有元素
Mar 28 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
Javascript函数式编程语言
Oct 11 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
JS中call和apply函数用法实例分析
Jun 20 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 #Javascript
jQuery实现验证年龄简单思路
Feb 24 #Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 #Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 #Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 #Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 #Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 #Javascript
You might like
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
PHP 基本语法格式
2009/12/15 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python实现查找所有程序的安装信息
2020/02/18 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
会计求职简历自我评价
2015/03/10 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL
Vue.Draggable实现交换位置
2022/04/07 Vue.js
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android