深入理解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 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
react-native android状态栏的实现
Jun 15 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
python获取糗百图片代码实例
2013/12/18 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
Python中操作符重载用法分析
2016/04/29 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
django 实现简单的插入视频
2020/04/07 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
大学生毕业自荐信
2013/10/10 职场文书
领导接待方案
2014/03/13 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
五年级数学教学反思
2016/02/16 职场文书