使用JavaScript创建可维护的幻灯片效果_Javascript教程(4)_H5之家

复制内容到剪贴板代码: 1: show:function(e){
2:    if(this === slideshow.next || this === slideshow.prev){
3:       slideshow.removeClass(slideshow.items[slideshow.current], 'current');
4:       var addto = (this === slideshow.next) ? 1 : -1;
5:       slideshow.current = slideshow.current + addto;
6:       if(slideshow.current < 0){
7:          slideshow.current = (slideshow.all-1);
8:       }
9:       if(slideshow.current > slideshow.all-1){
10:          slideshow.current = 0;
11:       }
12:    }
13:    var templabel = document.createTextNode((slideshow.current+1) + ' / ' + slideshow.all);
14:    slideshow.count.replaceChild(templabel, slideshow.count.firstChild);
15:    slideshow.addClass(slideshow.items[slideshow.current], ‘current’);
16:    slideshow.cancelClick(e);
17: },

第1行，得到作为参数 e 的当前事件对象，这是稍后调用的 cancelClick() 唯一需要。

第2行，检测点击的元素是否是向下或者向前链接（this 由 addEvent() 返回）。

第3行，从当前显示的幻灯片上移除 current 的 class。由于现在有一个被点击的链接，这将成为可能。

第4行，通过比较 this 和 next 属性，决定 current 的计数器是应该增加还是减少。

第5行，修正计数器。

第6到11行，确定计数器将永远不会超出范围，当你在第一幻灯片并点击了向前的链接，将设置他为最后一个，而当你在最后一个幻灯片，点击了向后的链接，将设置为第一个。

第13和14行，生成一个新的计数器文本并替代旧的。

第15行，通过设置名为 current 的 class，显示新的当前幻灯片。

第16行，通过调用 cancelClick() 阻止链接的默认行为。

这些是脚本的所有内容。现在这个脚本可以工作，但仍不是真正可维护的。

第五步：轻松维护（Easing Maintenance）

脚本功能齐全，分离式而且无懈可击。真正的问题是，现在并不方便维护。

脚本应用的最大的问题大概是，并不是所有的维护者都懂 JavaScript 和愿意在你的脚本中寻找需要修改的部分。

为了避免维护者做这些，最安全的方法就是把脚本和 CSS 中使用的命名和 ID 从你的脚本功能中分离出来。此外，从使用的脚本中分离出文本标签也是个好点子，因为他们可能会改变。例如，当脚本使用其他语言本地化时。

工具方法的复用

第一件要做的事情就是，从主要脚本中分离出其他脚本也可以再用的工具函数。这也许是大部分 JavaScript 库的开始。

tools.js：

复制内容到剪贴板代码: /* 辅助方法 */
tools = {
addEvent:function( obj, type, fn ) {
      if ( obj.attachEvent ) {
         obj['e'+type+fn] = fn;
         obj[type+fn] = function(){
            obj['e'+type+fn]( window.event );
         }
         obj.attachEvent( 'on'+type, obj[type+fn] );
      } else
         obj.addEventListener( type, fn, false );
      },
removeClass:function(o,c){
      var rep=o.className.match(' '+c)?' '+c:c;
      o.className=o.className.replace(rep,”);
},
addClass:function(o,c){
      var test = new RegExp("(^|\\s)" + c + "(\\s|$)").test(o.className);
      if(!test){o.className+=o.className?' '+c:c;}
},
cancelClick:function(e){
      if (window.event){
         window.event.cancelBubble = true;
         window.event.returnValue = false;
      }
      if (e && e.stopPropagation && e.preventDefault){
         e.stopPropagation();
         e.preventDefault();
      }
}
}