Javascript以面向对象的思路实现可切换的页面控件
本篇文章的主要目的是使用Javascript以面向对象的思想从另外一个角度去实现一系列页面控件。
首先声明一下：
1.如果你只是想要一个完善的js代码，让你可以套用到自己的页面并立即实现你想要的效果，为了节省你的时间，请绕过。
2.如果你想看一篇手把手的给你实现一个标签页效果或者轮换图片的效果，那么请路过。
3.如果你喜欢Javascript这个语言，想一起思考一些更深入的东西，请继续阅读并希望你不吝赐教。
点击查看演示效果（Demo比较粗糙，兼容IE6+，FX3.5+）
其实自从jQuery火起来之后，很多以前我们实现起来很复杂的效果现在很轻松的就能实现了，这带给了我们极大的方便，但是同时也让我们变得懒惰，变得不爱思考。它让我们的代码在变得简洁的同时也变得不那么“干净”，我们可能会随手写一些实现效果的代码，而不是深入的去思考。当然jQuery本身没错，只不过我自己变懒了而已。当然话又说回来，“懒惰”是让程序员进步的原动力:P
言归正传，在这篇文章里我想和大家一起讨论一下页面中常见的几种页面控件的实现，例如：标签页控件，轮播的幻灯控件，还有土豆网下面那种用滚动条控制的一行影片列表等等。其实这些页面控件它们实际上的行为都很类似，所以我们这里讨论的其实是一类控件，我给它取了一个名字叫“可切换”控件。下面就分析一下我为什么要这么说。
这类控件它们的共性就是，都有内容展示区（废话，没内容还做毛啊）和一个类似导航器的元素。
这个内容展示区并不是说单纯的文字或图片放在那，这个内容展示区是由几部分结构或表现形式十分类似的内容区共同组成的，而且这几部分内容一般情况下不是同时显示出来，而是在用户触发或者系统定义的条件出发下才会轮换显示，也就是我们前面提到的“可切换”的。
另外它们一般都还会有一个控制器，或者说是导航器，抑或者是标签，不管什么名字，我这里称之为“向导”(guider)，藉由这个向导我们能够定位到我们想要看到的内容上，这个向导可能是“1，2，3…”这个样子的，也可能能是“上一个，下一个”这个样子的，也有可能是“标签一，标签二”这个样子，无论它的表现形式是什么样，它的作用都是非常类似的。
通过上面简单的分析我们可以得出这类控件的共性，下面我们会用到这个共性来实现我们的“可切换”(switchable)对象。
下面我先提一点老生常谈的东西。我们在提起面向对象的时候，我们的对象要包含属性和方法等，其实作为一组行为也可以看作为对象的，在设计模式的策略模式中，我们把对象的行为抽取出来作为一个新的对象来处理不就是把一组行为作为一个对象吗？所以我们这里就要抽象出一个switchable对象来，让我们页面中具有“可切换”能力的对象来继承这个对象。
让我们看一下我们的switchable对象都具有哪些行为。
switchableUML
来看一下这几个属性分别代表的意义和它们的作用。
guiderStatus:bool值，用于控制gider是否显示
guider：HTML元素，是“向导”的容器
guiderDoms：HTML元素数组，是“向导”的各个条目
panel：HTML元素，是内容显示区的容器
panelDoms：HTML元素数组，内容显示区的各个条目
currID：控制句柄，当前显示的内容条目的ID
totalNum：总共有多少个内容条目
下面是方法，首先是init初始化方法，这个方法是用于遍历制定的DOM下的子节点，按照固有的规则或约定，将HTML元素的引用付给相对应的属性。并控制guider是否显示。
其次是initGuiderEvent初始化向导事件方法，给向导的每一个条目注册事件。
再次是 beforeShow，afterShow，showItem,hideItem，focusGuider，blurGuider这六个虚方法，这六个方法是需要在继承与switchable这个类的子类里面按照需要重写的方法，在guiderClickEvent这个事件方法中调用了上述的几个方法，这里用的是一个简单的模板方法模式。
最后的就是showNext和showPreview这两个通用的显示下一个和显示上一个方法。同样调用的是上述的六个虚方法的组合。
下面我们就在此基础上实现标签页控件。
var tabcomponent = function(tabId){
othis.guiderStatus = true;
othis.init(tabId);
}
tabcomponent.prototype = new switchable();
tabcomponent.prototype.showItem = function(i){
othis.resetPanelStatus();
othis.panelDoms[i].style.display = 'block';
}
tabcomponent.prototype.hideItem = function(i){
othis.panelDoms[i].style.display = 'none';
}
tabcomponent.prototype.focusGuider = function(i){
othis.resetGuiderStatus();
othis.guiderDoms[i].className = 'active';
}
tabcomponent.prototype.blurGuider = function(i){
othis.guiderDoms[i].className = '';
}
tabcomponent.prototype.resetPanelStatus = function(){
ofor(var i in this.panelDoms){
othis.hideItem(i);
o}
}
tabcomponent.prototype.resetGuiderStatus = function(){
ofor(var i in this.panelDoms){
othis.blurGuider(i);
o}
}首先设置guideStatus为true，让guider为显示状态。然后我们重写了showItem，hideItem，focustGuider，blurGuider这四个方法，这里没有添加特殊的效果，showItem就是设置相对应的Dom的显示值为block，hideItem则是none。同样我们还添加了两个方法，resetPanelStatus和resetGuiderStatus两个方法，用于每次显示前重置相关的元素的显示状态。实现就是这么的简单。同样幻灯片控件大家可以看一下源码，也是比较简单。
var slidecomponent = function(id){
othis.guiderStatus = true;
othis.timer = null;
othis.delayTime = 3000;
othis.init(id);
othis.slideInit();
}
slidecomponent.prototype = new switchable();
slidecomponent.prototype.slideInit = function(){
othis.panel.style.width = $$(this.panelDoms[0]).css('width');
othis.panel.style.height = $$(this.panelDoms[0]).css('height');
othis.panelHeight = parseInt(this.panel.style.height);
othis.timer = setInterval(dk.bind(this,this.showNext),this.delayTime);
}
slidecomponent.prototype.beforeShow = function(){
oclearInterval(this.timer);
}
slidecomponent.prototype.afterShow = function(){
othis.timer = setInterval(dk.bind(this,this.showNext),this.delayTime);
}
slidecomponent.prototype.showItem = function(i){
omo(this.panel).animate({'scrollTop':this.panelHeight*i},mo.fast);
}
slidecomponent.prototype.resetGuiderStatus = function(){
ofor(var i in this.panelDoms){
othis.blurGuider(i);
o}
}
slidecomponent.prototype.focusGuider = function(i){
othis.resetGuiderStatus();
othis.guiderDoms[i].className = 'active';
}
slidecomponent.prototype.blurGuider = function(i){
othis.guiderDoms[i].className = '';
}写到这里这篇文章也就写完了，当然这只是一个雏形，要想提高开发效率，肯定得继续进行大量的完善工作，比如guider绑定的事件类型应该也是可以定制的，方法模板也可能需要进一步的完善，对dom结构的定制性也需要进一步的完善。
甚至我们还可以维护一个dragable对象，只要继承了dragable对象，实现了相应的接口，我们的标签页控件里面就变成一个可拖动的标签页，想想是不是很有意思呢。
这里只是先提供了一个思路，希望对大家在往后的开发中能有一点抛砖引玉的作用，大家有什么观点请不吝赐教。
源代码都在演示页面里面啦，就不再打包上传啦，大家要是想看直接看页面源代码九成，包涵。
转载请注明原文出处《Javascript以面向对象的思路实现可切换的页面控件》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。
[…] Javascript以面向对象的思路实现可切换的页面控件 | DKlogs — 设计 | 生活 […]
[回复]
“标签页控件，轮播的幻灯控件，还有土豆网下面那种用滚动条控制的一行影片列表等等。其实这些页面控件它们实际上的行为都很类似，所以我们这里讨论的其实是一类控件，我给它取了一个名字叫“可切换”控件。”这句话非常地同意！
[回复]