深入理解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键盘
May 02 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
原生js实现九宫格拖拽换位
Jan 26 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解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Windows下搭建python开发环境详细步骤
2020/07/20 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python实现用户名密码校验
2020/03/18 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
this关键字的含义
2015/04/08 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
优秀实习自我鉴定
2013/12/04 职场文书
白血病募捐倡议书
2014/05/14 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
SQLServer常见数学函数梳理总结
2022/08/05 MySQL