编写兼容性JS代码
前文介绍了:
本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编写。
其实javascript不是一门简单的语言,但是由于入门简单,很多人使用的时候,都是直接复制粘贴,导致网页中充斥着大量的冗余代码。
但是在编写合格的javascript代码时,需要注意:
1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问
2 分离javascript:把html与javascript分离,有助于后期代码的维护
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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。