博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
编写兼容性JS代码
阅读量:6956 次
发布时间:2019-06-27

本文共 2397 字,大约阅读时间需要 7 分钟。

前文介绍了:

  1 

  2

本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与javascript的耦合使用java进行onclick方法编写

  其实javascript不是一门简单的语言,但是由于入门简单,很多人使用的时候,都是直接复制粘贴,导致网页中充斥着大量的冗余代码。

  但是在编写合格的javascript代码时,需要注意:

  1 平稳退化:保证在不支持js或者低版本的浏览器也能正常访问

  2 分离javascript:把html与javascript分离,有助于后期代码的维护

  3 向后兼容性:确定老版本的浏览器不会因为脚本禁止而死掉

  4 性能考虑:确定脚本执行的最优

  编写优化的代码

  针对前一篇中的相册的代码,这里主要修改的地方是把onclick方法删除,在页面加载时,利用onload方法,动态的为a标签添加onclick方法。

  以前的onclick标签处,是这样的:

  执行脚本处,是这样的:

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。然后动态的添加方法:

  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

  上面部分的代码,添加了很多的安全性检查和兼容性,另外一个就是优化onload方法。

  效果与前篇类似,全部代码如下:

             
我的相册

我的相册

image

Choose an image.

View Code

 

转载地址:http://fimil.baihongyu.com/

你可能感兴趣的文章
ubuntu 16.04下docker的安装
查看>>
web页面渲染(一)
查看>>
roadhog+dva中环境变量的配置
查看>>
js解决0.1+0.2==0.3的问题的几种方法
查看>>
python中#!/usr/bin/python与#!/usr/bin/env python的区别
查看>>
第10章:并发和分布式编程 10.1并发性和线程安全性
查看>>
多线程之死锁就是这么简单
查看>>
Python字符串格式化
查看>>
朴素贝叶斯算法文本分类原理
查看>>
轰轰烈烈的搭建Spring + Spring MVC + Mybatis
查看>>
MySQL 单机多实例
查看>>
微信小程序入门到实战(二)
查看>>
graphql-java使用手册:part4 订阅(Subscriptions)
查看>>
理解js对象
查看>>
2017-10-07 前端日报
查看>>
Go 领军人物谢孟军:智能制造渴望银弹,首先要摒弃偏见
查看>>
函数式编程与面向对象编程[3]:Scala的OOP-FP混合式编程与抽象代数理论
查看>>
statsd on steroid
查看>>
【mongoDB运维篇③】replication set复制集
查看>>
php中查询mysql如何在IN 中用数组
查看>>