javascript DOM编程艺术笔记——CH5 Best practise

best practise

best practise
graceful degredation平稳退化

unobtrusive javascript 分离javascript

backward compatibility 向后兼容浏览器

performace considerations 性能考虑

graceful degredation平稳退化

浏览器不支持，用户禁用javascript（弹窗等）；仍然能顺利浏览基本网页

作用：

SEO中的搜索机器人一般不懂javascript，优化排名需要平稳退化。

eg：

<a href="#" onclick="popUp(‘www.baidu.com’);return false;">EXAMPLE</a>

//优化后：

<a href="www.baidu.com" onclick="popUp(this.getAttribute('href'));return false;">
ex</a>

unobtrusive javascript 分离javascript

即把事件（event）如onclick都分离到js外部文件中。

利用class！

<a href="www.baidu.com" class="popUp">ex</a>

然后在js中用element.event=action…

e.g:

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.getAttibute("href"));
return false;
}
}
}

又因为document需要加载完毕后才能使用，

若script在head部分，则js先加载；若在前，则一起加载

都不能保证DOM完整。

而document是windows的一个属性。

hence，加上

“`

windows.onload = prepareLinks;

function prepareLinks(){

var links = document.getElementsByTagName(“a”);

for(var i = 0;i

backward compatibility 向后兼容（浏览器）

加一个if语句。

if（！method）return false;

注意 method去掉（）

performace considerations 性能考虑

少访问DOM(document.getElementById等等)

减少标记

合并和放置脚本

放置脚本在之前

压缩脚本

即删除不必要的字节（空格注释等）

工具：JSMin、雅虎的YUI Compressor、谷歌的Closure Compiler