JavaScript DOM 编程艺术第二版读书笔记2-mysql教程-PHP中文网

JavaScript DOM 编程艺术第二版读书笔记2

php中文网

发布： 2016-06-07 15:38:35

原创

1171人浏览过

看了JavaScript DOM 编程艺术的Best Practices那章，才知道我们在制作网页的时候有很多东西需要考虑。首先，比如我们使用JavaScript来加强我们的网页，但是我们要考虑到，如果用户的浏览器不支持JavaScript，或者用户disable了JavaScript的功能，那我们的网

看了JavaScript DOM 编程艺术的Best Practices那章，才知道我们在制作网页的时候有很多东西需要考虑。

首先，比如我们使用javascript来加强我们的网页，但是我们要考虑到，如果用户的浏览器不支持javascript，或者用户disable了javascript的功能，那我们的网页能不能正常显示呢？例如下面的例子，

<a href = "#" onclick = "popUp('http://www.baidu.com') ; return false;">

登录后复制

其中popUp这个函数是自定义的，新打开一个窗口来限制URL中的网页。但是如果当客户端不支持时，那这个网页就不能正常工作了。所以我们在这样做的使用，也考虑到更多，使用如下的代码就会显得更加合适。

<a href = "http://www.baidu.com" onclick = "popUp(this.href) ; return false;">

登录后复制

接着，作者以CSS为例子。在我们使用CSS的过程中，我们发现，除了我们使用了把CSS文件给加载进来外，我们没有在我们的网页内容中加入任何css相关的代码，这样就能很好的把structure和style分开了，即我们的css的代码没有侵入我们的主要代码里面。这样就算客户端不知道css，但是我们的主要内容客户还是可以看到的，我们的内容结构也能在客户那里显示出来。所以JavaScript相当于behavior层，css相当于presentation层。JavaScript也能像CSS一样做到没有侵入性。下面是书上的一个例子。

<a href = "http://www.baidu.com" onclick = "popUp(this.href) ; return false;">

登录后复制

上面这段代码已经能保证在客户端不支持JavaScript的情况下仍然可以正常的工作，但是上面的代码中出现了onclick这样的event handler。所以现在我们使用像CSS中的方式来完成我们所要的功能。如下：

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

登录后复制

这样，我们能在这个页面加载完成的时候，执行window.onload中，来检测哪些是使用了class，然后统一使用popUp的方法。如下代码

var links = document.getElementsByTagName("a");
for (var i=0 ; i<links.length ; i++) {
	if (links[i].getAttribute("class") == "popup") {
		links[i].onclick = function() {
			popUp(this.getAttribute("href"));  //Attention use this in  this place. Because this is equals onClick = "popUp(this.href)"
			//so we cann't use links[i].
			return false;
		}
	}
}

登录后复制

这样就能更少地侵入我们html代码了。

最后，作者讲了我们要做到向后兼容和JavaScript的最小化。向后兼容，我们可以使用类似if(document.getElementById)来测试这个方法时候存在，存在了才能使用。JavaScript代码的最小化主要是为了减少JavaScript，这样能加快我们网页的加载。

下面我在看书的时候碰到不懂的问题，希望大虾们能帮忙解决一下。