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!

巴特西

JavaScript_DOM编程艺术第二版[阅]

最新文章

热门文章