快捷導(dǎo)航

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

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

看了JavaScript DOM 編程藝術(shù)的Best Practices那章，才知道我們?cè)谥谱骶W(wǎng)頁(yè)的時(shí)候有很多東西需要考慮

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

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

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

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

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

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

復(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中的方式來(lái)完成我們所要的功能。如下：

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

這樣，我們能在這個(gè)頁(yè)面加載完成的時(shí)候，執(zhí)行window.onload中，來(lái)檢測(cè)哪些<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)來(lái)測(cè)試這個(gè)方法時(shí)候存在，存在了才能使用。JavaScript代碼的最小化主要是為了減少JavaScript，這樣能加快我們網(wǎng)頁(yè)的加載。

下面我在看書(shū)的時(shí)候碰到不懂的問(wèn)題，希望大蝦們能幫忙解決一下。

對(duì)于<script>應(yīng)該放在哪里？JavaScript DOM編程藝術(shù)中所說(shuō)的，我們可以把<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.

您可能感興趣的文章: