深入理解JavaScript系列(27):设计模式之建造者模式详解


Posted in Javascript onMarch 03, 2015

介绍

在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成;由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定。如何应对这种变化?如何提供一种“封装机制”来隔离出“复杂对象的各个部分”的变化,从而保持系统中的“稳定构建算法”不随着需求改变而改变?这就是要说的建造者模式。

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

正文

这个模式相对来说比较简单,先上代码,然后再解释

function getBeerById(id, callback) {

    // 使用ID来请求数据,然后返回数据.

    asyncRequest('GET', 'beer.uri?id=' + id, function (resp) {

        // callback调用 response

        callback(resp.responseText);

    });

}
var el = document.querySelector('#test');

el.addEventListener('click', getBeerByIdBridge, false);
function getBeerByIdBridge(e) {

    getBeerById(this.id, function (beer) {

        console.log('Requested Beer: ' + beer);

    });

}

根据建造者的定义,表相即是回调,也就是说获取数据以后如何显示和处理取决于回调函数,相应地回调函数在处理数据的时候不需要关注是如何获取数据的,同样的例子也可以在jquery的ajax方法里看到,有很多回调函数(比如success, error回调等),主要目的就是职责分离。

同样再来一个jQuery的例子:

$('<div class= "foo"> bar </div>');

我们只需要传入要生成的HTML字符,而不需要关系具体的HTML对象是如何生产的。

总结

建造者模式主要用于“分步骤构建一个复杂的对象”,在这其中“分步骤”是一个稳定的算法,而复杂对象的各个部分则经常变化,其优点是:建造者模式的“加工工艺”是暴露的,这样使得建造者模式更加灵活,并且建造者模式解耦了组装过程和创建具体部件,使得我们不用去关心每个部件是如何组装的。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
javascript验证身份证号
Mar 03 #Javascript
JS烟花背景效果实现方法
Mar 03 #Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 #Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 #Javascript
js+jquery常用知识点汇总
Mar 03 #Javascript
js实现宇宙星空背景效果的方法
Mar 03 #Javascript
Angular中的Promise对象($q介绍)
Mar 03 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
php随机输出名人名言的代码
2012/10/07 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP文件上传类实例详解
2016/04/08 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
php设计模式之迭代器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
董事长秘书工作职责
2014/06/10 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫