穷夯JavaScript基础——分离JavaScript代码与HTML页面
现在的HTML页面的编写主要分为三部分：
1.(X)HTML作为结构，由资料方编写。
2.CSS作为样式，由美工方编写。
3.JavaScript作为动态处理，由程序方编写。
分离JavaScript代码与HTML页面是一件很重要的事情，尤其是对于大型网站。设计方和代码方通常是两个人或者两个小组分工合作的。作为一个网页设计者，懂JavaScript不应该是条件之一。所以，如果直接在HTML页面中写入JavaScript的话，势必会造成两方效率均下降。
从另一方面来说，结构与样式现在已经成功的分离开。只要网页设计者在块中加入一行<link href="style.css" type="text/css" rel="stylesheet" />之类的标签，然后就不必再理会样式的问题，样式的问题在css样式表中就全都定义了，只需要通过class属性或者独有的id属性为元素进行意义的标识，不需要任何的样式表知识。而JavaScript就没有这么方便。现在的分离方式通常都是在块中加入一行<script src="script.js" type="text/javascript"></script>然后在script.js文件中定义好预定义变量以及全局函数，然后再HTML页中还要添加事件驱动比如<body onload="'init()'">或者<a href="'javascript:alert('click">click me!</a>等等。但是一个网页设计者并不一定能理解onload的含义。如果记性差点，每隔俩小时敲你办公室门问你onload是干什么用的能把你烦死。所以说，这种简单的分离方法分离得不够彻底。分离JavaScript代码应该像分离CSS样式一样，用户只要对元素的意义进行简单的标识就可以自动做好JavaScript的事件驱动。具体的实现方法可以通过DOM来实现。
举一个简单的例子：鼠标指向小图看大图。
smallpic.js
function initSmallPicture()
{
function arraySearch(ary,ele)
{
for(var i=0;i<ary.length;i++)
{
if(ary[i]==ele)
{
return true;
}
}
return false;
}
if(!document.getElementsByTagName) return false;
//遍历所有的<IMG>元素。
var imgs=document.getElementsByTagName("IMG");
for(var i=0;i<imgs.length;i++)
{
//确认该元素的所有class属性值中含有"makeitsmaller"。
//注意，IE和FF对class属性的获取有差别。
var imgClass;
if(imgs[i].className)
imgClass=imgs[i].className.split(' ');
else
imgclass=imgs[i].getAttribute('class').split(' ');
if(!arraySearch(imgClass,"makeitsmaller")) continue;
//更换图片为缩微版本。
var imgurl=imgs[i].getAttribute("src");
var imgurlseprate=imgurl.split('.');
if(imgurlseprate.length<=1)return false;
imgurlseprate[imgurlseprate.length-2]+="_s";
var imgnewurl=imgurlseprate.join('.');
imgs[i].setAttribute("src",imgnewurl);
//存储图片两个版本的路径。
imgs[i].setAttribute("bigsrc",imgurl);
imgs[i].setAttribute("smallsrc",imgnewurl);
//为图片写入事件处理程序。
var overfunc=function()
{
this.setAttribute("src",this.getAttribute("bigsrc"));
return true;
}
var outfunc=function()
{
this.setAttribute("src",this.getAttribute("smallsrc"));
return true;
}
if(typeof(imgs[i].onmouseover)=="function")
{
var oldfunc=imgs[i].onmouseover;
imgs[i].onmouseover=function()
{
oldfunc();
overfunc();
}
}
else
{
imgs[i].onmouseover=overfunc;
}
if(typeof(imgs[i].onmouseout)=="function")
{
var oldfunc=imgs[i].onmouseout;
imgs[i].onmouseout=function()
{
oldfunc();
outfunc();
}
}
else
{
imgs[i].onmouseout=outfunc;
}
}
}
//在网页读取完毕后初始化。
if(typeof(window.onload)=="function")
{
var oldfunc=window.onload;
window.onload=function()
{
oldfunc();
initSmallPicture();
}
}
else
{
window.onload=initSmallPicture;
}
//以上代码不知道应该怎样写成函数，貌似window.onload这类Handle是传值不是传址。
index.htm
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="smallpic.js"></script>
</head>
<body>
<img src="6.jpg" class="makeitsmaller" />
</body>
</html>
这样一来，在HTML业中不需要任何Script代码，不需要改变成缩略图路径，只要在需要做缩略图的图片的class属性中增加一条"makeitsmaller"就可以做到缩略图效果了。
但是这个办法并不是最完美的，比如使用Javascript改变img元素的class属性就不会有效果，除非重新运行一次 initSmallPicture而且只能添加不能去除。而且使用CSS的:hover行为定义比这个简单的多。只不过是用这个作为例子说明分离 JavaScript的方法。
使用JavaScript完全分离还可以做到另外一种效果——定义新属性。
一般来说，网页设计人员中懂(X)HTML的人比懂JavaScript的人要多得多。所以说，如果把JavaScript行为转为HTML行为，势必会受到网页设计人员的欢迎。下面举一个例子，表格<td>元素两种背景颜色交替显示。可以在<table>中定义 ColorTable属性，包含3个部分：行交替还是列交替、颜色1、颜色2，用逗号隔开。具体代码如下。
clrtable.js
// clrtable.js
function colorTable()
{
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("TABLE");
for(var tb=0;tb<tables.length;tb++)
{
if(!tables[tb].getAttribute("ColorTable"))continue;
var tableMessage=tables[tb].getAttribute("ColorTable");
var tableAttributes=tables[tb].getAttribute("ColorTable").split(",");
if(tableAttributes.length!=3)continue;
if(tableAttributes[0]!='row'&&tableAttributes[0]!='col')continue;
var iscol=(tableAttributes[0]=='col');
var rows=tables[tb].getElementsByTagName("TR");
for(var tr=0;tr<rows.length;tr++)
{
if(iscol)
rows[tr].style.backgroundColor=tableAttributes[1+tr%2];
else
{
cells=rows[tr].getElementsByTagName("TD");
for(var td=0;td<cells.length;td++)
cells[td].style.backgroundColor=tableAttributes[1+td%2];
}
}
}
return true;
}
if(typeof(window.onload)=="function")
{
oldfunc=window.onload;
window.onload=function()
{
oldfunc();
colorTable();
}
}
else
{
window.onload=colorTable;
}
test.htm
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clrTable.js test</title>
<script type="text/javascript" src="clrtable.js"></script>
</head>
<body>
<table ColorTable="col,white,grey">
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td></tr>
<tr><td>0,2</td><td>1,2</td><td>2,2</td><td>3,2</td></tr>
<tr><td>0,3</td><td>1,3</td><td>2,3</td><td>3,3</td></tr>
</table>
</body>
</html>
从以上代码可以看出增加的属性和标准HTML属性看起来并无任何区别。同时，对于网页设计人员来说有一个这样的HTML属性会在网页设计中带来很多便利。
以上代码在IE6\FF2\Opera9中测试通过。
1.(X)HTML作为结构，由资料方编写。
2.CSS作为样式，由美工方编写。
3.JavaScript作为动态处理，由程序方编写。
分离JavaScript代码与HTML页面是一件很重要的事情，尤其是对于大型网站。设计方和代码方通常是两个人或者两个小组分工合作的。作为一个网页设计者，懂JavaScript不应该是条件之一。所以，如果直接在HTML页面中写入JavaScript的话，势必会造成两方效率均下降。
从另一方面来说，结构与样式现在已经成功的分离开。只要网页设计者在块中加入一行<link href="style.css" type="text/css" rel="stylesheet" />之类的标签，然后就不必再理会样式的问题，样式的问题在css样式表中就全都定义了，只需要通过class属性或者独有的id属性为元素进行意义的标识，不需要任何的样式表知识。而JavaScript就没有这么方便。现在的分离方式通常都是在块中加入一行<script src="script.js" type="text/javascript"></script>然后在script.js文件中定义好预定义变量以及全局函数，然后再HTML页中还要添加事件驱动比如<body onload="'init()'">或者<a href="'javascript:alert('click">click me!</a>等等。但是一个网页设计者并不一定能理解onload的含义。如果记性差点，每隔俩小时敲你办公室门问你onload是干什么用的能把你烦死。所以说，这种简单的分离方法分离得不够彻底。分离JavaScript代码应该像分离CSS样式一样，用户只要对元素的意义进行简单的标识就可以自动做好JavaScript的事件驱动。具体的实现方法可以通过DOM来实现。
举一个简单的例子：鼠标指向小图看大图。
smallpic.js
function initSmallPicture()
{
function arraySearch(ary,ele)
{
for(var i=0;i<ary.length;i++)
{
if(ary[i]==ele)
{
return true;
}
}
return false;
}
if(!document.getElementsByTagName) return false;
//遍历所有的<IMG>元素。
var imgs=document.getElementsByTagName("IMG");
for(var i=0;i<imgs.length;i++)
{
//确认该元素的所有class属性值中含有"makeitsmaller"。
//注意，IE和FF对class属性的获取有差别。
var imgClass;
if(imgs[i].className)
imgClass=imgs[i].className.split(' ');
else
imgclass=imgs[i].getAttribute('class').split(' ');
if(!arraySearch(imgClass,"makeitsmaller")) continue;
//更换图片为缩微版本。
var imgurl=imgs[i].getAttribute("src");
var imgurlseprate=imgurl.split('.');
if(imgurlseprate.length<=1)return false;
imgurlseprate[imgurlseprate.length-2]+="_s";
var imgnewurl=imgurlseprate.join('.');
imgs[i].setAttribute("src",imgnewurl);
//存储图片两个版本的路径。
imgs[i].setAttribute("bigsrc",imgurl);
imgs[i].setAttribute("smallsrc",imgnewurl);
//为图片写入事件处理程序。
var overfunc=function()
{
this.setAttribute("src",this.getAttribute("bigsrc"));
return true;
}
var outfunc=function()
{
this.setAttribute("src",this.getAttribute("smallsrc"));
return true;
}
if(typeof(imgs[i].onmouseover)=="function")
{
var oldfunc=imgs[i].onmouseover;
imgs[i].onmouseover=function()
{
oldfunc();
overfunc();
}
}
else
{
imgs[i].onmouseover=overfunc;
}
if(typeof(imgs[i].onmouseout)=="function")
{
var oldfunc=imgs[i].onmouseout;
imgs[i].onmouseout=function()
{
oldfunc();
outfunc();
}
}
else
{
imgs[i].onmouseout=outfunc;
}
}
}
//在网页读取完毕后初始化。
if(typeof(window.onload)=="function")
{
var oldfunc=window.onload;
window.onload=function()
{
oldfunc();
initSmallPicture();
}
}
else
{
window.onload=initSmallPicture;
}
//以上代码不知道应该怎样写成函数，貌似window.onload这类Handle是传值不是传址。
index.htm
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="smallpic.js"></script>
</head>
<body>
<img src="6.jpg" class="makeitsmaller" />
</body>
</html>
这样一来，在HTML业中不需要任何Script代码，不需要改变成缩略图路径，只要在需要做缩略图的图片的class属性中增加一条"makeitsmaller"就可以做到缩略图效果了。
但是这个办法并不是最完美的，比如使用Javascript改变img元素的class属性就不会有效果，除非重新运行一次 initSmallPicture而且只能添加不能去除。而且使用CSS的:hover行为定义比这个简单的多。只不过是用这个作为例子说明分离 JavaScript的方法。
使用JavaScript完全分离还可以做到另外一种效果——定义新属性。
一般来说，网页设计人员中懂(X)HTML的人比懂JavaScript的人要多得多。所以说，如果把JavaScript行为转为HTML行为，势必会受到网页设计人员的欢迎。下面举一个例子，表格<td>元素两种背景颜色交替显示。可以在<table>中定义 ColorTable属性，包含3个部分：行交替还是列交替、颜色1、颜色2，用逗号隔开。具体代码如下。
clrtable.js
// clrtable.js
function colorTable()
{
if(!document.getElementsByTagName) return false;
var tables=document.getElementsByTagName("TABLE");
for(var tb=0;tb<tables.length;tb++)
{
if(!tables[tb].getAttribute("ColorTable"))continue;
var tableMessage=tables[tb].getAttribute("ColorTable");
var tableAttributes=tables[tb].getAttribute("ColorTable").split(",");
if(tableAttributes.length!=3)continue;
if(tableAttributes[0]!='row'&&tableAttributes[0]!='col')continue;
var iscol=(tableAttributes[0]=='col');
var rows=tables[tb].getElementsByTagName("TR");
for(var tr=0;tr<rows.length;tr++)
{
if(iscol)
rows[tr].style.backgroundColor=tableAttributes[1+tr%2];
else
{
cells=rows[tr].getElementsByTagName("TD");
for(var td=0;td<cells.length;td++)
cells[td].style.backgroundColor=tableAttributes[1+td%2];
}
}
}
return true;
}
if(typeof(window.onload)=="function")
{
oldfunc=window.onload;
window.onload=function()
{
oldfunc();
colorTable();
}
}
else
{
window.onload=colorTable;
}
test.htm
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clrTable.js test</title>
<script type="text/javascript" src="clrtable.js"></script>
</head>
<body>
<table ColorTable="col,white,grey">
<tr><td>0,0</td><td>1,0</td><td>2,0</td><td>3,0</td></tr>
<tr><td>0,1</td><td>1,1</td><td>2,1</td><td>3,1</td></tr>
<tr><td>0,2</td><td>1,2</td><td>2,2</td><td>3,2</td></tr>
<tr><td>0,3</td><td>1,3</td><td>2,3</td><td>3,3</td></tr>
</table>
</body>
</html>
从以上代码可以看出增加的属性和标准HTML属性看起来并无任何区别。同时，对于网页设计人员来说有一个这样的HTML属性会在网页设计中带来很多便利。
以上代码在IE6\FF2\Opera9中测试通过。