论文网
首页 理科毕业设计毕业正文

Javaseript DOM脚本程序设计的发展与应用方法

  • 投稿謎称
  • 更新时间2015-09-23
  • 阅读量1017次
  • 评分4
  • 95
  • 0

吴瑕

(四川职业技术学院,四川 遂宁 629000)

【摘要】DOM真正将HTML/XHTML、CSS和Javascript凝聚在一起,形成了功能强大的Javascript DOM脚本程序设计,本文对DOM Javascript脚本程序设计的发展与应用方法做了简要探讨。

教育期刊网 http://www.jyqkw.com
关键词 Javascript DOM;脚本程序设计;平稳退化

0 前言

近年来网页的内容越来越富于变化与色彩,网页设计技术从最初的HTML,再到CSS、Javascript,直到W3C(万维网联盟)推出的标准化DOM(Document Object Model文档对象模型),网页设计工作从过去的混乱无序状态,逐渐发展为一种有着成熟设计原则可循的流水线作业。

1 Javascript DOM脚本程序设计的发展

Javascript是由Netscape公司与Sun公司合作开发的,诞生于1995年,它的出现使网页内容不再局限于枯燥的文本,使网页实现了可交互性。但是早期的Javascript并不受欢迎,原因有多种,如:早期的浏览器彼此很少兼容、Javascript的网页访问性差,早期的程序员对Javascript不遵守相关标准和编程准则的滥用,导致各种问题。如今,随着W3C推出的标准DOM,情况极大改变,几乎所有浏览器都支持DOM,DOM真正将HTML/XHTML、CSS和Javascript凝聚在一起,形成了功能强大的Javascript DOM脚本程序设计,只要应用得当,它将成为Web开发中又一不可缺少的重要工具。

2 Javascript DOM脚本程序的应用方法

2.1 规范应用Javascript

Javascript是Javascript DOM脚本程序设计的基础语言,易学易用,其早期的应用存在不规范,很大程度上造成了人们对Javascript的恶劣印象,所以应该做到规范应用Javascript。首先可以从以下几方面出发:

1)Javascript代码单独保存成.js文件或者把<script>标签放到最后,<body>之前;

2)掌握好基本语法;

3)每条语句末尾加上分号,养成良好编程习惯;

4)养成良好注释的习惯;

5)注意大小写的区分;

6)不要滥用浏览器对象BOM(如弹出窗口的滥用)。

2.2 遵循“用户至上”的原则

用户的体验是检验网页优劣的标准,如果要使用Javascript就必须要先确认:这么做对用户的浏览体验会产生怎样的影响。网站对Javascript的滥用持续了很久,最臭名昭著的就是在网页中弹出广告窗口,从技术层面上看,弹出窗口本是一项很实用的功能,但不少用户还是因为那些广告彻底禁用了Javascript,所以从长远来看,不遵循“用户至上”原则的网站,都是在自取灭亡。

2.3 平稳退化

实际上,一些浏览器不支持Javascript,还有些用户禁用了Javascript,如果能正确使用Javascript,让这些不支持Javascript的浏览器也能顺利浏览网站,这就是“平稳退化”,即:网页某些功能无法实现,但基本的操作仍能顺利完成。目前极少数搜索引擎能够理解Javascript代码,如果能平稳退化,那网页在搜索引擎上的排名也将提前。下面介绍一个平稳退化的经典应用。

2.3.1 超链接打开新窗口的改进

过去要打开一个新窗口,通常写一个执行打开新窗口的操作的popWin()函数,通过下面两种方法调用:

1)“Javascript:”伪协议

<a href=”javascript:popWin(‘http://www.baidu.com’);”>Baidu</a>

2)Onclick事件调用

<a href=”#” onclick=”popWin(‘http://www.baidu.com’);return false;”>Baidu</a>

这两种方法都比较糟糕,因为一旦浏览器不支持Javascript,这样的链接毫无用处。

可以这样改进:

<a href=”http://www.baidu.com” onclick=”popWin(this.href);return false;”>Baidu</a>

这样即使浏览器不支持Javascript,也可以正常的使用超链接,这一个经典的平稳退化,但是仍有改进的余地。

2.3.2 分离Javascript

如果将popWin()这样的事件处理函数都存放在单独的JS文件中,就可以做到Javascript与HTML文档分离了,但是在HTML文档中使用onclick之类的属性也是一种既没有效率又容易引发问题的做法,所以可以做一个“挂钩”,就像CSS机制中的class属性那样,将Javascript的调用行为与HTML文档彻底分离开,网页就会更加健壮。超链接可以这样写:<a href=”http://www.baidu.com” class=”popW”);return false;”>Baidu</a>

将页面上需要调用Javascript事件的超链接定义一个popW 类属性,然后在JS文件中编写preLinks()函数处理文档中的超链接。preLinks()函数如下:

Function preLinks(){

Var links=document.getElementsByTagName(“a”);

For(var i=0;i<links.length;i++) //遍节点树中的超链接

{if(links[i].getAtrribute(“class”)==”popW” //读取节点树超链接节点的class属性值判断

{links[i].onclick=function(){ //如果超链接的class属性值为”popW”,则调用popWin()函数

popWin(this.getAttribute(“href”)); //调用popWin(),获取当前节点的href属性值作为实参

} ) } }

最后只需要将对preLinks()函数的调用添加到window对像的onload事件,即:将<sript>window.onload=preLink()</script>这条脚本语句加在网页文档末尾 ,body之前,这样做不但DOM可以正常工作,而且实现了完美的平稳退化,效率极高。

2.4 性能优化

在编写Javascript DOM脚本程序时,还应该注意脚本对 web应用整体性能的影响,所以还应该注意一些问题:

1)尽量少访问DOM

程序运行document.getElementsByTagName(“a”)都会遍历一遍DOM树,如下程序:

if(document.getElementsByTagName(“a”).length>0)

{var links= document.getElementsByTagName(“a”);

For(var i=0;i<links.length;i++ )

…//对每个a节点的处理

}}

这段代码就要遍历两次DOM树,造成搜索浪费,可以将搜索的结果保存在一个变量中,如果是多个函数中还可以考虑保存在一个全局变量中,提高程序执行效率。

2)和尽量减少HTML标记

3)合并放置脚本

4)压缩脚本

3 总结

本文对DOM Javascript脚本程序设计的发展与应用方法做了简要探讨,总之对DOM Javascript脚本程序开发的学习和应用需要一定的实践经验,只有勤于思考,善于借鉴,不断总结应用技巧,才能编写出高品质的脚本。

[责任编辑:薛俊歌]