IO通讀JS高程系列（1）--基本概念

I O發表於2018-05-31
JS

《JavaScript高階程式設計》不得不說一本很好的書，自己之前零零星星看了有兩三遍，主要集中在物件，原型，原型鏈這些內容裡面。忽略了一些基本的東西，我想好多童鞋應該和我有一樣的情況。這個系列的目的就是查漏補缺，有不足的地方希望多多指教，如果大家喜歡，請給我點個贊，我會持續的更新下去。當然，不管你看不看，我都會慢慢的更下去，畢竟也是個自我學習的過程。如果看了對你有一點點幫助，我也會很開心。


一，JavaScript的實現（區別ECMAScript）

        雖然JavaScript和ECMAScript通常被表示為相同的含義。但是JavaScript的含義卻比ECMA-262中規定的多得多。所以一個完整的JavaScript實現是有三部分組成的。

1，核心(ECAMScript) 
2，文件物件模型(DOM) 
3，瀏覽器物件模型(BOM）
複製程式碼

ECMAScript 與 Web 瀏覽器沒有依賴關係，我們常見的 Web 瀏覽器只是 ECMAScript 實現可能的宿主環境之一.

是否可以理解為ECMAScript包含於JavaScript之中呢？


javaScript 是一種專為與網頁互動而設計的指令碼語言，由下列三個不同的部分組成： 

 ECMAScript，由 ECMA-262 定義，提供核心語言功能；
 文件物件模型（DOM），提供訪問和操作網頁內容的方法和介面；
 瀏覽器物件模型（BOM），提供與瀏覽器互動的方法和介面。複製程式碼

二， ECMA-262 標準規定了那些內容

大致說來，它規定了這 門語言的下列組成部分：

 語法
 型別
 語句
 關鍵字
 保留字
 操作符
 物件複製程式碼


三，<script>標籤

使用<script>元素的方式有兩種：

1，直接在頁面中嵌入 JavaScript 程式碼和包含外部 JavaScript 檔案 在使用<script>元素嵌入 JavaScript 程式碼時，只須為<script>指定 type 屬性。然後，像下面這 樣把 JavaScript 程式碼直接放在元素內部即可： 

<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>複製程式碼

 包含在<script>元素內部的 JavaScript 程式碼將被從上至下依次解釋。就拿前面這個例子來說，解釋 器會解釋一個函式的定義，然後將該定義儲存在自己的環境當中。在直譯器對<script>元素內部的所 有程式碼求值完畢以前，頁面中的其餘內容都不會被瀏覽器載入或顯示。

上面的程式碼執行之後，如下圖所示：

IO通讀JS高程系列（1）--基本概念

 因為按照解析嵌入式程式碼的規則，當瀏覽器遇到字串"</script>"時，就會認為那是結束的 </script>標籤。而通過轉義字元“/”可以解決這個問題，例如： 

<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>複製程式碼

 這樣寫程式碼瀏覽器可以接受，因而也就不會導致錯誤了。 

2，外部引入，相信大家都很熟悉了。

標籤的位置

這種做法的目的就是把所有外部檔案（包括 CSS 檔案和 JavaScript 檔案）的引用都放在相同的地方。 可是，在文件的<head>元素中包含所有 JavaScript 檔案，意味著必須等到全部 JavaScript 程式碼都被下載、 解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時才開始呈現內容）。對於 那些需要很多 JavaScript 程式碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲 期間的瀏覽器視窗中將是一片空白。為了避免這個問題，現代 Web 應用程式一般都把全部 JavaScript 引 用放在<body>元素中頁面內容的後面， 

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 這裡放內容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
複製程式碼

這樣，在解析包含的 JavaScript 程式碼之前，頁面的內容將完全呈現在瀏覽器中。而使用者也會因為瀏 覽器視窗顯示空白頁面的時間縮短而感到開啟頁面的速度加快了 


延遲指令碼: 

 HTML 4.01 為<script>標籤定義了 defer 屬性。這個屬性的用途是表明指令碼在執行時不會影響頁 面的構造。也就是說，指令碼會被延遲到整個頁面都解析完畢後再執行。因此，在<script>元素中設定 defer 屬性，相當於告訴瀏覽器立即下載，但延遲執行。 

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 這裡放內容 -->
</body>
</html>複製程式碼

 在這個例子中，雖然我們把<script>元素放在了文件的<head>元素中，但其中包含的指令碼將延遲 到瀏覽器遇到</html>標籤後再執行 非同步指令碼 HTML5 為<script>元素定義了 async 屬性。這個屬性與 defer 屬性類似，都用於改變處理指令碼的行為。同樣與 defer 類似， async 只適用於外部指令碼檔案，並告訴瀏覽器立即下載檔案。但與 defer 不同的是，標記為 async 的指令碼並不保證按照指定它們的先後順序執行 

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 這裡放內容 -->
</body>
</html>複製程式碼

 在以上程式碼中，第二個指令碼檔案可能會在第一個指令碼檔案之前執行。因此，確保兩者之間互不依賴 非常重要。  


文件模式

IE5.5 引入了文件模式的概念，而這個概念是通過使用文件型別（doctype）切換實現的 最初的兩種文件模式是： 混雜模式（quirks mode）和標準模式（standards mode）。

 IE 又提出一種所謂的準標準模 式（almost standards mode）。這種模式下的瀏覽器特性有很多都是符合標準的，但也不盡然。不標準的 地方主要體現在處理圖片間隙的時候 

對於標準模式，可以通過使用下面任何一種文件型別來開啟：

 <!-- HTML 5 -->
<!DOCTYPE html>      //只寫了H5的，其他的可以查JS高程書本第17頁複製程式碼


相關文章