• 如何写出更好的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^

    欢迎关注我的微信公众号「猫哥学前班」

  • 相关阅读:
    【区间DP&&记忆化搜索】乘法游戏
    洛谷P1608路径统计
    2021省选游记
    涂色计划P4170
    01迷宫及路径记录(DFS&&BFS)
    [YBTOJ递推算法强化训练4]序列个数
    C++关于string 的优先队列以及重载运算符
    浅谈C++STL容器
    集合的划分
    图的表示
  • 原文地址:https://www.cnblogs.com/kaiye/p/3039052.html
Copyright © 2020-2023  润新知