Javascript學習指南（第2版）筆記(一) Script、資料類型和變數、操作符和語句

1、Script的 defer屬性
2、為body添加指令碼
3、CDATA小節
4、null和undefined變數
5、縮減JavaScript代碼

1、Script的 defer屬性

     如果將defer屬性設定為"defer"，那麼表示該指令碼不會產生任何文檔內容，於是瀏覽器可以提前處理頁面的剩餘部分，在頁面處理結束並做好顯示準備時才處理指令碼部分。defer屬性可以提高頁面載入的速度，特別是那些引用了大量的JavaScript代碼或者龐大的JavaScript程式庫的頁面。

<script type="text/javascript" defer="defer"> 
 no content being generated  
</script> 

2、為body添加指令碼

     前面我們曾經說過，因為對script元素進行集中管理有利於網頁的可維護性，所以script元素通常將添加在網頁上的head元素中。然而，在body元素中添加指令碼的原因往往是出於效能的考慮。

     因為瀏覽器從同一個網域名稱並發載入的資源是有限制的，所以，當把指令碼添加到head元素中時，首先載入的將是指令碼，其次才是文檔的剩餘部分。此外，瀏覽器可能會延遲頁面剩餘部分的顯示，因為指令碼中可能會調用document.write方法修改document對象。如果JavaScript檔案很龐大，那麼網頁中的圖片以及其他重要的資訊將會被延遲顯示，這所帶來的問題遠比可維護性更加重要。

     即使在script元素中使用defer屬性也不一定能完全解決該問題，特別是並發資源訪問和頁面顯示的限制。
 
     在High Performance Web Sites（中譯版《高效能網站建設指南》一書中，作者推薦將script元素放在文檔的最末尾處，這樣網頁的其他部分就可以優先載入。大多數複雜網站的開發人員更傾向於這種方法。這種方法帶來的負面影響是指令碼不容易尋找，網頁的可維護性也較差。
 
     那麼什麼才是最佳方法呢？我發現大多數網站並不引用龐大的JavaScript程式庫，在保證較好效能的前提下，將指令碼放在head元素中，也確保網頁可維護性的優勢。不過，如果的確需要使用龐大的JavaScript程式庫，那麼可以考慮將指令碼放在頁面的最末尾處。 

     不論採用何種方法，請確保指令碼位置的一致性，要麼全部放在head元素中，要麼全部在body元素的最末尾處。

3、CDATA小節
 

<script type="text/javascript">  
//<![CDATA[   

function hello() {
   var msg = "Hello, <em>World!</em>";
   document.open();
   document.write(msg);
   document.close();
}

//]]>
</script> 

     之所以使用CDATA小節，是因為XHTML處理器在解釋標記型語言時會識別出所有的開始標籤和結束標籤。
 
     在分頁檔中通過script元素的src屬性引用的JavaScript，是XHTML標準所相容的，並且不要求使用CDATA小節。如果是嵌入的JavaScript代碼，那麼就需要使用CDATA小節，特別是包含在body元素中的代碼。對於大多數瀏覽器而言，還需要用JavaScript注釋符（//）來隱藏CDATA小節，如樣本1.3所示，否則將會出現JavaScript錯誤。
 
     當然，保持頁面整潔的最佳方式是將JavaScript代碼從頁面中徹底移去，改成使用連結JavaScript檔案的方式。

     在本書的大多數樣本中，JavaScript代碼是直接嵌入在頁面裡的，這樣可以提高代碼的可讀性且易於檢查。然而，Mozilla推薦將所有嵌入的JavaScript代碼都從頁面中移去，放在獨立的JavaScript檔案中。使用獨立的JavaScript檔案，可以避免校正以及文本解釋錯誤等問題，而不用擔心頁面是以HTML還是XHTML的方式進行處理。

提示
     使用JavaScript檔案往往也能提高網頁載入的效率，因為瀏覽器會在第一次載入檔案的時候進行緩衝，引用相同檔案時則會從緩衝中擷取。

4、null和undefined變數

null變數是已定義的、值為null的變數。以下是一個null變數的樣本：
var nullString = null;

如果變數已經聲明但是還沒有初始化，那麼就是undefined變數：
var undefString;

如果聲明了變數並且賦予了初始值，那麼該變數就不是null或undefined：
var sValue = ""; 

     當你使用JavaScript程式庫時，或者在一些複雜的代碼中，某些變數有可能還沒有初始化；如果嘗試在運算式中使用這樣的變數，那麼就有可能得到出乎意料的結果，通常會導致JavaScript錯誤。如果不確定變數的狀態，那麼可以在條件運算式中測試該變數，例如： 
if (sValue) ...     // 如果變數是null或undefined，那麼結果為true，否則是false 

     在第3章中將詳細介紹條件陳述式，現在你只需要知道該運算式會判斷變數sValue是否已經聲明並初始化，如果已聲明並初始化則該運算式的值為true，否則，該運算式的值為false。

if (unknownVariable)     // false，變數沒有聲明或賦值  
if (undefinedString)     // false，變數沒有賦值  
if (nullString)           // false，變數已經聲明並且賦值，但是所賦的值是null  
if (sValue)                // true，變數已經聲明並且賦值（包括Null 字元串） 使用null關鍵字，可以判斷數值是否為null：

if (sValue == null) 
     在JavaScript中，即使變數已經聲明，但只要還沒有初始化就是undefined變數。如果變數已經聲明並初始化，那麼變數就不是null或undefined。然而，在該樣本中它是一個全域變數，正如之前的章節所述，沒有以var關鍵字聲明的變數可能會引起各種各樣的問題。

 

5、縮減JavaScript代碼

     空格能夠提高代碼的可讀性，但同時也會增加檔案的大小。通常情況下，這沒什麼影響，因為大多數JavaScript檔案都非常小。然而，對於某些大型Ajax應用，或者複雜的JavaScript程式庫來說，太大的JavaScript檔案會影響載入JavaScript的速度。
 
     如果要儘可能壓縮JavaScript檔案，那麼可以選用一些免費的工具，例如Dean Edward的Packer（http://dean.edwards.name/packer/），它能夠在線壓縮JavaScript代碼。或者使用Wikipedia中"minify"條目（http://en.wikipedia.org/wiki/Minify）中所列舉的工具，這些工具可以在案頭或者伺服器上使用。
 
     另一類工具是用來保護JavaScript代碼著作權的。這些工具不僅僅會壓縮JavaScript代碼，甚至還會對代碼進行加密，從而使代碼難以閱讀。