---
tags: Vue 實戰班
---

# 第二週共筆文件

## this
> 第二週直播影片 上：`24:00` 開始

- 傳統函式
- 只看呼叫前面的那個物件（不看函式如何定義）
- 箭頭函式
- 是看如何定義的，它沒有自己的 `this`
- 物件下需要使用 this，直接在最前面做定義

     var obj = {
        myName: 'Ming',
        inner: {
          myName: 'Ming home',
          fn1: function() {
             var vm = this;
             console.log(vm.myName);
          }
        }
     }

- callback -> simple call
- this 都是指向 Global
- 立即函式前面要加 `;` --> 可搜尋 ASI JS
- [自動插入分號](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Lexical_grammar#%E8%87%AA%E5%8B%95%E6%8F%92%E5%85%A5%E5%88%86%E8%99%9F)

;(function(){

})();

## ES6 module
> 第二週直播影片 上：`1:12:00` 開始

- Script 必須加上 type="module" Chrome 才能跑 import、export
- import、export、from
- 可以將模組化在瀏覽器上運行
- 先有 export，再來決定 import
- <font color="fa1616">export default</font>（預設匯出）：一個檔案只能有一個
- import (自訂名稱) from ...
- 大多用在開發上
- <font color="fa1616">export named</font>（具名匯出）：一個檔案可以有很多個。
- import {模組名稱} from ...
- 大多用在函式庫（框架、外部套件）
- 一次只取出一個內容
- 若想要一次全部匯入的話，可以用

            import * as all from './module.js';
            //將全部的具名，匯出後賦予到 all 這個物件上



- CDN <-- 觀念互通 --> CLI(方便開發)
- [完全解析 JavaScript import、export](https://wcc723.github.io/development/2020/03/25/import-export/)
#### 另一種匯入方式：side Effect
- 通常用在舊的函式庫，如：jQuery
- 開發過程中，需要用到 jQuery ，但是 jQuery 沒有 ES6 的形式，可以直接 import 把jQuery run 起來
- 匯入之後立即看到結果

## Promise 與 Ajax
> 第二週直播影片 下：`04:00` 開始

- Promise > then 會很常寫到

- JS 無論如何都會依序執行
- 在所有非同步事件如 click、setTimeout、ajax...，都不會立即執行這些行為，而是將這些行為放到 event queue 中，等待事件觸發後再回來執行。
- 只需要會呼叫 Promise 函式，不用會建構 Promise

var promiseSetTimeout = function(status) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      if (status) {
        resolve('promiseSetTimeout 成功')
      } else {
        reject('promiseSetTimeout 失敗')
      }
    }, 10);
  })
}

- [JavaScript ES6 Promise](https://wcc723.github.io/life/2017/05/25/promise/)
- [JavaScript Promise 全介紹](https://wcc723.github.io/development/2020/02/16/all-new-promise/)


### Promise 用來解決過巢的問題

-[RANDOM USER GENERATOR](https://randomuser.me/)
-[Axios](https://github.com/axios/axios)
- 外部引入axios (包含以下方法的套件)

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



## ㊙ this 觀念重點
- 留意 axios 裡有個 callback function
- 接下來會用好幾百遍
- 會 「一直出現」 repeat 無限次~~