对tab的一些思考

前头的话： tab其实自己跌跌撞撞也写过好多遍了，第一次写是刚接触前端js编程那会，觉得难的一批，视频都跟不上的那种。后来第二遍就是暑期的时候，其实也觉得挺难的，勉强参考别人的代码写出来，再就是这两天自己写了两遍。今天通过对比这两天的完成度来写一写自己的一点想法。

美好愿景写法

思路想法：tab就是鼠标悬停一个元素的时候展示这个元素下拉的内容，因此我刚开始设计的时候就是 tab 的头标题和它的内容在一个元素里面，让他们关联一致，鼠标悬停时就加悬停的类名，元素内容进行 diaplay:block 的展示。

于是我的结构变成了这样：

<div id="box">

	<div class="outLi">
		<p style="border-left: none;"  class="current1" >公告</p>
		<ul class="inUl current2">
			<li>数据七夕:金牛爱送玫瑰</li>
			<li>阿里打造"互联网监管"</li>
			<li>10万家店60万新品</li>
			<li>全球最大网上时装周</li>
		</ul>
	</div>

	<div class="outLi">
		<p>规则</p>
		<ul class="inUl">
			<li>“全额返现”要管控啦</li>
			<li>淘宝新规发布汇总(7月)</li>
			<li>炒信规则调整意见反馈</li>
			<li>质量相关规则近期变更</li>
		</ul>
	</div>
</div>

为了完成我心里那个对于 tab 标题内容是一个整体的执著想法，我在js中的做法就是:当鼠标移入 outLi 的时候，先遍历初始化，然后给它的大儿子加个选中的类名，让它二儿子显示就好了。好在最后运行结果比较完美：

但是抛开实现效果，这样做在代码层面看起来是非常糟糕的，主要有以下几点原因：

• 标题和内容是一个整体叫做 outLi，鼠标进入悬停的事件监听是发生在 outLi 上的，这就意味着，无论鼠标进入标题还是内容，都会触发回调函数，进行多余的初始化和赋值操作，这样在切换频率比较高的时候就比较耗费性能。
• 布局问题是硬伤。因为两个板块的在一起绑定，样式之间是相互影响的，因此需要联调，有时候细微的差别就需要花费大量代码去修复，是某个地方一改，整个页面的代码跟着一起改，效率低，维护起来也很不容易。

分离式写法

基于以上的思考结果，我重新写了一份代码，将标题和内容进行分离，这样样式写起来就会非常清晰，而且简单易维护；这种在页面上看起来标题和板块的一致性在js中进行关联和耦合处理，于是结构就变成了这样：

<div id="tab">
	<!-- 头部 -->
	<div class="tab_header">
		<ul>
			<li class="selected">公告</li>
			<li>规则</li>
			<li>论坛</li>
			<li>安全</li>
			<li>公益</li>
		</ul>
	</div>

	<!-- 内容 -->
	<div class="tab_content">
	
		<div class="dom" style="display: block;">
			<ul>
				<li><a href="#">数据七夕:金牛爱送玫瑰</a></li>
				<li><a href="#"> 阿里打造"互联网监管"</a></li>
				<li><a href="#">10万家店60万新品</a></li>
				<li><a href="#">全球最大网上时装周</a></li>
			</ul>
		</div>
		
		<div class="dom">
			<ul>
				<li><a href="#">“全额返现”要管控啦</a></li>
				<li><a href="#"> 淘宝新规发布汇总(7月)</a></li>
				<li><a href="#">炒信规则调整意见反馈</a></li>
				<li><a href="#">全质量相关规则近期变更</a></li>
			</ul>
		</div>
	</div>
</div>

标题和内容的数量都是一一对应的，这样js中只需要通过一个循环遍历时的i就可以控制题目和内容的耦合关系，从而控制类名和本身的显示与否，非常地方便。

总结：今天的第一种思路就是我布置结构的时候想当然的考虑了交互的功能，用结构硬拼交互的方便，结果代码写得多而杂，性能也跟着下降。通过今天这个小案例让我更加体会到什么叫做“代码功能和结构的分离”，分离并不是真正意义上的互不理睬，相反，分离是为了能更好地协同工作，一个部分只负责一个功能，只需要做到极致，其他的放心的交给别的部分来做。像结构就只是结构，交互的内容js可比结构有经验得多。