最佳实践

平稳退化

在javascript被禁用的时候，依然可以浏览网站。

渐进增强

将样式和js分离出来，外部的文件link到html里。

分离JavaScript

之前的JavaScript代码和html文档已经分离的很开了。负责完成实际任务的js函数都已经存入外部的文件了，问题出现在内嵌的事件处理函数中。

类似于style属性，在文档里使用onclick属性也是一种既没有效率又容易引发问题的做法。**如果我们使用一个“挂钩”，就像CSS里class或id属性那样，把JavaScript代码调用行为和HTML文档分离开，网页会简单的多。

<a href="http://www.example.com/" class="popup">Example</a>

如果上述语句来表明当这个链接被点击，调用popup（）函数：

window.onload = prepareLinks;
function prepareLinks(){
    var links = doucument.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也保存到外部的js里：

function popUp(URL){
    window.open(URL,"popup","width=320,height=480");
}

性能考虑

• 尽量少访问DOM和尽量减少标记。
• 合并脚本，使用外部文件。
• 压缩脚本

压缩脚本：删除不必要的字节，空格注释，可以使用工具。应该有两个版本，一个是工作副本，可以修改代码添加注释；另一个是精简副本，放在站点上。**通常区分精简副本在名称上加min字样：

<script src="script/scriptName.min.js"></script>