深入理解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 相关文章推荐
JS 实现Json查询的方法实例
Apr 12 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
用原生js做单页应用
Jan 17 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
详解Node.js模板引擎Jade入门
Jan 19 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
用js简单提供增删改查接口
May 12 Javascript
js字符串类型String常用操作实例总结
Jul 05 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执行速度全攻略(下)
2006/10/09 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
java script编程起步(第三课)
2007/01/10 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python避免死锁方法实例分析
2015/06/04 Python
python Django批量导入不重复数据
2016/03/25 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
编辑找工作求职信范文
2013/12/16 职场文书
优乐美广告词
2014/03/14 职场文书
疾病防治方案
2014/05/31 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2015年电教工作总结
2015/05/26 职场文书
赢在执行观后感
2015/06/16 职场文书
团委副书记工作总结
2015/08/14 职场文书