首頁 > 開發者 > JavaScript
javascript美術館（改進2） 一、javascript編程過程中的好習慣 1、實現預留退路 js被禁掉，圖片也可以顯示出來，href屬性帶有圖片路徑 複製代碼<script src="js/showPic.js"></script> <h1>Snapshots</h1> <ul id="imagegallery"> <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li> <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li> <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li> </ul>複製代碼通過專用的id，圖片的點擊顯示在單獨的js檔案中處理。 上面的代碼就做到了我們在編程過程中所說的預留退路。因為在上面的href連結 中，我們寫全了圖片的路徑，這樣即使使用者禁用了javascript，但是我們預留了退路，所以在沒有javascript“幹擾”的情況下，瀏覽器將沿著href屬性給出的串連前進，使用者看到了新圖片而不是“該頁無法顯示”之類的資訊。雖然這樣與javascript在當前頁面上進行切換的顯示效果略差，但是總比什麼都不顯示強很多。 2、實現分離javascript 外部檔案裡完成添加onclick事件處理函數的工作，那樣才能讓我們的html文檔沒有“雜質。 仍然是上面的代碼，把點擊圖片的js代碼全部放到了外部的js檔案中，這樣關聯起來全靠一個獨一無二的id號。 3、實現向後相容 進行必要的檢查,確保老瀏覽器不會因為我們的javascript指令碼而死機， 例如：if (!document.getElementsByTagName) return false //對象檢測，如果瀏覽器不支援，就立即退出，不執行。 二、搞懂了的問題 1、return false; <a href="javascript：showPic('images/coffee.jpg'); return false" title="A cup of coffee">Coffee</a>return false這個語句的作用，就是阻止瀏覽器的預設行為不發生 當點擊這個連結時，因為onclick事件處理函數所觸發的javascript代碼返回給它的值是false，所以這個連結 在被點擊時預設行為將不會發生。 同樣，onclick="showPic(this)；return false；"加了return false後可以不讓使用者被他們所點擊的連結帶到另一個圖片查看視窗去。 2、document.body(專用記號) 等價於一下： var body_element = document.getElementByTagName("body")[0]; 3、結構化設計原則 每個函數應該只有一個入口和一個出口。 4、如何將多個javascript函數綁定到onload事件處理函數上 法一：匿名函數 window.onload = function(){ firstFun(); secondFun(); } 法二： 自己編寫代碼（寫一個判斷函數） 如果未載入，就載入事件函數；如果已載入，則追加到後面。！！注意：要把window.onload事件處理函數的值放進oldonload中 複製代碼function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ //判斷頁面是否已載入 ，已載入的話就追加到後面 window.onload = func; }else{ window.onload = function(){ oldonload(); // func(); } }}複製代碼 三、javascript美術館（改進）全部代碼 gallery.html檔案 複製代碼<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style/css/gallery.css" type="text/css" /> <script src="js/showPic.js"></script> </head> <!-- 作者：1107989194@qq.com 時間：2014-04-14 描述：javascript美術館 預留位置、動態建立元素、 1、實現預留退路 （js被禁掉，圖片也可以顯示出來，href屬性帶有圖片路徑） 2、實現分離javascript（外部檔案裡完成添加onclick事件處理函數的工作，那樣才能讓我們的html文檔沒有“雜質） 3、實現向後相容（進行必要的檢查,向後相容性if (!document.getElementsByTagName) return false） --> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li><a href="images/01.jpg" title="01 display"><img width="100px" src="images/01.jpg" alt="01"/></a></li> <li><a href="images/02.jpg" title="01 display"><img width="100px" src="images/02.jpg" alt="01"/></a></li> <li><a href="images/03.jpg" title="01 display"><img width="100px" src="images/03.jpg" alt="01"/></a></li> </ul> </body></html>複製代碼css檔案 複製代碼*{ margin: 0; padding: 0; border: 0px; list-style: none;}body{ font-family:"arial, helvetica, 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;}ul{ padding: 0;}li{ float: left; padding: 1em; list-style: none;}#imagegallery{ list-style: none;}#imagegallery li{ display: inline;} #imagegallery li a img{ border: 0px;}複製代碼js檔案： 複製代碼/***********判斷頁面是否已載入事件的函數********************************/function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ //判斷頁面是否已載入 ，已載入的話就追加到後面 window.onload = func; }else{ window.onload = function(){ oldonload(); // func(); } }} /***********自訂函數 將元素插入到一個元素的後面************************/function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); }} /***************動態建立 預留位置 ***********************************/function preparePlaceholder(){ if(!document.createElement) return false; //對象檢測 如果瀏覽器不支援，則停止執行並返回false if(!document.createTextNode) return false; if(!document.getElementById) return false; if(!document.getElementById('imagegallery')) return false; var placeholder = document.createElement('img'); placeholder.setAttribute('id','placeholder'); placeholder.setAttribute('src','images/placeholder.jpg'); placeholder.setAttribute('width','400px'); placeholder.setAttribute('alt','my image gallery'); var description = document.createElement('p'); description.setAttribute('id','description'); var desctext = document.createTextNode('choose an image'); description.appendChild(desctext); var gallery = document.getElementById('imagegallery'); insertAfter(placeholder,gallery); insertAfter(description,placeholder);} /****************迴圈輸出所有的照片**********************************/function prepareGallery(){ if(!document.getElementById) return false; //對象檢測 if(!document.getElementsByTagName) return false; if(!document.getElementById('imagegallery')) return false; var gallery = document.getElementById('imagegallery'); //根據它的父級元素，找到所要的a標籤，縮短尋找事件（即使通過tagName可直接找到所有的a標籤） var links = gallery.getElementsByTagName('a'); for(var i =0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this); } links.onkeypress = links[i].onclick; }} /**************顯示圖片********************************************/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')) return false; if(whichpic.getAttribute('title')){ var text = whichpic.getAttribute('title'); }else{ var text = ''; } var description = document.getElementById('description'); if(description.firstChild.nodeType == 3){ description.firstChild.nodeValue = text; } return false;} addLoadEvent(preparePlaceholder);addLoadEvent(prepareGallery);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
