JavascriptDOM编程艺术学习笔记2

来源:互联网 发布:万科弗农小镇 知乎 编辑:程序博客网 时间:2024/05/19 09:04

平稳退化:正确的使用JS脚本,可以让访问者在他们的浏览器不支持JS的 轻快下仍然顺利的浏览网站。
<a href ="http://www.example.com/" onclick="popUp(this.href;return false;)">example</a>
href属性设置成了真实存在的URL地址后。既是JS被禁用,这个链接也是可以用的,它并没有彻底失效。这是一个经典的“平稳退化“的例子。

结构与样式分离:作为CSS技术的突出优点,文档结构与文档样式的分离可以确保网页都能平稳退化。可以按照这种原则使用JS。
1,把文档里所有链接全放到一个数组里,
2,遍历数组
3,如果某个链接的class属性等于popUp,就表示这个链接在被点击时应调用popUp()函数。
于是,A.把这个恶恶链接的href属性值传递个popUp函数;B.取消这个链接的默认行为,不让这个链接把访问者带离当前窗口。

var links=document.getElementsByTagName("a");for (var i=0;i<links.length;i++){    if(links[i].getAttribute("class")=="popUp"){        links[i].onclick=function(){            popUp(this.getAttribute("href"));            return false;            }        }    }

以上代码将把调用popUp()函数的onclick事件添加到有关的链接上。只要把他们存入一个外部JS文件,就等于把这些操作从HTML文档里分离出来了。这就是分离JS的含义。
必须让这些代码在HTML文档全部加载到浏览器之后马上开始执行。
把JS代码打包在prepareLinks函数里,并把这个函数添加到window对象的onload 事件上去:

window.onload=prepareLinks;function prepareLinks(){for (var i=0;i<links.length;i++){    if(links[i].getAttribute("class")=="popUp"){        links[i].onclick=function(){            popUp(this.getAttribute("href"));            return false;            }        }    }}

避免使用document.write方法

性能考虑
1.尽量少访问DOM和尽量减少标记
不管什么时候,只要查询DOM中的某些元素,浏览器就会搜索整颗树。
2.合并脚本,放置脚本
把所有的<script>都放到文档的末尾,</body>标记之前,就可以让页面变得更快。
3.压缩脚本
几个代表性的压缩代码工具:
DouglasCrockford的JSMin
雅虎的YUICompressor
谷歌的ClosureComplier

0 0
原创粉丝点击