js实现treelog

实现树形日志（TreeLog）的 JavaScript 方法

数据结构设计

使用嵌套对象或数组表示树形结构，每个节点包含日志内容和子节点信息：

const treeLog = {
  message: "Root log",
  timestamp: new Date(),
  children: [
    {
      message: "Child log 1",
      timestamp: new Date(),
      children: []
    }
  ]
};

递归渲染函数

通过递归遍历树形结构生成可视化日志：

function renderTreeLog(node, indent = 0) {
  const indentStr = ' '.repeat(indent * 2);
  console.log(`${indentStr}${node.message} [${node.timestamp.toISOString()}]`);

  node.children.forEach(child => {
    renderTreeLog(child, indent + 1);
  });
}

动态添加日志

提供添加子日志的方法：

function addChildLog(parentNode, message) {
  const newLog = {
    message,
    timestamp: new Date(),
    children: []
  };
  parentNode.children.push(newLog);
  return newLog;
}

样式增强版本

使用HTML/CSS增强可视化效果：

function renderHTMLTreeLog(node, parentElement) {
  const div = document.createElement('div');
  div.className = 'log-entry';
  div.innerHTML = `
    <span class="log-message">${node.message}</span>
    <span class="log-time">${node.timestamp.toLocaleString()}</span>
  `;

  if (node.children.length > 0) {
    const childrenContainer = document.createElement('div');
    childrenContainer.className = 'log-children';
    node.children.forEach(child => {
      renderHTMLTreeLog(child, childrenContainer);
    });
    div.appendChild(childrenContainer);
  }

  parentElement.appendChild(div);
}

实用工具方法

提供搜索和过滤功能：

function searchLogTree(node, predicate, results = []) {
  if (predicate(node)) {
    results.push(node);
  }

  node.children.forEach(child => {
    searchLogTree(child, predicate, results);
  });

  return results;
}

性能优化

对于大型日志树实现懒加载：

class LazyLogNode {
  constructor(message) {
    this.message = message;
    this._children = null;
  }

  get children() {
    if (this._children === null) {
      this._children = loadChildrenFromServer(this.id);
    }
    return this._children;
  }
}

示例CSS样式

配合HTML渲染的样式建议：

.log-entry {
  margin-left: 15px;
  padding: 5px;
  border-left: 1px solid #ddd;
}
.log-message {
  font-weight: bold;
}
.log-time {
  color: #666;
  font-size: 0.8em;
  margin-left: 10px;
}
.log-children {
  margin-left: 20px;
}