查看文章 |
穷夯JavaScript基础——分离JavaScript代码与HTML页面
2007-03-08 21:23
现在的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中测试通过。 |
最近读者：
