本文介绍了一种JavaScript代码与HTML页面分离的方法，通过将所有事件处理和逻辑操作置于外部JS文件中，实现代码的模块化管理。此方法有助于提高代码的可维护性和复用性。
现在很多页面的javascript都是直接写在页面上，当然，很多人也 使用
<script type ="text/javascript" srr=.."></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标准javascript图片转换的例子</title>
<script type="text/javascript" src="jsfile.js"></script>
</head>
<body onload="OnLoadEven();">
<div id="aLink"> </div>
<a href="#" id="picLink"><img id="picSrc" src="" alt ="显示的图片" /></a>
</body>
</html>
下面的js代码 保存为jsfile.js文件调用
var LinkArray=new Array();
//设置图片和要到的连接
LinkArray[0]=new Object();
LinkArray[0].pic="http://zi.youkuaiyun.com/no1.280-187.gif";
LinkArray[0].Link="http://microsoft.youkuaiyun.com/contest2007/";
LinkArray[1]=new Object();
LinkArray[1].pic="http://images.youkuaiyun.com/20071023/qq.gif";
LinkArray[1].Link="http://subject.youkuaiyun.com/carolqq.htm";
LinkArray[2]=new Object();
LinkArray[2].pic="http://images.youkuaiyun.com/20071022/fa.gif";
LinkArray[2].Link="http://subject.youkuaiyun.com/computer.htm";
LinkArray[3]=new Object();
LinkArray[3].pic="http://zi.youkuaiyun.com/no3.gif";
LinkArray[3].Link="http://microsoft.youkuaiyun.com/contest2007/";
var index=0;
function $(id)
...{
return document.getElementById (id);
}
function AddLink()
...{
//添加的目标DIV
var control=$("aLink");
//显示1|2|3|4 建立连接
for(var iCount=0;iCount<LinkArray.length ;iCount++)
...{
var aL =document.createElement ("a");
aL.setAttribute ("href",LinkArray[iCount].pic);
aL.setAttribute ("id",iCount);
aL.onclick=function()
...{
ShowPic(this);
return false;
};
aL.appendChild(document.createTextNode (iCount));//文本
control.appendChild(aL);
control.appendChild (document.createTextNode (" | "));
}
setTimeout("ChangPic()",1000);
}
//自动改变图片
function ChangPic()
...{
$("picLink").setAttribute ("href",LinkArray[index].Link);
$("picSrc").setAttribute ("src",LinkArray[index].pic);
index++;
if(index==LinkArray.length) index=0;
setTimeout("ChangPic()",1000);
}
//显示图片
function ShowPic(control)
...{
$("picLink").setAttribute ("href",LinkArray[control.id].Link);
$("picSrc").setAttribute ("src",LinkArray[control.id].pic);
}
//onload中添加相关事件，可以把其他要初始化的函数继续添加
function OnLoadEven()
...{
AddLink();
}
<script type ="text/javascript" srr=.."></script>来隐藏部分代码断，但是对于事件啊，属性都没隐藏。我这里的隐藏是把事件也隐藏了。
先说说隐藏的好处，程序员可以专写javascript，不会由于页面的变化而影响，知道对象的id不变，代码就可以不变，不用写事件在相关的地方，代码和html也不会互相干扰，下面是一个常见图片转换连接的例子，不过我没有美化。
HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>标准javascript图片转换的例子</title><script type="text/javascript" src="jsfile.js"></script></head><body onload="OnLoadEven();"> <div id="aLink"> </div> <a href="#" id="picLink"><img id="picSrc" src="" alt ="显示的图片" /></a></body></html>var LinkArray=new Array();//设置图片和要到的连接LinkArray[0]=new Object();LinkArray[0].pic="http://zi.youkuaiyun.com/no1.280-187.gif";LinkArray[0].Link="http://microsoft.youkuaiyun.com/contest2007/";LinkArray[1]=new Object();LinkArray[1].pic="http://images.youkuaiyun.com/20071023/qq.gif";LinkArray[1].Link="http://subject.youkuaiyun.com/carolqq.htm";LinkArray[2]=new Object();LinkArray[2].pic="http://images.youkuaiyun.com/20071022/fa.gif";LinkArray[2].Link="http://subject.youkuaiyun.com/computer.htm";LinkArray[3]=new Object();LinkArray[3].pic="http://zi.youkuaiyun.com/no3.gif";LinkArray[3].Link="http://microsoft.youkuaiyun.com/contest2007/";var index=0;function $(id)...{ return document.getElementById (id);}function AddLink()...{ //添加的目标DIV var control=$("aLink"); //显示1|2|3|4 建立连接 for(var iCount=0;iCount<LinkArray.length ;iCount++) ...{ var aL =document.createElement ("a"); aL.setAttribute ("href",LinkArray[iCount].pic); aL.setAttribute ("id",iCount); aL.onclick=function() ...{ ShowPic(this); return false; }; aL.appendChild(document.createTextNode (iCount));//文本 control.appendChild(aL); control.appendChild (document.createTextNode (" | ")); } setTimeout("ChangPic()",1000);}//自动改变图片function ChangPic()...{ $("picLink").setAttribute ("href",LinkArray[index].Link); $("picSrc").setAttribute ("src",LinkArray[index].pic); index++; if(index==LinkArray.length) index=0; setTimeout("ChangPic()",1000);}//显示图片function ShowPic(control)...{ $("picLink").setAttribute ("href",LinkArray[control.id].Link); $("picSrc").setAttribute ("src",LinkArray[control.id].pic); }//onload中添加相关事件，可以把其他要初始化的函数继续添加function OnLoadEven()...{ AddLink();}所有的事件都在onload事件中初始化，页面再也看不高关于javascript的任何东西，这就是关于javascript代码页面分离的一个基础例子
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
