深入理解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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
js Proxy的原理详解
May 25 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
python构建自定义回调函数详解
2017/06/20 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
Python3并发写文件与Python对比
2019/11/20 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
高级销售员求职信
2013/10/25 职场文书
实习生的自我评价
2014/01/08 职场文书
信息技术教学反思
2014/02/12 职场文书
党支部承诺书范文
2014/03/28 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
物流专业求职信
2014/06/30 职场文书
三八妇女节标语
2014/10/09 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis