百度前端技术学园

# JavaScript 和树

# JavaScript 和树（一）

# 课程目标

  • 熟练 JavaScript
  • 学习树这种数据结构的基本知识

# 阅读

# 编码

  • 参考示例图 (opens new window)，在页面中展现一颗二叉树的结构
  • 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
  • 二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）
  • 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
  • 每隔一段时间（500ms、1s 等时间自定）再遍历下一个节点

注意事项

  • 如果按照示例图中展示树，可以使用 flexbox 布局
  • 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架

# JavaScript 和树（二）

# 课程目标

  • 熟练 JavaScript
  • 学习树这种数据结构的基本知识

# 阅读

# 编码

  • 基于任务上一任务，参考示例图 (opens new window)，将二叉树变成了多叉树，并且每一个节点中带有内容
  • 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
  • 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
  • 每隔一段时间（500ms、1s 等时间自定）再遍历下一个节点
  • 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

注意事项

  • 树的遍历算法和方式自定，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）
  • 如果按照示例图中展示树，可以使用 flexbox 布局
  • 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架

# JavaScript 和树（三）

# 课程目标

  • 熟练 JavaScript
  • 学习树这种数据结构的基本知识

# 阅读

# 编码

  • 基于上一任务，添加节点的选择、增加与删除的功能
  • 点击某个节点元素，则该节点元素呈现一个特殊被选中的样式
  • 增加一个删除按钮，当选中某个节点元素后，点击删除按钮，则将该节点及其所有子节点删除掉
  • 增加一个输入框及一个“添加”按钮当选中某个节点元素后，点击增加按钮，则在该节点下增加一个子节点，节点内容为输入框中内容，插入在其子节点的最后一个位置

注意事项

  • 实现简单功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架

# JavaScript 和树（四）

# 课程目标

  • 熟练 JavaScript
  • 学习树这种数据结构的基本知识

# 阅读

# 编码

基于上一任务的基本代码，实现一个树形组件，可参考如图示例 (opens new window)，样式自定义，不做限制

  • 节点的折叠与展开
  • 允许增加节点与删除节点
  • 按照内容进行节点查找，并且把找到的节点进行特殊样式呈现，如果找到的节点处于被父节点折叠隐藏的状态，则需要做对应的展开

注意事项

  • 实现功能的同时，请仔细学习 JavaScript 基本语法、事件、DOM 相关的知识
  • 尽量做到样式交互、节点数据、节点操作的解耦
  • 请注意代码风格的整齐、优雅
  • 代码中含有必要的注释
  • 建议不使用任何第三方库、框架

← 带有视差滚动动效的 3D 网页 →