编写兼容性JS代码-阿里云开发者社区

编写兼容性JS代码

2017-12-04 1101

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

前文介绍了：

　　1 DOM四个常用的方法

　　2 使用DOM核心方法完成属性填充

本篇主要介绍在JS中需要注意的几个地方，另外为了减小html与javascript的耦合使用java进行onclick方法编写。

　　其实javascript不是一门简单的语言，但是由于入门简单，很多人使用的时候，都是直接复制粘贴，导致网页中充斥着大量的冗余代码。

　　但是在编写合格的javascript代码时，需要注意：

　　1 平稳退化：保证在不支持js或者低版本的浏览器也能正常访问

　　2 分离javascript：把html与javascript分离，有助于后期代码的维护

　　3 向后兼容性：确定老版本的浏览器不会因为脚本禁止而死掉

　　4 性能考虑：确定脚本执行的最优

　　编写优化的代码

　　针对前一篇中的相册的代码，这里主要修改的地方是把onclick方法删除，在页面加载时，利用onload方法，动态的为a标签添加onclick方法。

　　以前的onclick标签处，是这样的：

        <ul>
            <li>
                <a href="images/pig.png" title="I'm pig!" onclick="showPic(this);return false;">Pig</a>
            </li>
            <li>
                <a href="images/rabit.png" title="I'm rabit!" onclick="showPic(this);return false;">Rabit</a>
            </li>
            <li>
                <a href="images/house.png" title="I'm house!" onclick="showPic(this);return false;">house</a>
            </li>
            <li>
                <a href="images/monkey.png" title="I'm monkey!" onclick="showPic(this);return false;">monkey</a>
            </li>
        </ul>

　　执行脚本处，是这样的：

            function showPic(whichPic){
                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                placeHolder.setAttribute("src",source);

                var text = whichPic.getAttribute("title");
                var description = document.getElementById("description");
                description.firstChild.nodeValue = text;
            }

　　现在为了避免在html中涉及到过多的javascript代码，即onclick事件，直接给ul设置一个id。然后动态的添加方法：

        <ul id="imagegallery">
            <li>
                <a href="images/img1.jpg" title="test1">img1</a>
            </li>
            <li>
                <a href="images/img2.jpg" title="test2">img2</a>
            </li>
        </ul>

　　javascript的代码如下：

            function addLoadEvent(func){
                var oldonload = window.onload;
                //如果onload还没有添加任何的方法，则把参数方法传给它；否则在它的函数方法后面，在添加方法
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }

            function prepareGallery(){
                if(!document.getElementsByTagName) return false;
                if(!document.getElementById) return false;
                if(!document.getElementById("imagegallery")) return false;
                var gallery = document.getElementById("imagegallery");
                var links = gallery.getElementsByTagName("a");
                for(var i=0; i<links.length; i++){
                    links[i].onclick = function(){
                        return showPic(this)?false:true;
                    }
                    //如果使用键盘回车时，触发onkeypresss()方法
                    //links[i].onkeypress = links[i].onclick;
                }
            }

            function showPic(whichPic){
                //安全性检查，如果没有该节点，直接返回false
                if(!document.getElementById("placeHolder")) return false;

                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                //检查placeHolder是否是图片标签
                if(placeHolder.nodeName != "IMG") return false;
                placeHolder.setAttribute("src",source);

                if(document.getElementById("description")){
                    var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";
                    var description = document.getElementById("description");
                    //文本节点的节点类型是3
                    if(description.firstChild.nodeValue == 3){
                        description.firstChild.nodeValue = text;
                    }
                }
                return true;
            }

            addLoadEvent(prepareGallery);

　　上面部分的代码，添加了很多的安全性检查和兼容性，另外一个就是优化onload方法。

　　效果与前篇类似，全部代码如下：

 
     
   
<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>我的相册</title>

         <style type="text/css">
            body {
                font-family: "Helvetica","Arial",sans-serif;
                color: #333;
                background-color: #ccc;
                margin: 1em 10%;
            }
            h1 {
                color:#333;
                background-color: transparent;
            }
            a {
                color:#c60;
                background-color: transparent;
                font-weight: bold;
                text-decoration:none;
            }
            li {
                float: left;
                padding: 1em;
                list-style: none;
            }
            img {
                clear:both;
                display: block;
            }
         </style>
    </head>
    <body>
        <h1>我的相册</h1>
        <ul id="imagegallery">
            <li>
                <a href="images/img1.jpg" title="test1">img1</a>
            </li>
            <li>
                <a href="images/img2.jpg" title="test2">img2</a>
            </li>
        </ul>

        <img id="placeHolder" alt="image" src="images/img1.jpg"/>

        <p id="description">Choose an image.</p>

        <script type="text/javascript">

            function addLoadEvent(func){
                var oldonload = window.onload;
                //如果onload还没有添加任何的方法，则把参数方法传给它；否则在它的函数方法后面，在添加方法
                if(typeof window.onload != 'function'){
                    window.onload = func;
                }else{
                    window.onload = function(){
                        oldonload();
                        func();
                    }
                }
            }

            function prepareGallery(){
                if(!document.getElementsByTagName) return false;
                if(!document.getElementById) return false;
                if(!document.getElementById("imagegallery")) return false;
                var gallery = document.getElementById("imagegallery");
                var links = gallery.getElementsByTagName("a");
                for(var i=0; i<links.length; i++){
                    links[i].onclick = function(){
                        return showPic(this)?false:true;
                    }
                    //如果使用键盘回车时，触发onkeypresss()方法
                    //links[i].onkeypress = links[i].onclick;
                }
            }

            function showPic(whichPic){
                //安全性检查，如果没有该节点，直接返回false
                if(!document.getElementById("placeHolder")) return false;

                var source = whichPic.getAttribute("href");
                var placeHolder = document.getElementById("placeHolder");
                //检查placeHolder是否是图片标签
                if(placeHolder.nodeName != "IMG") return false;
                placeHolder.setAttribute("src",source);

                if(document.getElementById("description")){
                    var text = whichPic.getAttribute("title")?whichPic.getAttribute("title"):"";
                    var description = document.getElementById("description");
                    //文本节点的节点类型是3
                    if(description.firstChild.nodeValue == 3){
                        description.firstChild.nodeValue = text;
                    }
                }
                return true;
            }

            addLoadEvent(prepareGallery);
        </script>
    </body>
</html> 
     
   

本文转自博客园xingoo的博客，原文链接：编写兼容性JS代码，如需转载请自行联系原博主。

编写兼容性JS代码

编写优化的代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

编写兼容性JS代码

编写优化的代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

　　编写优化的代码