深入理解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中Eval函数的使用
Mar 23 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
js评分组件使用详解
Jun 06 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JS实现进度条动态加载特效
Mar 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
XHProf报告字段含义的解析
2016/05/17 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php数组和链表的区别总结
2019/09/20 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python类的实例化问题解决
2019/08/31 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
keras 权重保存和权重载入方式
2020/05/21 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
大二学期个人自我评价
2014/01/13 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技