前文介绍了：

　　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. O(N)时间的排序

    题目:某公司有几万名员工,请完成一个时间复杂度为O(n)的算法对该公司员工的年龄作排序,可使用O(1)的辅助空间. 要注意分析题目,一般排序要么是O(n^2),要么是O(nlogn).但这里题目特别强 ...

  2. Ubuntu查看系统的信息

    转载自:http://blog.chinaunix.net/uid-25885064-id-3440641.html 系统信息 # uname -a # 查看内核/操作系统/CPU信息 # cat / ...

  3. 2016"百度之星"-资格赛

    //本题要求:(Ar*A2...An)%p,亦即[(A1*A2*...An)/(A1*A2*...Ar-1)]%p,由于A1*A2...An乘积过大,无法求得相除所得的结果 //我们需要用到乘法逆元( ...

  4. 数据结构Java实现02----线性表与顺序表

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

  5. java 14-11 对象数组

    有5个学生,请把这个5个学生的信息存储到数组中,并遍历数组,获取得到每一个学生信息. 创建学生类: 学生:Student 成员变量:name,age 构造方法:无参,带参 成员方法:getXxx()/ ...

  6. 只有图片拼接的html页面图片之间有白条的解决方法

    有时候会有这样的页面,整个页面也就是几张切好的图片组成,但是把这些图片使用代码拼接好,又总会出现图片间有白条的问题,如下图: 解决方法:给图片的父容器添加 line-height: 0; 就好了,因为 ...

  7. 记录linux系统下所有用户的操作信息

    在日常运维中,我们需要清楚服务器上每个用户登录后都做了哪些操作,我们需要记录下每个用户的操作命令.下面的内容设置可以实现在Linux下所有用户,不管是远程还是本地登陆,在本机的所有操作都会记录下来,并 ...

  8. iOS数据本地持久化

      p1:归档.Preference(NSUserDefault).沙盒存储 iOS开发中本地存储主要有三种形式 XML属性列表(plist)归档 Preference(偏好设置) NSKeyedAr ...

  9. Spring小练习之宝宝淘项目

    数据库准备 # 表结构 CREATE TABLE `t01_user` ( `) NOT NULL AUTO_INCREMENT COMMENT '自增主键', `) DEFAULT NULL COM ...

  10. write_back 浅浅分析

    hon@hon:~/f2fs$ grep -i "clearpagedirty" . -nr./mm/shmem.c:1240: ClearPageDirty(page);./mm ...