编写兼容性JS代码
前文介绍了：
本篇主要介绍在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代码的更多相关文章
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- [MIP]mip-script组件自定义 JS 代码使用限制
自mip升级v2版本后,多了一个mip-script组件,很多人就都以为可以写自定义js代码了!然并卵,MIP2页中还是一样不允许自定义javascript代码,所有的交互须通过组件实现. 引用官方说 ...
- 编写高质量JS代码的68个有效方法（七）
[20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（十三）
No.61.不要阻塞I/O事件队列 Tips: 异步API使用回调函数来延缓处理代价高昂的操作以避免阻塞主应用程序 JavaScript并发的接收事件,但会使用一个事件队列按序地处理事件处理程序 在应 ...
- 编写高质量JS代码的68个有效方法（八）
[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（六）
[20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（四）
[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（三）
[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
随机推荐
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- Oracle中关于bitmap index的使用问题
您如果熟悉 Oracle 数据库,我想您对 Thomas Kyte 的大名一定不会陌生. Tomas 主持的 asktom.oracle.com 网站享誉 Oracle 界数十年,绝非幸致.最近在图书 ...
- Web安全--XSS现代WAF规则探测及绕过技术
XSS现代WAF规则探测及绕过技术初始测试 1.使用无害的payload,类似<b>,<i>,<u>观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过 ...
- A Personal Selection of Books on E lectromagnetics and Computational E lectromagnetics---David B. Davidson
链接. General Books on Electromagnetics When our department recently reviewed our junior-level text, w ...
- 【C#】C# 实现发送手机短信
现在很多网站都是短信发送的功能,怎么实现的呢.对于个人站长来说的话,通过使用SMS短信通API接口相对比较划算和简单.那怎么实现呢,步骤如下: 1. 从网上(http://sms.webchinese ...
- URAL 2014 Zhenya moves from parents --线段树
题意:儿子身无分文出去玩,只带了一张他爸的信用卡,当他自己现金不足的时候就会用信用卡支付,然后儿子还会挣钱,挣到的钱都是现金,也就是说他如果有现金就会先花现金,但是有了现金他不会还信用卡的钱.他每花一 ...
- 深入理解maven及应用--转
(一):生命周期和插件 在项目里用了快一年的maven了,最近突然发现maven项目在eclipse中build时非常慢,因为经常用clean install命令来build项目,也没有管那么多,但最 ...
- mysql 存储过程，以及mybatis如何调用
说道存储过程,很多人都知道,但是真正用的人其实很少,但是在某些必要的场景,是必须使用的,虽然可以使用java代码解决,但是效率性能远不及存储过程 曾经在sqlserver 以及pgadmin上用过,m ...
- Android网络之数据解析----SAX方式解析XML数据
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- java14-9 Doteformat的练习
需求: 键盘录入出生年月日,计算出距离现在已经生活了几天 分析: A:创建键盘录入固定模式的字符串 B:计算步骤: a:把输入进来的字符串格式化成日期 b:获取现在的日期,减去格式化后的日期 c:把得 ...