JavaScript DOM编程艺术学习笔记（一）

嗯，经过了一周的时间，今天终于将《JavaScript DOM编程艺术（第2版）》这本书看完了，感觉受益匪浅，我和作者及出版社等等都不认识，无意为他们做广告，不过本书确实值得一看，也值得推荐给想了解HDOM的相关人员！首先非常感谢作者写出了这么好的一本书，谢谢！书中的内容比较多，我仅记下我认为对自己和他人有所帮助的一些内容！

嗯，首先还是让代码来说话吧！

下面是两段此书中反复强调且通用的经典代码段

1：相当的经典和实用，尤其是当需要为页面加载函数绑定多个函数的时候

/**
 * [addLoadEvent 为页面的加载事件绑定执行的函数]
 * @param {[function]} func [打算在页面加载完毕时执行的函数]
 */
function addLoadEvent(func)
{
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

 

2：也相当的经典和实用，特别对于插入新的标签元素的时候

/**
 * [insertAfter 将一个新的标签元素插入到目标元素的后面]
 * @param  {[DOMElement]} newElement    [要插入的新标签元素]
 * @param  {[DOMElement]} targetElement [要插入的目标元素]
 */
function insertAfter(newElement,targetElement)
{
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

 

第二本书作者不断的强调的事情

1）对于在浏览器中的网页而言本质上是三位一体的共同体，结构层、表示层、行为层，结构层由超文本标记语言负责，比如：HTML；表现层由CSS负责；行为层由JavaScript和DOM负责，书写代码一定要尽量三层分离各负其责。

 

2）书写代码，注意的地方有许多，对于网页代码而言，本书作者着重强调渐进增强、平稳退化、三层分离、简明易读、抽象通用。三层分离、简明易读就不用多解释了，很容易理解。抽象的目的就是为了通用重用，通常是将不变的因子用可变的因子来代替，比如：方法中传递的参数，原来不用传递可能是硬编码写在方法体里面的，变为函数的参数后，这个函数就更加的灵活啦！

渐进增强：是非常重要的一个代码书写原则，意思是这样的，对于网页而言，我们书写代码的时候总是应该从最核心的部分，也就是从内容开始，换言之在网页的三层结构中结构层是最为重要的一层，CSS主要是用来加强网页的显示样式，JavaScript 和 DOM主要是用来实现用户也网页的交互。当然，我觉得做任何事情可能都是如此的，分清主次、把握全局、抓住重点对任何的事情都是相当重要的。

平稳退化：也是一个非常重要的代码书写原则，平稳退化的重点在于强调在坚持以渐进增强的原则书写代码的基础之上，能够保证我们的程序更加的健壮，有更好的兼容性，对于一些缺乏必要的CSS和DOM支持的访问者，我们的网站仍可以为其提供一些最为核心的内容，不至于网页完全失去了价值。在代码中的体现，主要是首先要判断浏览器对某些方法、属性等的支持能力，然后在决定程序的下一步走向！

 

3）看待网页要能图形化的看待，在我们的眼中，DOM是一棵树，是一棵倒挂的树，文档中的每一个元素都对应着树中的每一个节点，以这种观点来去书写代码就会容易许多的，对于文档中元素的查找、修改、删除、替换、添加等操作就非常的形象化啦！好像我们玩一个好玩的玩具一样，一切都非常的清晰明了，摆在眼前，CSS编程了彩笔，JavaScript变成了传感器，DOM是原料加工场。

 

4）分析问题和解决问题的关键，是化繁为简、分而治之、循序渐进的一步一步的来，先将解决问题的思路一步步的想好列出来，至少最主要的要非常的清晰明确，然后先实现一个简单的核心的功能，然后再慢慢的扩展它的能力，让他实现平稳退化，再然后抽象化使其可以重用通用。

 

5）思考问题除了思考它能不能的问题，还应该思考它应不应该的问题，比如：现在的CSS也有处理一些事件的功能在，不过最好这样的事情还是交给JavaScript DOM 来做！