常常聽到 JavaScript 的語法作用域和其它語言有些不同，主要是 JavaScript 是屬於使用「靜態作用域」的語言，那什麼又是「靜態作用域」呢？

簡單來說，「靜態作用域」就是變數的作用域在被解析時，就已經確定了作用域，且不會再改變。有靜態就有動態，而「動態作用域」又是什麼？
「動態作用域」是變數的作用域，在調用函式的時候才決定。

靜態作用域，是在 語法解析的時候，就已經確定了。
動態作用域，是在函式被調用呼叫的時候才決定的。

1
2
3
4
5

function callName() {
  let moi = 'Tsuifei';
  console.log(moi);
}
callName(); // Tsuifei

在function裡的變數因為被函式包住，所以是區域變數，而在函式最外層的則是全域變數，所以在上面這段程式中，我們呼叫了callName()這個函式，再進去一行行執行函式內，當我們要它印出moi時，他會先去上面（已經讀到的）找，這時會找到let moi = 'Tsuifei';而把'Tsuifei'印出來。

但是如果函式裡面找不到moi，又要在函式裡面印出moi呢？因為moi這個變數是在callName()這個函式被定義的，所以它的作用域就會在這個函式裡。

1
2
3
4
5

function callName() {
  let moi = 'Tsuifei';
}
callName(); //
console.log(moi);

1
2
3
4
5
6
7
8
9

let moi = 'Philippe';
function callName() {
  let moi = 'Tsuifei';
  console.log('內：' + moi);
}
console.log('外：' + moi);
callName();
// 外：Philippe
// 內：Tsuifei

參考：
Javascript 進階 2-3 語法作用域(Lexical scope) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Ajax 全名為 Asynchronous JavaScript and XML，一種允許瀏覽器與伺服器交換資料，而不需刷新頁面的技術，都可以叫做 Ajax.

Ajax 這個名字是在 2005 年 5 月的時候，Adaptive Path 的 Jasse James Garrett 在他所寫的文章 Ajax : New Approach to Web Application 中提出的。而 Ajax 這項技術，是由 Google 在 Google labs 發佈的 Google Maps 和 Google Suggest 後真正為人所認識。

Ajax 的技術特殊在於，資料在瀏覽器端與伺服器端交換資料時是「獨立傳輸」而不需要返回整個頁面，只需要更新頁面的一部分。

不需要更新整個頁面資料的技術有好幾種：

• Flash
• Java applet
• 框架
• 隱藏的 iframe
• XMLHttpRequest : 此物件是 JavaScript 的一個模組，可使網頁與伺服器進行溝通，是創建 Ajax 應用的最佳選擇，實際上通常我們會把 Ajax 當成 XMLHttpRequest 物件的代名詞。

Ajax 的工作原理

Ajax 相關工具

Ajax 並不是新技術，它實際上是集合好幾種技術，每種技術各盡其職，整合起來而成的技術。

• 伺服器端語言：伺服器端需具備像瀏覽器發送特定訊息的能力，Ajax 與伺服器端語言無關。
• XML(eXtensible Markup Language, 可擴展標記語言)，是一種描述資料的格式。Ajax 需要某種格式化的格式來在客戶端和伺服器端之間傳遞資料，XML 是其中一種。
• XHTML 和 CSS 標準化呈現
• DOM 可以與之實現動態顯示與互動。DOM 簡介
• 使用 XMLHTTP 組件 XHLHttpRequest 物件進行非同步資料讀取。
• 使用 JavaScript 綁定和處理所有的資料。

Ajax 缺點

• 由 JavaScript 和 AJAX 引擎導致的瀏覽器兼容問題。
• 頁面局部更新，導致後退功能失效。
• 對串接媒體的支持沒有 Flash, JavaScript 好。
• 部分 Mobile 設備如手機、平板支援度差。

XMLHttpRequest 概述

XMLHttpRequest 最早是在 IE 5 中以 ActiveX 組件的型態實現的，它並不是 W3C 的標準。

• Internet Explorer 把 XMLHttpRequest 當成是一個 ActiveX 物件。
• 其他瀏覽器如 FireFox, Safari, Opera 把 XMLHttpRequest 當成一個本地端的 JavaSCript 的物件。
• XMLHttpRequest 在不同瀏覽器上是可以互相兼容的，所以可以用同樣的方法去走訪 XMLHttpRequest 實例的屬性和方法，不論這個實例是用哪種方式創建。

創建 XMLHttpRequest 物件

為了每次寫 Ajax 的時候可快速開發，可以把 XMLHttpRequest 物件測試寫成一個可重複用的函式：

1
2
3
4
5
6
7
8

function getHTTPObject() {
  let xhr = false;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
}

HTTP 請求(request)與回應(response)

一個 HTTP 請求(request)由四個部分組成

• HTTP 請求方法(method)或「動詞」(verb)
• 所請求的 url
• 一組選擇性的請求標頭(headers)，其中包含認證(authentication)資訊
• 一組選擇性的請求主體(body)

伺服器所送出的的 HTTP 回應(response)有三個部分

• 由數值與文字所組成的狀態碼(status code)，指定請求或失敗。
• 一組回應標頭(headers)
• 回應主體(body)

使用 Axios

Axios 在 Github 上說明，可透過 npm 安裝在開發專案上，或者也可以使用 CDN 將 Axios 引進來，就可以開始用了。

先以 GET 的方式向 Server 請求資料，因為 Axios 是非同步，所以response會在程式一行行都跑完後，最後才會跑.then的部分。

線上模擬 api www.mocky.io

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>;

// 使用 GER 方法

// Make a request for a user with a given ID
axios
  .get('/user?ID=12345')
  .then(function (response) {
    // handle success 接收伺服器的回應
    console.log(response);
  })
  .catch(function (error) {
    // handle error 如有錯誤會到這裡
    console.error(error);
  })
  .then(function () {
    // always executed 無論如何都會執行
  });

// 使用 POST 方法

HTTP Methods

運作方式為 Server -> JSON -> Client -> AJAX -> Server

1. GET 讀取 readoncy

只有 GET 才應使用 Query String (重要)
如果 fd 結尾 -> 讀取單一物
如果沒有 fd 結尾 -> 讀取該物的 collection

2. DELELE 刪除特定資料

3. POST 建立新資源

會把資源的 ID 傳回給用戶
如果 POST 兩次怎麼辦？

4. PATCH 更動資源的部分內容

• URL = /v1/users/1001
• Method = PATCH
• Request Body = { “age” : 31}

5. PUT 新上傳的內容、覆蓋原來的

或是 Partial Update 部分更動

6. Method OPTIONS

• 用來查詢某ㄧ資源，並能使用的 method
• 在 cors domain request 時 Client 端會先發出 OPTIONS 查詢

相關連結：
axios/axios: Promise based HTTP client for the browser and node.js

什麼時候會用到自定義指令？除了原本的默認內置指令，雖然 Vue 的元件是可以複用的，但有時候我們仍然需要對普通 DOM 元素進行不同效果的操作，這時候就會用到自定義指令。在 Vue 內建的指令無法滿足需求或需要一個特別的功能時，就可以自己攥寫自定義指令，好處是可以重複使用。

自定義指定有兩種：全域自定義指令與局部的自定義指令。有時候我們在一個頁面裡可能會引入或增加好幾個 Vue 的實例，如果是全域的自定義指令，表示所有的 Vue 實例都可使用這個指令，但如果是局部自定義指令，需要指定能使用這組指令的 Vue 實例。

之前的幾篇都有介紹此表前半段的 Vue 內建指令用法，這裡要介紹最後面的兩個內建指令ref和v-cloak
先來 codepen 看看：Vue.Js ref 唯一識別 與 v-cloak 隱藏表達式

有時我們拿到一包資料，需要透過過濾器來拿到我們想要的資料格式。例如我們可以透過一些外來的函式庫，拿到一些資料，但如果想依照我們想要的格式顯示，就必須過濾我們要的資訊，再依我們用的函式庫規則，寫成想要顯示的格式。

先來 Codepen 看一下效果 Vue.Js Filters 過濾器

什麼是過濾器

過濾器的功能是要對顯示的資料進行特定的格式化後再顯示，且過濾器並不會去改變原本的資料，而是產生一個新的對應的資料格式。

原本在一般頁面要製造一些簡單的動畫效果，只要掌控 class 和 Css 就好了，但是如果要在框架內做這些動態效果，如何做？

在 Vue 裡有它的特殊做法，必須把享有動態效果的元素，以<transition>的標籤包起來，並給予一個name的屬性，然後在 CSS 裡，以這個name來作為 class 的名稱，並加上動畫不同時期的後綴，來達到動態效果。

先來看一下 Codepen VueJs Transitioning Single Elements/Component 過渡與動畫效果

在 Vue 所使用到的整個生命週期方法，可以想像成是一齣戲要上演，哪一個主角需要在哪個時候上場、哪個配角需要在哪個時刻退場，都需要有邏輯才可以讓故事產生連貫性與流暢。

Vue 的生命週期方法雖然共有八個，但並不是每個都需要用到，就像在戲裡，有些橋段不出現、配角不出現也不會影響整齣性的故事性。

把 Vue 的生命週期分為三個大階段會比較容易理解：第一階段的「初始化顯示」、第二階段「更新狀態顯示」、第三階段「死亡、銷毀 Vue 實例」，每個階段都有對應的生命週期 callback 方法，這些生命週期的方法也稱為「生命週期鉤子」掛載在不同時期。 Vue 的生命週期比 React 還要複雜一些。

為了避免 this 的混淆，這些生命週期的方法都是回調方法(callback)，所以最好一律都寫成箭頭函式，讓 this 直接指向父級，也就是 vue 實例本身。

使用 Vue 資料雙向綁定的特性，做表單資料的自動收集。

先去 codepen 看看：Vue.js Form Input Bindings 表單輸入綁定

通常在處理表單的時候，在填完表單時，通常以<from>標籤內的action屬性來傳送，但在 Vue 裡，可以先把<from>的預設submit動作取消，並以監聽的方式(v-on)處理：@submit.prevent(方法)。當我們按下送出表單鍵時，就會去執行handleSubmit這個方法，在方法裡在指定我們希望如何處理表單內的資料就可以了。

表單裡的標籤綁定

主要以v-model來做資料的雙向綁定，達到自動收集填入資料的目的。
表單裡有單純的輸入(text/textarea)、單選項(radio)、複選項(checkbox)和選單(select)，實例中我們必須先在data裡初始化我們會用到的值，這些初始值則是對應到 HTML 表單標籤裡的value，例如，如果我們希望預設的radio選項是 female，在data裡的sex初始，給female就可以了，以此類推。

事件處理在網頁上的應用非常廣，無論是我們滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊，都可以因為這個互動，讓網頁做些事。但在程式裡，其實就是瀏覽者做了某些事(事件監聽)
，然後我們要給出什麼反應(事件觸發)，例如，點一下按鍵，我們要程式去做某些事，例如呼叫某支函式要它做些什麼，或者，我們希望能取到瀏覽者所點擊到的值。

Codepen : Vue.js Event Handling 事件處理

如何把現有的陣列，在做完過濾後存在另一個新的陣列裡？如何讓頁面即時顯示這個新的陣列列表？要產生新陣列的條件有哪些？原本的陣列、輸入框輸入了什麼資料？只要拿得到這兩個資料，就可產生新的過濾後的陣列。

我們來看一下，該如何進行？ 或是先來看一下完整的原始碼

輸入框先以v-model綁定資料，這個資料是過濾的條件searchName，需要去實例初始化它。

過濾條件後所產生的新陣列filterPersons則是透過searchName和persons陣列所計算產生出來的，所以我們需要一個在實例中的計算屬性 computed 的方法，去產生新的陣列filterPersons。這個方法的回傳值即是顯示的結果。

將原本的陣列persons套用filter()方法，再以indexOf()方法，用searchName !== -1ˋ 這個條件去查找的結果，存入新陣列fPersons中。