第一步：分析問(wèn)題（Analizing the problem）
創(chuàng)建一個(gè)好的腳本，第一步應(yīng)該是去分析哪些是你要完成的：我們想要?jiǎng)?chuàng)建一個(gè)照片的幻燈片效果，并且我們想要保持維護(hù)的方便。

如何創(chuàng)建一個(gè)幻燈片效果

在一個(gè)網(wǎng)站上擁有幻燈片有幾種方法：

在文檔中包含所有的圖片。
當(dāng)他運(yùn)行在無(wú) JavaScript 狀態(tài)，這是一個(gè)安全的選擇。而且，當(dāng)頁(yè)面被載完，所有的圖片也會(huì)將被載完。然而，這個(gè)方式只適用于少量的圖片。

在文檔中包含第一張圖片，并且有一個(gè)創(chuàng)建幻燈片功能的服務(wù)器端腳本。
這也是相當(dāng)安全的，但是對(duì)于終端用戶來(lái)說(shuō)，這是非常令人厭煩的——因?yàn)槲也幌爰虞d整個(gè)頁(yè)面，僅想得到下一張照片。但對(duì)頁(yè)面展示和廣告點(diǎn)擊比較有效，這也是為什么大量的新聞?wù)军c(diǎn)使用這個(gè)方法。

在文檔中包含第一張圖片，并按需加載其他圖片。
這個(gè)方法令你厭煩的是，必須依賴于 JavaScript ，并且要有一個(gè)維護(hù)照片列表的 JavaScript 數(shù)組。你還需提供一個(gè)加載指示器，用來(lái)顯示用戶一些正在發(fā)生的事情。

在我們的案例中，我們采取下面的圖片列表，用向前和向后的按鈕把他變成一個(gè)幻燈片效果，并且一個(gè)指示器告訴我們，照片總數(shù)中的哪張照片是當(dāng)前顯示的。

<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
最后的輸出會(huì)看起來(lái)像例子中的幻燈片效果。

依賴關(guān)系檢查

我們這里有一些元素依賴于 JavaScript 生成：文字指示器和向前和向下的鏈接。為了保持我們解決方法的可用性，我們需要確保一些事情：

僅當(dāng) JavaScript 可用（用戶信賴我們提供給他們使用的功能）時(shí)，這些元素應(yīng)該出現(xiàn)。一個(gè)鏈接，不能做任何違反用戶對(duì)我們的信任的事情。
不論輸入設(shè)備（讓我們不要依賴用戶是否有鼠標(biāo)），交互式元素都應(yīng)該可用。
圖片不應(yīng)該被隱藏，除非使用者能再次訪問(wèn)他們。在技術(shù)上，僅顯示第一張圖片，且沒(méi)有向前和向后的鏈接是預(yù)留退路的做法，但是為什么要用戶已下載所有的圖片僅只看到第一張？
第二步：規(guī)劃腳本（Planning the Script）
一旦你已經(jīng)評(píng)估了問(wèn)題，并挑選出你想使用的解決方法，你便可以開(kāi)始規(guī)劃腳本。本質(zhì)上，我們的腳本應(yīng)該做這些：

檢查幻燈片列表是否存在，并且包含一些圖片（有理由為一張圖片創(chuàng)建一個(gè)幻燈片效果嗎？）。
隱藏所有的照片，但不是第一個(gè)。
創(chuàng)建向前和向后的鏈接，和一個(gè)顯示我們?cè)谀牡闹甘酒鳌?
添加事件處理程序，使鏈接增加或減少當(dāng)前顯示的圖片編號(hào)。
確保幻燈片效果沒(méi)有超出范圍，當(dāng)圖片編號(hào)小于 0 ，他應(yīng)該變?yōu)樽詈笠粡垐D片，反過(guò)來(lái)類似。
不同的功能處理

我們有一些方法處理這個(gè)問(wèn)題。其中之一是使用 DOM 遍歷每個(gè) LI 條目并隱藏他。在這個(gè)事件監(jiān)聽(tīng)函數(shù)，我們先隱藏先前顯示的 LI （如果有的話），并顯示當(dāng)前的這個(gè)。

注：顯示和隱藏代替圖片的 LI 更有意義，因?yàn)樗试S維護(hù)者在每個(gè)幻燈片上添加其他的元素，比如，一些標(biāo)題。

這個(gè)方法的問(wèn)題在于，我們?cè)?JavaScript 中做必要的樣式改變，這意味著如果有需要比剛才我們腳本中改變 display 從 block 到 none 更復(fù)雜的樣式改變，將使腳本變得更雜亂（沒(méi)有從行為中分離表現(xiàn)）。

樣式留給 CSS 解析器

更簡(jiǎn)潔的方法是將所有的外觀改變（在所有列表項(xiàng)下載完之后隱藏某些）都留給瀏覽器的 CSS 解析器。在我們的例子中，我們可以在幻燈片中使用一個(gè) CSS 規(guī)則很容易地隱藏所有的列表項(xiàng)，并用一個(gè)特定的 class 重寫當(dāng)前條目的樣式。

HTML：

<ul id="slideshow">
<li><img src="img/flat1.jpg" alt="Hallway" /></li>
<li><img src="img/flat2.jpg" alt="Hob" /></li>
<li><img src="img/flat3.jpg" alt="Bathroom" /></li>
<li><img src="img/flat4.jpg" alt="Living Room" /></li>
<li><img src="img/flat5.jpg" alt="Bedroom" /></li>
</ul>
CSS：

#slideshow li{
display:none;
}
#slideshow li.current{
display:block;
}
唯一的問(wèn)題是，如果我們使 CSS 和 JavaScript 不可用，訪客將永遠(yuǎn)不能訪問(wèn)到其他圖片。因此，我們需要僅當(dāng) JavaScript 可用時(shí)，應(yīng)用這些樣式。技巧是，當(dāng) JavaScript 可用，在幻燈片的 UL 上應(yīng)用 class ，例如名為 js 。這允許我們僅當(dāng) JavaScript 可用時(shí)，顯示效果，通過(guò)在 CSS 中簡(jiǎn)單的修改：

CSS：

#slideshow.js li{
display:none;
}
#slideshow.js li.current{
display:block;
}
這個(gè) class 的鉤子（hook）也能被用來(lái)對(duì)幻燈片的靜態(tài)和動(dòng)態(tài)版本提供一個(gè)完全不同的外觀。

我們所有的腳本需要做的是，通過(guò)移除或添加 current 的 class 來(lái)顯示和隱藏當(dāng)前及以前的照片。

為了確保我們的腳本將不會(huì)影響同一頁(yè)面上的其他腳本，我們將創(chuàng)建一個(gè)主要的對(duì)象，并在其上構(gòu)造所有的方法和屬性。這可以確保我們的 init() 函數(shù)將不會(huì)被覆蓋或覆蓋其他任何相同名字的函數(shù)。

JavaScript:

slideshow = {
current:0, // 當(dāng)前幻燈片編碼
init:function(){
// 初始化和設(shè)置事件處理函數(shù)
},
show:function(e){
// 事件監(jiān)聽(tīng)器
}
}
第三步、基本的工具方法（ Essential Tools）
現(xiàn)在，我們有了規(guī)劃和建立我們腳本的框架。是時(shí)候思考我們需要完成這個(gè)功能的一些工具方法。在其最低要求的情況下，DOM 腳本的幫助庫(kù)應(yīng)該包括：

一個(gè)注冊(cè)事件處理函數(shù)的方法，我們目前將使用 John Resig 的 addEvent() 方法。
添加和移除 CSS 樣式名的方法。
一個(gè)覆蓋 HTML 元素默認(rèn)行為的方法。我們不希望出現(xiàn)鏈接的目標(biāo)頁(yè)，而僅是執(zhí)行腳本。
我們添加這些工具方法到主要的對(duì)象上，并準(zhǔn)備開(kāi)始：

JavaScript：

slideshow = {
current:0, // 當(dāng)前幻燈片編碼
init:function(){
// 初始化和設(shè)置事件處理函數(shù)
},
show:function(e){
// 事件監(jiān)聽(tīng)器
},
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();
}
}
}
當(dāng)文檔完全載完，第一件事情就是需要執(zhí)行 init() 方法：

JavaScript：

slideshow = {
current:0, // 當(dāng)前幻燈片編碼
init:function(){
// 初始化和設(shè)置事件處理函數(shù)
},
show:function(e){
// 事件監(jiān)聽(tīng)器
},
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)在，在適當(dāng)?shù)奈恢梦覀冇兴械姆椒üぞ撸约爱?dāng)窗口載完時(shí)被調(diào)用的 init() ，我們可以開(kāi)始具體化此方法。

注：這僅是 init() 方法，而不是整個(gè)腳本。因?yàn)橛行刑?hào)，復(fù)制并粘貼腳本將會(huì)導(dǎo)致錯(cuò)誤。

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

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

腳本應(yīng)用的最大的問(wèn)題大概是，并不是所有的維護(hù)者都懂 JavaScript 和愿意在你的腳本中尋找需要修改的部分。

為了避免維護(hù)者做這些，最安全的方法就是把腳本和 CSS 中使用的命名和 ID 從你的腳本功能中分離出來(lái)。此外，從使用的腳本中分離出文本標(biāo)簽也是個(gè)好點(diǎn)子，因?yàn)樗麄兛赡軙?huì)改變。例如，當(dāng)腳本使用其他語(yǔ)言本地化時(shí)。

工具方法的復(fù)用

第一件要做的事情就是，從主要腳本中分離出其他腳本也可以再用的工具函數(shù)。這也許是大部分 JavaScript 庫(kù)的開(kāi)始。

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 —— 外觀

下一步要做的是，分離外觀的 class 和 ID 到一個(gè)單獨(dú)的包含文件。保證他們?cè)?slideshow 命名空間里是安全的，因?yàn)槠渌_本不太可能用到他們。也不會(huì)妨礙寫一個(gè)簡(jiǎn)短的說(shuō)明注釋。

slideshow-css.js：

slideshow.css = {
/*
這些都是幻燈片效果中使用到的 classe 和 ID。
你可以在這里修改他們中的任何一個(gè)。
務(wù)必請(qǐng)使用引號(hào)包圍名稱，用逗號(hào)結(jié)尾（除了最后一個(gè)）。
*/

showID :'slideshow',
dynamicClass :'js',
slideNavigationClass :'slidenav',
currentClass :'current'
}
文本標(biāo)簽（Text labels）—— 解釋給終端用戶

最后但不是最不重要的，讓我們將文本標(biāo)簽放到一個(gè)單獨(dú)的包含文件，再次使用 slideshow 命名空間。

slideshow-labels.js：

slideshow.labels = {
/*
這些都是幻燈片效果中使用到文本標(biāo)簽。
你可以在這里修改他們中的任何一個(gè)。
務(wù)必請(qǐng)使用引號(hào)包圍名稱。
最后一個(gè)結(jié)尾不用逗號(hào)。
*/

previous : '<<',
next : '>>',
counterpider : ‘ of ‘
}
改變的主要腳本

然后，我們需要修改主要腳本使用此信息，而不是依賴嵌入式的數(shù)據(jù)。沒(méi)有太多的改變，很容易用搜索加替換就能做到。

slideshow.js：

slideshow = {
current:0,
init:function(){
if(document.getElementById && document.createTextNode){
var list =document.getElementById(slideshow.css.showID);
if(list){
slideshow.items = list.getElementsByTagName('li');
slideshow.all = slideshow.items.length;
if(slideshow.all > 1){
tools.addClass(list, slideshow.css.dynamicClass);
slideshow.createNav(list);
}
}
slideshow.show();
}
},
createNav:function(o){
var p = document.createElement('p');
tools.addClass(p, slideshow.css.slideNavigationClass);
slideshow.prev = document.createElement('a');
slideshow.prev.setAttribute('href', '#');
var templabel = document.createTextNode(slideshow.labels.previous);
slideshow.prev.appendChild(templabel);
tools.addEvent(slideshow.prev, 'click', slideshow.show);
p.appendChild(slideshow.prev);
slideshow.count = document.createElement('span');
templabel =document.createTextNode((slideshow.current+1) + slideshow.labels.counterpider + slideshow.all);
slideshow.count.appendChild(templabel);
p.appendChild(slideshow.count);
slideshow.next = document.createElement('a');
slideshow.next.setAttribute('href', '#');
var templabel = document.createTextNode(
slideshow.labels.next);
slideshow.next.appendChild(templabel);
tools.addEvent(slideshow.next, 'click', slideshow.show);
p.appendChild(slideshow.next);
o.parentNode.insertBefore(p, o);
},
show:function(e){
if(this === slideshow.next || this === slideshow.prev){
tools.removeClass(slideshow.items[slideshow.current],
slideshow.css.currentClass);
var addto = this === slideshow.next ? 1 : -1;
slideshow.current = slideshow.current + addto;
if(slideshow.current < 0){
slideshow.current = (slideshow.all-1);
}
if(slideshow.current > slideshow.all-1){
slideshow.current = 0;
}
}
var templabel = document.createTextNode((slideshow.current+1) + slideshow.labels.counterpider + slideshow.all);
slideshow.count.replaceChild(templabel, slideshow.count.firstChild);
tools.addClass(slideshow.items[slideshow.current], slideshow.css.currentClass);
tools.cancelClick(e);
}
}
tools.addEvent(window,'load',slideshow.init);
這些所有文件是確保將來(lái)維護(hù)者不用麻煩你就可以使用你的腳本工作所需要的。文件名應(yīng)該很明顯，是什么就是什么，并能隨著時(shí)間的推移，成為一個(gè)標(biāo)準(zhǔn)的腳本：

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com