编程练习--简单实用的选项卡切换效果

有网友私信我，说我前几篇写编程练习的例子让他们感觉我写代码的方式和他们不一样，让他们很受启发，希望我多写一些这样的例子。他们帮我总结了一下，主要表现在以下三个方面：

1. 代码外观整洁清爽。

2.喜欢用对象方式编写。

3.喜欢用原生javascript。

我非常认同上面三点，事实上我也是坚持这么做的。第1点自不必说，爱美之心，人皆有之。我想没有一个人愿意看排的凌乱不甚的代码的。第2点呢，我个人认为好处就很多了，最直接的好处就是可以更好的组织代码，使各功能模块之间即独立又相互协调，也方便扩展和维护。第3条呢是因为我目前的工作环境是移动客户端的前端开发，一般只要兼容webkite内核的浏览器就可以了，用原生的方法写可以使代码写的短小精悍，同时也可以把更多的观注点放在业务逻辑上。

常言道，拳不离手，曲不离口，技术都是熟能生巧，不能懈怠。有时候在网上看到一些好的例子，觉得或许以后会用的上，于是拿来自己改写下。选项卡在web应用中很常见，实现的方式也是多种多样。下面这一款，就是利用javascript和css实现的，效果图如下：

在线演示：http://runjs.cn/code/r8kqphjl

经过我的改写之后。调用非常简单：

//实例化选项卡
var op = new Tabs('menu');

只要传入选项卡节点的id就可以了。下面是js代码：

/**
 * 选项卡类
 * @param {string} id 选项卡的ID
 */
function Tabs(id){
    var node = document.querySelector('#'+id);
    var selected = node.querySelector('.selected');
    this.selected = selected;
    this.node = node;
    this.bindEvent();
}

/**
 * 切换选项卡
 * @param  {object} event 事件
 * @return {[type]}   [description]
 */
Tabs.prototype.change = function(event){
    var element = event.target;
    if(element.tagName.toLowerCase()=='li'){
        if(element.className=='selected'){
            return;
        }
    }else{
        while(element != this.node){
            element = element.parentNode;
            if(element.tagName.toLowerCase()=='li'){
                break;
            }
        }
    }
    this.selected.removeAttribute('class');
    element.className = 'selected';
    this.selected = element;
}

/**
 * 绑定事件
 * @return {[type]} [description]
 */
Tabs.prototype.bindEvent = function(){
    this.node.addEventListener('click',this.change.bind(this),false)
}

大家看到，我没有用jquery,因为我专注的重点在于实现的逻辑，一共三个部分：先是初始化，然后是切换功能，最后是事件绑定。我们再来看看原来的代码：

$(function(){
$("li").on("click", function(){
  $("LI").removeClass("selected");
  $(this).toggleClass("selected", true);
})
});

 

我看到原来的代码里边，是用$('li').on这样的表达式配合循环遍历去做的。虽然看起来代码少，但实际上隐藏在$下面的代码量一点都不少。这还不是重点，重要的是这样相当于是每一个li上都绑定一个同样的操作，而且每一次切换都相当于更新了每一个li的样式。读过jquery源码的人都知道，$("li")实际上是得到一个集合，内部是循环去检查每一个li，判断它是不是有选中的样式，如果有就拿掉，然后把当前点中项加上选中样式。用的时候感觉爽，实际上非常的低效。

如果我们把整个选项卡看成是一个对象，那么每一个选项就像是这个对象上的一部分，初始化的时候，就让对象保存好每一个选项的状态，哪一个选项是选中的，它内部自然是应当知道的。当我们切换的时候，只要更新对象具体的状态值就行，根本不需要去一个一个的遍历。 就像老师在黑板上板书一样，他知道哪一块要保留，哪一块要擦掉。不需每写一次就把黑板全部擦一次。

好了，我知道又会有朋友要吐槽我的比喻了。我做好准备了，爱吐糟的你在哪里？