深入理解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 相关文章推荐
Javascript Global对象
Aug 13 Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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采集腾讯微博的实现代码
2012/01/19 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php实现文件下载代码分享
2014/08/19 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
Python中的is和id用法分析
2015/01/26 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python切片知识解析
2016/03/06 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python下载网络小说实例代码
2018/02/03 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python安装后的目录在哪里
2020/06/21 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
大学校庆邀请函
2014/01/11 职场文书
便利店促销方案
2014/02/20 职场文书
中秋手机店促销方案
2014/06/16 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
用人单位聘用意向书
2015/05/11 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang