首页 > 代码库 > 性能、JavaScript与html标签分离、平稳退化
性能、JavaScript与html标签分离、平稳退化
性能
尽量减少DOM访问和标记,减少document.getElementsByTagName()之类方法的使用,把这类方法返回的值存储在变量之中。
合并脚本、样式文件、图片文件等,一遍减少加载页面时的请求数量。
压缩脚本。
JavaScript与html标签分离
当我们添加动作时,会有个第一反应:
<div id="div1" onclick="doSomething(this)">Click here</div>
//这边是JavaScript的代码 function doSomething1(node){} function doSomething2(node){}
但这样是不科学的。当我们需要修改一系列类似的标签,他们有着类似的方法:
<div id="contain"> <div id="div1" onclick="doSomething1(this)">Click here</div> <div id="div2" onclick="doSomething1(this)">Click here</div> <div id="div3" onclick="doSomething1(this)">Click here</div> <div id="div4" onclick="doSomething1(this)">Click here</div> <div id="div5" onclick="doSomething1(this)">Click here</div> </div>
如果需要把其他方法(比如doSomething2())绑定给div4和div5的onclick事件,就需要面对一些繁琐的工作。
其实我们可以这个样子:
<div id="contain"> <div id="div1">Click here</div> <div id="div2">Click here</div> <div id="div3">Click here</div> <div id="div4">Click here</div> <div id="div5">Click here</div> </div>
window.onload=function(){ var divs=documen.getElementById("contain").getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ if(divs[i].getAttribute("id").replace("div","")<=3){ //判断是否是div1~div3 divs[i].onclick=doSomething1; }else{ divs[i].onclick=doSomething2; } } }
至此,若还需要对html页面中的元素进行动作添加、修改、删除,在js文件中进行就可以了。
平稳退化
需求:点击上方链接,下方区域出现图片,点不同的链接出现的图片不同。
<ul id="imagegallery"> <li> <a href=http://www.mamicode.com/"images/1.jpg" title="1.jpg">>接下来是js代码:
window.onload=function(){ //遍历ul中的li元素,事件绑定 if(!document.getElementsByTagName ||!document.getElementById ||!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); //这步很关键。<a>便签被点击后是会使页面跳转的,除非触发onclick事件后得到false的返回 //于是,若js正常执行,则点击<a>标签可看到图片 //若js被禁用,则点击<a>标签会发生跳转,同样可以看到图片 } } } 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")){ var text=whichPic.getAttribute("title"); var description=document.getElementById("description"); description.firstChild.nodeValue=http://www.mamicode.com/text;>无论如何,内容最重要。要保证在js被禁用的情况下,仍然可以浏览到内容。
性能、JavaScript与html标签分离、平稳退化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。