---
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)
```
## 什麼是新增語法? (箭頭函式、let & const)
與語法糖相反，新增語法會影響當前JS的運作。
### 避免值不存在
以範例而言，people.jay不在物件裡面，所以會跳紅字錯誤。
這時可以利用 `?.` ( **可選串連運算子** ) 來避免console中跳紅字錯誤，回傳出 `undefined` 的結果。
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()` 會報錯。
因此我們可以透過 `[...]` 將他轉成純陣列，這樣才不會報錯。
### 預設值
我們在做這類計算函式時，需要加入預設值避免錯誤。
原始函式:
```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://zh-hant.reactjs.org/docs/state-and-lifecycle.html](https://zh-hant.reactjs.org/docs/state-and-lifecycle.html)
> 什麼時候會用到？前端框架、後端均是套用此概念，掌握對於未來學習及開發相當有幫助
## **使用 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關注點分離介紹
傳統
Vue(不需要render)
#### 常用的指令
資料
##### {{ }}
```
{{ 可以放任何表達式 }}
{{ 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)
```
<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)
大括號也可以這樣塞
```{{ isMember ? '$2.00' : '$10.00' }}```
**表達式都可以塞**
**陳述式都不能塞**
```✔ {{ a=1 }}```
```❌ {{ var a=1 }}```
Sign in with Wallet
Connect another wallet