欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript 函数 & 平稳退化

程序员文章站 2022-03-09 13:03:43
...

基础函数及属性

点击事件：

    onclick = "function(this)"

    onclick = "return false": 阻止窗口跳转


childNodes属性：

    返回包含某个元素所有子元素的数组

    由于文档里几乎所有东西都是节点，包括空格和换行符


nodeType属性：

    返回节点的属性

    1 -- 元素节点；

    2 -- 属性节点；

    3 -- 文本节点


nodeValue属性：

    返回节点的属性值，元素节点的nodeValue属性为null

    用于检索/设置节点元素的属性

    

firstChild & lastChild：

    返回第一个子元素 & 最后一个子元素


平稳退化:

在浏览器不支持JavaScript的情况下，仍然能够顺利浏览网页


window.open(url, name, features)

    打开一个新窗口;

    url：网页url地址；

    name：新窗口名字；

    features：新窗口属性


真协议：http/ftp等标准协议

javascript伪协议：非标准化协议，可以通过连接调用js函数，是一种非常不好的做法（不支持js的浏览器将无法打开连接）


平稳退化的原因：搜索引擎使用搜索机器人，通常不能理解js，不能平稳退化将影响网页在搜索引擎上的排名

例子：

<a href="http://www.baidu.com" onclick="popUp(this.href; return false;)">Example</a>

确保js不能使用也能够打开连接


分离JavaScript：

    将元素节点中的事件属性分离开来，在js外部文档中进行处理

    getElementById(id).event = action


    处理多个元素节点步骤：

        1）把文档里所有链接放到数组里；

        2）遍历数组；

        3）根据链接属性调用相应的函数

function prepareLinks() {
    var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++) {
        if (links[i].getAttribute("class") == "popup") {
            links[i].onclick = function() {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}


向后兼容：

    对象检测：检测浏览器对javascript的支持程度

    使用if语句

    例如使用了：getElementById

        可以在使用前判断 if(!getElementById) return false; //如果不能使用此方法，则返回false


性能考虑：

    1）尽量减少对DOM的访问（把多次相同的访问存储在同一个变量中）；每次DOM搜索都会访问整个文档树

    2）合并放置js脚本

    3）压缩脚本（删除空格、注释等）

        代码压缩工具：

            JSMin、YUI Compress、Closure Compiler


加载多个js函数:

    使用addLoadEvent()函数

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


平稳退化实例：

html：

<html>
    <head lang="en">
        <meta charset = "utf-8"/>
        <title>Image Gallery</title>
        
        <link rel = "stylesheet" href = "layout.css"/>
    </head>
    <body>
        <h1>Products</h1>
        <ul id = "gallery">
            <li>
                <a href = "image/apple.png" title = "apple">Apple</a>
            </li>
            <li>
                <a href = "image/iphone.png" title = "iphone">Iphone</a>
            </li>
            <li>
                <a href = "image/watch.png" title = "watch">Watch</a>
            </li>
        </ul>
        <img id = "placeholder" src = "image/test.png"/>
        <p id = "description">choose an image</p>
        
        <script type = "text/javascript" src = "test.js"></script>
    </body>

</html>

js：

function showPic(whichPic) {
    if (!document.getElementById("placeholder")) {
        return false;
    }
    var source = whichPic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    
    if (document.getElementById("description")) {
        var text = whichPic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;
    }
    
    return true;
}

function prepareGallery() {
    //检查方法是否支持
    if(!document.getElementById) {
        return false;
    }
    if(!document.getElementsByTagName) {
        return false;
    }
    if(!document.getElementById("gallery")) {
        return false;
    }
    
    //命名对象
    var gallery = document.getElementById("gallery");
    var links = gallery.getElementsByTagName("a");

    //遍历
    for(var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            return !showPic(this);
            //showPic成功，则返回false，阻止默认行为发生（弹出窗口）
            //失败(没有placeholder)，则返回true，弹出链接窗口
        }
    }
}

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

addLoadEvent(prepareGallery);

对于包含链接的元素，在设置事件属性是，需要考虑返回值，确保某些id被删除，仍然能够正确的访问链接


键盘访问：

onkeypress事件，大部分按键都可以触发此事件，最好不要使用此事件

通常使用tab和return就可以代替鼠标出发onclick事件


参考书籍：《DOM编程艺术》第4-6章





    


上一篇： 无法观看coursera视频解决办法

下一篇： 终于能发大文件但还那么抠？吐槽微信种种问题

推荐阅读