JavaScript 组合模式：统一处理树形结构与对象的操作

组合模式核心概念

组合模式是一种结构设计型模式，旨在将一组对象组合成树形结构，从而让用户能够以一致的方式对待单个对象（叶对象）和组合对象（容器对象）。在 JavaScript 中应用该模式时，必须确保组合对象与叶对象拥有相同的接口方法，使对同一组对象的操作具备一致性。

组合模式的核心约束是对象之间只能存在一对一多的关系，严禁出现多对一的情况。例如，在文件系统中，一个文件夹可以包含多个子文件或子文件夹，但一个文件或文件夹只能属于唯一的上级目录，这与“文件夹及其内容”的层级关系网完全对应。

代码实现：文件夹与文件模拟

为了直观理解组合模式，我们可以模拟文件系统。在这个模型中，“Folder”充当组合对象（容器），“File”充当叶对象。两者都需要实现统一的接口，包括 add（添加）、scan（遍历/扫描）和 remove（删除）。

第 1 步：定义组合对象 Folder

目的：构建可容纳其他对象的容器，并实现递归遍历的逻辑。

关键属性与方法：

• this.files: 存储子对象的数组，用于维护父子关系。
• add(file): 检查子对象是否已存在，避免重复添加，并关联父级引用。
• scan(): 这是组合模式的核心入口。它打印当前目录信息，然后遍历内部所有子对象（无论是 File 还是 Folder）并调用其 scan 方法，从而实现深度优先的递归遍历。

// 定义组合对象
var Folder = function (name) {
  this.name = name;
  this.parent = null;
  this.files = [];
};

Folder.prototype.add = function (file) {
  file.parent = this;
  if(this.files.indexOf(file) === -1){
    this.files.push(file);
  }else{
    console.log("'" + file.name + "'已存在,添加失败");
  }
};

Folder.prototype.scan = function () {
  if(this.parent){
    console.log('开始扫描' + "'" + this.parent.name + "': " + this.name);
  } else {
    console.log('开始扫描根目录: ' + this.name);
  }
  // 关键逻辑：调用所有子对象的 scan() 方法
  for(var i = 0, file; file = this.files[i++];){
    file.scan();
  }
};

Folder.prototype.remove = function (file) {
  var n = this.files.indexOf(file);
  if(n === -1){console.log('无法删除: ' + "'" + file.name + "'不存在:");}
  if(n >= 0){
    this.files.splice(n,1);
    console.log('成功删除:' + file.name);
  }
};

第 2 步：定义叶对象 File

目的：作为树结构的末端单元，实现与 Folder 兼容的接口，但无子节点能力。

接口一致性：

• add(): 由于文件不能包含其他文件，直接输出提示信息。
• scan(): 仅打印当前文件所属目录及其文件名。
• remove(): 同样不支持移除操作，因为移除权归属于父级容器。

// 定义叶对象
var File = function (name) {
  this.name = name;
  this.parent = null;
};

File.prototype.add = function () {
  console.log('不能添加在文件下面');
};

File.prototype.scan = function () {
  console.log(this.parent.name + ': ' + this.name);
};

File.prototype.remove = function (file) {
  console.log('无法删除: ' + "'" + file.name + "'不存在:");
};

第 3 步：测试运行与结果分析

操作顺序：

1. 创建根目录及各子目录与文件实例。
2. 建立层级关系：将 folder1 加入 folder，file1 加入 folder1 等。
3. 执行 folder.scan()，触发递归。

// 测试数据准备
var folder = new Folder('目录');
var folder1 = new Folder('学习资料');
var folder2 = new Folder('javascript');
var file1 = new File('Node.js');
var file2 = new File('qq.jpg');

// 建立层级
folder.add(folder1);
folder.add(folder1); // 测试去重
folder.add(folder2);
folder1.add(file1);
folder2.add(file2);

// 执行扫描
folder.scan(); 
// 预期输出：
// 开始扫描根目录: 目录
// 开始扫描'目录': javascript
// javascript: qq.jpg
// 开始扫描'目录': 学习资料
// 学习资料: Node.js

上述代码演示了组合模式的一个典型应用场景：客户端只需要知道最顶层的组件（如根目录），即可对整体进行操作，而无需关心内部的具体构成。这种“宏命令”式的处理方式极大地简化了复杂系统的交互逻辑。

以上就是 JavaScript 组合模式学习要点与代码示例的详细内容，更多关于 JavaScript 设计模式的资料请关注本站其它相关文章！