【九層之臺】Web開發教程：4. JS

4. JS

開始之前

在正式開始JS的學習之前，我希望各位能夠通過具體的實踐對前幾章的應用進行一次複習。從理論上講，使用HTML和CSS技術已經可以做出任何想做的精美的網頁了。你可以嘗試給自己做一個好看的個人主頁，或者去“臨摹”一些做的比較好看的網頁。當你對構建一個網頁有了一定的自信以後，就可以進入本章的學習了。

JS是Javascript的縮寫，是一門腳本編程語言，也是傳說中“屬於Web時代的語言”。我們通過HTML和CSS代碼做出的網頁，跟“應用”兩個字是不沾邊的，它只是一個顯示信息的網站而已。如何把網頁變成網頁應用呢，這就需要JS這門正經的編程語言出場了。

本章的內容可能對完全沒有編程基礎的同學有些困難，畢竟JS是一門真正的編程語言，我也不會從零基礎的編程入門開始講解。如果有不懂的，可以多多嘗試或者尋求網上編程入門教程的幫助，也可以看一看W3School和菜鳥教程上關於JS的教程。

如今，JS代碼可以作用於幾乎所有地方，但本章所講的JS僅僅是JS在瀏覽器上的冰山一角，也僅僅是把大家帶進JS龐大的生態系統之中而已。我不是很推薦大家去學習純淨的原生JS，因爲本教程後面的章節會講很多關於網頁應用的更先進的JS庫，所以本章只是帶大家簡單瞭解以下JS的基本語法。

控制檯

打開瀏覽器的調試控制檯，在元素控制檯標籤的右側，點擊控制檯標籤，就可以看到我們瀏覽器的腳本控制檯了。

試一試，輸入這行代碼並敲擊回車鍵：

console.log("Hello!");

在JS的代碼中，console.log()函數用於輸出內容到控制檯。就網頁來說，想要顯示信息還有以下兩種方法：

document.write("Hello");
alert("Hello");

第一個是在網頁頁面上打印文字，第二個是彈框。

在網頁JS代碼的調試過程中，我們通常使用輸出到控制檯的方式來了解腳本運行當中的一些過程數據。控制檯可以自動組織各種對象、數組的顯示形式，非常方便。

頁面引入

在HTML代碼中，可以通過script元素直接寫入JS代碼。它可以出現在body元素的任何位置。你可以嘗試在body元素中插入以下代碼：

<script>
  alert("JS is here!");
</script>

但是，這樣做通常會影響HTML代碼的整潔，因此，我們可以在index.html文件旁邊新建文件index.js並寫入alert("here!");。
然後在body元素中寫入

<script type="text/javascript" src="./index.js"></script> 

就可以引入外部的JS文件啦！

對象

在JS中，所有數據內容都是“對象”，包括函數、變量等。最基礎的對象形如：

{
  key: "value",
  key2: 100
}

對象內部包含若干個不重名的變量名，對應有各種類型的值。注意，JS是一種弱類型語言，對於數字、字符串等類型可以自動轉換。對象內的值也可以是另一個對象，因此對象可以嵌套。

在聲明變量的時候，我們可以用var或者let，它們之間有一些差異，請自行學習。在聲明常量的時候，我們可以使用const關鍵字。例如：

let myObject = {
  key: "value"
}

注意到，變量名myObject使用駝峯命名法（除了第一個單詞以外，各個單詞首字母大寫）。

通過.來訪問對象的成員，例如myObject.key的值就是value。

還有一個特殊的對象：數組。數組中的數據包含在中括號中，並且通過下標引用。例如：

let myArray = ["value1", "value2", 100];
console.log(myArray[0]);
console.log(myArray);

在對象內，this指代的是對象本身。通過this可以在對象內訪問對象的其他變量和函數。

各位可以在控制檯上摸索一下。

控制結構

對於一門編程語言，核心就在控制結構上。我們主要用到下面幾種控制結構。

分支結構

和C/C++一樣，使用if和else結構，例如：

if (12 > 10) {
  console.log("12 > 10");
} else {
  console.log("12 <= 10");
}

注意，在條件表達式裏面，不同類型的變量會自動轉換類型比較。如果要強制全等（包括類型），需要使用===運算符。

循環結構

和C/C++一樣，使用for，例如：

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

同時，在JS中，循環語句還可以遍歷數組和對象。有以下兩種使用方式：

• for (let i in a)在循環內部，變量i遍歷對象a的所有鍵（key）。對於數組來說，變量i遍歷數組a的所有下標。
• for (let i of a)在循環內部，變量i遍歷對象a的所有值（value）。對於數組來說，就是遍歷數組中所有的值。

例子：

let myArray = ["value1", "value2", 100];
for (let i of myArray) {
  console.log(i);
}

函數

通常來說，JS的函數定義使用function關鍵字：

function myFunction(p1, p2) {
  console.log(p1 + p2);
}

請注意，函數的參數表不需要聲明變量類型。

這種函數定義方法等效於把函數賦值給一個變量（因爲函數也是對象）：

let myFunction = function(p1, p2) {
  console.log(p1 + p2);
}

JS還支持一種特殊的函數定義方法，使用=>的箭頭函數：

(p1, p2) => {
  console.log(p1 + p2);
}

箭頭函數的特點是，在函數內部this指向的是函數定義的時候所指向的this，而不是函數調用的時候的this。

異步

（這部分比較複雜）

JS最大的特性就是它的異步處理了。所謂異步，是指邏輯處理並不排成一條線，而是多個任務同時處理。例如，一個函數在等待網絡請求響應的時候，其他函數還能夠正常工作。但是，如何去調度異步邏輯呢？比方說，如果網絡請求被響應了，需要進入下一步了，怎麼引導腳本語言進入下一個函數呢？

JS大致有三種異步處理方法，按照出現時間排序是：

• callback回調，即給需要等待結果的函數傳入下一步的函數作爲callback參數，當等待完成以後，調用這個callback函數。問題：很多個函數回調會導致“回調地獄”，代碼會變得極其複雜，很難開發和維護。
• promise結構，是JS標準ES6提出的新的解決方案。通過.then()調用下一個函數和.catch()處理錯誤的方式控制邏輯鏈。（如果想要深入學習請自行百度）
• async/await結構，是JS標準ES7提出的最新的異步解決方案，它對promise結構進行了封裝。對於需要控制異步邏輯的函數，在function前面加一個關鍵字async，即可在函數內部使用await關鍵字等待另一個函數的返回。

舉個例子：

async function goodFunction() {
  await someFunction();
  await otherFunction();
  console.log("All done");
}

在這個例子中，如果someFunction和otherFunction都是需要等待的函數，則會等待它們完成以後，纔會輸出All done到控制檯。如果不使用async/await結構，則會讓兩個需要等待的函數同時運行，同時執行輸出語句到控制檯。

操作瀏覽器

URL

可以通過設置變量window.location.href來設置當前訪問的URL，從而實現跳轉。當然也可以通過這個變量來獲取當前訪問的URL。

存儲

瀏覽器提供多種存儲方式，都可以在瀏覽器控制檯的應用標籤上查看：

• 內存：直接創建和操作變量。
• sessionStorage，頁面關閉就會被清除的臨時存儲，只能存儲字符串，可以通過直接操作window.sessionStorage對象的方式讀寫，也有幾個操作函數。
• localStorage，頁面關閉也不會清除的緩存，只能存儲字符串，可以通過直接操作window.localStorage對象的方式讀寫。也有操作函數。
• indexedDB，儲存在瀏覽器上的數據庫，使用方法非常複雜，這裏不做介紹了。

例子：

window.localStorage["key"] = "value";
console.log(window.localStorage["key"]);
// create a reference
let SS = window.sessionStorage;
SS["key"] = "another value";
console.log(SS["key"]);
SS.removeItem("key"); // remove

DOM操作

原生JS實現交互的原理是，通過操作document對象來操作網頁的DOM，從而控制網頁的顯示內容。例如通過document.getElementById()函數來選定具有特定id屬性的HTML元素進行操作。

原生JS對網頁的操作比較繁瑣，本篇教程不予介紹。

JS庫

終於到了激動人心的時刻了。鑑於JS操作DOM的繁瑣和複雜，在Web發展的這麼多年裏，有一大批對原生JS進行封裝，從而方便我們使用JS實現網頁交互的JS庫，例如著名的Jquery，就是一個比較輕量級的JS庫，通過利用與CSS選擇器一樣的語法操作網頁上的元素。你可以自行學習它們的使用方法。

對於一些比較大型的網頁，我們通常會使用一些比較體系化的前端JS框架。JS框架往往從根本上改變了代碼的運行原理，可以說是在原生JS上添加了一層邏輯，讓你可以通過比較簡單的方式實現多樣化的交互。當下流行的前端JS框架有：

• Angularjs
• Reactjs
• Vuejs

本篇教程將循着筆者的技術棧，向大家介紹Vuejs的使用方法。