菜单树是常见的前端特效, 一般长下面这样
还有各种形态的变种, 有长这样的
也有长这样的
尽管这些菜单的相貌都不尽相同, 在功能实现的本质上却都是相同的。实现程序的大致流程如下
读取服务器端的菜单数据
将数据转换成html菜单结构
为菜单结构绑定各种交互事件,如展开、关闭等。
然而, 随着需求的变化, 菜单往往会需要一些基础之外的功能, 比如说添加菜单项、删除菜单项、修改菜单名、拖拽子菜单至其它父菜单项之下等, 实现这些额外的功能将增加菜单制作的难度。就拿添加菜单项这个功能来讲, 添加菜单项事件中代码的常规实现流程如下
为菜单的html结构添加一个菜单项元素结点并指定节点的名称
将菜单新节点数据添加至初始化菜单html结构的数据中
将新菜单的数据通过ajax发送至服务器端持久存储