性能、JavaScript与html标签分离(代码与结构和内容分离)、平稳退化
2014-08-24 11:27
501 查看
性能
尽量减少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="images/1.jpg" title="1.jpg"><img src="images/1.jpg"/></a> </li> <li> <a href="images/2.jpg" title="2.jpg"><img src="images/2.jpg"/></a> </li> <li> <a href="images/3.jpg" title="3.jpg"><img src="images/3.jpg"/></a> </li> <li> <a href="images/4.jpg" title="4.jpg"><img src="images/4.jpg"/></a> </li> <li> <a href="images/5.jpg" title="5.jpg"><img src="images/5.jpg"/></a> </li> <li> <a href="images/6.jpg" title="6.jpg"><img src="images/6.jpg"/></a> </li> <li> <a href="images/7.jpg" title="7.jpg"><img src="images/7.jpg"/></a> </li> </ul>
接下来是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=text; } return true; }
无论如何,内容最重要。要保证在js被禁用的情况下,仍然可以浏览到内容。
相关文章推荐
- 平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库
- html: textarea会把开始标签到结束标签里的内容全部原样显示,包括空格和代码。
- phpcms数据源调用discuz贴子具体内容过滤html论坛discuz标签代码
- 2017年六月二日 NO.4 HTML(三)——处理内容的结构标签(笔记)
- 请写出用于校验HTML文本框中输入的内容全部为数字的javascript代码
- 如何使用JS脚本从HTML中分离图片标签与文本,替换文本中指定的内容并加粗(原创)
- 校验HTML文本框中输入的内容全部为数字的javascript代码
- struts2标签遍历时,显示内容忽略<html>代码问题
- javascript代码与html分离进阶
- 网站上的页面元素 Meta标签-关键字,描述,机器人和辅助功能标签页标题内容-定位整个副本的关键字的内容和支付链接-连接结构,ALT标签,文本链接的话和标题,页面上的各主要部分的关键字密度,HTML有
- PHP正则删除html代码中a标签并保留标签内容的方法[原创]_php技巧_脚本之家
- JavaScript 替换Html标签实现代码
- 最大限度地分离html和javascript代码
- HTML、css、JavaScript 代码分离
- [分享]从HTML中提取TITLE和BODY标签内容的代码
- Java发送带html标签内容的邮件实例代码
- js平稳退化,性能考虑(javascript DOM 编程艺术)
- Java后台去除前台传递数据中的页面标签(HTML,Javascript,Style),获取文本内容!
- javascript获取HTML标签中的内容的方法
- PHP采集指定HTML标签代码内容分享