前文介绍了：

　　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. linux 程序管理

    在linux下做开发,经常要用到一些管理程序的命令,如查看进程,查看内存等情况.看网络情况.如下的笔记是看书时记下一些简单常用的命令. 1)top [root@005 fsh]#top[-d数字]|t ...

  2. jdk环境搭建

    win7+jdk环境变量配置 进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:1.下载jdk(http://java.sun.com/javase/downloads/inde ...

  3. Webshell实现与隐藏探究

    一.什么是webshell webshell简介 webshell,顾名思义:web指的是在web服务器上,而shell是用脚本语言编写的脚本程序,webshell就是就是web的一个管理 工具,可以 ...

  4. Chorme中启动阿里旺旺误点取消启动并记住选择，如何更改。

    今天在Chorme中启动阿里旺旺误点取消启动并记住选择,然后如何也点不开了.从网上找到了一种解决方法: 找到路径   C:\Users\\AppData\Local\Google\Chrome\Use ...

  5. socket通信入门

    以一个基本的python程序为例解释 源代码如下: #!/usr/bin/env python  #指出代码用什么程序去运行它.首先会到env设置里查找python的安装路径,再调用对应路径下的解释器 ...

  6. [原创]cin、cin.get()、cin.getline()、getline()、gets()、getchar()的区别

    这几个输入函数经常搞不清具体特点和用法,这里稍作总结 一.cin>> 1.最基本用法,输入一个变量值 2.输入字符串,遇“空格”.“TAB”.“回车”结束,比如输入“hello world ...

  7. 合工大OJ 1330 种树

    Description 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2, ...

  8. Windows环境中Openfire与Spark安装与配置指南

    安装软件: openfire3.9.3 spark2.6.3 安装环境: WindowsXP JDK1.6.0_21 Oracle 一.openfire安装 1.安装openfire3.9.3,下载地 ...

  9. easyui 的 DataGrid View 使用

    easyui真是后台人员的宝呀,让不会前台的程序员,不用再用那些自己看着都恶心的表格了! 今天来说说easyui datagrid 的 数据表格详细展示表格,这个有趣多了! 先上图 然后是代码 $(' ...

  10. js原生选项卡（包含移动端无缝选项卡）三

    今天分享下移动端原生js的无缝轮播图: 移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能,所以这个无缝轮播图更多的使用了transition和transform,无缝的思想和昨天分享的PC端的 ...