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 的应用开发初探(mootools)
Dec 19 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
深入浅析react native es6语法
Dec 09 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 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使用反射插入对象示例分享
2014/03/11 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
再谈JavaScript线程
2015/07/10 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
工作的心得体会
2013/12/31 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
日化店促销方案
2014/03/26 职场文书
幼儿园老师寄语
2014/04/03 职场文书
物资采购方案
2014/06/12 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers