DOM脚本编程基本原则和良好习惯

最新推荐文章于 2021-07-26 08:57:31 发布

无着无依

最新推荐文章于 2021-07-26 08:57:31 发布

阅读量512

点赞数

本文链接：https://blog.csdn.net/conpgy/article/details/8458094

版权

百日筑基专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这两天准备学习下JavaScript，其实我对html也一点不熟，暂且就把刚看的书的关键点记录下来。

本文将谈论以下三点：

1. 预留退路：确保网页在没有JavaScript的情况下也能正常工作。
2. 分离JavaScript：把网页的结构和内容与JavaScript脚本动作行为分开。
3. 向后兼容性，确保老版本的浏览器不会因为你的JavaScript脚本而死机。

预留退路

应该使访问者在他们的浏览器不支持JavaScript的情形下也能顺利地浏览你的网站。这就是所谓的预留退路。

下面讨论一下用户点击某个链接时，弹出一个新窗口。
注意* 应该只在有绝对必要的情况下才使用弹出窗口。
JavaScript使用window对象的open()方法来创建新的浏览器窗口：

window.open(url, name, features)

open()方法是BOM的一个典型应用案例：它的功能即不依赖文档的内容，对文档的内容也无任何影响。这个方法只与此时此刻的用户浏览环境有关。
如：

function popUp(winURL) {
		window.open(winURL, "popup", "width = 320, height = 480");
	}

这个函数将打开一个320像素宽、480像素高的新窗口“popup”。我们可以把这个函数存入一个外部文件。因此，当需要在某个网页里使用这个函数时，只要在这个网页的<head>部分用一个<script>标签导入那个外部文件即可。函数本身不会对网页的访问性产生任何影响。

“javascript:”伪协议（不推荐使用）
伪协议是人们对非标准化通信机制的统称。可以通过“javascript:”伪协议调用popUp()函数如下：
<a href="javascript:popUp('http://www.example.com');">Example</a>
这条语句在支持“javascript:”伪协议并启用了JavaScript功能的浏览器中运行正常；不支持这种伪协议的浏览器则会去尝试打开那个链接但失败。总之，这种做法不好。

内嵌的时间处理函数（不推荐使用）
示例如下：

<a href="#" οnclick="popUp('http://www.example.com/'); return false;">Example</a>

"#"符号是一个提供文档内部使用的链接符号。这种方法也不好。

上面两个方法不好的原因是如果访问者在浏览Web时禁用JavaScript，那么将不能访问你的网页。
我们可以为JavaScript网页预留退路。如上面的示例，我们我们使用如下方法：

<a href="http://www.example.com/" οnclick="popUp('http://www.example.com/'); return false;">Example</a>

上面的URL出现了两次，我们可以改成一下形式：

<a href="http://www.example.com/" οnclick="popUp(this.getAttribute('href')) return false;">Example</a>

上面这样并没有简明多少。可以使用DOM提供的this.href属性。如下：

<a href="http://www.example.com/" οnclick="popUp(this.href) return false;">Example</a>

CSS表示层

想要获得最佳的表示效果，就应该把CSS代码从HTML分离开来放在外部文件里。
CSS代码与HTML混在一起示例如下：

<p style="font-weight: bold; color: red;">
	Be careful!
	</p>

更好的做法是先把样式信息存入一个外部文件，再在文档的<head>部分用<link>标签来调用这个文件：

	.warning {
		font-weight: bold;
		color: red;
	}

class属性是样式与文档内容之间的联结纽带：

	<p class="warning">
	Be careful!
	</p>

分离JavaScript

用下面这条语句表明”当这个链接被点击时，它将调用popup()函数“：

<a href="http://www.example.com/" class="popup">Example<a>

下面是JavaScript代码：

var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++)
{
	if(links[i].className == "popup")
	{
		links[i].onclick = function() {
			popUp(this.getAttribute("href"));
			return false;
		}
	}
}

如果把这段代码存入外部JavaScript文件，它们将无法正常运行。因为这段代码的第一行是：var links = document.getElementsByTagName("a"); 这条语句在JavaScript文件被加载时立即执行。而JavaScript文件是从HTML文档里的<head>部分用<script>标签调用的，所以它将在HTML文档之前被加载到浏览器中，而此时HTML文档还没有全部加载到浏览器中，文档模型也不完整。没有完整的DOM，getElementsByTagName()也就不能正常工作。

必须让这些代码在HTML文档全部加载到浏览器之后才开始执行。HTML文档全部加载完毕时将触发一个事件，这个事件有着它自己的处理函数。

HTML文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。

因此，可以把JavaScript代码打包在prepareLinks()函数里，并把这个函数添加到window对象的onload事件上去，这样就可以正常工作了。

window.onload = prepareLinks;
function prepareLinks() {
	var links = document.getElementsByTagName("a");
	for(var i = 0; i < links.length; i++)
	{
		if(links[i].className == "popup")
		{
			links[i].onclick = function() {
				popUp(this.getAttribute("href"));
				return false;
			}
		}
	}
}

向后兼容性

你的网站的访问者可能为激活JavaScript功能。同时，不同的浏览器对JavaScript的支持程度也不一样。可以用一条if语句进行测试。如下：

window.onload = prepareLinks;
function prepareLinks() {
	if(!document.getElementsByTagName) return false;


	var links = document.getElementsByTagName("a");
	for(var i = 0; i < links.length; i++)
	{
		if(links[i].className == "popup")
		{
			links[i].onclick = function() {
				popUp(this.getAttribute("href"));
				return false;
			}
		}
	}
}