JavaScript DOM 9.24

最佳实践

平稳退化

在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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容