JavaScript_DOM編程藝術第二版[閱]

前兩年迫於項目的須要，只是拿來JQuery用到項目中，並無實質上理解javascript（貌似其餘人也是這麼幹的）~

隨着最近幾年，得益於Nodejs, React, Vue等，javascript火的一塌糊塗。深知要想在某一方面走的長遠，基礎是免不了的，遂拿起這本書，用零散的時間看完了~

這本書中涉及的知識雖然簡潔，可是是「授人以漁」。這裏總結下里面的實用技巧，以備用。

1. 一個網站的代碼結構，大致由html(頁面),images,css,js構成，設計過程當中遵循如下原則：

　　(1) 結構層由html完成，包括頁面佈局，標籤等；

　　(2) 表示層由css完成，包括樣式，版式等；

　　(3) 行爲層由js完成，包括事件，動畫等。

三層分離

2. 通用函數

　　(1) addLoadEvent

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

　　(2) insertAfter

function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

　　(3) addClass

function addClass(element, value){
    if(!element.className){
        element.className = value;
    }else{
        var newClassName = element.className;
        newClassName += ' ';
        newClassName += value;
        element.className = newClassName; 
    }
}

　　(4) moveElement

function moveElement(elementID, final_x, final_y, interval){
    if(!document.getElementById) return false;
    if(!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    if(!elem.style.left){
        elem.style.left = '0px';
    }
    if(!elem.style.top){
        elem.style.top = '0px';
    }
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if(xpos == final_x && ypos == final_y){
        return true;
    }
    if(xpos < final_x){
        var dist = Math.ceil((final_x-xpos)/10);
        xpos = xpos + dist;
    }
    if(xpos > final_x){
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }
    if(ypos < final_y){
        var dist = Math.ceil((final_y-ypos)/10);
        ypos = ypos + dist;
    }
    if(ypos > final_y){
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }
    elem.style.left = xpos + 'px';
    elem.style.top = ypos + 'px';
    var repeat = 'moveElement("' + elementID + '", ' + final_x + ', ' + final_y + ', ' + interval + ')';
    elem.movement = setTimeout(repeat,interval);
}

3. 獲取當前頁面的URL: window.location.href

4. 相似 dom.onclick = function(){}是爲dom對象添加事件處理函數；相似 dom.click()是執行對應的事件函數

5. 相似以下情形，因爲變量not_in_scope的做用域問題，當事件被觸發時該變量其實是undefined的

var not_in_scope = 'use dom attribute to contain value';
dom.onmouseover = function(){
    alert(not_in_scope)
}

 解決技巧：爲dom對象添加(屬性,值)

var not_in_scope = 'use dom attribute to contain value';
dom.not_in_scope = not_in_scope;
dom.onmouseover = function(){
    alert(this.not_in_scope)
}

6. 循環爲各個dom對象添加事件處理函數

以下有兩種寫法，但第二種方式更加簡潔。

　　var links = document.getElementsByTagName('a');
    var linkurl;
    for(var i=0; i<links.length; i++){
        // 方式1
        // linkurl = links[i].getAttribute('href');
        // if(linkurl.indexOf('index.html') != -1){
        //     links[i].onmouseover = function(){
        //         moveElement('preview',0,0,5);
        //     }
        // }
        // if(linkurl.indexOf('about.html') != -1){
        //     links[i].onmouseover = function(){
        //         moveElement('preview',-150,0,5);
        //     }
        // }
        // if(linkurl.indexOf('photos.html') != -1){
        //     links[i].onmouseover = function(){
        //         moveElement('preview',-300,0,5);
        //     }
        // }
        // if(linkurl.indexOf('live.html') != -1){
        //     links[i].onmouseover = function(){
        //         moveElement('preview',-450,0,5);
        //     }
        // }
        // if(linkurl.indexOf('contact.html') != -1){
        //     links[i].onmouseover = function(){
        //         moveElement('preview', -600, 0,5);
        //     }
        // }
        
        /**
         * 方式二
         * another way to add event to the similar dom objects
         */
        links[i].onmouseover = function(){
            var linkurl = this.getAttribute('href');
            if(linkurl.indexOf('index.html') != -1){
                moveElement('preview', 0,0,5);
            }
            if(linkurl.indexOf('about.html') != -1){
                moveElement('preview', -150,0,5);
            }
            if(linkurl.indexOf('photos.html') != -1){
                moveElement('preview', -300,0,5);
            }
            if(linkurl.indexOf('live.html') != -1){
                moveElement('preview', -450,0,5);
            }
            if(linkurl.indexOf('contact.html') != -1){
                moveElement('preview', -600,0,5);
            }
        }
    }

7. 內部導航

<ul>
    <li><a href="#jay">Jay Skript</a></li>
    <li><a href="#domsters">The Domsters</a></li>
</ul>

<section id="jay">
    <h2>Jay Skript</h2>
</section>
<section id="domsters">
    <h2>The Domsters</h2>
</section>

8. 表單驗證

客戶端和服務器端均須要驗證。 

9. 表單提交

表單提交事件將由onsubmit事件處理函數攔截，

若返回true，則瀏覽器將重試提交表單；

若返回false，則停止表單提交

10. 其餘：

　　(1) document.body

　　(2) z-index

　　(3) display: inline - 垂直排列變水平排列

　　(4) HTML DOM; CSS DOM

　　(5) form對象，form.elements

　　(6) label標籤儘可能定義for屬性，並同input相關聯

　　(7) encodeURIComponent

　　(8) js正則表達式：/<article>([\s\S]+)<\/article>/ 

Done!