From Gerhut @2007/03/08

穷夯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 ="'init()'">或者<a href="'javascript:alert('click">click me!</a>等等。但是一个网页设计者并不一定能理解的含义。如果记性差点，每隔俩小时敲你办公室门问你是干什么用的能把你烦死。所以说，这种简单的分离方法分离得不够彻底。分离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(!getElementsByTagName) return false;
   //遍历所有的<IMG>元素。
   var imgs=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].over)=="function")
       {
           var oldfunc=imgs[i].over;
           imgs[i].over=function()
           {
               oldfunc();
               overfunc();
           }
       }
       else
       {
           imgs[i].over=overfunc;
       }
       if(typeof(imgs[i].out)=="function")
       {
           var oldfunc=imgs[i].out;
           imgs[i].out=function()
           {
               oldfunc();
               outfunc();
           }
       }
       else
       {
           imgs[i].out=outfunc;
       }
   }
}
//在网页读取完毕后初始化。
if(typeof(window.onload)=="function")
{
   var oldfunc=window.onload;
   window.onload=function()
   {
       oldfunc();
       initSmallPicture();
   }
}
else
{
   window.onload=initSmallPicture;
}
//以上代码不知道应该怎样写成函数，貌似这类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>
       < 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(!getElementsByTagName) return false;
   var tables=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>
< 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>