深入理解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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Exjs 入门篇
2010/04/07 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
金融管理应届生求职信
2014/02/20 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
班主任寄语大全
2014/04/04 职场文书
大学计划书范文800字
2014/08/14 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2015年暑假生活总结
2015/07/13 职场文书
合作意向书范本
2019/04/17 职场文书
golang语言指针操作
2022/04/14 Golang
使用Django框架创建项目
2022/06/10 Python