前文介绍了:
1
2
本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编写。
其实javascript不是一门简单的语言,但是由于入门简单,很多人使用的时候,都是直接复制粘贴,导致网页中充斥着大量的冗余代码。
但是在编写合格的javascript代码时,需要注意:
1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问
2 分离javascript:把html与javascript分离,有助于后期代码的维护
3 向后兼容性:确定老版本的浏览器不会因为脚本禁止而死掉
4 性能考虑:确定脚本执行的最优
编写优化的代码
针对前一篇中的相册的代码,这里主要修改的地方是把onclick方法删除,在页面加载时,利用onload方法,动态的为a标签添加onclick方法。
以前的onclick标签处,是这样的:
执行脚本处,是这样的:
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。然后动态的添加方法:
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
上面部分的代码,添加了很多的安全性检查和兼容性,另外一个就是优化onload方法。
效果与前篇类似,全部代码如下: