《Javascrip DOM 编程艺术》学习笔记-Chapter5

Chapter5 最佳实践

1.置疑一切 （为这个网站增加这种额外行为是否确有必要？）
如果要使用javascript，就要确认：这么做会对用户的浏览体验造成怎样的影响？如果用户的浏览器不支持javascript该怎么办？（这些问题的答案都要基于”用户至上“的原则）

2.平稳退化
网站访问者可能会遇到两个问题：使用的浏览器不支持Javascript；用户禁用它了。
解决办法是平稳退化，即虽然有些功能无法使用，但最基本的操作仍然能顺利完成。

对于这两点，我想说，企业应该根据自身产品的特点，用户人群来决定是否要极大限度地平稳退化；比如爱马仕网站，插入一例Javascript的特效，但只有浏览器版本较高的用户才能看到，这时就涉及到一个问题，要不要平稳退化。我觉得不用，因为基于该产品用户的特殊性，能买得起爱马仕的绝非普通人，而网站若是实施平稳退化开发兼容版本必将增加带宽，服务器维护成本。那么答案就很明显了。对于第二点，一般懂点技术的人才会关闭javascript，既然能关闭也能打开，关闭JS简直就是没事儿找事，一般人不会这么做。所以，企业在开发产品时，不必完全兼容所有浏览器，根据用户特点来决定兼容到哪一版本。

3."javascript:"伪协议
真协议：在因特网上的计算机之间传输数据包，如HTTP协议，FTP协议
本女汉子一般用来更改页面颜色，为了保护眼睛。方法是在浏览器地址栏里输入以下代码：

javascript:document.body.style.backgroundColor="rgb(199,237,204)";void(0);

这样一来，就不用下载神马护眼插件啦！

4.向CSS学习，结构与样式分离
利于维护和更新，容易理解，这一原则同样适用于行为层。

5.渐进渐强
就是用一些额外的信息层去包裹原始数据。

6.向后兼容
6.1对象检测

if(method){
statements
}

eg：

function myFunction(){
  if(document.getElementById){
      statements using getElementById;
    }  
}

更简洁的办法:

if(!getElementById) return false;

测试多个方法是否存在：

if(!getElementById || getElementByTagName) return false;

6.2浏览器嗅探技术（browser sniffung)
用来测试Javascript脚本里的某个方法或属性是否真实存在；

7.性能考虑
7.1尽量少访问DOM和尽量减少标记
在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数。
另一个需要注意的地方，就是要尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。

7.2合并和放置脚本

7.3压缩脚本
删除不必要的字节，如空格，注释等。
精简后的代码不易看出，最好有两个版本，一个是工作副本，一个是精简副本（min)