Javascript

React 為 component (元件)提供了許多生命週期相關的方法

讓我們可以在 component 輸出前，輸出後，或者被消滅等狀態時，可以藉由這些方法來設計一些行為

所謂 Refs 就是官方不建議使用，又非得談的東西

React 典型的數據流是透過 props 在父子 Component (元件) 之間傳遞，

透過更新 props，透過新的 props 來 re-render 子元件

Event Loop 是 Javascript 主線程循環處理任務列隊（task queue）事件的運行機制

Web Event Loop

單線程設計

Javascript 主線程是以單線程的方式設計

在主線程中，包含許多要執行的任務，可以分成同步(synchronous)及非同步(asynchronous)任務，會按照順序處理這些任務

同步的任務比較單純，會遵照上方的規則，在主線程一個一個接續處理

在處理非同步任務時，不會等待非同步結果，就會接續處理後面的任務

例如，我們執行非同步任務，完成發出 ajax (不會等返回結果)..， 就會接續處理後面的行程

任務列隊（task queue）與 Event Loop

Javascript 會優先處理主線程的項目，接著才會處理任務列隊（task queue）的項目

並且，讀取任務列隊的行為會不斷的重複，及稱之為 Event Loop

當我們一開始執行非同步任務，或者在後續才觸發的任務，都會被排入任務列隊中

主線程就會不斷地去檢查，並依順序處理這些任務列隊中的項目

Node.js Event Loop

Node.js 由javascript建構，也是單線程的設計

圖 by @BusyRich

• Node.js 運作流程，會先從 V8 引擎解析應用程式的 javascript 腳本
• 接著，會調用 Node.js Bindings (Node.js API)
• 再透過 Libuv libary 執行 Node.js API，將這些任務以非同步方式傳給任務所屬的處理線程，並且持續執行，形成Event Loop
• 這些非同步任務取得結果後，會將結果返回給 V8 引擎
• V8再將這些結果傳到客戶端

Node.js 提供了兩個方法 process.nextTick, setImmediate

process.nextTick 可以在主執行線結束之前被執行 (進入下一個Event Loop之前)

setImmediate 可以在目前的任務列隊結束之前被執行

另外，node js 可以透過 Cluster API 來達到多執行緒設計

在javascript建立的基礎底層，都會透過 prototype (原型鍊) 來設計出許多預設功能

開發網站需要留意各種解析度尺寸

這裡就整理一些常見的螢幕尺寸，在開發響應式網站 RWD (responsive web design) 時，可以直接拿來參考

液晶螢幕尺寸（吋） 畫面比例 解析度 15 4:3 1024768 17 / 19 5:4 12801024 19 寬螢幕 16:10 1440900 20 4:3 16001200 20 寬螢幕 16:10 16801050 21 4:3 16001200 21 寬螢幕 16:10 16801050 22 寬螢幕 16:10 16801050 23 4:3 16001200 24 寬螢幕 16:10 19201280

15吋————–原生解析度為1024768，畫面為4:3 17吋與19吋—原生解析度為12801024，畫面為5:4 19吋寬———–原生解析度為1440900，畫面為16:10 20吋————–原生解析度為16001200，畫面為4:3 20吋寬螢幕—–原生解析度為16801050，畫面為16:10 21吋————–原生解析度為16001200，畫面為4:3 21吋寬螢幕—–原生解析度為16801050，畫面為16:10 22吋寬螢幕—–原生解析度為16801050，畫面為16:10 23吋————–原生解析度為16001200，畫面為4:3 24吋寬螢幕—–原生解析度為19201280，畫面為16:10 27吋寬螢幕—–原生解析度為19201280，畫面為16:10 30吋寬螢幕—–原生解析度為25601600，畫面為16:10

Preact 是一個輕量級的框架(又一個坑)，大小僅3kb Preact 類似 React API 及模式，可使用 ES6 Class及Function Component

• 透過 preact-compat 就能簡單的兼容 React
• 包含React所需要的功能: JSX, VDOM, React DevTools, HMR, SSR..
• 高度優化和服務器端渲染
• 可以透過 preact-cli快速建立專案
• 支援 IE9 以上的主流瀏覽器

上面提到，可以透過 preact-cli 來快速建立 Preact Progressive Web App 專案 下面會介紹其特點、安裝及基本使用方式

React Static 是一個漸進式靜態網站生成工具，也是一個在server端渲染React 應用架構的框架，輕量且強大的架構可以滿足 SEO，完善的網站效能及兼顧使用者/開發者的體驗。

React 所產生的單頁式網站預設只有一個 title、meta..

可以透過 react-helmet 套件來動態產生 title、Meta…

推薦一款由 leecade 所發布的 react native swiper 套件，目前版本可以同時支援 iOS 及 Android，並且可以自定義樣式

通常我們需要使用到 Icons 時，都會前往常用的一些 Icon 網站取得相關工具包檔案

現在，在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 類型，容易使用及修改

可以讓我們更簡單就能使用，真的非常方便

一般網頁設計中，我們會使用到 console.log 在 Chrome Developer Tools輸出一些字串， 並且可以在右邊看到這個console.log的位置

如果想隱藏 log 的來源行數 讓其他用戶在 Chrome Developer Tools 無法得知程式的位置，該怎麼做呢?

Set 是一個ES6新的資料結構

像是陣列一樣，可以用來存取值

Set會自動處理掉重複值，並且Set沒有Key，輸出時只會有value (key value都會相同)

帶入方式

只要用 new Set() 將陣列帶入，就可以進行 set 來格式化。

取出方式

可以透過定義一個陣列，及搭配Spread Operator 來取得Set 結構值 […MySet]

好用的方法

Set 有一些方法可以使用 添加值、刪除值、清空值、判斷值是否存在、回傳內容長度

實際應用 - 集合用法

我們可以用 Set 來對多筆資料(array)來進行集合

集合包括 聯集 new Set([…mySet, …mySet2]) 取得整體數據

交集 new Set([…mySet].filter(v => mySet2.has(v))) 取得共同數據

A減B差集 new Set([…mySet].filter(v => !mySet2.has(v))) 取得A扣除B關聯的部分

Spread Operator(展開運算符) 與 Rest Operator (其餘運算符)

這兩種特性原則上及寫法都一樣，

但特徵不同，所以使用情境不同

Spread Operator

把一個陣列展開(expand)成個別值 (這裡陣列也可以用其他iterable的物件，包括: String、Array、Map、Set..等)

Rest Operator

收集其餘的值，轉變成一個陣列

定義函式時，在傳入參數欄位使用一個 Rest Operator， 就能一次取得多個 a,b,c,d,e 傳入值，並轉為陣列格式來使用

Promise 已經被ES6及新的瀏覽器支援，是一個強大的異步執行流程語法結構

Promise 可以讓我們確保某件事情做完之後，才進行後續動作

本質上都是使用callback(回呼函式)，並且都是async(異步執行)

當我們實際執行一個 promise，他會先將狀態切換為 pending(等待中)，並且依照 resolve 或reject 來返回結果

then..catch 連鎖處理

我們可以透過 Promise 來進行 then..catch 連續的連鎖流程處理

Promise.all 方法

promise.all 可以用陣列的方式一次帶入多個promise，

執行到最後會再回傳一個 Promise 物件

有幾點特色:

• 一項被reject或發生錯誤，就會返回 reject
• 全部執行都完成 resolve ，才會返回成功resolve
• 返回的resolve promise順序會跟傳入陣列中的順序一致

promise.race 方法

promise.race 同樣可用陣列的方式一次帶入多個promise，

只要有任何一個值完成，無論是resolve, reject 還是錯誤，都會返回結果

如果傳入的 promise 同時完成，只會返回排陣列在第一位置的 promise 值

ES6 Arrows Function 和 Normal Function 差別

Arrow Function 主要有以下優勢:

• 語法簡單。少打很多字元。
• 可以讓程式碼的可閱讀性提高。
• 會參照當時環境中的 this ( bind(this) )

好處

在使用內部函式時，內部函式有自己的this，通常會指向最外部 windows 物件，

因此，通常要先用變數指定this，傳到內部函式使用，

而 Arrow function 則不必再透過變數就能直接使用外部函式的this作為自己的this

注意情況

在物件裡的屬性，必須使用function，而不能使用 Arrows function

箭頭函式不能當作generators使用，使用yield會產生錯誤。

當我們宣告且呼叫一個函式時，函式本身會形成一個 scope，scope 裡面會包含 Closure

特性

Closure 原則就是，是一個可以用 by Reference 的方式紀錄函式建立時的環境，包括了:

Closure 內部所建立的變數，限定於內部使用，

在Closure 裡也可以存取到 Scope chain 中的所有變數，

Javascript 最難理解的源頭，始於 function

First Class Functions

https://pjchender.blogspot.tw/2016/03/javascriptfunctionobjects.html First Class Functions（一級函式）的概念，是指其他類型（Objects, String, Boolean, Numbers）做的事， Function都能做，包括將Function指定成一個變數等等 (assign them to variables, pass them around, create them on the fly)。

• 函式只是物件的一種
• 可以將 function 儲存成變數
• 可以將 function 當成參數代入另一個 function 中
• 可以在一個 function 中回傳另一個 function
• function 跟物件一樣有屬性（property）

function只是一種特殊的物件，它可以被當作物件來使用

所有函式都是物件中的"方法"

function 本身有幾個scope(作用域):

1. 函式本身
2. 外部函式內容(如果是函式中的函式，可存取外部函式內容)
3. 全域

React 是一個 View 框架，主要的用途有幾個:

• 將UI物件化
• 運用 props 來傳輸數據
• 依照 state 變化來調整 view
• 使用虛擬 DOM 提升效能

在開始之前，請預先安裝 webpack + babel + react依賴環境

接下來，會一步步來說明:

Webpack 是一個 module 整合工具，用來將javascript 打包成一支讓瀏覽器能夠運行的 bundle.js。

看似簡單，但其實功能非常強大

webpack 的功能:

• 和 Browserify一樣，可以整合 ES Modules, CommonJS 及 AMD modules，減少依賴進而加速了運行的時間
• 可以將js打包成單一個 bundle.js 或者多個可以非同步載入的模塊(需搭配plugin，可減少初期載入時間)
• 可結合babel等編譯器，進行文件預編譯功能。例如，將 JSX、ES6、Typescript…轉javascript，Handlebar 字串({{expression}}) 編譯，images 轉 Base64等

此外，還有一些 plugin 可以使用

例如 common-chunks-webpack-plugin - 可以將一些要再多地方共享的模組拆分成獨立的 bundle extract-text-webpack-plugin - 可以將 bundle 中的 CSS 另外存成一支 app.bundle.css html-webpack-plugin - 可用來動態產生HTML內容，並且會自動將打包過的js整合再一起 i18n-webpack-plugin - 可製作多國語系 compression-webpack-plugin - 壓縮內容

本文是依據 Babel 官網及網路參考資料逐步學習記錄的內容

Babel 這個壞男孩(發音似 Bad boy) 喜歡追求新潮的東西，同時內心是個文青，熱愛老東西。所以，當他接觸到新的內容，就會想盡辦法與舊事物融合~ 只能說個性實在完美

每當有新的javascript語法(例如ES2015-ECMAScript 6)出現，都只能靜待瀏覽器支援才能決定是否採取行動。 為了解決這樣的痛點，Babel就出現了。