前文介绍了：

　　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. HDU 4041 Eliminate Witches! --模拟

    题意: 给一个字符串,表示一颗树,要求你把它整理出来,节点从1开始编号,还要输出树边. 解法: 模拟即可.因为由括号,所以可以递归地求,用map存对应关系,np存ind->name的映射,每进入 ...

  2. Codeforces 402B --耻辱的一题

    这题昨天晚上花了我1个小时50多分钟来搞,都没有搞定..后来看别人代码,直接暴力枚举第一个数的值来做..最多1000*1000的复杂度.当时怎么就没想到呢?还有为啥我的方法不对呢.. 暴力方法代码: ...

  3. 线性代数与MATLAB2

    已知矩阵 求它们的特征值和特征向量,并绘制特征向量图,分析其几何意义 运行Meigvector.m A1=[-1 3;2 5]; A2=[1 -2;-1 5]; A3=[1 2;2 4]; A4=[2 ...

  4. JavaWeb学习----JSP脚本元素、指令元素、动作元素

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

  5. [Editor]Unity Editor类常用方法

    Editor文档资料 Unity教程之-Unity Attribute的使用总结:http://www.unity.5helpyou.com/3550.html 利用unity3d属性来设置Inspe ...

  6. document.write和innerHTML的区别

    document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关闭之后重新调用该函数,会导致页面被重写. innerHTML ...

  7. UICollectionView移动

    collectionView在iOS9中发布了一个可以移动cell的新特性,实现如下: 1.创建collectionView并设置代理 - (UICollectionView *)collection ...

  8. 23Mybatis_根据订单商品数据模型的练习对resultMap和resulttype的总结

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  9. 替换空格-请实现一个函数，将一个字符串中的空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。

    class Solution { public: void replaceSpace(char *str,int length) { char *tmp; ; int i; ;i<length; ...

  10. 34-php基础：cookie

    <?php //1.创建cookie //创建cookie,如下设置,cookie的过期时间为会话结束时 setcookie("name","gaoxiong&qu ...