编写兼容性JS代码

前文介绍了:  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="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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

Zepto源码分析之form模块

前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个...

219100
来自专栏Google Dart

AngularDart4.0 指南- 用户输入 顶

用户的操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。

24800
来自专栏软件开发

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

31470
来自专栏搞前端的李蚊子

Vue中的$set的使用

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发...

440100
来自专栏GreenLeaves

Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(functio...

1K50
来自专栏Golang语言社区

Golang URL解析

Golang URL解析 今天利用课余时间看了一下Go语言的URL解析,于是就实践了一下,为了大家一起学习交流,故贴出来和大家一起分享,如有什么错误,请各位大神...

754120
来自专栏小蠢驴iOS专题

iOS中纯代码创建的UI控件使用weak还是strong

25640
来自专栏有趣的django

微信小程序入门(三)

四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出...

19240
来自专栏Hellovass 的博客

关于 Vue 响应式原理的困惑

需要将用户信息的 UI(下文用 UserInfo 来代替) 写成一个 Vue 组件,达到重用的目的。

32240
来自专栏云瓣

从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/d...

11020

扫码关注云+社区

领取腾讯云代金券