樣板字面值（Template literals）基本介紹

我們希望在HTML中插入內容，那插入的內容有字串和變數混合在一起，
我們可以用樣板字面值來達成這種效果。

上面這個範例，你可以看到我們在變數insertContent使用樣板字面值，將我們想要插入的HTML格式寫在裡面，並利用${}來將想要合併的變數也一起並在裡面。
那因為我們用樣板字面值來合併時，我們不需要利用傳統的/來合併字串斷行時的部分。
最後再用innerHTML來插入這個合併完的字串內容。

巢狀結構

加入表達式

樣板字面值除了可以加入變數以外，還可以加入表達式

1
2
3
4

const person = {
	name: '小明',
}
const sentence = `我的名字是${ person.name }，我總共有${ person.cash || 1000 }元`

上面這個範例，你可以看到最後面那個表達式，若person.cash沒有值則回傳1000這個值。

箭頭函式簡寫寫法

原本的函式內容是像下面這樣

1
2
3
4

const test = function (someone) {
	return '我是' + someone
}
test('小明')

step1. 將function取代成箭頭

1
2
3
4

const test = (someone) => {
	return '我是' + someone
}
test('小明')

step2. 箭頭函式的內容是一表達式
這是什麼意思呢，就是代表箭頭函式裡面只有要回傳東西沒有其他內容了。
那這樣的話，我們就可以縮寫成下面這樣，把return拿掉。

1
2

const test = (someone) => '我是' + someone
test('小明')

step3. 若箭頭函式的參數只有一個
若箭頭函式的參數只有一個，我們就可以省略參數旁邊的括號，但要注意喔!!
只有在參數只有一個的時候才能這樣操作，若它是沒有參數 或參數是兩個以上的時候，
是不能省略小括號的。
所以，上面的例子可以改寫成這樣

1
2

const test = someone => '我是' + someone
test('小明')

本篇是用來記錄一下有關Hoisting不太熟悉的部分。

函式傳入參數以及一般變數宣告同時出現時的提升優先順序

1
2
3
4
5

function test (a) {
	console.log(a)
	var a = 12
}
test(10)

本題的答案會是10。
那我們就進行以下的拆解，

1
2
3
4
5
6
7

function test (a) {
	var a = 10;  // 它就是你呼叫時，傳入的參數
	var a;
	console.log(a);
	a = 12;
}
test(10);

Let, Const 基本概念

let 所宣告的變數是可以修改它的值。
const 所宣告的變數是不可以修改它的值。

let 的作用域是用大括號做區分。

1
2
3
4
5
6
7

let ming = '小明'

{
	let ming = '大胖'
}

console.log(ming); // 小明

物件屬性特徵

透過Oject.defineProperty 來定義物件的屬性，且可以調整這些屬性的特徵。
那屬性的特徵有哪些呢?
1.值 2.可否寫入 3.可否被刪除 4. 可否被列舉
那可否被列舉是什麼屬性呢?
就是說當我們想利用for來遍歷某個物件內的所有屬性時，
若有個屬性是不可被列舉的話，則它就不會被遍歷到。

Oject.defineProperty 用法

Oject.defineProperty(物件, 屬性, 用法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var person = {
	a: 1,
	b: 2,
	c: 3
}
console.log(person)

Oject.defineProperty(person, 'a', {
	value: 4,
	writable: true,
	configurable: true,
	enumerable:true
})

console.log(person) // 此時，會看到person的a屬性被改為4了，那writable, configurable, enumerable 預設值皆為true。

這一篇是來筆記一下，我最近看到有關MVC和SPA的概念。
那大部分的內容都是看Huli的這篇文章所得來，並用我自己的話來整理這篇文章的內容。
說是整理也不對，因為，Huli這篇真的太神，已經超清楚了，但是，我還是希望用我自己的話來整理一下。

MVC

仿照huli在文章中常問的三個問題

MVC 這三個區塊分別在幹嘛?

這邊我只想用簡單的話來說明MVC在幹嘛。 因為，書上跟網路上的有些文章在介紹MVC的意思時，都講得有點太咬文嚼字了(可能是我程度不夠吧，嘻嘻)。
M(Model): 跟資料操作有關。即任何跟資料更改有相關的部分都歸它管。
V(View): 跟顯示畫面有關的內容都在這邊。
C(Controller): 將M和V連接起來的橋樑，我看網路上的文章說這部分好像都是用PHP語言來撰寫，也就是後端語言。
那MVC的出現就是要將分工分清楚，取用資料庫就在Model處理，寫HTML就在View處理，最後，在透過Controller從Model取來的資料塞入View中，在將View渲染完的HTML透過
Controller回傳給Server，Server再傳到瀏覽器中，就會看到渲染完的畫面囉。

MVC三個問題

在Huli的文章中常常會問以下三個問題
Q1. 為什麼要有MVC?
Ans: 將程式利用M, V, C三個區塊，將程式碼的職責切分乾淨，讓往後回來再看程式碼比較好管理，也比較看得懂。
Q2. 有MVC和沒有MVC有什麼差別?
Ans: 如果有，你的程式會區分成mvc的架構。如果沒有，那你的程式會所有東西都寫在一起沒有區分開來。
Q3. 什麼是MVC?
Ans: 它是一種程式架構。

JS是以什麼為基礎的物件導向的語言呢?

JS不同於其他物件導向的程式語言，像C++是以「類別」為基礎的物件導向的程式語言。
而JS是以「原型」為基礎的物件導向程式語言。

JS創建物件的方法

以下記錄幾種JS裡面創建新物件的方法
Way1. 用new關鍵字

1
2

const obj = new Object()
obj.name = '物件'

Way2. 物件實字創建

1
2
3
4

const ming = {
  name: '小明'
}
console.log(ming.name) // 小明

this是指向誰

在撰寫前端的專案的時候，時常會遇到 this 指向誰的問題。
所以這邊，就用將書中和網路上的文章讀到的內容，整理並記錄下來。

this什麼時候被決定

在我自己寫的上一篇有提到作用域的部分。
在JavaScript中的function的作用域是靜態作用域，也就是代表在function定義的當下，就被定義了。
而Javascript中的this，就是動態的，這代表什麼，就是function被呼叫的當下，相對應的this才被定義。
在大部分的情況下，this代表的就是呼叫function的物件。
來個範例

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

const getGender = function() {
  console.log(this.gender)
}

const ming = {
  gender: 'male',
  getGender: getGender
}

const tina = {
  gender: 'female',
  getGender: getGender
}

ming.getGender() // male
tina.getGender() // female

上面這個範例，就可以很好的體現什麼叫做，this代表呼叫的function的物件這個概念。

什麼是VueX

在一般的Vue中，同層級的元件之間，我們可以利用eventbus來做同層級的溝通，
但是，eventbus僅止於做簡單的溝通而已。
若我們想利用全域變數來讓同層級的Vue元件做構通，就又會失去Vue雙向綁定的特性。
所以，我們將所有的同階層 或 父子層的元件都丟到VueX，由VueX來做管理，
此時，我們就可以透過VueX來做到同階層的互相溝通，還有，父子層的上下溝通，
同時，又不失去VueX雙向綁定的特性。

VueX - 重要的成員屬性

state: 儲存資料狀態
actions: 如同先前提過的methods，進行非同步與取得資料，但是，特別注意，在這一個功能中並不會改變資料的狀態。
getter: 如同computed，在資料呈現之前會做一些過濾的動作，就會在這個功能中做處理。
mutations: 改變資料內容的方法，而在此功能中，不會處理一些非同步的行為喔，即像是將遠端的api取進來這種事情就不會在這邊做。

這篇要來記錄一下JS的作用鍊和閉包一些特性。
那如果要先來談作用鍊的話，我們一定要先講作用域的部分。

作用域

引用Huli文章裡面有關作用域的解釋，作用域就是變數存在的範圍，依但變數脫離這個範圍，我們就無法存取這個變數了。
而在es6之前，你要創造一個作用域的話，只要創造一個function，而這個function的內部環境就是一個作用域。

1
2
3
4

function funcA(){
  var a = 10;
}
console.log(a); // Error, a is not defined

上面這個範例就可以看出來，JS變數的最小有效範圍是function，這個funcA就是這個變數的作用域範圍，一旦脫離了funcA這個作用域後，就無法再調用這個變數a囉。

範圍鍊

範圍鍊牽涉了以下兩個特性

1. 在JavaScript的變數的最小有效範圍是function。
2. 若在自己的層級找不到該變數的話，就會一層一層往外查找，直到找到Global為止，如果還是找不到的話，就報錯。
3. 因為，在JavaScript中的function是屬於靜態作用域，所以，當函式被定義的當下，其範圍鍊就會順便被定義下來了，而不是在呼叫該函式時，才動態地定義該函式地範圍鍊，
   但是，JavaScript的this，就是屬於動態作用域，因為，它是被呼叫的時候，才被定義。

很好詮釋範圍鍊設定的範例

1
2
3
4
5
6
7
8
9
10
11

var a = 100;
function funcA() {
  console.log(a); // 答案是100 或 200? 
}

function funcB() {
  var a = 200;
  funcA();
}

funcB();

上面這個例子我覺得可以很好的詮釋什麼叫函式的範圍鍊是在定義的時候，就被定義完成了。
首先，funcA函式定義的部分，它的範圍鍊就是它自己的作用域和全域變數的作用域。
第二，所以，當funcA在funcB被呼叫的時候，因為，它的範圍鍊已經被定義好了，所以，它的a就是全域變數的a，也就是100囉。