本周先行者课程--多级下拉菜单回顾

各位同学们大家好，又到周末了。这个周末咱们开始讲新的前端组件，多级下拉菜单。这个东西我们以前讲过一次，但因为感觉之前讲的有些不太充分，还是把它再拿出来讲一下。

今天要讲二个主题：

• 多级菜单的业务流程和需要分析；
• 基于React的最简单实现。

现在我在白板上，画一下使用多级下拉菜单的几种典型方式，

1，顶部，用户登录之后的用户权限下拉菜单；

2，左边，例如京东的产品列表；

3，底部，仿win开始菜单；

4，nav导航栏；

当然还有更多的应用方式，但就不再举例了。

那么，在前端开发的实际工作中，

1、为什么要用它？解决哪些需求？

因为它可以解决同一个位置展示多个选择；可以认为它是多个select的合并。

2，用到JS的哪些技术？

首先是技术选型，你可以用原生JS,可以用React，可以用angular，可以用JQ，都可以。

但无论你使用哪个框架，实现的思路都是获取JSON数据，使用递归的方式，来for循环整个json数据，生成整个dom后，添加到页面中

3，从哪开始着手写？

首先罗列一下它有哪些点，1，获取JSON；2，生成DOM；3，绑定事件；4，添加到页面中。那么这里就有了三个函数，一个方法：

以最简单的JQ为例，分别是，getData；createList，on()，appendTo()，

那么，在整个的前端开发的工作场景与流程中，首先它是页面的一个组成部分。而这类组件，基本上不太讲究通用性。因为每个页面每个网站的多级菜单基本都不相同。所以它讲究的就是松耦合与可维护、可定制。

然后这个菜单的每一次点击之后，都会引起以下事件和变化，

1，获取数据；

2，显示下一级子菜单；

3，页面跳转或重绘

所以我们要在绑定事件那里做好下一步操作的衔接。以京东商城为例，你选择家电或生鲜选项，页面的跳转是不一样的，那么这个不同的跳转就要靠菜单中每一个选择的ID来判断，假设有一个gotoPage()方法，你点击时传参1时，页面跳转到家电；传2时，页面跳转到生鲜。

这个可以算是菜单组件的“出口”。

那么它的“入口”，就是以下二种情况，

1、当页面刷新时，这是京东和页面主导航类型的；

2、当用户登录时，这是用户权限类的

当这二种情况发生时，菜单会调用getData方法，获取数据。当你点击菜单项的时候，实际是在提交或获取新数据。接下来不管是重绘窗口，还是页面跳转，其实都是调用了新的页面组件。

例如，你点击了多级菜单里的某个选项，然后网页中的某个窗口发生重绘，实际重绘的是什么？是产品列表组件重新获取数据，刷新内容。

这就是我之前说的，把组件放在整个网站的开发流程中去思考。用数据把一个个孤立的组件串连起来。

（其余的部分就不再发出来了...）