如何优化您的网页脚本，让脚本代码和HTML相分离
对于一般做网页的人员来说，可能在页面中使用脚本代码都比较随意。甚至于很多人在做网页的时候，脚本代码都是从别的网站上COPY过来的， 由于脚本的书写不规范，往往存在许多的浏览器不兼容的问题。而当要来修改脚本代码的时候却又无从下手，因为整个网页太乱了，网页中 的<script>标签总是这里一片，那里一片。同时，事件写法也不规范，网页中标签上一段onclick="..."，调用另外一个地方定 义的函数，要修改这些东西，总要在网页中这儿去找那儿去找，大伤脑筋。本文就这些不良的习惯进行说明，告诉大家如何规范网页中的脚本，让脚本代码更易于维护。
学习任何程序之前，无论是学java,还是C, 还是.net等等这些，老师都会告诉我们，注意代码的书写规范，注意转行，注意代码缩进！ javascript当然也不例外，而且这些代码编写格式，在javascript中我们更加应该注意！ 这是因为，javascript不像其它的编程语言，出错后有很强的错误提示。它出错后，在浏览器中往往只会显示一个很简短的错误提示信息，例如在IE浏览器下，那些脚本错误的提示往往让我们不知所以，甚至错在哪行都不知道（IE所报的错误行号还经常不准确），半天不知道错在哪里，累死累活，最后发现是某个地方少了个括号，或者某个地方多了个字符...... 有人说，我可以用火狐的firebug调试脚本（它的脚本调试功能的确很强大），是的，但是不要忘了，你写的程序还是要去兼容IE浏览器的，很多时候还是得去IE下面调试你的程序。写脚本的时候，我们往往会花大量的时间和精力去找错误，而本人一再强调书写规范、书写规范，也正是因为如此，我们可以将这种时间和精力的花费降到最低！我们来比较一下, 下面这两段有语法错误的示例性的代码吧：
示例1:
function printHh(){
for(var i=1;i<6;i++){ if(i==3)continue;
document.write(i+"<br />");}
示例2:
function printHh(){
for(var i = 1; i < 6; i++){
if( i == 3 ) continue;
document.write(i + "<br />");
}
这两段代码是一样的，但是，相信您从示例2一看就知道错在哪儿，但是对于示例1,您还会那么容易的就找到错误原因吗？更何况这儿的示例代码只是寥寥几个语句，而我们实际编写的程序往往不会只有这么几行！
本文就不再阐述怎么去缩进和转行了，如果您不清楚的，您应该去补习补习javascript的基础知识了。本文的重点在于讨论如何优化您的javascript脚本开发。而前面所说的，正是优化要做的首要事情 －－ 注意代码的转行和缩进。
只注意代码的转行和缩进是远远不够的，我们还有很多事情要做。在制作网页的时候，网页中这儿一段脚本，那里一个onclick="..."的事件句柄，除了脚本之外还有css样式,还夹杂着动态程序的代码输出（例如asp的<%...%>片段，php的<? ... ?>片段，jsp或dot net里的动态标签等等），而我现在只想改我的脚本，不想去看其它的东西，这里问题就出来了，就好比你有一辆小汽车，无论它是奔驰宝马也好，还是QQ奥拓也罢，原本这辆车仅仅是轮胎有点问题，而当修车师博把轮胎修好了，却发现方向盘被弄坏了，遇到这种事情，是不是非常的郁闷呢？我想在编写网页的时候，您也不想成为像这样的“修车师博”吧？那么我们就应当把网页HTML代码和JS脚本进行分离！让我们只专注于脚本编写，而不会影响到其它的东西。好了，如何做到呢？
要实现分离首先我们得把javascript脚本挑出来！那么动手吧，去找<script...> ...</script>片段，把分散在HTML各处的多个这样的片段拼成一个。大多数情况是，这些片段里面是一些变量声明，函数定义之类的代码，可以合并，但是如果里面有document.write("...");语句就要注意了，合并之后，可能输出到别的地方去了。因此先不能动含有 document.write("...")的那些<script>片段。
把我们能合并的<script>片段合并了，那么我们再把每个页面中都需要使用到的公共脚本放到一个单独的JS文件中去，并在 需要使用的页面中引入这个JS文件。把只有具体某一个页面用到的脚本，放在这个页面的head标签元素里面， 或者也把它单独存成一个文件，然后在这个页面加入<script src="..."></script>把它包含进来。这样，我们要改脚本的话，直接去对应的地方改就行了，不用到网页HTML代码中去翻找脚本片段了。
下面举个例子，来说明本人是如何做的：
例如我要做一个管理系统，里面大量应用了脚本，我的后台目录结构是像这样的：
/admin/ 后台系统的根目录
/pro/ 产品管理的目录
pro_in.asp 产品添加/修改页
pro_ls.asp 产品管理页
/news/ 新闻管理的目录
news_in.asp 新闻添加页
news_ls.asp 新闻管理页
.....
大致这样的目录结构，其中pro_in.asp, pro_ls.asp, news_in.asp, news_ls.asp这些页面里面都有些脚本，有的脚本是所有页面都需要用到的，有的是只有那一个页面用到的脚本。我新建了几个名叫js的目录，并把公共的脚本和具体某个页面用到的脚本分别放在不同的js目录中，结构如下(注意红色部分是新添加的)：
/admin/
/js/ 公共脚本存放目录
public.js
/pro/
/js/ 私有脚本存放目录
pro_in.js
pro_ls.js
pro_in.asp
pro_ls.asp
/news/
/js/ 私有脚本存放目录
news_in.js
news_ls.js
news_in.asp
news_ls.asp
.....
js文件都按这个目录结构进行存放，以后要修改某个页面的脚本（例如news_in.asp页面的脚本），我只要去找/news/js /news_in.js这个文件进行修改就行了。而我的news_in.asp这个网页里面，除了<head>头里面有两段脚本包含的代码外，页面其它的地方是没有任何JS代码的（将JS代码和网页完全分离了）。news_in.asp网页的<head>头里面的内容就像这样：
.....
<script src="../js/public.js" type="text/ecmascript"></script>
<script src="js/news_in.js" type="text/ecmascript"></script>
看到了吗？对于其它的页面，都是像这样的，只是上面红色的“news_in.js"这个地方根据不同的页面，调用的脚本文件各不相同。
讲到这里，可能很多的人有疑问了，这样做，好像很多程序不能运行，例如上面所说的，如果脚本中含有document.write("...")输出，怎 么办（1）？还有，如果把所有js代码放到head那儿包含进来，脚本可能会出错了，因为有些脚本代码是在访问网页中的某些元素，而浏览器在加载<head>区域的时候，那些元素还没有被下载到客户端，因此脚本出错了,也就是说，元素的加载和脚本的执行是有先后顺序的（2）！ 还有，网页中的onclick="..."之类的事件句柄代码还是得调用脚本，也就是说，还是得去网页中修改调用脚本的事件绑定代码（3）, 对于这些问题，下面一一作答。
（1）. document.write的问题，
如果我们要在网页的某个地方输出一些内容，又不能把js代码放到网页的那个地方，怎么做呢？我们可以在要输出内容的那个地方，给那个元素取一个具有唯一性的ID值，例如我要在某个td单元格内用JS脚本输出一些内容。我就给这个td设置一个id,例如：
<td id="abc"></td>...
或者也可以新建一个子元素并指定一个id,例如：
<td><div id="abc"></div></td>....
最后，我就可以把document.write("...")的代码改成这样的形式了：
document.getElementById("abc").innerHTML="....";
（2）. 对于元素的加载，和脚本执行顺序的问题，我们可以使用document.onload事件，很轻易的解决这些问题，例如某段js代码引用了某个元素,也就 是说原本这个脚本必须放在这个HTML元素后面，才可以正常执行，我们现在可以把这段脚本放到document.onload事件处理函数中去，这样，该脚本代码就不一定非要放到HTML元素的后面了，就像下面这样：
document.onload = function(){
//脚本代码
}
（3）. 看明白了上面的第2点，那么第3点您应该也知道该怎么做了，原来我们在HTML元素上面去写onclick="..."，现在，我们也可以使用像上面这样的机制，首先给元素取一个ID值，让JS能够访问到它，然后事件代码像下面这样放置，就不需要再到HTML元素上添加 onXxx="..."形式的代码了：
document.onload = function(){
document.getElementById("abc").onclick=function(){
//事件执行代码
}
}
通过上面这些方法，我们可以把所有的脚本代码都放到独立的JS文件中去。以实现网页HTML代码和脚本代码完全分离。最终应该要做到，网页中除了<head> 区域内的一些包含脚本或少量脚本代码外，其它的地方不应该存放任何脚本代码，包括HTML元素标签上的onXxx="..."（Xxx为事件名，例如click, focus, change等），应该完全丢弃这种做法，从此不要在元素上面添加形如 onXxx="..." 这样的代码了。
