---
# System prepended metadata

title: 第一堂：關注點分離
tags: [' 六角學院', 2022 Vue 作品實戰班]

---

---
title: 第一堂：關注點分離
tags: 2022 Vue 作品實戰班, 六角學院
date: 20220107
image:
---

<!-- # 第一週課程重點筆記
###### tags: `Vue 課程重點筆記` `2022` `Vue 直播班` `六角學院`
# **第一堂：關注點分離** -->

# JavaScript 必學語法

## 什麼是語法糖?

    語法糖 : 語法糖意指更加簡潔流暢、更好理解的語法，不會影響運作，邏輯與當前JS一致。
    
參考資料 : [Day20【ES6 小筆記】什麼是「語法糖」哩？](https://ithelp.ithome.com.tw/articles/10218664)


---
> Q : **請問箭頭函式是縮寫嗎?**[color=green]
> 
> A : 箭頭函式不是語法糖，而是新增語法。

傳統函式 :
```jsx=
const obj={
    myName:'物件',
    fn : function(){
        return this.myName;
    }
}
console.log(obj.fn()) //物件
```
箭頭函式:

    tips : 但其實如果有用到this就不能用箭頭函式
    
```jsx=
const obj={
    myName:'物件',
    fn : ()=> {
        return this.myName;
    }
}
console.log(obj.fn()) //undefined
```

> Q : **請問let,const是語法糖還是新增語法?**[color=green]
> 
> A : let , const是新增語法。

因為 `let` 的作用域只存在於 block 之中，超出 block 之外就等於沒有宣告這個變數。反之， `var` 的作用域則不在 block 的限制內，而是在 function 裡面。

```jsx=
{
    let a = 0;
    var b = 0;
};

console.log(b) // 0
console.log(a) // is not defined
```
### 物件字面值

物件內的函式( **縮寫形式** ):

```jsx=
const obj3={
    myName:'物件',
    fn (){
        return this.myName;
    }
}
console.log(obj.fn()) //物件
```

物件內的變數:

```jsx=
const myName = '小明';
const person = {
    //縮寫前
    myName='小明';
    
    //縮寫後
    myName : myName;(x)
    myName (o)
}
consoel.log(person)
```

### 展開

不同陣列合併
```jsx=
const groupA =['小明','杰倫','阿姨'];
const groupB =['老爸','老媽'];

//合併前
const groupAll = groupA.concat(groupB);

//合併後
const groupAll = [...groupA,...groupB]

console.log(groupAll) // ['小明','杰倫','阿姨','老爸','老媽']
```

物件擴展 : 新增一個物件包含新方法，同時加入原有的方法。
> Q : **請問 methods.fn3();可以動嗎?**[color=green]
> A : 可以動。
```jsx=
const methods={
    fn1(){
      console.log(1);  
    },
    fn2(){
      console.log(1);  
    },
}

const methods2 = methods;

//在 methods2 新增一個fn3
methods2.fn3 = function(){
    console.log(3);
}

methods.fn3();

console.log(methods === methods2)//true
```
那如果我希望 `methods2` 的變動不要影響 `methods`呢?

```jsx=
const methods={
    fn1(){
      console.log(1);  
    },
    fn2(){
      console.log(1);  
    },
}

const methods2 = {
    ...methods,
    
    //在 methods2 新增一個fn3
    fn3(){
        console.log(3)
    }
} 
console.log(methods === methods2)//false
```

### 解構 ( 把值取出重新組合並解開，便於把內容拆解出來 )

```jsx=
// 原始
const casper = people.casper;

// 解構
const { casper } = people;

// 取多筆變數
const { casper , ray } = people;

console.log(casper,ray)
```

![](https://i.imgur.com/TvLop1t.png)
    
## 什麼是新增語法? (箭頭函式、let & const)

    與語法糖相反，新增語法會影響當前JS的運作。
    
### 避免值不存在

以範例而言，people.jay不在物件裡面，所以會跳紅字錯誤。

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

這時可以利用 `?.` ( **可選串連運算子** ) 來避免console中跳紅字錯誤，回傳出 `undefined` 的結果。

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

    people.jay是undefined
    
## 陣列方法

- forEach → 資料處理的技巧
    - 可參考：[https://wcc723.github.io/javascript/2017/06/29/es6-native-array/](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)
    - 只要會 forEach 就能吃全部
    - 進階技巧：輕鬆掌握 map, filter

> 什麼時候會用到？隨著資料處理日趨重要，各種¡陣列方法自然符合其需求
參考影片：https://www.youtube.com/watch?v=_vFuDQ_6Xt8
    
### 類陣列轉純陣列，用...展開
    
    類陣列，類似陣列的結構，比起純陣列會少很多方法
    
如範例所示，在我們取出所有的p之後，如果我們用console.log去看p，就會變成 **類陣列** 。此時如果直接用 `map()` 會報錯。

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


因此我們可以透過 `[...]` 將他轉成純陣列，這樣才不會報錯。


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

### 預設值
我們在做這類計算函式時，需要加入預設值避免錯誤。

原始函式:
```jsx=
function sum(a,b){
 return a+b;
}
console.log(sum(1,3))
```
如果console.log沒有輸入b值，b的預設值就會是2;如果有輸入b值，就會以新輸入的值做計算。
```jsx=
function sum(a,b=2){
 return a+b;
}
console.log(sum(1))
```
  
#### **縮寫形式**

- 什麼是縮寫？什麼是新增語法？
- ES6 中必學的縮寫技巧

> 什麼時候會用到？撰寫程式碼都力求精簡、易於閱讀，縮寫正好符合此精神
> 

ESLint，寫code規範

#### **樣板字面值**

- 可參考：[https://wcc723.github.io/javascript/2017/12/22/javascript-template-string/](https://wcc723.github.io/javascript/2017/12/22/javascript-template-string/)
    - HTML 結構換行更容易
    - 純文字中插入變數超簡單
- **樣板字面值技巧**
    - 知識點： `${}` 內可以帶入任何可回傳的結果

> 什麼時候會用到？撰寫程式碼都力求精簡、易於閱讀，樣板字面值概念亦同

### **2 ESModule**

**[完全解析 JavaScript import、export](https://wcc723.github.io/development/2020/03/25/import-export/)**

單一檔案程式碼不要太長(約200~300行)，變成元件、函式庫、模組，讓專案程式碼容易閱讀

- 關鍵點：如何匯出影響如何匯入
- ESModule 在實戰中的運用情境
    - 預設匯出(常用)：單一模組、元件開發，一個檔案只能有一個預設匯出
    使用時機:通常Vue開發時，反覆利用的某功能，可以做成模組化
    - 具名匯出：函式庫、自訂方法集，一個檔案能有多個具名匯出
    使用時機:函式庫(jQuery、Bootstrap、Vue)
    - 預設、具名匯入，兩者都會使用，載入順序為逐行執行(單一執行序)

> 什麼時候會用到？將程式碼模組化以及分類管理
> 
- HTML檔案的script片段中，要加入 type = ‘module’
    
```
<script type = 'module'>
</script>
```
    

### **3 關注點分離**

- 參考(Vue專注處理資料”資料處理控制、資料集”，渲染由Vue框架輔助?)
    
    ![](https://i.imgur.com/SRSVvPf.png)

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

    

關注點分離：可參考課前影片常見的關注點分離：

- 資料與畫面分離
- 資料與方法分離

關注點分離的優點：

- 降低程式碼耦合度
- 增加函式可複用性
- 減少重複的程式碼

有哪些主流框架用到關注點分離：全部

- 案例
    
    [https://zh-hant.reactjs.org/docs/state-and-lifecycle.html](https://zh-hant.reactjs.org/docs/state-and-lifecycle.html)
    
    ![https://i.imgur.com/zUiOupA.png](https://i.imgur.com/zUiOupA.png)
    

> 什麼時候會用到？前端框架、後端均是套用此概念，掌握對於未來學習及開發相當有幫助


## **使用 Vue.js 體驗關注點分離**

###  1. 如何載入 Vue.js
1. CDN
2. ESModule
3. Vue Cli (ESModule)
###  2. 常見起手式
#### 載入方式-CDN
建立Vue環境

1.關注點分離，建立基礎結構，Data()
```
const app = {
    data(){
        return {
        }
    }
} 
```

2.createApp建立 及 mount 生成
```
Vue.create(app).mount(’#app’);
```

#### 載入方式-ESM
Vue為具名匯出，要用解構方式import
[Vue cdn](https://cdnjs.com/libraries/vue)
        
```
import { createApp } from 'CDN網址';
const app = createApp({
    data(){
        return {
            person:'卡斯柏';
        }
    }
});
        
app.mount('#app');
```
### 3. 畫面上(View)的常用的指令
#### Vue關注點分離介紹
傳統
![](https://i.imgur.com/QRaMghG.png)
Vue(不需要render)
![](https://i.imgur.com/uuuj94M.png)
#### 常用的指令
資料![](https://i.imgur.com/1Z0NP1v.png)
##### {{ }}
```
{{ 可以放任何表達式 }}
        
{{ person.name }}
{{ isMember?'1':'2' }}
```      
##### v-for(概念與forEach雷同)
```
<ul>
    <li v-for="item in perple">
        {{ item.name }} {{ item.price }} 元
        <img v-bind:src="item.imageUrl" v-bind:alt="person.like"></img>
    </li>
</ul>
```     
##### v-bind
```
v-bind:src="可以放任何表達式"

<img v-bind:src="person.imageUrl" v-bind:alt="person.like">
```       
##### v-on 事件監聽器(addEventListener)
```
<button typr="button" v-on:click="temp = item">按我</button>
```   
#####  v-if, v-else
        
[表達式與陳述式](https://www.youtube.com/watch?v=8hFY3D7z-fM&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2)
        
![](https://i.imgur.com/SZUyZv9.png)
```
<div v-if="temp.name">
    {{ temp.name }}
    {{ temp.price }}
    <img v-bind:src="temp.imageUrl">
</div>
<div v-else>
    請選擇一個品項
</div>
```

```{{ expression }}```
在大括號內可以插入任何**表達式**

```{{ fn() }}```
在大括號內可以插入**函式**

``` ❌ {{ if() {...} }}```
在大括號內不能放入**陳述式**

表達式例子
[條件運算子](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
![](https://i.imgur.com/RDoP3cY.png)

大括號也可以這樣塞
```{{ isMember ? '$2.00' : '$10.00' }}```

**表達式都可以塞**
**陳述式都不能塞**

```✔ {{ a=1 }}```
```❌ {{ var a=1 }}```

