【乾貨】JavaScript DOM編程藝術學習筆記4-6

標籤：span   研究   另一個   預設   source   載入   font   圖片   nod   

四、案例研究：JavaScript圖片庫

js:

function showPic(whichpic){

    //取得連結

   var source=whichpic.getAttribute("href");

   //取得佔位圖

   var placeholder=document.getElementById("placeholder");

   //改變佔位圖src屬性

  placeholer.setAttribute("src",source);

  //取得文字描述

  var text=whichpic.getAttibute("title");

  //取得佔位文字

   var description=document.getElementById("description");

   //改變佔位文字值

   description.firstChild.nodeValue=text;

}

在html中調用：

<a onclick="showPic(this); return false;"></a>

註：

nodeValue屬性:node.nodeValue節點的值，通常用這個屬性來擷取文本值，但要注意的是在<p id="description">text</p>中，description的值是null，它的第一個子節點firstChild的值才是text

nodeType屬性:節點的nodeType屬性返回的是數字，共有12種值，其中，元素節點是1，屬性節點是2，文本節點是3.

childNodes屬性:返回的是所有類型的節點，不僅是元素節點。

 

五、最佳實務

利用元素的class屬性，將事件處理函數從html中分離出來。

window.onload=prepareLinks;

function prepareLinks(){

   //擷取所有連結 

   var links=document.getElementsByTagName("a");

  //遍曆所有連結

  for(var i=0; i<links.length; i++){

     //找出對應類的連結

    if(links[i].getAttribute("class")=="popup"){

       //為對應類的連結執行事件處理函數

       links[i].onclick=function(){

          popUp(this.getAttribute("href"));

          return false;

       }

    }

  }

}

function popUp(winURL){

   //開啟一個新視窗顯示winURL,視窗名為popup，寬320，高480

   window.open(winURL,"popup","width=320,height=480");

}

 註：

平穩退化graceful degradation:讓一些不支援javacript的瀏覽器也能順利完成基本的操作。比如就算有事件處理函數，在連結中將a href設定成真實的URL。比如搜尋機器人searchbot基本都不能理解javascript代碼，如果不能平穩退化，搜尋排名就會受損。

漸進增強：用一些額外的資訊去包裹未經處理資料，按照漸進增強原則建立的網頁幾乎都能平穩退化。css代碼負責關於表示的資訊，javascript代碼負責行為的資訊，他們都應該表現為額外的指令層。

為什麼用window.onload來執行函數，而不是直接執行：不管js代碼放在頭部還是尾部，都有可能在指令碼載入時文檔還不完整，有些方法就不能正常工作。而document對象是window對象的一個屬性，當window對象觸發onload事件時，document對象已經存在。

向後相容：對象檢測object detection如果你不理解這個方法，請離開。if(!document.getElementById) return false;

效能考慮：盡量少訪問DOM和盡量減少標記數量；合并和放置指令碼，將代碼合并到一個js檔案中，可以減少載入頁面時發送的請求數量。另外，檔案如果放在head裡會導致瀏覽器無法並行載入其他檔案，一般放在文檔末尾body之前可以讓頁面變得更快；壓縮指令碼，有很多壓縮公用程式，引用壓縮版本，另一個在即添加註釋作為副本。

 

六、案例研究：圖片庫改進版

將圖片庫案例的事件處理函數從html中分離出來，並增加了對象檢測來保證平穩退化。

function prepareGallery(){

   //對象檢測

   if(!document.getElementsByTagName) return false;

   if(!document.getElementById) return false;

   if(!document.getElementById("imagegallery")) return false;

   //取得圖片連結大架構   

   var gallery=document.getElementById("imagegallery");

   //取得圖片連結

   var links=getElementsByTagName("a");

   //遍曆連結

   for(var i=0; i<links.length; i++){

      //對每個連結執行onclick事件，在佔位showPic

      links[i].onclick=function(){

          //showPic執行成功了返回false，阻止預設行為。失敗的話返回true，繼續執行預設行為，到連結地址

          return showPic(this)? false: true;

      }

   }

}

function showPic(whichpic){

  //對象檢測

   if(!document.getElementById("placeholder")) return false;

   //取出連結的href

   var source=whichpic.getAttribute("href");

   //獲得佔位圖元素

   placeholder=document.getElementById("placeholder");

   //檢測佔位元素是否是圖片元素

   if(placeholder.nodenName!="IMG") return false;

   //改變佔位圖地址為連結圖片

   placeholder.setAttribute("src",source);

   var description=document.getElementById("description");

   //有文字描述元素的話繼續執行

   if(description){

       //連結title屬性不存在的話賦值為空白

       var text=whichpic.getAttribute("title")? whichpic.getAttribute("title"): "";

       //改變文字表述為連結的title

       description.firstChild.nodeValue=text;

   }

   //函數執行成功的話，返回true

   return true;

}

註：

this ：是執行事件處理函數onclick時關聯的那個元素連結

onload事件：如果只有一個函數的話直接window.onload=function1;這種情況下再加一個函數的話window.onload=function2;只有最後的那個才會被實際執行。所以如果多個的話要整合一個addloadEvent，這樣每次要增加函數的話只用增加一條語句：addLoadEvent(func2);即可。

     function addLoadEvent(func){

        //把現有的處理函數值存入oldonload

         var oldonload=window.onload;

         //如果還沒有綁定任何函數，則把func添加給它

         if(!typeof oldonload!="function"){

            window.onload=func;

        }

        //如果已經綁定了函數，則新函數追加到末尾

        else{

           window.onload=function(){

              oldonload();

              func();

           }

        }

     }

DOM Core和HTML-DOM:

getElementById getElementsByTagName getAttribute setAttribute都是DOM Core，他們並不專屬於javascript ，任何支援DOM的語言都可以使用；另外它們的用途也不僅限於處理網頁，可以處理任何一種標記語言編寫的文檔。

HTML-DOM通常更短，用一個點比如用document.forms來代替document.getElementsByTagName("a")，用placeholder.src=sourc來代替placeholder.setAttribute("src",source)

 

【乾貨】JavaScript DOM編程藝術學習筆記4-6