深入理解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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
jQuery实现验证码功能
Mar 17 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
js 替换
2008/02/19 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python流程控制 while循环实现解析
2019/09/02 Python
python 表格打印代码实例解析
2019/10/12 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
成人继续教育实施方案
2014/03/01 职场文书
道德演讲稿
2014/05/21 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
专题组织生活会发言材料
2014/10/17 职场文书