在JS的專案中很常會使用到物件，那物件就很容易會複製來複製去的，很容易會因為js的物件參照特性而有一些bug，那這一偏就來記錄一下，淺層拷貝和
深層拷貝的關係跟使用方法。
深層拷貝 代表新的變數的值 跟 原本的變數值 沒有任何關係。
淺層拷貝 代表新的變數的值 跟 原本的變數值還是有關係。

淺層拷貝

JS的物件操作是call by reference，所以，當我們直接將某個物件複製給另一個變數時，會因為這他們都指向同一個記憶體位置，集他們都共用同一個物件內容，
此種狀況即為淺拷貝。

1
2
3
4

let obj1 = { value:10 }
let obj2 = obj1
obj2.value = 20
console.log(obj1.value) // 20 被更改到了，淺層複製

forEach 方法

js的陣列用法 push(), sort(), pop() map, filter, reduce
陣列中有 forEach 用法，但是，跟其他陣列方法不一樣forEach 方法並不會回傳值 ，其他的陣列方法則會回傳一個陣列或值

1
2
3
4
5

const people = [ { name: '力宏' }, { name: '小明' }, { name: '小花' }]
var result = array.forEach( function(item, index) {
	return item
})
console.log(result) // undefined

filter 方法

用來過濾符合條件的內容

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

const people = [
  {
    name: '力宏',
    money: 10000
  },
  {
    name: '小明',
    money: 2000
  },
  {
    name: '小花',
    money: 10
  }
]

let result = people.filter( (item, index) => item.money > 1000)
console.log(result)

在我的 Vue 專案中，有用到 Fileters的成員屬性。
那這個 Filters 裡面有撰寫千分號的功能，目的是為每一個數值都加上千分號，讓使用者的閱讀上有更好的體驗。
那本篇就是用來解析一下專案中的千分號函式，每一個部分各代表什麼功能，好讓之後要用的時候，不會用太多時間來回想XDD

千分號函式本體

這邊先放上一個千分號的簡易範例，它有用到 Vue 來做撰寫。

Number.prototype.toFixed(n)

代表要保留該數字的小數點後第 n 位 ，若 n 為 0 的話，就代表小數點後面的數值都不要。

1
2

let num = 123.45
console.log(num.toFixed(0))  // 123 ，會把小數點後面的內容全部刪掉

在HTML5有提供許多新的html標籤，像是<header>、<footer>這類的具有語意的標籤。
它們的用途不只提高網頁的搜尋度，我個人也覺得它讓程式碼看起來更整齊整乾淨XDD
下面就簡介一下 語意化標籤的優點 跟 它們會用在哪裡。

語意化的優點

適當的語意化標記架構可以讓我們的網頁內容更容易被搜尋到，就代表搜尋引擎更容易搜尋到你的網站。
簡單來說就是提升我們網頁的SEO效果。

語意化HTML標籤 v.s 非語意化HTML標籤

早在HTML5之前就已經存在某些語意化的標籤了。

語意化HTML標籤

像是<form></form> 或 <img> 這種HTML標籤，就是很明顯的語意化標籤。
我們很清楚它裡面要放些什麼，我們不會在 <img>標籤裡面放入像<table></table>這類的元素。
那在HTML5中，<h1></h1> - <h6></h6> 這種也是很明確的語意化標籤。

什麼是偽類?

根據W3school 裡面對偽類的定義寫的:
偽類是用於定義元素的特殊狀態

那偽類會通常會用在以下的情境:

1. 當滑過目標元素(:hover)
2. 目標元素獲得焦點的樣式(:focus)

直接來一個目標元素獲取焦點的範例

什麼是偽元素?

根據W3school 裡面對偽元素的定義寫的:
偽元素用于設置元素指定部分的樣式。

那偽元素通常會用在以下的情境:

1. 設置元素的首字母(::first-letter)或 首行(::first-line)
2. 設置元素內容的之前(::before)或之後(::after)
   閱讀全文 »

這一篇的內容是紀錄gulp管理專案並跟bower混用的專案，
這邊我先放上依據以下步驟，完成的專案連結
那我們就開始吧~

gulp 操作步驟紀錄

step1.
首先，你的電腦要先安裝nodeJS。
並輸入node -v 來檢查是否你的nodeJS有安裝完成。
step2.
在你的電腦全域環境中，安裝gulp (每台電腦只需要安裝一次)
輸入指令 npm install gulp -g
安裝完成之後，在編譯器中下gulp -v來查看gulp的版本，
如果有跳出來相對應的版本的話，就代表安裝成功囉~
step3.
接著，輸入指令npm init，來初始化你的專案檔環境，當該指令執行結束，你的專案檔應該會出現一個
package.json的檔案，他可以用來記錄你這個專案檔使用那些相依套件和專案檔的自訂義的執行指令，
在未來，擬將你的專案檔給別人時，不需要將專案檔中的node_module資料夾給別人，因為，別人會輸入npm install，
接著，編譯器就會依照你專案檔中的package.json所紀錄的相依套件來做環境的安裝囉~
step4.
接著，輸入指令npm install ，來為你這個專案檔安裝套件的環境
step5.
安裝完成之後，你就輸入gulp指令，編譯完成後，你專案檔的網頁會直接跳出來。

gulp 的基本認識

gulp 是一個自動化部屬的工具，讓前端工程師可以專注在開發，不用費心在部屬專案環境上。
gulp是建構於npm 和 nodeJS上。
gulp是將各個要執行的任務串起來進行管理，並將管理的檔案匯出到目的地的目錄之下。

總之，就是一個蠻好用的自動化任務管理工具囉~
那下一篇就會詳細記錄怎麼使用gulp來管理專案檔囉。

在上一篇簡介文章是介紹了我們為什要用webpack來管理我們的專案檔。
首先，我先附上以下練習完成後的專案檔連結
接下來，以下的操作步驟，就是將一個專案從無到有創建出來，並用webpack來管理的過程

webpack專案創建操作步驟

step1.
首先，我們先在專案檔裡面新增一個src資料夾，並在裡面新增兩個js檔案，分別為main.js和helper.js。
那main.js檔案，就是做為webpack的進入點檔案用。
那helper.js檔案，就是我們自己主要撰寫js的部分。
所以，我們先在helper.js檔案中加入我們想要撰寫的js內容

1
2
3
4
5
6

---helper.js---
export default {
  fn () {
    console.log('這是一支程式碼')
  }
}

接著，我們在main.js中注入這個helper.js檔案。

1
2
3

---main.js---
import helpers from './helper'
helpers.fn()  // 可以直接調用helper.js檔案裡面的函式囉~

webpack可以用ES6的語法
在webpack可以用ES6來撰寫，故可以用import, export。
因此，我們就可以在某些js檔案，利用export default{}，將這些js檔案的內容輸出出來，且一支js檔案只會有一個export default{}，而export default{}會以物件的型式匯出來。

step2.
但是，因為在step1的階段，我們還沒有安裝webpack，所以，以step1那樣撰寫式不會有任何webpack的作用喔。
那接下來就來安裝webpack到專案檔中。
首先，因為，我們都是使用nodeJS。
那使用nodeJS的話，都會在你的專案檔中，產生一個叫做package.json的檔案。
那這個檔案是用來儲存你這個專案檔中會使用到的nodeJS的套件。
所以，輸入npm init指令，就會直接產生一個還沒有任何紀錄任何相依套件的package.json檔案了。

step3.
輸入npm install ，安裝node_modules。

step4.
接著，輸入npm install webpack webpack-cli --save，使用這個指令來安裝webpack和webpack-cli套件。
那要特別說明--save這個指令，會將你安裝的套件儲存到你在step2產生的package.json檔案裡面。
這個好處是，將專案檔上傳網站時(像github)，可以不用上傳 node_modules，本地端電腦只要執行 npm install 就會依照 package.json 裡面所記載的套件版本去安裝套件，安裝完後，就可以順利執行你的專案檔內容囉~

webpack的作用是?

webpack管理的架構

在專案檔裡面，有很多類型的檔案，像是.png, .jpg, .css, .scss, .vue, .js 等等之類的檔案類型，
我們就可以靠webpack來統一管理它們。
在webpack管理的專案檔裡面都會有一個檔案作為你的進入點，這個進入點檔案就是tree的root。接著，我們就在這個進入點檔案，透過import或require來引入我們需要的檔案。最後，我們執行webpack的編譯指令，webpack就會依循你在注入點檔案中引入的檔案，去對它們做編譯。

HMR (Hot Module Replacement)

webpack這個功能，可以讓你在修改完專案檔的內容時，同時注入到你的網頁中，即時的看出你修改的內容是不是你要的效果。
那webpack中有一個套件叫做webpack-dev-server 就可以實現這樣的環境。
讓我們不用每次修改完，還要自己輸入指令重新編譯專案檔後，在自己到瀏覽器開啟專案檔的html檔案，看修改的內容是不是有達成我們要的效果。

Loader

在前面我們有講到webpack可以編譯像是css和scss這類型的檔案，就是透過像是style-loader, css-loader這些套件，來讓webpack可以編譯各式各樣不同類型的檔案。

plugin

在本文章中的專案，有使用到html-webpack-plugin這個plugin，來對現有的index.html連動產生相對應的html檔案到dist資料夾中。
而在dist這個webpack自動產生的html檔案，我們不需要自己手動寫需要引入那些js檔案喔，因為，webpack就已經會幫我們做得好好的了~~

參考文章

1. webpack使用介紹
2. HMR簡介

為什麼需要Promise?

我們需要Promise的原因是需要解決以下幾種問題:
1. 回呼地獄
當我們需要安排很多個非同步函式的操作順序時，必須在一個函式執行結束之後，
再呼叫其他的非同步函式繼續執行下去，這樣會導致程式碼很亂，而且不容易管理。
2. 寫法不一致
在許多的非同步套件的寫法都不太一樣，這樣的話就會導致程式碼的整體寫法不夠一致。
3. 無法同時執行
在JS的程式碼中，我們無法保證每一個非同步函式都是同時執行。
另外，有時候，我們也希望當所有指定的非同步函式都執行完畢之後，在執行某些內容。
如果，沒有適當的安排的話，這樣的效果是非常難完成的。

那以上就是沒有Promise出現之前，常常遇見的問題囉。

以下先舉個解決回呼地獄的範例
假設我們有在專案檔裡面安裝了axios這個Promise套件

1
2
3
4
5
6
7
8
9

const api = 'https://randomuser.me/api/'
axios.get(api)
.then((res) => {
  console.log(1, res)
  return axios.get(`${api}?seed=${res.data.info.seed}`)
})
.then((res) => {
  console.log(2, res)
})

可以看到以上這個範例在axios套件裡面的Promise就有固定的寫法，利用get來執行ajax的行為，利用then來安排非同步函式的執行順序，
這樣的寫法就解決了寫法不一致 和 回呼地獄的問題。