JavaScript DOM 编程艺术(读书笔记二)

发表于 2015-04-18   |   分类于 前端   |  
接上文 ^_~  window.onload

     想让某个函数(例如：function1)在页面加载完毕之后立刻执行，则可用window.onload = function1;。
当有多个函数需要页面加载时执行时，像下面的做法是不可行的，只有最后那个才会被实际执行。

1
2
window.onload = firstFunction;
window.onload = secondFunction;

     当需要绑定的函数不是很多时，可以采用下面的最简单的解决方法：

1
2
3
4
window.onload = function(){
    firstFunction();
    seconeFunction();
}

     最好的办法是为其添加一个处理函数，把那些在页面加载完毕时需要执行的函数创建为一个队列，把相应的函数添加到队列中就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function") {
        window.onload = func;
    }else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
//将需要在页面加载完毕时执行的函数添加到队列中
addLoadEvent(firstFunction);
addLoadEvent(seconeFunction);

在已有元素后插入一个新元素

     DOM 提供了在已有元素之前插入一个新元素的方法insertBefore，并没有提供在后面插入的方法，不过可以利用已有的DOM方法和属性编写一个insertAfter函数：

1
2
3
4
5
6
7
8
function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    }eles{
        parent.insertBefore(newElement, target.nextSibling);
    }
}

style

     element.style.property只能返回内嵌样式，DOM style 属性并不能检索在外部 CSS 文件里声明的样式，头部中<style>标签里的样式也不可以。

寻找下一个元素节点

     像上面所说的，文本节点也是属于节点，有时用nextSibling 找到的下一个节点可能不是我们想要的元素节点，就可以通过下面的函数来获取相应的元素节点。

1
2
3
4
5
6
7
8
9
10
function getNextElement(node) {
	//元素节点的 nodeType 属性值是1
    if(node.nodeType == 1) {
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}

为元素添加类名 addClass
1
2
3
4
5
6
7
8
9
10
function addClass(element, value) {
    if(!element.className) {
        element.className = value;
    }else{
        var newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}
浮点数取整
  1. Math.ceil，把浮点数向大于反向舍入为与之最接近的整数；
  2. Math.floor，把浮点数向小于反向舍入为与之最接近的整数；
  3. Math.round，把浮点数舍入为与之最接近的整数。
性能考虑

     在JavaScript DOM 编程艺术这本书中，提到的关于性能优化的方法主要是有以下三点：

  1. 尽量少访问 DOM 和尽量减少标记
  2. 合并和放置脚本以减少请求数量注3
  3. 压缩脚本

     其实，关于性能优化方面，还可以参考一下雅虎14条：

  1. 减少 HTTP 请求次数
  2. 使用 CDN(Content Delivery Network, 内容分发网络)
  3. 增加 Expires Header
  4. 压缩页面元素
  5. 把样式表放在头部
  6. 把脚本文件放在底部
  7. 避免 CSS 表达式
  8. 把 JavaScript 和 CSS 放到外部文件中
  9. 减少 DNS 查询次数
  10. 最小化 JavaScript代码
  11. 避免重定向
  12. 删除重复的脚本文件
  13. 配置 ETags
  14. 缓存 Ajax

     最后，引用书中的一句话”如果你手里只有榔头，那么你看到的任何东西都像钉子”，因此，我们不应该拘泥于某种语言上，可以在有自己的专业技能后，多多进行接触，用一句组内的人经常说的话，就是我们要”遇见更大的世界”。

注3：浏览器有并发请求数目的限制，该限制是是针对同一域名的，意即，同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞，因此减少 HTTP 请求次数十分重要，不同的浏览器有着不同的限制数目。

#JavaScript
JavaScript DOM 编程艺术(读书笔记一)