如何写出更好的JS树状菜单

差不多是两年前的这个时候，我当时在华中科技大学注册中心HUB团队负责WEB标准化和规范化的工作。当时我花了两天两夜，重写了注册中心的HTML模板，并通过了W3C的CSS、XHTML校验。我拿着这套模板，告诉办公室主任王士贤老师，学校的信息系统应该做个大手术，全部换成我的新模板。当时王老师笑了笑，说这个改动太大，委婉的拒绝了我的提议，他说了让我刻骨铭心的一句话：

“网页技术发展很快，也许几年后，你再来看你写的这些模板，会有更好的想法。”

两年前我看到“不会用JS写树状菜单，就不算真正懂JS”，于是我通宵写了这个树状菜单。之后陆陆续续有不少人加我QQ，交流树状菜单的问题，甚至还有网友给我个绰号“树状菜单弟” -_-! 这两年来随着个人前端技术水平的不断提升，尤其是支付宝个人版项目对我的锻炼，我开始逐渐明白“技术没有最好的，只有最适合的”这句话的含义。在今年第四届D2会议上，豆瓣的张克军分享了《从YUI2到YUI3看前端的演变》，前端的“库”时代已经来临。

我一直想重写这个树状菜单，修复原来的两个BUG，采用基于YUI的组件封装模式来写，独立出样式表现层和脚本行为层，提供丰富的扩展接口，同时考虑到禁用JS时的可用性。在我开始写这个组件的时候，我忽然想起D2上一名观众问克军的一个问题“您做为一个前辈，请给我们这些菜鸟一些指导，是应该学YUI还是JQuery？”克军的回答是，从最基础的原生的JS获取对象绑定事件等知识学起，学什么框架不重要，选择一个合适的，会用即可。其实任何一门编程语言都是如此。如果我在这里用YUI写出一个树状菜单组件，那唯一的用途就是被一些垃圾源码站转载，而且不大可能被应用，还不如看看YUI里的menu组件。懒懒交流会上，淘宝的玉伯说过，如果想让自己的JS代码“流芳百世”就得用原生的写法，因为不依赖任何框架的JS代码复制粘贴起来最方便。

然而为了方便组件编写和减少BUG，为了一个事件绑定，我不得不在自己的代码里加上addEvent的方法。还得加hasClass、addClass、get等DOM操作方法，大大增加代码的长度。于是我放弃了重写的这个念头，只是略讲下编写思路好了。

function addEvent(obj, type, fn) {
    if(obj.addEventListener){
        obj.addEventListener(type, fn, false);
    }else if(obj.attachEvent){
        obj["e"+type+fn] = fn;
        obj.attachEvent( "on"+type, function() { obj["e"+type+fn](); } );
    }
}

 

首先初始化绑定导航的DOM，然后分别为每一级的UL和LI绑定上hover和click事件，分别加上”hover”和”select”的样式名。然后通过CSS来展现样式，显示隐藏对应节点。Over

再过两年后，我再回过头看现在的代码思路，可能会有更好的想法。代码需要熟能生巧，需要时刻跟上技术的发展，才能保持优雅的姿态。多看看前辈的文章，多与人交流，拜一个好的师傅，是学习的最佳途径。

其实做人又何尝不是如此。自以为是的自己，总会被以后看似成熟的自己所否定。以前catge同学常被人说幼稚儿童，心有不甘。现在则习惯了，被人说幼稚不要紧，关键要学会改变自己，改掉不足的地方，学习他人的长处。倒是有个88年的幼齿，说不带我这个老年人一起玩的时候，我心碎了。

PS:这个雪人是我自己堆的，还是很有童心的吧，请90后的小弟弟小妹妹不要拒绝我^o^