JavaScript设计模式开发中组合模式的使用教程


Posted in Javascript onMay 18, 2016

我们平时开发过程中,一定会遇到这种情况:同时处理简单对象和由简单对象组成的复杂对象,这些简单对象和复杂对象会组合成树形结构,在客户端对其处理的时候要保持一致性。比如电商网站中的产品订单,每一张产品订单可能有多个子订单组合,比如操作系统的文件夹,每个文件夹有多个子文件夹或文件,我们作为用户对其进行复制,删除等操作时,不管是文件夹还是文件,对我们操作者来说是一样的。在这种场景下,就非常适合使用组合模式来实现。

基本知识

组合模式:将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。
组合模式主要有三个角色:
(1)抽象组件(Component):抽象类,主要定义了参与组合的对象的公共接口
(2)子对象(Leaf):组成组合对象的最基本对象
(3)组合对象(Composite):由子对象组合起来的复杂对象
理解组合模式的关键是要理解组合模式对单个对象和组合对象使用的一致性,我们接下来说说组合模式的实现加深理解。
组合模式算是为在页面动态创建UI量身定做的,你可以只使用一条命=命令为许多对象初始化一些复杂的或者递归的操作.组合模式提供了两个有点:
(1)允许你将一组对象当成特定的对象.组合对象(A composite)和组成它的子对象实现相同的操作.对组合对象执行某一个操作将会使该对象下的所有子对象执行相同的操作.因此你不仅可以无缝的替换单个对象为一组对象集合,反过来也一样.这些独立的对象之间即所谓松散耦合的.
(2)组合模式会将子对象集组合成树结构并且允许遍历整个树.这样可以隐藏内部实现并且允许你以任意的方式组织子对象.这个对象(组合对象)的任何代码将不会依赖内部子对象的实现.

组合模式的实现

(1)最简单的组合模式

HTML文档的DOM结构就是天生的树形结构,最基本的元素醉成DOM树,最终形成DOM文档,非常适用适用组合模式。
我们常用的jQuery类库,其中组合模式的应用更是频繁,例如经常有下列代码实现:

$(".test").addClass("noTest").remove("test");

这句简单的代码就是获取class包含test的元素,然后进行addClass和removeClass处理,其中不论$(“.test”)是一个元素,还是多个元素,最终都是通过统一的addClass和removeClass接口进行调用。
我们简单模拟一下addClass的实现:

var addClass = function (eles, className) {
  if (eles instanceof NodeList) {
    for (var i = 0, length = eles.length; i < length; i++) {
      eles[i].nodeType === 1 && (eles[i].className += (' ' + className + ' '));
    }
  }
  else if (eles instanceof Node) {
    eles.nodeType === 1 && (eles.className += (' ' + className + ' '));
  }
  else {
    throw "eles is not a html node";
  }
}
addClass(document.getElementById("div3"), "test");
addClass(document.querySelectorAll(".div"), "test");

这段代码简单的模拟了addClass的实现(暂不考虑兼容性和通用性),很简单地先判断节点类型,然后根据不同类型添加className。对于NodeList或者是Node来说,客户端调用都是同样的使用了addClass这个接口,这个就是组合模式的最基本的思想,使部分和整体的使用具有一致性。

(2)典型的例子

前面我们提到一个典型的例子:产品订单包含多个产品子订单,多个产品子订单组成一个复杂的产品订单。由于Javascript语言的特性,我们将组合模式的三个角色简化成2个角色:
(1)子对象:在这个例子中,子对象就是产品子订单
(2)组合对象:这里就是产品的总订单
假设我们开发一个旅游产品网站,其中包含机票和酒店两种子产品,我们定义了子对象如下:

function FlightOrder() { }
FlightOrder.prototyp.create = function () {
  console.log("flight order created");
}
function HotelOrder() { }
HotelOrder.prototype.create = function () {
  console.log("hotel order created");
}

上面的代码定义了两个类:机票订单类和酒店订单类,每个类都有各自的订单创建方法。
接下来我们创建一个总订单类:

function TotalOrders() {
  this.orderList = [];
}
TotalOrders.prototype.addOrder = function (order) {
  this.orderList.push(order);
}
TotalOrders.prototype.create = function (order) {
  for (var i = 0, length = this.orderList.length; i < length; i++) {
    this.orderList[i].create();
  }
}

这个对象主要有3个成员:订单列表,添加订单的方法,创建订单的方法。
在客户端使用的时候如下:

var flight = new FlightOrder();
flight.create();

var orders = new TotalOrders();
orders.addOrder(new FlightOrder());
orders.addOrder(new HotelOrder());
orders.create();

客户端调用展示了两种方式,一种是单一的创建机票订单,一种是创建多张订单,但最终都是通过create方法进行创建,这就是一个很典型的组合模式的应用场景。

总结
组合模式并不难理解,它主要解决的是单一对象和组合对象在使用方式上的一致性问题。如果对象具有明显的层次结构并且想要统一地使用它们,这就非常适合使用组合模式。在Web开发中,这种层次结构非常常见,很适合使用组合模式,尤其是对于JS来说,不用拘泥于传统面向对象语言的形式,灵活地利用JS语言的特性,达到对部分和整体使用的一致性。
(1)使用组合模式的场景
在遇到下面两种情况的时候才使用组合模式
A.含有某种层级结构的对象集合(具体结构在开发过程中无法确定)
B.希望对这些对象或者其中的某些对象执行某种操作
(2)组合模式的缺点
因为组合对象的任何操作都会对所有的子对象调用同样的操作,所以当组合的结构很大时会有性能问题。还有就是使用组合模式封装HTML时要选择合适的标签,比如table就不能用于组合模式,叶子节点不明显

Javascript 相关文章推荐
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jquery密码强度校验
Dec 02 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 #Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 #Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 #Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 #Javascript
Jquery跨域获得Json的简单实例
May 18 #Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 #Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python实现给文件添加内容及得到文件信息的方法
2015/05/28 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python获取mp3文件信息的方法
2015/06/15 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
教师档案管理制度
2014/01/23 职场文书
行政人事岗位职责
2014/03/17 职场文书
关于青春的演讲稿
2014/05/05 职场文书
小学教师培训方案
2014/06/09 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
撤诉书怎么写
2015/05/19 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
MySQL数据库 安全管理
2022/05/06 MySQL