前文介绍了：

　　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. k-means算法初识

    基础知识: K-means聚类算法 聚类,简单地说就是把相似的东西分到一组.同 Classification (分类)不同,对于一个 classifier ,通常需要你告诉它“这个东西被分为某某类”. ...

  2. 探索 OpenStack 之（9）：深入块存储服务Cinder （功能篇）

    继研究了Neutron之后,继续Nova的外围研究之旅.本站是研究块存储服务Cinder. 0.验证环境 环境包括: 1.一个controller节点,运行nova-api, nova-schedul ...

  3. selenium处理滚动条

    1.用js实现 滚动到底部 String js="document.documentElement.scrollTop=10000"滚动到顶部 String js="do ...

  4. [cocos2dx]让CCScrollView支持分页

    [cocos2dx]让CCScrollView支持分页 做过IOS开发的朋友, 肯定知道UIScrollView有一个isPaged属性. 当设置其为true的时候, 滑动会自动分页. 即, 每次滑动 ...

  5. 边工作边刷题：70天一遍leetcode: day 75

    Group Shifted Strings 要点:开始就想到了string之间前后字符diff要相同. 思维混乱的地方:和某个string的diff之间是没有关系的.所以和单个string是否在那个点 ...

  6. codeforces 484B B. Maximum Value(二分)

    题目链接: B. Maximum Value time limit per test 1 second memory limit per test 256 megabytes input standa ...

  7. UESTC 424 AreYouBusy --混合背包

    混合三种背包问题. 定义:dp[i][k]表示体积为k的时候,在前i堆里拿到的最大价值. 第一类,至少选一项,dp初值全赋为负无穷,这样才能保证不会出现都不选的情况.dp[i][k] = max(dp ...

  8. 转载：有关SQL server connection Keep Alive 的FAQ(3)

    转载:http://blogs.msdn.com/b/apgcdsd/archive/2012/06/07/sql-server-connection-keep-alive-faq-3.aspx 这个 ...

  9. High Performance Animations

    http://www.html5rocks.com/zh/tutorials/speed/high-performance-animations/

  10. 网站性能评分工具Yslow 使用教程

    Yslow 这个工具相信无论是搞前端的攻城师或者是搞网站的站长都了解,Yslow 可比谷歌的PageSpeed 有名多了:那个百分制下的评分数据总让国人着迷,看来应试教育造的孽太深了.Jeff 认为的 ...