任务二十三:JavaScript和树(二)
- 面向人群:
- JavaScript初学者
- 难度:
- 简单
重要说明
百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践。
课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的。因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知识。所以,我们列出的参考资料未必是实现需求所必须的。有的时候,实现题目的要求很简单,甚至参考资料里就有,但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时,要多思考,多提问,多质疑。相信通过和小伙伴们的交流,能让你的学习事半功倍。
任务目的
- 熟练JavaScript
- 学习树这种数据结构的基本知识
任务描述
- 基于任务22,参考示例图,将二叉树变成了多叉树,并且每一个节点中带有内容
- 提供一个按钮,显示开始遍历,点击后,以动画的形式呈现遍历的过程
- 当前被遍历到的节点做一个特殊显示(比如不同的颜色)
- 每隔一段时间(500ms,1s等时间自定)再遍历下一个节点
- 增加一个输入框及一个“查询”按钮,点击按钮时,开始在树中以动画形式查找节点内容和输入框中内容一致的节点,找到后以特殊样式显示该节点,找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致
任务注意事项
- 树的遍历算法和方式自定,但推荐可以提供多种算法的展示(增加多个按钮,每个按钮对应不同的算法)
- 如果按照示例图中展示树,可以使用flexbox布局
- 实现简单功能的同时,请仔细学习JavaScript基本语法、事件、DOM相关的知识
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 建议不使用任何第三方库、框架
任务协作建议
- 团队集中讨论,明确题目要求,保证队伍各自对题目要求认知一致
- 各自完成任务实践
- 交叉互相Review其他人的代码,建议每个人至少看一个同组队友的代码
- 相互讨论,最后合成一份组内最佳代码进行提交
在线学习参考资料
树林美丽、幽暗而深邃,但我有诺言尚待实现,还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特