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静态作用域的功能。
Dec 25 Javascript
获取当前网页document.url location.href区别总结
May 10 Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
Javascript变量作用域详解
Dec 06 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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
多人战的战术与战略
2020/03/04 星际争霸
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
flask框架路由常用定义方式总结
2019/07/23 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python常用库大全及简要说明
2020/01/17 Python
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
生产总经理岗位职责
2013/12/19 职场文书
法人委托书范本
2014/04/04 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
公司合作协议范文
2014/10/01 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL