JavaScript DOM 编程艺术(第二版) 初读学习笔记

2021-11-07 22:04:58

这本书留给我的印象就是结构、表现和行为层的分离，以及书后面部分一直在强调的最佳实践原则：平稳退化，逐步增强，向后兼容以及性能考虑。

要注意这不是一本JavaScript入门书籍~

2.1 准备工作

用JavaScript编写的代码必须通过HTML/XHTML文档才能执行。最好的做法是把<script>标签放到HTML文档的最后，</body>标签之前：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Example</title>

</head>

<body>

  Mark-up goes here...

  <script src="file.js"></script>

</body>

</html>

这样能使浏览器更快地加载页面。

2.2 javascript语法

2.2.1 语句

我们建议在每条语句的末尾都加上一个分号，这是一种良好的编程习惯；

first statement;

second statement;

这样做让代码更容易阅读。让每条语句独占一行的做法能更容易跟踪JavaScript脚本的执行顺序。

2.2.2 注释

建议大家用"//"来注释单行，用"/*"注释多行

2.2.3 变量

虽然JavaScript没有强制要求程序员必须提前声明变量，但提前声明变量是一种良好的编程习惯。

在JavaScript语言里，变量和其他语法元素的名字都是区分字母大小写的。

JavaScript是一种弱类型语言，这意味着程序员可以在任何阶段改变变量的数据类型。

2.2.4 数组

用对象来代替传统数组的做法意味着可以通过元素的名字而不是下标数字来引用它们。这大大提高了脚本的可读性。

创建对象的方法：

var lennon = Object();

lennon.name = "John"

lennon.year = 1940;

lennon.living = false;

创建对象还有一种更简洁的语法，即花括号语法：

{propertyName:value, propertyName:value}

比如，lennon对象也可以写成下面这样:

var lennon = { name:"John", year:1940, living:false };

2.4 条件语句

因为花括号可以提高脚本的可读性，所以在if语句中总是使用花括号是个好习惯。

2.4.1 比较操作符

操作符==并不代表严格相等，这一点很容易让人犯糊涂。例如比较false与空字符串会得到什么结果？

var a = false;

var b = "";

if (a == b) {

  alert("a equals b");

}

这个条件语句的求值结果是true，为什么？因为相等操作符==认为空字符串与false含义相同。要进行严格比较，就要使用另一种等号(===)。这个全等操作符会执行严格的比较，不仅比较值，而且会比较变量的类型。

当然，对于不等操作符!=也是如此，如果想比较严格不相等，就要使用!==。

2.6 函数

在命名变量时，用下划线来分隔各个单词，在命名函数时，从第二个单词开始把每个单词的第一个字母写成大写形式(也就是所谓的驼峰命名法)。这么做是为了能够一眼看出那些名字是变量，那些名字是函数。

如果在某个函数中使用了var，这个变量就将被视为一个局部变量，它只存在于这个函数的上下文之中；反之，如果没有使用var，那个变量就将被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。

function square(num) {

  total = num * num;

  return total;

}

var total = 50;

var number = square(20);

alert(total);

运行后全局变量total的值变成了400.

正确的做法是：

function square(num) {

  var total = num * num;

  return total;

}

3.3.4 CSS

继承(inheritance)是CSS技术中的一项强大功能，节点树上的各元素将继承其父元素的样式属性。

为了把某一个或某个元素与其他元素区别开来，需要使用class属性或id属性。

一份文档就是一颗节点树。

节点分为不同的类型：元素节点、属性节点和文本节点等。

3.4.5 获取元素

有3种DOM方法可获取元素节点，分别通过元素ID、通过标签名字和通过类名字来获取。

getElementById，getElementsByTagName，getElementsByClassName;

getElementById返回的是一个对象，getElementsByTagName和getElementsByClassName返回的是一个对象数组。

3.5 获取和设置属性

getAttribute()用来获取元素的各个属性，setAttribute()则可以更改属性节点的值。

语法：getAttribute(attritute); setAttribute(attribute, value);

4.3 应用这个JavaScript

onclick()函数的处理技巧

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>Image Gallery</title>

</head>

<body>

  <a href="fireworks.jpg" title="A fireworks display">Fireworks</a>

</body>

</html>

当我们点击链接时，会发现图片跳到了另外一个页面进行显示。

如果这不是我们想要的，可以在<a>元素中加入onclick="return false;"，使得页面不进行跳转。

想让func()函数在页面加载时执行，需要使用onload事件处理函数.

4.4.5 nodeValue属性

如果想改变一个文本节点的值，那就使用DOM提供的nodeValue属性，它用来得到（和设置）一个节点的值。

在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。你要得到的其实是它的第一个子节点的nodeValue属性值。

firstChild和lastChild

第5章最佳实践

平稳退化：确保网页在没有JavaScript的情况下也能正常工作。
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。
向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死掉。
性能考虑：确定脚本执行的性能最优。

5.2 平稳退化

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

5.3 渐进增强

所谓"渐进增强"，就是用一些额外的信息层去包裹原始数据。按照"渐进增强"原则创建出来的网页几乎都符合"平稳退化"原则。

5.4 分离JavaScript

5.5 向后兼容

5.5.1 对象检测

if (!method) {

  return false;

}

5.6 性能考虑

尽量少访问DOM和尽量减少标记
合并和放置脚本
压缩脚本(使用代码压缩工具)

每个优秀的网页设计人员总是会在每个细节上问自己这样一个问题："是否还有更好的解决办法？"

作为一条原则，如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页结构有任何依赖。

最好不要使用onkeypress事件处理函数。onclick事件处理函数已经能满足需要。

同样的操作既可以只使用DOM Core来实现，也可以使用HTML-DOM来实现。正如大家所看到的那样，HTML-DOM代码通常会更短，必须提醒一下，他们只能用来处理Web文档。如果你打算用DOM处理其他类型的文档，请千万注意这一点。

一定要从DOM的角度去思考问题。在DOM看来，一个文档就是一棵节点树。如果你想在节点树上添加内容，就必须插入新的节点。如果你想添加一些标记到文档，就必须插入元素节点。

7.2 DOM方法

createElement()，appendChild()，createTextNode()，insertBefore()，insertAfter()。

7.4 Ajax

Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理响应。

构建Ajax网站的最好方法，是先构建一个常规网站，然后Hijax它。

8.1 不应该做什么

如果你察觉到自己正在使用DOM技术把一些重要的内容添加到网页上，则应该立刻停下来去检讨你的计划和思路，你很可能会发现自己正在滥用DOM!

即使某种特定的浏览器会引起问题，也没有必要使用浏览器嗅探代码。对浏览器的名称和版本号进行嗅探的办法是很难做到面面俱到的，而且往往会导致非常复杂难解的代码。

在编写DOM脚本时，你会想当然地认为某个节点肯定是一个元素节点，这是一种相当常见的错误。如果没有百分之百的把握，就一定要去检查nodeType属性值。有很多DOM方法只能用于元素节点，如果用在了文本节点上，就会出错。

JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来创建核心内容。

第10章用JavaScript实现动画效果

JavaScript函数parseInt()可以把字符串里的数值信息提取出来。如果把一个数字开头的字符串传递给这个函数，它将返回一个数值：例如parseInt("39 steps")返回数值39；

如果需要提取的是浮点数，就应该使用相应的parseFloat()函数。

码农公寓