深入理解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 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Node.js Event Loop各阶段讲解
Mar 08 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
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
使用php实现截取指定长度
2013/08/06 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python格式化css文件的方法
2015/03/10 Python
Python多线程和队列操作实例
2015/06/21 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
外贸学院会计专业应届生求职信
2013/11/14 职场文书
优良学风班申请材料
2014/02/13 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Nginx 常用配置
2022/05/15 Servers