編寫兼容性JS代碼

時間 2019-11-19

原文原文鏈接

前文介紹了：javascript

　　1 DOM四個經常使用的方法css

　　2 使用DOM核心方法完成屬性填充html

本篇主要介紹在JS中須要注意的幾個地方，另外爲了減少html與javascript的耦合使用java進行onclick方法編寫。java

　　其實javascript不是一門簡單的語言，可是因爲入門簡單，不少人使用的時候，都是直接複製粘貼，致使網頁中充斥着大量的冗餘代碼。node

　　可是在編寫合格的javascript代碼時，須要注意：瀏覽器

　　1 平穩退化：保證在不支持js或者低版本的瀏覽器也能正常訪問安全

　　2 分離javascript：把html與javascript分離，有助於後期代碼的維護ide

　　3 向後兼容性：肯定老版本的瀏覽器不會由於腳本禁止而死掉函數

　　4 性能考慮：肯定腳本執行的最優性能

　　編寫優化的代碼

　　針對前一篇中的相冊的代碼，這裏主要修改的地方是把onclick方法刪除，在頁面加載時，利用onload方法，動態的爲a標籤添加onclick方法。

　　之前的onclick標籤處，是這樣的：

 <ul>
            <li>
                <a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
            </li>
            <li>
                <a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
            </li>
            <li>
                <a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
            </li>
            <li>
                <a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
            </li>
        </ul>

　　執行腳本處，是這樣的：

function showPic(whichPic){ var source = whichPic.getAttribute("href"); var placeHolder = document.getElementById("placeHolder"); placeHolder.setAttribute("src",source); var text = whichPic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; }

　　如今爲了不在html中涉及到過多的javascript代碼，即onclick事件，直接給ul設置一個id。而後動態的添加方法：

<ul id="imagegallery">
            <li>
                <a href="images/img1.jpg" title="test1">img1</a>
            </li>
            <li>
                <a href="images/img2.jpg" title="test2">img2</a>
            </li>
        </ul>

　　javascript的代碼以下：

function addLoadEvent(func){ var oldonload = window.onload; //若是onload尚未添加任何的方法，則把參數方法傳給它；不然在它的函數方法後面，在添加方法
                if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } 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 = gallery.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this)?false:true; } //若是使用鍵盤迴車時，觸發onkeypresss()方法
                    //links[i].onkeypress = links[i].onclick;
 } } function showPic(whichPic){ //安全性檢查，若是沒有該節點，直接返回false
                if(!document.getElementById("placeHolder")) return false; var source = whichPic.getAttribute("href"); var placeHolder = document.getElementById("placeHolder"); //檢查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"); //文本節點的節點類型是3
                    if(description.firstChild.nodeValue == 3){ description.firstChild.nodeValue = text; } } return true; } addLoadEvent(prepareGallery);

　　上面部分的代碼，添加了不少的安全性檢查和兼容性，另一個就是優化onload方法。

　　效果與前篇相似，所有代碼以下：

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>個人相冊</title>

         <style type="text/css"> body { font-family: "Helvetica","Arial",sans-serif; color: #333; background-color: #ccc; margin: 1em 10%;
            } h1 { color:#333; background-color: transparent;
            } a { color:#c60; background-color: transparent; font-weight: bold; text-decoration:none;
            } li { float: left; padding: 1em; list-style: none;
            } img { clear:both; display: block;
            }
         </style>
    </head>
    <body>
        <h1>個人相冊</h1>
        <ul id="imagegallery">
            <li>
                <a href="images/img1.jpg" title="test1">img1</a>
            </li>
            <li>
                <a href="images/img2.jpg" title="test2">img2</a>
            </li>
        </ul>

        <img id="placeHolder" alt="image" src="images/img1.jpg"/>

        <p id="description">Choose an image.</p>

        <script type="text/javascript">

            function addLoadEvent(func){ var oldonload = window.onload; //若是onload尚未添加任何的方法，則把參數方法傳給它；不然在它的函數方法後面，在添加方法
                if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } 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 = gallery.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this)?false:true; } //若是使用鍵盤迴車時，觸發onkeypresss()方法
                    //links[i].onkeypress = links[i].onclick;
 } } function showPic(whichPic){ //安全性檢查，若是沒有該節點，直接返回false
                if(!document.getElementById("placeHolder")) return false; var source = whichPic.getAttribute("href"); var placeHolder = document.getElementById("placeHolder"); //檢查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"); //文本節點的節點類型是3
                    if(description.firstChild.nodeValue == 3){ description.firstChild.nodeValue = text; } } return true; } addLoadEvent(prepareGallery); </script>
    </body>
</html>