《DOM編程藝術》中初步實現的圖片庫的總結（二）

阿羅發布于2019-08-19 18:32 / 3400人閱讀

摘要：前言在編程藝術中初步實現的圖片庫的總結一中，有很多不足之處比如事件處理嵌套在中，顯得如此笨重和屌絲沒有對函數進行相應的安全檢查等，本篇文章對上述問題做了全面的升級。

前言：在《DOM編程藝術》中初步實現的圖片庫的總結（一）中，有很多不足之處：比如事件處理嵌套在HTML中，顯得如此笨重和屌絲；沒有對showPic函數進行相應的安全檢查等，本篇文章對上述問題做了全面的升級。
－－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－

1.首先要把HTML部分進行改造

去掉嵌套在HTML中的事件處理代碼，并且為了js能操作

電影天堂

選擇一張圖片

2.獲取

標簽中的節點a，遍歷并且綁定事件處理

    function prepareFilm(){
        if(!document.getElementsByTagName){
            return false;
        }
        if(!document.getElementById){
            return false;
        }
        if(!document.getElementById("filmlist")){
            return false;
        }
        var list = document.getElementById("filmlist");
        var links = list.getElementsByTagName("a");
        for(var i = 0; i
3.本例非必需：共享onload事件
本例中必須執行prepareFilm函數才能對onclick事件進行綁定，但是這個函數又不能在HTML文檔加載之前執行，網頁加載完畢時會觸發一個onload事件，但是需要執行的函數有多個逐一添加又麻煩，而且后續的函數會覆蓋上一個，所以就有必要封裝一個addLoadEvent函數把將要執行的函數作為參數傳進去，
    //共享onlond事件，封裝成一個函數,@func是頁面加載時需要執行的那個函數。
    //如果window.onload在頁面加載時還沒有綁定任何函數，就把需要執行的函數添加給它、
    //如果這個處理函數已經綁定了函數，就把新函數追加到現有指令的末尾
    function addLoadEvent(func){
        //把現有的window.onload存入變量oldonload
        var oldonload = window.onload;
        if(typeof window.onload != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }
但是這個時候還有一些bug，就是沒有對showPic函數進行必要的安全檢查，而showPic函數要被prepareFilm函數調用，假如它獲取不到圖片呢？
4.對showPic函數進行安全檢查
    function showPic(whichpic){
        if(!document.getElementById("placeholder")) return false;
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src" , source);
        if(document.getElementById("description")){
            var text = whichpic.getAttribute("title");
            var description = document.getElementById("description");
            description.firstChild.nodeValue = text;  
        }
        return true;
    }
但是還是有問題，就是此時prepareFilm函數做了一個假設：showPic函數肯定會正常返回，基于這一假設，prepareFilm函數在執行showPic函數時就會提前返回一個true，從而取消了onclick事件的默認行為。所以是否要返回一個false值取消onclick默認行為，應該由showPic函數決定，圖片切換成功返回true，圖片切換失敗，返回false。
所以此時應該把prepareFilm函數最后兩句改為：return !showPic(this);
5.添加更多的檢查
（1）假設每個鏈接都有title屬性，假如不存在把text值設置為空；
（2）placeholder是否存在？假設那是一張圖片（本例中它確實是圖片），為了驗證這個情況，可以用nodeName屬性增加這一項測試。
下面是添加更多的檢查之后的showPic函數代碼：
    function showPic(whichpic){
        if(!document.getElementById("placeholder")) return false;
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        if(placeholder.nodeName != "IMG") return false;
        placeholder.setAttribute("src" , source);
        if(document.getElementById("description")){
            var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
            var description = document.getElementById("description");
            if(description.firstChild.nodeType == 3){
                description.firstChild.nodeValue = text; 
            } 
        }
        return true;
    }
6.調用addLoadEvent函數
    //在頁面加載完成后調用prepareFilm函數
    addLoadEvent(prepareFilm);
7.完整代碼
老規矩，上完整源碼




    
    example
    



    電影天堂
    
        
            灰姑娘
        
        
            千與千尋
        
        
            哆啦A夢
        
        
            當幸福來敲門
        
    
    
    
    
    選擇一張圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79684.html

《DOM編程藝術》中初步實現的圖片庫的總結（一）

摘要：灰姑娘灰姑娘灰姑娘不足點擊事件綁定在代碼中，很笨重，下一篇中將做升級。前言：在《DOM編程藝術》一書中，作者給出了一個實例：創建一個圖片庫，其實功能很簡單，就是點擊某個列表項時，下方出現相應的圖片以及圖片說明（圖片說明事先以title的形式寫在HTML中），雖然是一個簡單的例子，當時作者在書中循序漸進，不斷的改善圖片庫中間引入各種知識點，真的是一本好書，在此對這個實例進行一些總結。 ...

Yi_Zhi_Yu 2019-08-19 18:31 評論0 收藏0
DOM事件總結（一）

摘要：三級事件處理程序級事件定義了兩個方法，分別用于處理指定和刪除事件處理程序的操作和，他們都接收三個參數要處理的事件名作為事件處理程序的函數一個布爾值。布爾值如果是表示在捕獲階段調用事件處理程序，如果是表示在冒泡階段調用事件處理程序。前言：擼完CSS－DOM緊接著來擼DOM事件，事件總結完成后我要開始總結動畫，然后用純JS實現一個輪播圖，前路漫漫，還有各種框架等著我～～～本篇主要內容有：...

hedge_hog 2019-08-19 18:32 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（二）

摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。前言：接上篇，本篇有兩個內容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始！！！－－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....

amc 2019-08-29 10:54 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（二）

摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。前言：接上篇，本篇有兩個內容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始！！！－－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....

yangrd 2019-08-19 18:32 評論0 收藏0
《DOM編程藝術》中CSS—DOM的總結（三）

摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。－－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

王巖威 2019-08-29 10:54 評論0 收藏0