William ywwwtseng

Introduction

C-a == Ctrl-a
M-a == Alt-a

General

:q        close
:w        write/saves
:wa[!]    write/save all windows [force]
:wq       write/save and close

React Hooks

什麼是 React Hooks?

React Hooks 是 16.7 版推出的功能，使用 React Hooks 讓我們可以減少使用 Class Components 去建構我們的 React 應用程式。

useState

使用 useState 可以讓我們的 Functional Components 具備狀態，userState 的 setter 比 setState 更具可讀性。

Coercion

Coercion 指 JS Engine 將資料從一個型別轉換成另一種型別。

Example 1: JS Engine 將 1 從 number 轉換成 string

var str = 1 + "2"; // "12"

Hoisting

為了提高 Javascript 在瀏覽器上的效能， Javascript 編譯器會進行名為 Hoisting（提升）的行為，當 JS engine對 Javascript 進行編譯時會同時進行變數及函式的宣告，將他們儲存在記憶體中，然後運行被編譯過的代碼。

sayHi();

function sayHi() {
  console.log(words);   // undefined
 var words = 'Hello';

Clean Code For Vue

✌️ Vue

聲明式渲染

善用 computed 屬性去描述一些條件式或可讀性不高的程式碼

<template>

OOJS

在 Javascript 中, 除了 Primitive value (number, string, boolean, null, undefined) 以外, 從字串 (String) 與陣列 (Array) 等核心功能, 到以 Javascript 建置的瀏覽器 API, 都可以算是物件 (Object).

物件 Object

物件 (Object) 是一批 "數據" 及 "功能" 的集合, 一般我們稱做 "屬性" (properties) 和方法 (methods).

物件可以裝載相關資料與程式碼, 當你要用物件塑造某個 thing, 我們會在這個物件設置屬性來定義這個 thing 的資訊, 設置方法實現這個 thing 的行為.

	/*
	* Easing Functions - inspired from http://gizma.com/easing/
	* only considering the t value for the range [0, 1] => [0, 1]
	*/
	EasingFunctions = {
	// no easing, no acceleration
	linear: t => t,
	// accelerating from zero velocity
	easeInQuad: t => t*t,
	// decelerating to zero velocity

	在開發過程中，當需求變得龐大且模糊時，會延長開發週期，而無法在一個 sprint (2~4週) 完成，也就無法給顧客即時的回報，如果花費大量
	的時間開發，最後與客戶的方向不同，會得不償失。

	在 Scrum 的開發流程中，我們將需求依需求尺寸由大到小分成 Investment theme, epic, feature, user story, task.

	Investment theme: 投資主題，主要定義主方向，像我們提供的 Investment theme 為教育服務，或許這個概念比較抽象，你可以把它想成 myViewBoard.com。

	Epic: 顧名思義就是很長的敘事性詩篇，在 Scrum 的開發過程中，屬於 high level 的需求描述，你可以想成 myViewBoard.com 中各個
	子網站，如 Start myViewBoard, myViewBoard classroom 等。

	### Node template
	# Logs
	logs
	*.log
	npm-debug.log*
	yarn-debug.log*
	yarn-error.log*

	# Dependency directories
	node_modules/

	class Socket {
	constructor(
	domain,
	{ reconnection = true, reconnectionDelay = 1000 } = {
	reconnection: true,
	reconnectionDelay: 1000,
	}
	) {
	this.ws = this.connect(domain);
	this.reconnection = reconnection;