快捷導(dǎo)航

JavaScript的事件綁定(方便不支持js的時候)

更新時間：2013年10月01日 14:42:56 作者：

看了JavaScript DOM 編程藝術(shù)的Best Practices那章，才知道我們在制作網(wǎng)頁的時候有很多東西需要考慮

首先，比如我們使用JavaScript來加強我們的網(wǎng)頁，但是我們要考慮到，如果用戶的瀏覽器不支持JavaScript，或者用戶disable了JavaScript的功能，那我們的網(wǎng)頁能不能正常顯示呢？例如下面的例子，

復(fù)制代碼代碼如下:

其中popUp這個函數(shù)是自定義的，新打開一個窗口來限制URL中的網(wǎng)頁。但是如果當(dāng)客戶端不支持時，那這個網(wǎng)頁就不能正常工作了。所以我們在這樣做的使用，也考慮到更多，使用如下的代碼就會顯得更加合適。

復(fù)制代碼代碼如下:

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

接著，作者以CSS為例子。在我們使用CSS的過程中，我們發(fā)現(xiàn)，除了我們使用了<link>把CSS文件給加載進來外，我們沒有在我們的網(wǎng)頁內(nèi)容中加入任何css相關(guān)的代碼，這樣就能很好的把structure和style分開了，即我們的css的代碼沒有侵入我們的主要代碼里面。這樣就算客戶端不知道css，但是我們的主要內(nèi)容客戶還是可以看到的，我們的內(nèi)容結(jié)構(gòu)也能在客戶那里顯示出來。所以JavaScript相當(dāng)于behavior層，css相當(dāng)于presentation層。JavaScript也能像CSS一樣做到?jīng)]有侵入性。下面是書上的一個例子。

復(fù)制代碼代碼如下:

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

上面這段代碼已經(jīng)能保證在客戶端不支持JavaScript的情況下仍然可以正常的工作，但是上面的代碼中出現(xiàn)了onclick這樣的event handler。所以現(xiàn)在我們使用像CSS中的方式來完成我們所要的功能。如下：

復(fù)制代碼代碼如下:

這樣，我們能在這個頁面加載完成的時候，執(zhí)行window.onload中，來檢測哪些<a>是使用了class，然后統(tǒng)一使用popUp的方法。如下代碼

復(fù)制代碼代碼如下:

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，這樣能加快我們網(wǎng)頁的加載。

下面我在看書的時候碰到不懂的問題，希望大蝦們能幫忙解決一下。

對于<script>應(yīng)該放在哪里？JavaScript DOM編程藝術(shù)中所說的，我們可以把<script>放在</body>之前，不要放在<head></head>里，這樣可以加快我們加載page的速度。不是很理解。

原文：

The placement of your scripts in the markup also plays a big part in initial load times. Traditionally,
we were told to always place scripts in the <head> portion of the document, but there's a problem with
that. Scripts in the <head> block the browser's ability to download additional files (such as images or
other scripts) in parallel. In general, the HTTP specification suggests that browsers download no more
than two items at the same time per hostname. While a script is downloading, however, the browser
won't start any other downloads, even on different hostnames, so everything must wait until the script
has finished.
If you're following the progressive enhancement and unobtrusive methodologies discussed earlier
in the chapter, then moving your <script> tags shouldn't be an issue. You can make your pages load
faster simply by including all your <script> tags at the end of the document, directly before the </body>

tag. When the scripts load, your window load events will still apply your changes to the document.

您可能感興趣的文章: