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

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

今天要讲二个主题:

  • 多级菜单的业务流程和需要分析;
  • 基于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方法,获取数据。当你点击菜单项的时候,实际是在提交或获取新数据。接下来不管是重绘窗口,还是页面跳转,其实都是调用了新的页面组件。

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

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

(其余的部分就不再发出来了...)

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 如何为你的微信小程序体积瘦身?

众所周知,微信小程序在发布的时候,对提交的代码有 2 MB 大小的限制。所以,如果你正在写一个功能稍微复杂一点的小程序,就必须得时刻小心注意你的代码是不是快触及...

922
来自专栏LiveEdu在线科技教育平台

如何创建Vim Dotfile?

Dotfile是电脑系统里的隐藏文件,它是专门给更高级的用户,如开发者、程序员或工程师使用的,让他们用来调整系统。如何创建Vim-Dotfile? 可以参考以下...

2278
来自专栏互联网杂技

react+redux+webpack教程4

接着上回新闻搜索的例子。现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-rou...

36710
来自专栏理论坞

那些你不知道的Photoshop冷知识④——不安分的Adobe

本来已经打算将 第三期 作为这一系列的完结篇的~但我发现Adobe在这次更新变更了我常用的功能键使用方式(后文详述),于是我查看了PS的更新日志,发现这几次更新...

1223
来自专栏移动开发之家

从Android到React Native开发(一、入门)

大家好┏ (ω)=,许久不见,一不小心断更就成为了一种习惯,因为最近掉React Native的坑里,无法自拔啊~(╯‵□′)╯︵┻━┻。 关于React N...

882
来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(9)--常用组件的使用方法[附源码]

经过两天的学习,把常用的组件都学习了一遍,并做成了App 学习可能真没有捷径,跟学习html有点类似,都是一个控件一个控件学习并使用,最后拼凑成一个系统 链接:...

1926
来自专栏菩提树下的杨过

jQuery中排除指定元素,同时选择剩下的所有元素

场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

2225
来自专栏Debian社区

Debian下安装搜狗拼音输入法

2013年12月,搜狗与Ubuntu Kylin团队开始合作开发“搜狗输入法Linux版”。经过五个月的合作,于2014年4月17日,正式发布了1.0版本。20...

1363
来自专栏姬小光

姬小光前端小讲堂【第004期】

前面几期我都在尝试以最平缓的曲线让大家快速入门,后续根据同学们的反馈,内容的深度会逐步提升。那么这一期我们来说说文档类型与HTML页面的基本结构。

963
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

34010

扫码关注云+社区

领取腾讯云代金券