持续更新，gitHub地址 ：
https://github.com/ghCarol/demo/tree/master/Notes
目录
正文
《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