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

best practise

---

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