文章阅读
如何优化您的网页脚本,让脚本代码和HTML相分离
文章类别: JSer入门教程  更新日期: 2012-02-15 18:36:43.0  点击次数:5285
  对于一般做网页的人员来说,可能在页面中使用脚本代码都比较随意。甚至于很多人在做网页的时候,脚本代码都是从别的网站上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="..." 这样的代码了。
 
  好了,讲到这里,我们已经可以实现将脚本代码和网页HTML完全分离了。但是像现在这样实现起来,非常地麻烦,也非常不习惯。那么接下来, 把所有这些繁琐和麻烦的事情全扔给JSer脚本框架吧,让JSer来帮助您,这也是JSer的众多功能之一,让您的javascript代码从此变得简洁,高效。 那么接下来,我们应该开始着手使用JSer了。请浏览本章节后面的文章。
[ 下一篇 如何在网页中使用JSer? ]
鄂ICP备18006629号-1       鄂公网安备 42050302000160号


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。