使用 JavaScript 创建可维护的幻灯片效果代码第2/3页

JavaScript：


slideshow = {
    current:0, // 当前幻灯片编码
    init:function(){
        // 初始化和设置事件处理函数
    },
    show:function(e){
        // 事件监听器
    },
    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();
        }
    }
}

slideshow.addEvent(window,'load',slideshow.init);
第四步：脚本（The Script）
现在，在适当的位置我们有所有的方法工具，以及当窗口载完时被调用的 init() ，我们可以开始具体化此方法。

注：这仅是 init() 方法，而不是整个脚本。因为有行号，复制并粘贴脚本将会导致错误。


 1: init:function(){
 2:     if(document.getElementById && document.createTextNode){
 3:         var list = document.getElementById(' ');
 4:         if(list){
 5:             slideshow.items = list.getElementsByTagName('li');
 6:             slideshow.all = slideshow.items.length;
 7:             if(slideshow.all > 1){
 8:                 slideshow.addClass(list, 'js');
 9:                 slideshow.createNav(list);
10:            }
11:         }
12:         slideshow.show();
13:     }
14: },
第2行，检测 DOM 是否被支持。 
第3和4行，尝试检索 ID 为 slideshow 的元素，如果没有被定义则不执行余下的方法。 
第5和6行，检索列表项及列表项的个数，并分别储存在属性 items 和 all 里。 
第7行，检测是否超多一个列表项，如果不超多则不执行余下的。 
第8行，添加 js 样式类名到列表上，从而隐藏列表项和应该不同的样式。 
第9行，调用 createNav()，并提供这个列表作为参数。 
第12行，调用 show() 用来显示预定义了 current 属性的滑动门。 
createNav() 方法使用 DOM 脚本创建幻灯片正常工作所需的 HTML。


 1: createNav:function(o){
 2:     var p = document.createElement('p');
 3:     slideshow.addClass(p, 'slidenav');
 4:     slideshow.prev = document.createElement('a');
 5:     slideshow.prev.setAttribute('href', '#');
 6:     var templabel = document.createTextNode('<<');
 7:     slideshow.prev.appendChild(templabel);
 8:     slideshow.addEvent(slideshow.prev, 'click', slideshow.show);
 9:     p.appendChild(slideshow.prev);
10:     slideshow.count = document.createElement('span');
11:     templabel = document.createTextNode( (slideshow.current+1) + ' / ' + slideshow.all);
12:     slideshow.count.appendChild(templabel);
13:     p.appendChild(slideshow.count);
14:     slideshow.next = document.createElement('a');
15:     slideshow.next.setAttribute('href', '#');
16:     var templabel = document.createTextNode('>>');
17:     slideshow.next.appendChild(templabel);
18:     slideshow.addEvent(slideshow.next, ‘click', slideshow.show);
19:     p.appendChild(slideshow.next);
20:     o.parentNode.insertBefore(p, o);
21: },
第2和3行，刚开始创建一个 P 元素，用来包含整个幻灯片导航，并应用一个名为 slidenav 的 class。 
第4和5行，创建一个新的链接元素，储存在叫 prev 的属性中，设置 href 属性为 #。使链接显示为一个真正的链接且键盘可用，是有必要的。 
第6行，创建一个新的文本标签。 
第7行，将文本标签添加到链接上。 
第8行，添加一个事件处理函数，指向 show() 监听方法。 
第9行，将新的链接添加到 段落上。 
第10行，开始计数器，我们创建一个 SPAN 元素，并用 count 属性储存他。 
第11行，创建一个新的文本节点，显示当前幻灯片在总数中的位置。我们需要给当前的属性增加 1，因为人类计数是从 1 开始而非从 0。 
第12行，将文本作为新的子节点，添加至 SPAN 上 。 
第13行，将 SPAN 元素 添加到段落上。 
第14至19行，基本上是复制 4 到 9 行，这次重新创建链接唯一不同的是文本标签，他储存在 next 属性上。 
第20行，将最近创建的段落插入到文档中初始的图片列表前。 
这些被创建的所有标记都是必要的，最后剩下的是去定义一个当链接被点击时调用的监听方法 show() 。


 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();
        }
    }
}
CSS 的 class 和 ID —— 外观

最新评论