JavaScript学习笔记 ——最佳实践

来源：互联网发布：淘宝晒单福利编辑：程序博客网时间：2024/06/05 08:46

最佳实践是人们做事时应该遵循的、被公认为和经过验证的的模式。虽然不唯一，甚至不是最佳的方式，但是是人们认同的做事的模式。

1.1 不唐突和渐进增强

有关不唐突的两个术语——“渐进增强（progressive enhancement）”和“平稳退化(graceful degradation)”.通过一些技术的实现，比如运用javascipt，如果浏览器支持，则可以得到某些增强的效果（渐进增强），如果浏览器不支持，文档被退化（平稳退化）。通过这种技术，支持不同功能的浏览器会获得同一文档的相同的信息量却不同的视图。

通过使用javasript不应该妨碍“内容的有效性和可访问性”。因此有必要提供一个较少依赖于javascript的平稳的退化方案。

1.2 让javascript运行起来

不成功的网站存在的缺陷：

1。<script>标签出现在<body>标签中。

2。依赖于浏览器的版本检测而不是能力检测来测试javascipt的兼容性。（这个缺陷比较普遍）

3。在锚元素的href属性中使用了硬编码的javascript的前缀。

4。多余的、重复的、高度定制的javascript代码。

1.2.1 将行为和结构分离

1.正确地包含javascript的代码，应该将<script>标签放到<head>标签中。这种方法仍然结构和行为混到一起，不过程度要轻一些。

2. 使用<script type="text/javascript" src="source.js"></scirpt>的方式，通过引入外部文件来包含javascript脚本。这种方式的好处是便于代码重用，页面的维护，同时减少了页面的大小。客户端浏览时会被Web浏览器缓存起来，而且只下载一次，从而减少后面页面的加载时间。

3.关于javascript前缀。

在使用严格型的DOCTYPE规范是，锚标签中的target属性是无效的如：

<a href="http://advanceddomscripting.com" target="_blank">AdvancED DOM Scripting</a>

通过javascript前缀实现：

function popup(url){

window.open(url)

}

</script>

<a href="javascript:popup('http://advanceddomscripting.com');">AdvancED DOM Scripting</a>

通过onclick事件实现

<a href="http://advanceddomscripting.com" onclick="this.href='javascript:popup(/'http://advanceddomscripting.com/');'">AdvancED DOM Scripting</a>

这几种方式都没有将结构和行为分离，而且在客户端禁用javascript的情况下，链接失效了。一种更好的方法是：

<a href="http://advanceddomscripting.com" onclick="popup(this.href); return false;">AdvancED DOM Scripting</a>

1.2.2 不要版本检测

版本检测根据浏览器的不同版本来完成不同的任务。如：

if(浏览器.版本号 == "aaa") {

//.................

} else if(浏览器.版本号 == "bbb"){

//..............

}

        如果新增了浏览器，则需要添加新的if/else语句。
       1.使用能力检测
           能力检测也叫对象检测，执行代码之前检测是否胡某个脚本对象或者方法，而还是依赖于浏览器的版本。如：
          if(浏览器.有a属性){
             //……
        } else if (浏览器.有b属性){
             //........

        } else {
              //.....
        }

这们则不必依赖于浏览器的版本。

1.2.3 通过平稳退化保证可访问性

不要使用javascript生成内容。网络爬虫可能无法执行javascript，用javascript生成的内容自然无法被它发现，因此可能错失被搜索引擎发现。因此，重要的内容不要用javascript生成。