增强js代码提示_读书笔记《DOM编程艺术》平稳退化、渐进增强、向后兼容

这是本书第五章：最佳实践

如果js代码不符合语法规定，JS解释器（对Web应用而言就是浏览器）将拒绝执行它们并报错；而浏览器在遇到不符合语法规定的HTML代码时，则会千方百计地将其呈现出来。

平稳退化：确保网页在没有JS的情况下也能正常工作。

如果正确地使用了JS脚本，就可以让访问者在他们的浏览器不支持JS的情况下仍能顺利地浏览你的网站。这就是平稳退化，就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。

JS使用window对象的open( )方法来创建新的浏览器窗口。

window.open( url, name, features )

url: 想在新窗口里打开的网页的URL地址，如果省略，则会弹出一个空白的浏览器窗口。

name: 新窗口的名字。可以在代码里通过这个名字与新窗口进行通信。

features: 逗号分隔的字符串。新窗口的各个属性（尺寸、启用或禁用的各种浏览功能，工具条、菜单条、初始显示位置等） 原则：少而精

open( )方法是BOM的一个好案例，它的功能对文档的内容也无任何影响（DOM才可以影响）。这个方法只与浏览器环境有关。（这个例子就是window对象）

“javascript:” 伪协议

“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议、FTP协议等。

伪协议是一种非标准化的协议，“javascript:” 伪协议让我们通过一个链接来调用JS函数。

支持“javascript:” 伪协议的浏览器运行正常，

较老的浏览器会去尝试打开那个链接失败，

支持这种伪协议，但是禁用了JS功能的浏览器会什么也不做。

总之：在HTML文档中通过“javascript:” 伪协议调用JS代码的做法非常不好。

内嵌的事件处理函数

谁关心这个：搜索机器人是一种自动化的程序，它们浏览web的目的是把各种网页添加到搜索引擎的数据库里，各大搜索引擎都有类似的程序。目前只有极少数搜索机器人能够理解JS代码。所以如果你的JS网页不能平稳退化，它们在搜索引擎上的排名就可能大受伤害。

优化一下：

分离JS：把网页的结构和内容与JS脚本的动作行为分开。

CSS技术最大的优点是：它能够帮助你将web文档的内部结构（标记）和版面设计（样式）分离出来。

真正能从CSS技术获益的方法是：把样式全部转移到外部文件中去。

作为CSS技术的突出优点，文档结构与文档样式的分离可以确保网页杜能平稳退化。

具备CSS支持的浏览器固然可以把网页呈现的美轮美奂，不支持或者禁用了CSS功能的浏览器同样可以把网页的内容按照正确的结构显示出来。

渐进增强

“标记良好的内容就是一切”

CSS指令构成了一个表示层。这个表示层就像是一张透明的彩色薄膜，可以包裹到文档的结构上，使文档内容呈现出色彩，但即使去掉这个表示层，文档的内容也依然可以访问（只是缺乏色彩而已）。

所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。

按照“渐进增强”原则创建出来的网页几乎都符合“平稳退化”原则。

类似于CSS，JS和DOM提供的所有功能也应该构成一个额外的指令层。

CSS代码负责提供关于“表示”的信息，

JS代码负责提供“行为”的信息。

行为层的应用和表示层一样。

向后兼容性：确保老版本的浏览器不会因为你的JS脚本而死掉。

对象检测：检测浏览器对JS的支持程度。

解决方案：只要把某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true（这个方法存在），还是false来决定应该采取怎样的行动。这种检测称为对象检测。

浏览器嗅探技术

指通过提取浏览器供应商提供的信息来解决向后兼容问题。

但是这是一种风险非常大的技术。

浏览器会撒谎、多种浏览器导致浏览器嗅探版本越来越复杂、每当出现新版本时就不得不修改这些脚本。

浏览器嗅探技术正在被简单也更健壮的对象检测技术所取代。

性能考虑：确定脚本执行的性能最优。

尽量少访问DOM和尽量减少标记

访问DOM的方式对脚本性能会产生非常大的影响。

不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。

合并和方式脚本

包含脚本的最佳方式就是使用外部文件。

脚本在标记中的位置对页面的初次加载时间也有很大影响。

位于head块中的脚本会导致浏览器无法并行加载其他文件（如图像和其他脚本）

一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。在下载期间，浏览器不会下载其他任何文件。

把所有script标签都放在文档的末尾，body结束标签之前，就可以让页面变的更快。

压缩脚本

指的是把脚本文件中不必要的字节，如空格、注释统统删除，从而达到“压缩”文件的目的。

多数情况下，你应该有两个版本，一个是工作副本，可以修改代码并添加注释；

另一个是精简副本，用于放在站点上。最好在精简副本的文件名中加上.min字样。