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

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

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

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

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

在文檔中包含第一張圖片，并按需加載其他圖片。 
這個(gè)方法令你厭煩的是，必須依賴于 JavaScript ，并且要有一個(gè)維護(hù)照片列表的 JavaScript 數(shù)組。你還需提供一個(gè)加載指示器，用來顯示用戶一些正在發(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>
最后的輸出會看起來像例子中的幻燈片效果。

依賴關(guān)系檢查

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

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

檢查幻燈片列表是否存在，并且包含一些圖片（有理由為一張圖片創(chuàng)建一個(gè)幻燈片效果嗎？）。 
隱藏所有的照片，但不是第一個(gè)。 
創(chuàng)建向前和向后的鏈接，和一個(gè)顯示我們在哪的指示器。 
添加事件處理程序，使鏈接增加或減少當(dāng)前顯示的圖片編號。 
確?；脽羝Ч麤]有超出范圍，當(dāng)圖片編號小于 0 ，他應(yīng)該變?yōu)樽詈笠粡垐D片，反過來類似。 
不同的功能處理

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

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

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

樣式留給 CSS 解析器

更簡潔的方法是將所有的外觀改變（在所有列表項(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;
}
唯一的問題是，如果我們使 CSS 和 JavaScript 不可用，訪客將永遠(yuǎn)不能訪問到其他圖片。因此，我們需要僅當(dāng) JavaScript 可用時(shí)，應(yīng)用這些樣式。技巧是，當(dāng) JavaScript 可用，在幻燈片的 UL 上應(yīng)用 class ，例如名為 js 。這允許我們僅當(dāng) JavaScript 可用時(shí)，顯示效果，通過在 CSS 中簡單的修改：

CSS：


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

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

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

JavaScript:


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

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

JavaScript：


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

最新評論