Dom编程艺术学习笔记2

今天看了两章，记录在册！每天都要学习，每天才能进步。这两章有一部分内容其实已经过期了，但是因为都是很基础的东西，而且主要讲述的是一种思想一种思路。学习的重点就在于此！

Chapter4 图片库

给函数命名的时候，应该起一个能描述函数的用途，简明扼要的名字。
setAttribute 是 DOM1 的组成部分，可以设置任意元素节点的任意属性。
DOM1的优势是可移植性更好，如果想要用到Web浏览器以外的应用环境，严格遵守DOM1能够避免与兼容性有关的任何问题。（So , What DOM1 include?）
img,script,css等资源分门别类，或者统一放到src下。
事件处理函数：特定事件发生时调用特定的js代码。onmouseover,onmouseout,onclick等。
当我们把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作该函数的参数。使用this关键字可以有效的做到这点，showPic(this)。
添加事件处理函数的语法onclick = "JavaScript statement(s)"，如onclick = "showPic(this);"。
点击链接时，showPic函数会被调用，但是链接点击的默认行为也会被调用，为了不被带到新窗口，我们需要阻止这个默认行为onclick = "return false"。
获取任何一个元素的所有子元素element.childNodes
获取节点的nodeType属性：node.nodeType。元素节点的值时是1，属性节点的值是2，文本节点的值是3。可以根据根据nodeType的值，让函数只对特定类型的节点进行处理。
nodeValue属性node.nodevalue。注意细节：用nodevlue属性获取description对象的值是，得到的并不是包含在这个段落里的文本，p本身的nodeValue的值是空值，逍遥获得p元素里的文本是另一个节点，是p元素的第一个节点。因此我们要获得文本：descprtion.childNodes[0].nodeValue;
node.firstChild==node.childNodes[0]
node.lastChild==node.childNodes[node.childNodes.length-1]

Chapter5 最佳实践

1.平稳退化(graceful degradation)：确保网页在没有JavaScript的情况下也能正常工作。

JS用window.open(url,name,features)打开新的浏览器窗口。

1
2
3

function popUp(withURL) {
    window.open(winURL,"popup","width=320,height=480");
}

通过”javascript:”伪协议或内嵌的事件处理函数来调用都不能很好做到平稳退化。

“javascript:”伪协议:

1	<a href="javascript:popUp('http://www.example.com/');">Example</a>

内嵌事件处理函数:

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

之所以强调平稳退化，最主要是为了搜索引擎的排名。
预留退路的方法：在链接里把href属性设置为真实存在的URL地址，让它成为一个有效的链接。把href设置为真实存在的URL地址后，即使js被禁用，或者遇到搜索机器人，这个链接都是可用的。只是在功能上打了折扣，不能在新窗口打开。这是一个经典的平稳退化的例子。

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

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

结构和样式分离：CSS技术。文档结构和文档样式的分离可以确保网页都能平稳退化。
渐进增强：用额外的信息层去包裹原始数据。按照渐进增强原则创建出的网页几乎都符合平稳退化原则。
JS不要求事件必须在HTML文档里处理，可以在外部的JS文件里吧一个事件添加到HTML文档的某个元素上：element.event = action...

利用class或id属性确定获取事件的元素。把一个事件添加到某个带有特定id属性的元素上，用getElementsByTagName和getAttribute把事件添加到有着特定属性的一组元素上。具体步骤：

把文档里的所有链接全放入一个数组里。
便利数组。

如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数。

A.把这个链接的href属性值传递给popUP()函数。

取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

var links = document.getElementsByTagName("a");
for (var i=0; i<links.length; i++) {
    if (links[i].getAttribute("class") == "popup"){
        popUp(this.getAttribute("href"));
        return false;
    }
}

以上代码存在问题，如果放置到外部的js文件，会先于html文档之前加载到浏览器里。没有完整的DOM，getElementsByTagName等方法就无法正常工作。

解决办法：把代码打包到函数prepareLinks里，并添加到window对象触发的onload事件上。

window.onload = prepareLinks;
function prepareLinks(){
    var links = document.getElementsByTagName("a");
    for (var i=0; i<links.length; i++) {
        if (links[i].getAttribute("class") == "popup"){
            popUp(this.getAttribute("href"));
            return false;
        }
    }
}
function popUp(winURL){
    window.open(winURL,"popup","width=320,height=480");
}

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

对象检测：在使用对象检测时，一定要删掉方法后的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。

1
2
3

if (!method) {
    statements
}

如果需要测试多个方法或属性是否存在，可以使用”逻辑或”操作符将其合并if (!getElementyById || !getElementsByTagName) return false
让脚本有良好的向后兼容性。给网页添加有关行为时，始终遵循渐进增强原则，可以确切的知道新添的那些都能平稳退化，在古老的浏览器里也能正常浏览。
浏览器嗅探（browser sniffung）：通过提取浏览器供应商提供的信息来解决向后兼容问题。不过正在被更简单更健壮的对象检测技术所取代。(这一点可以无视了)

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

尽量少访问DOM。访问DOM的方式对脚本性能会产生非常大的影响。使用两次getElementsByTagName方法，相当于浪费了一次搜索，更好的办法应该是把第一次搜索的结果保存在一个变量中，然后在循环里重用该结果。

var links = document.getElementsByTagName("a");
if (links.length > 0) {
    for (var i=0; i<links.length; i++){
        //对每个链接做点处理
    }
}

在多个函数都会去的一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数。
尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模，进而增加遍历查找的时间。
合并和放置脚本：包含脚本的最佳方式是使用外部脚本，因为外部文件与标记能清晰的分离开。但是不要引用多个脚本，合理的情况应该是合成到一个脚本里，减少请求。减少请求数量通常是性能优化首先要考虑的。
把所有<script>标签都放到文档末尾，</body>标签之前，就可以让页面变得更快。即使这样，在加载脚本时，window对象的load时间依然可以执行对文档的各项操作。(<script>放哪，对此的争论似乎不少，但是参看google首页，发现，google用的就是这个标准)
压缩脚本：把脚本中不必要的字节，如空格和注释，统统删除，从而达到压缩的目的。
准备两个版本，一个是工作副本，可以修改代码并添加注释；一个是精简副本，放在服务器上的。一般为了区分，在精简的副本的文件名上加上min字样：<script src="scripts/scritpName.min.js></script>"

目前常用的代码精简工具有？