MOPCON 2021 第一天之JS、前端相關內容之議程筆記

總結

整理了 2021 MOPCON 第一天 JS、前端相關議程的筆記與延伸參考資料

你懂了 JavaScript，也不懂 JavaScript

總結：在時間有限的前提下，先學習價值最高的技術或知識

而何謂重要的知識：
- 「這個知識對我寫 code 會有幫助嗎？」
- 「不知道的話會容易寫出 bug、或是根本不知道 bug 從何而來」
比較不重要但有趣的知識：知道這些事情會讓你成為 JS 大師

Type

留意String + Number會回傳字串結果
Array.prototype.sort()預設是字典排序，要進行數字大小排列的話，需傳入 callback function ((a, b) => a - b)
留意浮點數陷阱
```
0.5 + 0.1 === 0.6; // true
0.2 + 0.1 === 0.3; // false
```
- Is floating point math broken?
  - In most programming languages, it is based on the IEEE 754 standard. The crux of the problem is that numbers are represented in this format as a whole number times a power of two; rational numbers (such as 0.1, which is 1/10) whose denominator is not a power of two cannot be exactly represented.
  - Think about representing 1/3 as a decimal value. It’s impossible to do exactly! In the same way, 1/10 (decimal 0.1) cannot be represented exactly in base 2 (binary) as a “decimal” value; a repeating pattern after the decimal point goes on forever. The value is not exact, and therefore you can’t do exact math with it using normal floating point methods.
- 【筆記】Javascript 大數字與浮點數的計算處理 (decimal.js)：Javascript 的數字型態一律為遵守 IEEE 754 規範的 number，採用雙精度儲存（double precision），佔用 64 bit。若整體數字（整數 + 小數）的長度超過 16 ~ 17 位，就會發生數字丟失的問題。
JS 的 Number 有其極限（Number.MAX_SAFE_INTEGER: 9007199254740991），超過此範圍請改用BigInt或String型態來保存資料

Hoisting

JS 在執行前就會先做一些處理，此語言有編譯（compile）的特性

This

this的值跟怎麼呼叫函式有關

document.querySelector(".a"); // null
const q = document.querySelector;
q(".a"); // Uncaught TypeError: Illegal invocation

document.querySelector('.a')中的this是document，而q('.a')的this在非嚴格模式下會指向 global object，可透過使用bind()將document綁進去解決：

const q = document.querySelector.bind(document);
q(".a"); // null

// 這樣也可以
const q = document.querySelector;
q.call(document, ".a");
q.apply(document, [".a"]);

箭頭函式的 this 與一般函式的 this 不一樣（以下內容節錄自MDN）
- Arrow functions establish “this” based on the scope the Arrow function is defined within.
- Perhaps the greatest benefit of using Arrow functions is with DOM-level methods (setTimeout, setInterval, addEventListener) that usually required some kind of closure, call, apply or bind to ensure the function executed in the proper scope.

Prototype

原型鍊（prototype chain）：在當下的 scope 找不到相對應的屬性或方法時，就往親代的 scope 找
arr.slice(1)與Array.prototype.slice.call(arr, 1)做的是完全一樣的事，只是後者是將整個原型鍊全部寫出來

async 與 event loop

需意識到 callback function 並不保證它是非同步執行
知道 event loop 中的 web API、stack 與 task queue 是什麼

用 Type 建立 Type：一起來當個 TypeScript 的型別魔術師

泛型（generics）：讓型別也變成一種變數，可以根據不同的情況套用不同的型別

// 一般寫法，所有資料的型別皆已經被設定好
type ConferenceWithGenerics = {
  name: string;
  year: number;
  isAddToCalendar: boolean;
  price: number;
};

// 泛型的寫法
type ConferenceWithGenerics<T> = {
  name: string;
  year: number;
  isAddToCalendar: boolean;
  price: T;
};

price可根據T傳入的內容允許不同類型的資料，把型別當成參數

// price為string型態的資料
const mopcon: ConferenceWithGenerics<string> = {
  name: 'MOPCON';
  year: 2021;
  isAddToCalendar: true;
  price: '1000元';
};

泛型可透過關鍵字 extends 來限制傳入的類型（generic constraints），可帶入預設值

type ConferenceWithGenerics<T extends string | number = number> = {
  name: string;
  year: number;
  isAddToCalendar: boolean;
  price: T; // 允許傳入string或number型態的資料，並在沒有傳入參數的時候預設為number
};

Utility Types：把型別當成參數，透過 Utility Types 取得型的型別；TypeScript 本身就內建了多種 Utility Types
```
type conferenceNameWithNull = "MOPCON" | "JSDC" | "COSCUP" | null;
type T1 = NonNullable<conferenceNameWithNull>;
```
NonNullable是 TypeScript 內建的 Utility Types，如果檢視 T1 的內容會發現僅剩下MOPCON、JSDC與COSCUP；null不見了
透過keyof取得物件型別中所有的 key 作為型別（keyof後面接的是Type）；typeof後面接的是 JS 中的「值」（可直接加上物件，然後透過 TS 的自動推論來建立型別），會把值轉為「型別（Type）」，然後合體技如下：
```
const mopcon = {
  name: 'MOPCON';
  year: 2021;
  isAddToCalendar: true;
  price: '1000元';
};
type keysOfConferenceFromTypeOf = keyof typeof mopcon;
```
得到的內容是'name' | 'year' | 'isAddToCalendar' | 'price'

支援 Template Literals（反引號）：TS 會根據傳入的聯集組合出新的聯集

type X = "left" | "right";
type Y = "top" | "bottom";
type Position = `${X}-${Y}`; // 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom'

練習：寫一個 Utility Type 取得物件型別中所有屬性的 Keys

type ConferenceWithGenerics = {
  name: string;
  year: number;
  isAddToCalendar: boolean;
  price: number;
};

// 先使用實際例子
type Keys = keyof ConferenceWithGenerics;

// 然後抽象化
type Keys<T> = keyof T;

// 實用：取出Conference物件中所有屬性的Keys放到T1中
type T1 = Keys<Conference>;

Indexed Access Types：透過中括號取得物件型別中的特定屬性值

type Conference = {
  name: string;
  year: number;
  isAddToCalendar: boolean;
  price: number;
};

type T1 = Conference["name"]; // string
type T2 = Conference["name" | "year"]; // string | number
type T3 = Conference[keyof Conference]; // string | number | boolean

// 練習：寫一個Utility Type取得物件型別中所有屬性的Keys
// 先使用實際例子
type ConferenceValues = Conference[keyof Conference];

// 再抽象化
type Values<T> = T[keyof T];

Mapped Type：解決 Index Signatures 之 key 太過廣泛的問題，使用關鍵字in；概念類似Array.prototype.map()

type T = {
  [P in "MOPCON" | "JSDC" | "COSCUP"]: string;
};
// T = { MOPCON: string; JSDC: string; COSCUP: string; }

修改物件型別中所有 value 的屬性：

type T1 = {
  [Property in keyof Conference]: string;
};
// Conference物件中所有value都變為string類型

修改物件型別中所有的 key：

type T2 = {
  [Property in keyof Conference as `at${string &
    Property}`]: Conference[Property];
};
// atname: string; atyear: number; atisAddToCalendar: boolean; atprice: number;

取出物件中特定的資料：

// 只取出Conference中的name與price
type T3 = {
  [Property in "name" | "price"]: Conference[Property];
};

// 抽象化
type PickObject<T, Key extends keyof T> = {
  [Property in Key]: T[Property];
};

// 一樣取出Conference中的name與price
type T3 = PickObject<Conference, "name" | "price">;

Conditional Types

X extends Y ? T : F：若 X 是 Y 的子集合，型別 A 就是 T，反之為 F
never extends Y ? T : F：因為never（可理解為空集合）不是任何型態的子集合，因此型別 A 必定為 F

type InferResp<T> = T extends { response: infer R; status: number } ? R : T;

const successResp = { response: { data: "foo" }, status: 200 };
const errorResp = { status: 400 };

type TS = InferResp<typeof successRest>; // { data: string }
type TF = InferResp<typeof errorResp>; // { status: number }

Recursion

type SnakeToCamelCase<T extends string> =
  T extends `${infer Head}_${infer Tail}`
    ? `${Uncapitalize<Head>}${Capitalize<SnakeToCamelCase<Tail>>}`
    : T;

善用 UX 來提升 UU，打造滿足新手和專家的 UI

重點：想要做出同時滿足新手與專家使用的產品，在介面設計上應該注意什麼事情？

操作介面常見問題

初次使用（產品）若無法完成任務，很容易導致挫折、進而不願意再次嘗試（沒有下一次機會了）
介面一口氣提供了太多資訊，容易讓新手感到緊張、不知從何下手
假設提供操作說明：或許有幫助，但新手也不易記住這些步驟，閱讀說明也會打斷操作流程（回頭一看也忘記自己處理到哪一個步驟）
自助操作系統常用步驟引導的方式來協助使用者進行操作，但拉長操作時間也會讓專家使用者感到不耐煩
初次使用者 !== 新手，該使用者可能有使用類似產品的經驗

新手與專家對操作介面的共同需求

簡化資訊、進行資料分類、強調重點
提供複數種操作方式，同時滿足新手與專家使用者（舉例：台鐵提供了時間與車次兩種訂票方式）
使用現行標準、或使用者熟悉的元素（舉例：英文輸入使用與電腦鍵盤相同的排列方式）
活用使用者經驗與記錄來提升操作效率（舉例：ATM 詢問使用者是否將某功能加入「常用交易」清單內）

何謂 UU

易用性、通用使用性
Universal Usability, products that are usable for every citizen.
- Supporting a broad range of hardware, software, and network access. 介面應支援各種軟硬體與網路環境
- Accommodating individual differences among users, such as age, gender, abilities, literacy, culture, income, and so forth. 需考量不同能力的使用者以及各種可能的使用情境
- Bridging the knowledge gap between what users know and what they need to know about a specific system. 不同知識背景與經驗的使用者都可以順利操作

線上 QA

當輸入元素的外觀十分相似時，如何避免用戶做出錯誤輸入（比如把停車場圓形磁卡丟到硬幣孔）
- 可以配合亮燈提示，引導使用者根據不同步驟做出對應行為
是否有推薦新手入門 UIUX 的相關書籍或網路資源？
- 新手建議搭配實際案例來理解 UX 與 UI，不建議直接從理論下手

普通文組 2.5