《菜鸟、不合格WEB程序员的定界线》之一：你在用这样糟糕的标签切换代码吗？

本文链接：https://blog.csdn.net/theforever/article/details/5832244

　　如果忽略难度，可以说，能够完成程序最终要求实现的需求目标，只是一个准程序员的水平，一个真正意义上的程序员，还要注意代码的规范，容错（或兼容），效率。不经过自己的Review、Rewrite，代码基本就是不可取的。

　　下面拿一个在WEB应用中被广泛用到的功能代码，就很能说明问题（其实之所以促使我写这样一篇文章，就是因为不断在某些网站的源码里看到这样的垃圾代码，让我觉得程序员的荣耀被写和用这样代码的人所糟蹋，一次次刺激之下终于爆发了。不过我的文章，主要是对事不对人，所以也都没有提出处和哪些网站正在使用这样的代码。至于语气中有些愤慨，是免不了的。说实话，换了我是这些人的技术经理，看到第一次警告一下，看到第二次就直接开除了。）：

　　功能：标签切换（鼠标点击或经过时切换相应的关联内容显示）。

　　一般写法：

　　或者是带有标签STYLE更换的一种：

function showTab(name, num, n) { for (i = 1; i <= n; i++) { var menu = document.getElementById(name + i); var con = document.getElementById("show_" + name + "_" + i); menu.className = i == num ? name + "_btn_show": name + "_btn_normal"; con.style.display = i == num ? "block": "none"; con.className = i == num ? name + "_text_show": name + "_text_normal"; } }

　　和这种配套使用的HTML形式：

<span onMouseMove="JavaScript:showTab('Tab',3,1)" id=Tab1 class=Tab_btn_show>内容一</span> <span onMouseMove="JavaScript:showTab('Tab',3,2)" id=Tab2 class=Tab_btn_normal>内容二</span> <span onMouseMove="JavaScript:showTab('Tab',3,3)" id=Tab3 class=Tab_btn_normal>内容三</span> <div> <div id="show_Tab_1" style="display:none;" mce_style="display:none;">内容部分第一区</div> <div id="show_Tab_2" style="display:none;" mce_style="display:none;">内容部分第二区</div> <div id="show_Tab_3" style="display:none;" mce_style="display:none;">内容部分第三区</div> </div>

　　代码问题：每次显示切换，实则只在上一次所显示的和这一次要显示的这二者之间进行切换，但上面这两种被广泛采用的代码，在逻辑上等于脑残，都是对所有关联显示区进行统一隐藏后再显示这次要显示的。对于每个语句的执行机理有所认识的人，会很明确地感受到这种垃圾代码对硬件的摧残和对执行效率的浪费，尤其要切换的显示区数量越多，摧残和浪费越严重。

　　而且，第一个代码还象回事似的作了是否是IE的验证，也就是JS的兼容写法，但实则是因为采用的错误的方法导致的，这就象长在伸出墙外的歪脖枝杈上的果子，就算长得不错也是长错了地方。

　　第二个代码，对于标签和显示区的ID命名和编号都作了限制，编号还必须从１开始，以１递增。从程序到HTML，都弱智得可以。

　　改进方法１：设置变量，通过它保存上一次操作的对象，实现和这一次的对象进行切换的功能。

var oldShow="默认显示DIV的ID"; function setShow(thisID){ document.getElementById(oldShow).style.display="none"; document.getElementById(thisID).style.display="block"; oldShow=thisID; }

　　非常简单直接，就实现了显示切换（适用于不改变标签样式的情况）。带有标签样式改变的，照此改写一下就行了。

　　可以说，这样的改写，就能体现出一个真正的普通程序员和菜鸟及不合格程序员的分别。在我担任技术经理的时期里，提供类似开头的程序让应聘者改写得更好，是我在进行普通开发人员招聘时测试技术的两道题（是的，只用两道即可）之一，而第一道，是忽略知识基础，给出完成小任务所需的所有基础知识要点，看应聘者根据这些来完成最终结果的速度（反映学习能力和适应能力）和质量（反映性格和工作态度），而这第二道，就是测试对于优化的认识和掌握（反映经验和技能深度）。

　　但从苛求的角度看，上面的代码没有使用闭包，放在外面的全局变量oldShow缺少封装性，虽然这不是必要的，但如果可以封装在函数内部，当然更好些。所以可以进行下面的进一步改写，这样就可以放在一个JS里通用了，无需顾及是否因为这个全局变量和页面中哪个变量冲突而需要改写什么，并且，这个是包含样式改变的（如果不需要改变样式，只需要把正常显示样式的名称作为突出显示样式名称即可）：

var ZL_标签=function(obj,className,ContentID){ if(this.oldObj!=undefined){ //非第一次调用时,先恢复上次操作对象样式和隐藏其关联DIV this.oldObj.className=this.oldStyle; document.getElementById(this.oldContentID).style.display='none'; } //进行本次(包括第一次)操作 //先保存本次环境 this.oldObj=obj;this.oldStyle=obj.className;this.oldContentID= ContentID; //设置本次显示 obj.className=className; document.getElementById(ContentID).style.display='block'; };

　　可以放在一个JS里进行引用，或者放在HEAD中的Script里。

　　使用方法：

//设置默认显示项
ZL_标签(document.getElementById('标签id1'),'突出显示风格','关联显示区id1');
</script>

　　上面使用的“正常显示风格”、“突出显示风格”、“关联显示区风格”、“关联显示区id”等，改成任意的短名称看着会更舒服，这里只是为了便于理解。而且每一个标签的正常显示风格和突出显示风格都可以不同（上面那些代码在这种情况下，就会变得无法应付），整体非常灵活。

　　类似的代码还有不少，所以就拟了一个系列式的标题，以后有时间陆续写一下。