JavaScript：


slideshow = {
    current:0, // 當前幻燈片編碼
    init:function(){
        // 初始化和設置事件處理函數(shù)
    },
    show:function(e){
        // 事件監(jiān)聽器
    },
    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）
現(xiàn)在，在適當?shù)奈恢梦覀冇兴械姆椒üぞ撸约爱敶翱谳d完時被調(diào)用的 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 的元素，如果沒有被定義則不執(zhí)行余下的方法。 
第5和6行，檢索列表項及列表項的個數(shù)，并分別儲存在屬性 items 和 all 里。 
第7行，檢測是否超多一個列表項，如果不超多則不執(zhí)行余下的。 
第8行，添加 js 樣式類名到列表上，從而隱藏列表項和應該不同的樣式。 
第9行，調(diào)用 createNav()，并提供這個列表作為參數(shù)。 
第12行，調(diào)用 show() 用來顯示預定義了 current 屬性的滑動門。 
createNav() 方法使用 DOM 腳本創(chuàng)建幻燈片正常工作所需的 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行，剛開始創(chuàng)建一個 P 元素，用來包含整個幻燈片導航，并應用一個名為 slidenav 的 class。 
第4和5行，創(chuàng)建一個新的鏈接元素，儲存在叫 prev 的屬性中，設置 href 屬性為 #。使鏈接顯示為一個真正的鏈接且鍵盤可用，是有必要的。 
第6行，創(chuàng)建一個新的文本標簽。 
第7行，將文本標簽添加到鏈接上。 
第8行，添加一個事件處理函數(shù)，指向 show() 監(jiān)聽方法。 
第9行，將新的鏈接添加到 段落上。 
第10行，開始計數(shù)器，我們創(chuàng)建一個 SPAN 元素，并用 count 屬性儲存他。 
第11行，創(chuàng)建一個新的文本節(jié)點，顯示當前幻燈片在總數(shù)中的位置。我們需要給當前的屬性增加 1，因為人類計數(shù)是從 1 開始而非從 0。 
第12行，將文本作為新的子節(jié)點，添加至 SPAN 上 。 
第13行，將 SPAN 元素 添加到段落上。 
第14至19行，基本上是復制 4 到 9 行，這次重新創(chuàng)建鏈接唯一不同的是文本標簽，他儲存在 next 屬性上。 
第20行，將最近創(chuàng)建的段落插入到文檔中初始的圖片列表前。 
這些被創(chuàng)建的所有標記都是必要的，最后剩下的是去定義一個當鏈接被點擊時調(diào)用的監(jiān)聽方法 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行，得到作為參數(shù) e 的當前事件對象，這是稍后調(diào)用的 cancelClick() 唯一需要。 
第2行，檢測點擊的元素是否是向下或者向前鏈接（this 由 addEvent() 返回）。 
第3行，從當前顯示的幻燈片上移除 current 的 class。由于現(xiàn)在有一個被點擊的鏈接，這將成為可能。 
第4行，通過比較 this 和 next 屬性，決定 current 的計數(shù)器是應該增加還是減少。 
第5行，修正計數(shù)器。 
第6到11行，確定計數(shù)器將永遠不會超出范圍，當你在第一幻燈片并點擊了向前的鏈接，將設置他為最后一個，而當你在最后一個幻燈片，點擊了向后的鏈接，將設置為第一個。 
第13和14行，生成一個新的計數(shù)器文本并替代舊的。 
第15行，通過設置名為 current 的 class，顯示新的當前幻燈片。 
第16行，通過調(diào)用 cancelClick() 阻止鏈接的默認行為。 
這些是腳本的所有內(nèi)容?，F(xiàn)在這個腳本可以工作，但仍不是真正可維護的。

第五步：輕松維護（Easing Maintenance）
腳本功能齊全，分離式而且無懈可擊。真正的問題是，現(xiàn)在并不方便維護。

腳本應用的最大的問題大概是，并不是所有的維護者都懂 JavaScript 和愿意在你的腳本中尋找需要修改的部分。

為了避免維護者做這些，最安全的方法就是把腳本和 CSS 中使用的命名和 ID 從你的腳本功能中分離出來。此外，從使用的腳本中分離出文本標簽也是個好點子，因為他們可能會改變。例如，當腳本使用其他語言本地化時。

工具方法的復用

第一件要做的事情就是，從主要腳本中分離出其他腳本也可以再用的工具函數(shù)。這也許是大部分 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 —— 外觀

最新評論