前文介绍了：

　　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="data: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>

编写兼容性JS代码的更多相关文章

  1. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  2. 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

  3. [MIP]mip-script组件自定义 JS 代码使用限制

    自mip升级v2版本后,多了一个mip-script组件,很多人就都以为可以写自定义js代码了!然并卵,MIP2页中还是一样不允许自定义javascript代码,所有的交互须通过组件实现. 引用官方说 ...

  4. 编写高质量JS代码的68个有效方法（七）

    [20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  5. 编写高质量JS代码的68个有效方法（十三）

    No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序 在应 ...

  6. 编写高质量JS代码的68个有效方法（八）

    [20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  7. 编写高质量JS代码的68个有效方法（六）

    [20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  8. 编写高质量JS代码的68个有效方法（四）

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. 编写高质量JS代码的68个有效方法（三）

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. web.xml文件报错:cvc-complex-type.2.4.a: Invalid content was found starting with element 'init-param'.

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" ...

  2. 集成TFS Build生成与SonarQube获取代码分析结果

    软件项目在开发过程中,往往由于任务重.时间紧等原因忽略软件代码的质量和规范检查,只注重软件功能的开发和交付.等软件交付上线以后,由于代码质量导致的问题会耗费开发和运维人员的大量时间.研发表明,项目上线 ...

  3. NOIP2007 T1奖学金 解题报告-S.B.S.

    洛谷P1093 题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同, ...

  4. 《TCP/IP详解 卷一》读书笔记-----TCP persist &Keeplive timer

    1.persist timer:当接收方建议的窗口大小为0时,发送方就会停止发送,直到接收方有缓存空间时再用一个窗口值非零的ACK提示发送方可以继续发送.但是这个称为window update的ACK ...

  5. 【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  6. Topcoder SRM 619 DIv2 500 --又是耻辱的一题

    这题明明是一个简单的类似约瑟夫环的问题,但是由于细节问题迟迟不能得到正确结果,结果比赛完几分钟才改对..耻辱. 代码: #include <iostream> #include <c ...

  7. Android多线程----异步消息处理机制之Handler详解

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  8. Android配置----Eclipse+BlueStacks调试Android应用

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  9. ［转］Rapid Reporter——轻量级ET测试记录工具

    下载地址:http://testing.gershon.info/reporter/ 特别感谢:邰晓梅老师 在一次ET的在线培训课程,邰晓梅老师使用的是这个工具. Rapid Reproter,是一款 ...

  10. 关于MySql全文索引

    从 Mysql 4.0 开始就支持全文索引功能,但是 Mysql 默认的最小索引长度是 4.如果是英文默认值是比较合理的,但是中文绝大部分词都是2个字符,这就导致小于4个字的词都不能被索引,全文索引功 ...