《JSDOM编程艺术》笔记

持续更新，gitHub地址：
https://github.com/ghCarol/demo/tree/master/Notes

目录
正文
- 《JS&DOM编程艺术》
  - 第四章——“JS图片库”
    - 1. 取消链接跳转
    - 2. getElementsByName()和getElementsByTagName()
    - 3. window.onload = functionName;
    - 4. 得到’p’元素包含的文本值
    - 5. firstChild , lastChild属性。
    - 6. ‘script’引入文件标签为什么失效
  - 第五章——“最佳实践”
    - 1. window.open(url,name,features);函数
    - 2. javascript伪协议，不利于平稳退化
    - 3. href=”#” 的平稳退化替代方案
    - 4. JS平稳退化可从CSS得到借鉴，结构和样式分离
    - 5. 渐进增强
    - 6. 分离JavaScript举例
    - 7. 向后兼容
    - 8. 性能优化：尽量少访问DOM次数和尽量减少标记
    - 9. 性能优化：合并和放置JS脚本
    - 10. 性能优化：压缩脚本

正文

《JS&DOM编程艺术》

第四章——“JS图片库”

1. 取消链接跳转

取消链接的跳转onclick="return false;"

<a href="images/1.png" onclick="showPic(this); return false;"/>

2. getElementsByName()和getElementsByTagName()

getElementsByName();返回带有指定名称的对象的集合，查询元素的 name 属性。
getElementsByTagName();返回带有指定标签名的对象的集合，比如document.getElementsByTagName("input");

3. window.onload = functionName;

window.onload = countBodyChildren; 而不是 ~~window.onload(count...);~~
PS: countBodyChildren()是一个function

4. 得到’p’元素包含的文本值

<p>元素本身的nodeValue属性是空值，想要得到<p>元素所包含的文本值应这样写：

alert(description.childNodes[0].nodeValue); //var description = document.getElementById("description");

5. firstChild , lastChild属性。

6. ‘script’引入文件标签为什么失效

<script type="text/javascript" src="scripts/showPic.js"> </script> ==千万不能写成== <script type="text/javascript" src="scripts/showPic.js"/>，后者没用，因为script标签不能直接闭合，必须要有成对的结尾</script>标签。

第五章——“最佳实践”

1. window.open(url,name,features);函数

window.open(url,name,features);方法创建新的浏览器窗口

第二个参数name是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信。

举例应用：window.open("https://www.baidu.com","popup","width=320,height=480");

2. javascript伪协议，不利于平稳退化

真协议，如HTTP协议(http://)、FTP协议(ftp://)，用来在因特网上的计算机之间传输数据包
伪协议，是一种非标准化的协议。”javascript:”伪协议让我们通过一个链接来调用JavaScript函数:
<a href="javascript:popUp('http://www.baidu.com')">Example</a>
在HTTP文档里==通过”javascript:”伪协议调用JavaScript代码的做法非常不好==

3. href=”#” 的平稳退化替代方案

<a href="#" onclick="popUp('http://www.baidu.com');return false;">Example</a>

“#”只是为了创建一个空链接，实际工作全由onclick属性负责完成。

这个技巧与用”javascript:”伪协议调用JavaScript代码的做法==同样糟糕，因为他们都不能平稳退化==，如果用户禁止浏览器的JavaScript功能，这样的代码毫无用处。

<a href="http://www.baidu.com" onclick="popUp(this.href); return false;">Example</a>

4. JS平稳退化可从CSS得到借鉴，结构和样式分离

5. 渐进增强

原则：不将CSS代码混在HTML文档里(避免使用内嵌产生式css)，将表示层(CSS)和行为层(JavaScript)与结构分开。

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

6. 分离JavaScript举例

在JS中利用element.event = action …

window.onload = prepareLinks;  //这句话保证了脚本在HTML文档加载完整(DOM完整)后执行function prepareLinks() {var links = document.getElementsByTagName("a"); //这条语句在JS文件被加载时立即执行for (var i = 0; i < links.length; i++) {if (links[i].getAttribute("class") == "popup") {links[i].onclick = function() {popUp(this.getAttribute("href"));return false;}}}
}

Q：必须让代码在HTML文档全部加载到浏览器后马上开始执行，但是

如果JS文件是从<head>部分<script>标签调用的，它将在HTML文档之前加载到浏览器里。
如果<script>标签位于</body>之前，就不能保证哪个文件最先结束加载(浏览器可能一次加载多个)。

A：HTML文档全部加载完毕时将触发一个事件，这个事件有他自己的事件处理函数。文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。

7. 向后兼容

有些浏览器只支持部分javascript功能，但不支持DOM。因此给网页添加行为时遵循“渐进增强”原则，可以使这些行为都能够平稳退化。举例：

if(document.getElementById){statements using getElementById //不足：如果需要检测多个DOM方法或属性是否存在，
}   //这个函数最重要的语句会被层层花括号包裹，使代码难以阅读和理解。//Better: 测试条件改为：如果你不理解这个方法，请离开。
if(!document.getElementsByTagName || !getElementById) return false;

8. 性能优化：尽量少访问DOM次数和尽量减少标记

减少DOM访问次数：使用变量预存DOM查询的值，之后操作该变量即可

9. 性能优化：合并和放置JS脚本

合并JS脚本为一个外部文件，将其放置在</body>前。

10. 性能优化：压缩脚本

多数情况下，应该存两个代码版本：

工作副本：可以修改代码并添加注释
精简副本：用于放在站点上，为了区分，最好在精简副本的文件名中加上min字样，如scriptName.min.js

推荐压缩工具：

Douglas Crockford的JSMin

雅虎的YUI Compressor

谷歌的Closure Compiler