---
# System prepended metadata

title: 第二週共筆文件
tags: [Vue 實戰班]

---

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

# 第二週共筆文件

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

- 傳統函式
  - 只看呼叫前面的那個物件（不看函式如何定義）
- 箭頭函式
  - 是看如何定義的，它沒有自己的 `this`
- 物件下需要使用 this，直接在最前面做定義
   ```javascript=
     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)
```javascript=
;(function(){

})();
```

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

- Script 必須加上 type="module" Chrome 才能跑 import、export
![](https://i.imgur.com/U332jX4.png =300x)
- import、export、from
    - 可以將模組化在瀏覽器上運行 
    - 先有 export，再來決定 import
        - <font color="fa1616">export default</font>（預設匯出）：一個檔案只能有一個
            - import (自訂名稱) from ...
            - 大多用在開發上
        - <font color="fa1616">export named</font>（具名匯出）：一個檔案可以有很多個。
            - import {模組名稱} from ...
            - 大多用在函式庫（框架、外部套件）
            - 一次只取出一個內容
            - 若想要一次全部匯入的話，可以用 
            ```javascript=
            import * as all from './module.js';
            //將全部的具名，匯出後賦予到 all 這個物件上
            ```

![](https://i.imgur.com/RNBCmUF.png)

![](https://i.imgur.com/xDECb0G.jpg)

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


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

-  Promise > then 會很常寫到

![](https://i.imgur.com/VaMOpbM.png =300x200)
- JS 無論如何都會依序執行
- 在所有非同步事件如 click、setTimeout、ajax...，都不會立即執行這些行為，而是將這些行為放到 event queue 中，等待事件觸發後再回來執行。
- 只需要會呼叫 Promise 函式，不用會建構 Promise

```javascript
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/)

![](https://i.imgur.com/AmGc3NO.png)

### Promise 用來解決過巢的問題
![](https://i.imgur.com/yVgyzym.png)


-[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>
```

![](https://i.imgur.com/hxlnLJa.png)

![](https://i.imgur.com/CV6lesT.png)


## ㊙ this 觀念重點
- 留意 axios 裡有個 callback function
- 接下來會用好幾百遍
- 會 「一直出現」 repeat 無限次~~
![](https://i.imgur.com/QV6beBG.png)
