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 >
    <h2>Jay Skript</h2>
</section>
<section >
    <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>([sS]+)</article>/

Done!

JavaScript_DOM编程艺术第二版[阅]

相关推荐