深入理解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异步编程模型Promise模式详细介绍
May 08 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php 的反射详解及示例代码
2016/08/25 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python中反射和描述器总结
2018/09/23 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
档案接收函
2014/01/13 职场文书
三年级音乐教学反思
2014/01/28 职场文书
《乡愁》教学反思
2014/02/18 职场文书
模具专业求职信
2014/06/26 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS