File tree Expand file tree Collapse file tree 1 file changed +7
-7
lines changed Expand file tree Collapse file tree 1 file changed +7
-7
lines changed Original file line number Diff line number Diff line change 1
1
# DOM和浏览器中的模式
2
2
3
- 在本书的前面几章中,我们主要关注了JavaScript核心(ECMAScript),并没有涉及太多关于在浏览器中使用JavaScript的内容。在本章,我们将探索一些在浏览器环境中的模式,因为这是最常见的JavaScript程序环境。浏览器脚本编程也是大部分不喜欢JavaScript的人对这门语言的认知。这当然是可以理解,因为在浏览器中有非常多不一致的宿主对象和DOM实现。很明显,任何能够减轻客户端脚本编程的痛楚的最佳初中都是大有益处的 。
3
+ 在本书的前面几章中,我们主要关注了JavaScript核心(ECMAScript),并没有涉及太多关于在浏览器中使用JavaScript的内容。在本章,我们将探索一些在浏览器环境中的模式,因为这是最常见的JavaScript程序环境。浏览器脚本编程也是大部分不喜欢JavaScript的人对这门语言的认知。这当然是可以理解,因为在浏览器中有非常多不一致的宿主对象和DOM实现。很明显,任何能够减轻客户端脚本编程的痛楚的最佳实践都是大有益处的 。
4
4
5
5
在本章中,你会看到一些零散的模式,包括DOM编程、事件处理、远程脚本、页面脚本的加载策略以及将JavaScript部署到生产环境的步骤。
6
6
20
20
21
21
JavaScript,用来处理用户交互和页面的动态变化
22
22
23
- 尽可能地将这三者分离可以加强应用在各种用户代理(译注:user agent,即为用户读取页面并呈现的软件,一般指浏览器)的可到达性(译注:delivery,指可被用户代理接受并理解的程度),比如图形浏览器、纯文本浏览器、用于残障人士的辅助技术、移动设备等等。分离常常是和渐进增强的思想一起实现的,我们从一个给最简单的用户代理的最基础的体验 (纯HTML)开始,当用户代理的兼容性提升时再添加更多的可以为体验加分的东西。如果浏览器支持CSS,那么用户会看到文档更好的呈现。如果浏览器支持JavaScript,那文档会更像一个应用,提供更多的特性来增强用户体验 。
23
+ 尽可能地将这三者分离可以加强应用在各种用户代理(译注:user agent,即为用户读取页面并呈现的软件,一般指浏览器)的可到达性(译注:delivery,指可被用户代理接受并理解的程度),比如图形浏览器、纯文本浏览器、用于残障人士的辅助技术、移动设备等等。分离常常是和渐进增强的思想一起实现的,我们从一个最基础的体验 (纯HTML)开始,它将被用于最简单的用户代理, 当用户代理的兼容性提升时再添加更多的可以为体验加分的东西。如果浏览器支持CSS,那么用户会看到文档更好的呈现。如果浏览器支持JavaScript,那文档会更像一个应用,有更多用来增强用户体验的特性 。
24
24
25
25
在实践中,分离意味者:
26
26
29
29
- 不要使用内联的事件处理(如onclick)或者是内联的style属性,因为它们不属于内容层
30
30
- 使用语义化的HTML元素,比如头部和列表等
31
31
32
- JavaScript(行为)层的地位不应该很显赫,也就是说它不应该成为页面正常工作必须的东西 ,不应该使得用户在使用不支持的浏览器操作时存在障碍。它只应该被用来增强页面。
32
+ JavaScript(行为)层的地位不应该很显赫,也就是说它不应该成为页面正常工作必须依赖的东西 ,不应该使得用户在使用不支持的浏览器操作时存在障碍。它只应该被用来增强页面。
33
33
34
- 通常比较优雅的用来处理浏览器差异的方法是特性检测。 它的思想是你不应该使用浏览器类型检测来决定代码的逻辑,而是应该检测在当前环境中你需要使用的某个方法或者是属性是否存在。浏览器检测一般认为是一种“反模式”(译注:anitpattern,指不好的模式)。 虽然有的情况下不可避免要使用,但它应该是最后考虑的选择 ,并且应该只在特性检测没有办法给出明确答案(或者造成明显性能问题)的时候使用:
34
+ 通常比较优雅的用来处理浏览器差异的方法是特性检测, 它的思想是你不应该使用浏览器类型检测来决定代码的逻辑,而是应该检测在当前环境中你需要使用的某个方法或者是属性是否存在。浏览器检测一般认为是一种“反模式”, 虽然有的情况下不可避免要使用,但它应该是最后才考虑的选择 ,并且应该只在特性检测没有办法给出明确答案(或者造成明显性能问题)的时候使用:
35
35
36
- // antipattern
36
+ // 反模式
37
37
if (navigator.userAgent.indexOf('MSIE') !== −1) {
38
38
document.attachEvent('onclick', console.log);
39
39
}
40
40
41
- // better
41
+ // 更好的方式
42
42
if (document.attachEvent) {
43
43
document.attachEvent('onclick', console.log);
44
44
}
45
45
46
- // or even more specific
46
+ // 或者还可以再具体一点
47
47
if (typeof document.attachEvent !== "undefined") {
48
48
document.attachEvent('onclick', console.log);
49
49
}
You can’t perform that action at this time.
0 commit comments