Wayne's blog | 偉恩的部落格 | 技術博客

與老牌工具 JMeter 相比，K6 比較年輕(2017)，架構與設計現代化許多，採用 Go + JavaScript，聽起來就比 Java 年輕有活力。K6 沒有如 JMeter 的華麗友善 GUI，測試細節全靠指令參數與程式碼決定。

K6 核心以 Go 開發，不用擔心程式效能(依文件說明，K6 靠單一主機便可產生每秒 30 萬次請求)；測試程式則採用 ES6 / JavaScript 語言，讓前端/全端工程師備感親切，進階應用需要對 Module、webpack 有點概念，但單純測試一個 .js 就能搞定，不難上手。官方文件整理得頗詳細，建議花點時間約略讀過再上路，許多東西文件都有寫到，不要瞎查資料胡亂嘗試浪費時間。

先釐清一點，雖然口語上我們很習慣說「壓力測試」或「壓測」，實際上這些相關測試可再細分成：煙霧測試、負載測試、壓力測試、尖峰測試、浸泡測試，下文會再詳細說明。

不過，「壓力測試」是比較通俗常用的說法，所以我會繼續統稱壓力測試，有特定目標的測試再特別區分。

介紹

K6 是用 Go 語言編寫的一種高效能的負載測試工具。具有下面幾個特點：

K6 嵌入了 JavaScript runtime，可以使用 JavaScript ES2015、ES6 來編寫指令碼。
強大的 CLI 工具。
使用 Checks 和 Thresholds 可以更加輕鬆的做面向目標的自動化的負載測試。

Checks：類似斷言功能，但不會真的中斷執行，只是會返回 check 的數據百分比。
Thresholds：極限值、門檻、閾值，指測試系統性能所預期的通過 or 失敗的標準。

為什麼要用 K6？

他是用 JavaScript 直接進行負載測試(JavaScript 腳本 ➡️ Go 底層運作)

這對專注於寫 JavaScript 的人是一大福音！

以自身公司而言，大多都是 JavaScript 為基底的測試，所以如果團隊中能夠統一一種語言，不管是在測試、開發上，能降地學習成本及提高協做效率。

如何安裝？

MacOS

記得先安裝 Homebrew

1

brew install k6

Windows

方法一：使用 chocolatey 安裝(需先安裝 Chocolatey package manager)

1

choco install k6

方法二：使用 winget 安裝

1

winget install k6

Linux

Debian/Ubuntu

1
2
3
4


sudo gpg --no-default-keyring --keyring /usr/share/keyrings/k6-archive-keyring.gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys C5AD17C747E3415A3642D57D77C6C491D6AC1D69
echo "deb [signed-by=/usr/share/keyrings/k6-archive-keyring.gpg] https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
sudo apt-get update
sudo apt-get install k6

Fedora/CentOS

1
2


sudo dnf install https://dl.k6.io/rpm/repo.rpm
sudo dnf install k6

了解 K6 能做到哪些負載測試

Smoke Testing 煙霧測試 - 驗證系統在最低硬體配備、正常負載下不會出錯
Load Testing 負載測試(Performance Testing 效能測試) - 取得在一般及尖峰負載下的系統效能數字(用戶數、Throughput、吞吐量(RPS))
Stress Testing 壓力測試 - 測試在高度負載或極端條件下系統的穩定性及可靠度，找出系統極限(請勿在 production 測試)
Spike Testing 尖峰測試 - 故意製造瞬間流量驟升取得系統效能數字(請勿在 production 測試)
Soak Testing 浸泡測試 - 測試系統在長期運作下的穩定性及可靠度

大致上的分類為（低中高流量每間公司定義都不一樣）：

低流量	中等流量	高流量
Smoke Testing 煙霧測試	Load Testing 負載測試(Performance Testing 效能測試)	Stress Testing 壓力測試
Soak Testing 浸泡測試	Spike Testing 尖峰測試

小試身手

在 Windows 安裝很容易，我是用 Chocolatey choco install -y k6 兩分鐘搞定。寫幾行程式存成 script.js，再執行 k6 run script.js 便做能完簡單測試，得到平均回應時間(http_req_duration) 及 Throughput (http_reqs)：

script.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import http from "k6/http";
import { sleep } from "k6";

export const options = {
 vus: 1, // user count
 duration: '1s'
};

export default function () {
 http.get("https://test.k6.io");
};

執行指令：

1

k6 run script.js

參數設定

K6 提供的參數很多，以下主要介紹幾個較常用的為主：

vus

虛擬用戶的數量，最少必須要 1 個，與 duration 搭配使用。

duration

指定測試運行的總持續時間，與 vus 一起使用。

sample code：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import http from 'k6/http';
import { sleep } from 'k6';
export const options = {
 vus: 1,
 duration: '1s',
};

export default function () {
 http.get('https://test.k6.io');
 sleep(1);
}

CLI：

1

k6 run --vus 1 --duration 1s script.js

iterations

腳本中的函數被執行的次數。

sample code：

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


import http from 'k6/http';
import { sleep } from 'k6';
export const options = {
 vus: 10,
 duration: '5s',
 iterations: 50
};

export default function () {
 http.get('https://test.k6.io');
 sleep(1);
}

CLI：

1

k6 run --vus 10 --duration 5s --iterations 50 script.js

表示「模擬 10 個用戶，此次腳本最多就是執行 50 次，如果 50 次腳本沒執行完，時間卻到了，那此次測試會顯示 default ✗」。

Stages

可以指定在特定時間內增加或減少用戶數量的執行方式，也就是說可以模仿更精準的測試情境。

sample code：

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


import http from 'k6/http';
import { sleep } from 'k6';
export let options = {
 stages: [
 { duration: '30s', target: 10 },
 { duration: '1m30s', target: 30 },
 { duration: '20s', target: 0 },
 ],
};

export default function () {
 http.get('https://test.k6.io');
 sleep(1);
}

CLI：

1

k6 run --stage 30s:10, -s 1m30s:30, -s 20s:0 .\script.js

第一階段就是在 30 秒間逐步把用戶加到 10 個
第二階段就是在一分半內逐步從 10 個用戶追加到 30 個用戶
第三階段是在 20 秒內逐步從 30 個用戶降到 0 個用戶個用戶

rps

用戶每秒可以發送最大的 request 數量。

其實就是為了更好模擬用戶流量，再測試前須確認好測試範疇，多數平台應該都是在某些時間點流量會增大，但這個流量增大並非是無上限的增大，一定會落在某個數值，只要將數值取出來後並換算。

e.g:
查看數據後，發現這個時段會有 100000 個 request 數量
那我們要測試的是 60 秒能要達到 100000
那就是 100000/60 = 1666
1666 出來後，我們都會多估 10~20% 以防萬一，所以總計大約 2000 即是 rps 的數量

若要更準確的符合真實數據，也可以以下這樣計算：

1
2
3
4
5


用戶量 100 vus
執行時間 60s
request 條件是 100000
那就是一位 user rps 就是 100000/100/60 = 16
通常 rps 的範疇會多估 10-20% 以防萬一，所以湊個整數 20 就是較符合的數值

sample code：

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


import http from 'k6/http';
import { sleep } from 'k6';
export const options = {
 vus: 100,
 duration: '60s',
 rps: 20
};

export default function () {
 http.get('https://test.k6.io');
 sleep(1);
}

group

主要就是將按照功能進行組裝在同一個測試腳本。

可以針對測試方法做調整，通常在測試 API 時可能是一個行為，但是是會多個 API 連續調用的情況。

這時候可以使用 group 方法來實現，以下是官網的例子。

sample code：

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


import { group } from 'k6';

export default function () {
 group('user flow: returning user', function () {
 group('visit homepage', function () {
 // load homepage resources
 });
 group('login', function () {
 // perform login
 });
 });
}

如上方例子，可以將整個登入流程加入一個群組，測試結果會多一個指標 group_duration，就可方便得知這一個 group 平均執行時間。

另外，官方也寫到：
Discouraged: one group per request
Wrapping each request within a group might add unnecessary boilerplate.

意味著這個 group 功能不建議僅拿來組裝單一 API，它不是一個像單回傳 api module 般的使用。

這樣就失去 group 功能真正的涵義了。

sample code：

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


import { group, check } from 'k6';
import http from 'k6/http';

const id = 5;

// reconsider this type of code
group('get post', function () {
 http.get(`http://example.com/posts/${id}`);
});
group('list posts', function () {
 const res = http.get(`http://example.com/posts`);
 check(res, {
 'is status 200': (r) => r.status === 200,
 });
});

scenarios

顧名思義，就是測試的情境的參數。

在做效能測試前，通常都會先擬定好要測試的情境，蒐集真實數據進行評估，再進一步評估預期達到的目標再哪。

所以可以先將一些常用的測試寫好。只要引用一下，設定一下立刻可以達到我們想要測試的結果。

只要針對每個情境實作好了一些 Executors，最後只要呼叫它即可。

sample code：

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


import http from 'k6/http';

export let options = {
 discardResponseBodies: true,
 scenarios: {
 contacts: {
 executor: 'constant-arrival-rate',
 rate: 200, // 200 RPS, since timeUnit is the default 1s
 duration: '1m',
 preAllocatedVUs: 50,
 maxVUs: 100,
 },
 },
};

export default function () {
 http.get('https://test.k6.io/contacts.php');
}

使用這個範例，K6 會盡所能在 duration 內去達到 200 RPS。

所以只要使用這個方法，可以很快找到你 API 的極限瓶頸在哪。

group vs scenarios

group：通常一套業務邏輯且會被重複使用。
scenarios：純粹一個情境、一個故事，為了要讓單一邏輯或 group 能夠被相互組合應用，需要多種不同的參數，用戶數量(vus)、持續時間(duration)等等，以便達到該情境的預期結果。

常看的指標

Http 系列

http_req_receiving： API 從 server 回應所花費的時間
http_req_sending： API 發送到 server 所花費的時間
http_req_waiting： API 從 server 等待回應所花費的時間
http_req_duration： API 請求的總時間(http_req_sending + http_req_waiting + http_req_receiving)
http_req_failed： API 失敗的機率(預設 status code 是 200，若有特別判斷可使用 expectedStatuses)
iteration_duration：該腳本執行一次所花費的時間
http_reqs：會計算測試總共發了多少 request

上述的參數，主要可以分析整個測試的過程，同時也可以了解該 API 的詳細資料針對響應速度、等待回應時間等等，好讓相關團隊可以進行優化分析。

http_req_receiving、http_req_sending、http_req_waiting 三者關係圖

Checks

其實就是類似斷言。僅會返回通過(pass)或失敗(fail)

但這邊的斷言是，不論成功或失敗，腳本皆仍會繼續執行。

sample code：

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


export default function () {
 const res = http.get('http://test.k6.io/');
 check(res, {
 'is status 200': (r) => r.status === 200,
 });
}

// or

export default function () {
 const res = http.get('http://test.k6.io/');
 check(res, {
 'is status 200': (r) => r.status === 200,
 'body size is 11,105 bytes': (r) => r.body.length == 11105,
 });
}

但如果要需要特別處理錯誤情境時，可以使用 Thresholds。

Thresholds

強烈建議多參考官方文檔，寫得非常清楚。

主要是可以為測試的結果自訂一個標準限制，中文稱為門檻值。

可以針對各個指標限制於某個條件，相對來說會更彈性，測試會更為準確。

sample code：

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


import http from 'k6/http';

export const options = {
 thresholds: {
 http_req_failed: ['rate<0.01'], // http request 失敗的總比例要低於 1% 才能算通過
 http_req_duration: ['p(95)<200'], // 95% 的 requests 數回傳時間都要低於 200ms 以內才算通過
 },
};

export default function () {
 http.get('https://test-api.k6.io/public/crocodiles/1/');
}

其中 http_req_duration 的 p(95) 高於 200ms 了，所以它就會顯示 some thresholds have failed

Threshold 其實與 Check 有點類似，但差別在於：

Check 設定比較單一且執行失敗的話，腳本仍會繼續執行，直到腳本結束，才會返回 Check 的數據值。
Threshold 可以彈性設定條件且執行失敗的話，它還可以自行設置中斷點，讓執行中腳本達到某條件的話，就直接中斷並且返回錯誤資訊。

aborting sample code(可自行設定中斷點 sample code)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


export const options = {
 vus: 30,
 duration: '2m',
 thresholds: {
 http_req_duration: [{ threshold: 'p(90) < 400', abortOnFail: true }] //90% 的 requests 數回傳時間都要低於 400ms 以內才算通過，只要一旦高於 400ms 就會直接中斷測試
 }
};

export default function () {
 http.get('https://test-api.k6.io/public/crocodiles/1/');
}

其中 http_req_duration 的 p(95) 高於 200ms 了，所以它就會顯示 some thresholds have failed

常見的套件(module)

K6 套件(module) 基本上我覺得很萬用，是足夠支撐所有測試情境的，也主要介紹幾個較常用的 K6 本身支援的 module (JavaScript API)

http

主要是能發送 API，常使用為 get、post、put、delete…等。

GET sample code：

1
2
3
4
5
6
7
8
9


import http from 'k6/http';
export const options = {
 vus: 1,
 duration: '1s',
};

export default function () {
 http.get('https://test.k6.io');
}

POST sample code：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


import http from 'k6/http';

const url = 'https://httpbin.test.k6.io/post';
const logoBin = open('./logo.png', 'b');
export default function () {
 let data = { name: 'Bert' };

 // Using a JSON string as body
 let res = http.post(url, JSON.stringify(data), {
 headers: { 'Content-Type': 'application/json' },
 });
 console.log(res.json().json.name); // Bert

 // Using an object as body, the headers will automatically include
 // 'Content-Type: application/x-www-form-urlencoded'.
 res = http.post(url, data);
 console.log(res.json().form.name); // Bert

 // Using a binary array as body. Make sure to open() the file as binary
 // (with the 'b' argument).
 http.post(url, logoBin, { headers: { 'Content-Type': 'image/png' } });

 // Using an ArrayBuffer as body. Make sure to pass the underlying ArrayBuffer
 // instance to http.post(), and not the TypedArray view.
 data = new Uint8Array([104, 101, 108, 108, 111]);
 http.post(url, data.buffer, { headers: { 'Content-Type': 'image/png' } });
}

html

解析 HTML 各元素，可能會需要取得 HTML 上的一些元素值做一些處理或換算。

sample code：

1
2
3
4
5
6
7
8


import http from 'k6/http';

export default function () {
 const res = http.get('https://k6.io');
 const doc = parseHTML(res.body); // equivalent to res.html()
 const pageTitle = doc.find('head title').text();
 const langAttr = doc.find('html').attr('lang');
}

sleep

主要就是等待時間，有些時候使用 sleep 是為了更好模擬使用者情境。

因為使用者真實操作 web 可能都會遇到有 loading 渲染的時間，所以我們將 sleep 算進來的話就當作是再重現這部分。

sample code：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import http from 'k6/http';
import { sleep } from 'k6';
export const options = {
 vus: 1,
 duration: '1s',
};

export default function () {
 http.get('https://test.k6.io');
 sleep(1);
}

crypto

這一定也不陌生，非常強大的加密 module ，支援多種不同的加密方式如下：

hmac
md4
md5
sha256
sha384
sha512

通常是為了確保用戶資料安全而特別處理的。e.g. 密碼、API header 等。

sample code：

1
2
3
4
5
6
7
8
9


import crypto from 'k6/crypto';

export default function () {
 console.log(crypto.sha256('hello world!', 'hex'));
 const hasher = crypto.createHash('sha256');
 hasher.update('hello ');
 hasher.update('world!');
 console.log(hasher.digest('hex'));
}

respone：

1

INFO[0000] 7509e5bda0c762d2bac7f90d758b5b2263fa01ccbc542ab5e3df163be08e6ca9

encoding

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


import { check } from 'k6';
import encoding from 'k6/encoding';

export default function () {
 const str = 'hello world';
 const enc = 'aGVsbG8gd29ybGQ=';
 const buf = new Uint8Array([104, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]).buffer;
 check(null, {
 'is encoding string correct': () => encoding.b64encode(str) === enc,
 'is encoding ArrayBuffer correct': () => encoding.b64encode(buf) === enc,
 });
}

JSlib

K6 本身支援蠻多受用的套件，但除此之外，他們還有支援一個是 JSlib 顧名思義就是 JS 庫。

我覺得可以把它當作是外掛包因為其中還支援的很多額外的 module 可用。

httpx：是將 k6/http 原本套件加以簡化處理，可以當成是優化版的 http
k6chaijs：適用於 BDD 和 TDD 斷言風格

k6chaijs sample code：

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


import { describe, expect } from 'https://jslib.k6.io/k6chaijs/4.3.4.1/index.js';
import http from 'k6/http';

export const options = {
 thresholds: {
 checks: [{ threshold: 'rate == 1.00' }], // fail test on any expect() failure
 },
};

export default function testSuite() {
 describe('Basic API test', () => {
 const response = http.get('https://test-api.k6.io/public/crocodiles');
 expect(response.status, 'API status code').to.equal(200);
 });
}

utils： K6 的小工具包

utils sample code：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


import { sleep } from 'k6';
import http from 'k6/http';

import {
 randomIntBetween,
 randomString,
 randomItem,
 uuidv4,
 findBetween,
} from 'https://jslib.k6.io/k6-utils/1.2.0/index.js';

export default function () {
 const res = http.post(`https://test-api.k6.io/user/register/`, {
 first_name: randomItem(['Joe', 'Jane']), // random name
 last_name: `Jon${randomString(1, 'aeiou')}s`, //random character from given list
 username: `user_${randomString(10)}@example.com`, // random email address,
 password: uuidv4(), // random password in form of uuid
 });

 // find a string between two strings to grab the username:
 const username = findBetween(res.body, '"username":"', '"');
 console.log('username from response: ' + username);

 sleep(randomIntBetween(1, 5)); // sleep between 1 and 5 seconds.
}

aws：主要是可以直接串接 AWS 上的 API 服務。

總結

k6 官方提供的文檔其實都非常好懂，甚至都會附上很多程式碼範本讓你直接使用。

基本上只要會 javascript，你就可能無痛起手了。

另外 k6 這框架大多使用的情境是以下：

適用人員	描述
開發人員、SDET	方便我們透過 K6 提供的 api 以及 CLI 工具來使用開發且開發人員同常對 javascript 也不太陌生，他們也能快速使用 javascript 來開發模擬真實場景的負載測試
DevOps、SRE	這兩個職位都是偏運維方面的，我們能把上面 SDET 開發的 script 拿來進行自動化的壓力測試，確保我們的基礎建設與應用服務都還是保持著高性能的表現。在 K6 開發的 script 內，設定 SLO 來測試服務的運行狀況是否達標
QA	更方便的寫測試案例與腳本，跑起來也很快，還能跟 Postman、Swagger 等整合，對 QA 來說是很方便的

關於領域驅動設計 (Domain-Driven-Design)

Fri, 31 Mar 2023 00:00:01 +0000

軟體的核心是他為使用者解決領域相關問題的能力。隨著許多如金融、電商、社交等行業提供的服務越來越強大，軟體需求的複雜度也跟著起飛。身為一名工程師已經不能單純只做好自己的螺絲釘就能完成任務。

大多時候，程式設計的重點並不在於使用哪個框架技術或優化幾個百分比，而是在於是否能忠實解決業務的需求。

Eric Evans 發明了領域驅動設計 (Domain-Driven Design ，之後簡稱 DDD) ，提倡開發人員也需要與領域專家合作以獲取足夠的業務知識 (business knowledge)，接著將領域知識與業務邏輯注入進程式碼模型之中，達成「程式即設計、設計即程式」的境界。

運用了這套模式，一來程式碼功能一目瞭然，二來可以有效保護我們的業務邏輯不被竄改，甚至可以適應未來業務邏輯的變化與成長。

DDD 最大的價值之一就是把將商業領域的知識映照到程式碼中，解放「程式歸程式，業務歸業務」的傳統思維，在過程中甚至可以打破商業團隊與工程團隊間的藩籬，甚至會讓人感覺到：

開發其實是一場學習的過程，程式碼只是過程的副產物。

DDD 是什麼？

介紹 DDD 是什麼之前，我們先定義領域 (Domain) 是什麼。廣泛來說， domain (knowledge) 是指「一塊知識的範圍」。實務上，就是指「你工作上所需的一切知識集合」，包含「問題」以及「解決方案」。

由此可見， DDD 是一種基於領域知識來解決複雜業務問題的軟體開發方法論。

它有以下三個重點：

跟領域專家 (domain expert) 密切合作來定義出 domain 的範圍及相關解決的方案。
切分領域出數個子領域，並專注在核心子領域。
透過一系列設計模式，將領域知識注入進程式模型 (model) 中。

用通用語言(Ubiquitous Language)溝通

現代軟體的複雜特性，沒有一個人或是團隊可以單獨掌握所有的知識細節，甚至連領域專家的理解都可能有所缺漏。為了要盡可能獲取知識的全貌，我們會將溝通所得到的知識提煉出來達成共識後，建立 Ubiquitous Language (通用語言)，減少溝通的成本。

在神話故事巴別塔中，上帝分化人類的語言讓他們彼此無法溝通以懲罰他們的自大。有趣的是，在應用 DDD 的過程，不同團隊藉由溝通形塑出 Ubiquitous Language ，讓彼此互相理解，進而開發正確的軟體。

例：開發與商業團隊交流後，發現其實系統需要的是訂單、商品與會員管理三個功能，並且規定大家要用 Ubiquitous Language 互相溝通。

整個過程可以參考這張圖：

兩大設計模式類別

與領域專家討論出 Ubiquitous Language 後，就可以開始套用 DDD 的各種設計模式，而這些模式大致上可以分為兩類：Strategic Design (戰略設計) 與 Tactical Design (戰術設計)。

Strategic Design 戰略設計：利用與領域專家溝通的結果，拆分問題成數個子領域後，定義解決方案(系統)的邊界與關係。
Tactical Design 戰術設計：又稱 Model-Driven Design，在 Strategic Design 的一個個解決方案邊界內，用一系列設計模式寫程式實踐業務邏輯。

簡單來說，Strategic Design 打嘴砲設計大架構與方向，Tactical Design 捲起袖口開始寫程式。

DDD 帶來的改變

說了很多抽象的概念後，讓我們來看看在實作上，應用了 DDD 的程式碼會帶來什麼樣的改變？

向貧血模式(Anemic Model)說不

開始前想先跟大家介紹一個有名的反模式：貧血模型 (Anemic Model)，這個反模式泛指那些只有 getter 與 setter 的 model。這些 model 缺乏行為能力，導致使用者每次都要自己組合出自己要的功能。

因此貧血模型看似什麼都可以透過資料設定去做到，但因為沒有具有行為敘述的 method function ，所以難以應用於複雜的操作中。總體而言能力十分受限，就像貧血一樣。

貧血模型用起來像在教小孩子一樣，一個指令一個動作還很容易忘掉；具有行為能力的模型則像跟大人溝通一樣，一次行動就能完成許多指令。

再舉個例子，相信很多人都知道快打旋風、小朋友齊打交等格鬥遊戲。遊戲中角色若是要發動招式，就需要透過組合按鍵如「上跳攻」、「上上下下左右左右 BA」等等。

沒有行為能力的程式模型，就像這段組合鍵的程式碼一樣：

1
2
3
4
5
6
7
8
9


Role person = new Person();
// 組合按鍵開始
person.up();
person.down();
person.left();
person.right();
person.press('A');
person.press('B');
// 組合按鍵結束

但當我們了解業務邏輯後，就可以將這段程式封裝成有行為能力的 function：

1
2


Role person = new Person();
person.dragonFist();

這樣的優勢非常明顯，一來程式易懂好維護，二來要修改也很簡單。重點是程式碼從組合碎片式的資訊轉而關注程式的行為能力。

這時可能就會有人有疑問：「封裝的好處我懂，但如果濫用了程式碼一樣會亂啊！而且只是把程式封裝為什麼需要 DDD？」

配合業務語言封裝程式的行為

DDD 注重將業務語言注入程式模型之中，所以只會對重點業務行為進行封裝。如此一來，與其隨意封裝程式碼，DDD 將程式模型與業務邏輯綁在一起，不但可以緊隨業務的變化做修改，而且利用業務語言做封裝也解決了兩大程式難題之一：命名。

大家可以嘗試看看用業務行為為程式碼命名。最常見就是將原先 CRUD 的貧血命名法更改為充滿業務含義的命名方式。比如說一個 user 的 CRUD 操作可能就變成 register、getProfile、getActivityHistory、updateProfile、changePassword、deactivateAccount、deleteAccount 等等。

這種做法會在跨模型的情境下發揮更大的優勢，舉個咖啡廳的例子，假如一個正常流程包括點餐、製作、送餐，可以寫出以下程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


customer = new Customer('Bill');
order = Order.create(customer, 'Coffee');
staff = new Staff(9527);
cashier = new Cashier();

// 結帳
order.setStaff(staff);
staff.setCashier(cashier);
staff.setOrders(order);
cashier.addOrder(order);

// 泡咖啡
cup = new Cup();
staff.setCup();
cup.setFilterCone(new FilterCone());
cup.setCoffeeGround(new Coffee());
staff.brew(cup);
staff.wait();
staff.setFilterCone(null);

// 送餐
staff.setCoffeeTo(customer);
customer.setCoffee(order);

以上的程式碼可以明顯看出幾個問題：

所有屬性都可異動
難讀、業務意圖不明顯
難以應付未來的修改

導入 DDD 並與領域專家不斷溝通形成 Ubiquitous Language 後，讓我們修改一下程式碼：

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


barista = new Barista(9527);
customer = new Customer('Bill');
order = customer.placeOrder(order);

// 處理結帳
barista.processPayment(order);

// 處理餐點
barista.make(order);

// 處理送餐
barista.serveOrderTo(order, customer);

修改後可以發現，程式的行為都十分貼近現時使用情境，讓即使不會寫程式碼的人都可以看懂了！

總結 DDD 的優缺點

使用 DDD 有以下優點：

促進跨團隊的溝通、理解領域知識。
專注在核心業務上
保護業務邏輯，不會因技術細節 (如 db 、框架、基礎設施)而影響。
開發時更靈活彈性、重用程式更方便，能夠面對未來的變化與成長。
更好的模組化 = 更容易測試 (完美搭配 TDD)。
出現 Bug 時更快找到原因 (已經將關注點分離，查出哪邊出問題很快)。
有利用拆分與設計 microservice (這也是最近幾年紅的原因)

不過也有以下幾點需注意：

較難快速建立產品 (戰術實作部分)
沒有領域專家會很難開頭 (新創需注意)
要導入溝通文化、學習成本高
對於高度科技(數學)專業的專案不一定合適

如果還不確定團隊是否該引入，可以參考這張 DDD 適合度計分卡：

FAQs

那不就代表我必須離開電腦先跟業務人員開一堆會嗎？

沒錯，乍聽之下增加了開發人員不少的負擔，但如果這節省了未來讀 spec 、改需求、維護、 debug 的時間，我相信仍是超值的。

我只是個小/新創團隊

很多人會把 DDD 看似繁重的設計當成敏捷開發的絆腳石。老實說，對於只是要開發 CRUD 的早期專案來說，是有點殺雞焉用牛刀。

但是 DDD 仍可以帶來幾項巨大的優勢，詳細可以參考這支影片 Turn your startup in a stayup with DDD — Marijn Huizendveld。

加深對於領域的理解
更加專注在核心領域上

另外新創也常遇到「但我們沒有領域專家啊」的問題。這部分上面提到的影片講者也有遇到，他的解決方法是實際與使用者合作獲取領域知識，再運用 DDD 的技術開發。

不過也是有社群的朋友分享即使是小專案，他也會利用 DDD 的部分 pattern 來快速建立模型。所以這部分其實見仁見智，對於 DDD 相當熟悉的人其實反而能在開發上更快速、正確的開發。

DDD 是萬能的嗎？

沒有什麼方法是銀子彈，只是各取所需罷了。 DDD 的強項在於解決複雜的業務邏輯以及拆分他們。因此搭上了 Microservice 的熱潮。很多人想引用 Microservice 卻不知如何正確拆分他們， DDD 此時提供了絕佳的切入點。

最後我必須強調， DDD 是一種設計方法，而設計本身沒有對錯，實作方法也有很多，不要只想著追求正確答案與完美設計，動手開始做才能做中學！

Ubiquitous Language 跟商業(業務)語言到底有什麼差別？

Ubiquitous Language 的意涵其實很簡單，可以視為一個被系統所需要且開發團隊與商業團隊都能理解的單字庫。以電商來說，「下訂單」這個詞兩邊都能理解且被系統需要，那個詞就可以被放進 Ubiquitous Language 中，而「顧客轉換率」、「公司營收」等商業用語若是與系統無關，就不在 Ubiquitous Language。

【VSCode】重置儲存在雲端的設定、擴充套件與資料！

Fri, 31 Mar 2023 00:00:00 +0000

Visual Studio Code 的「擴充套件」裝太多，而且啟用了「設定同步」功能，不好移除。「設定同步」功能會幫我在多台電腦之間自動同步所有使用者設定、自訂快速鍵定義、擴充套件、設定檔(Profile)等等；直接砍掉重裝，會因為「設定同步」功能而自動從雲端同步設定回來。這篇文章就來說明如何清空雲端資料的過程。

問題發生過程

原本的需求其實很簡單，就是單純想把擴充套件全部移除重新安裝，但又不想一個一個移除；所以我這樣移除：

關閉 Visual Studio Code。
開啟檔案總管，進入 %USERPROFILE%\.vscode\extensions 資料夾。
直接刪除 %USERPROFILE%\.vscode\extensions 整個資料夾。
重新啟動 Visual Studio Code。

這樣就可以移除所有的 Visual Studio Code 擴充套件！👍

但是我啟用了 Visual Studio Code 的「設定同步」功能，使用這個功能需要登入 GitHub 或 Microsoft 帳戶，而只要你登入之後，發現本地沒有任何擴充套件，他就會開始從雲端同步設定回來！

正確的操作步驟說明

為了解決我的問題，正確的操作步驟應該是：

備份目前的設定檔

由於設定檔可以匯出匯入，所以預先匯出已經設定好的設定檔，日後匯入就會很方便。

清除雲端中的資料

這裡對我來說最難的地方在於找到「清除雲端中的資料」這個功能，官網文件的 How do I delete my data? 章節描述完全是錯誤的。

刪除所有擴充套件

此時就可以用上個段落所寫的技巧快速刪除所有擴充套件。

重新開啟設定同步

重新登入「設定同步」的帳號即可重新開始同步設定！

如何清除雲端中的資料

其正確的清除方法步驟如下：

先確定設定同步已開啟

按下 F1 ➡️ 搜尋 Settings Sync: Show Synced Data 命令

在設定同步視窗的右上角點擊 ... 並點選 清除雲端中的資料… 選項

點擊「重設」即可清除雲端中資料，並在你所有的裝置上停止同步

重設 VSCode 設定同步認證

如果每次開啟 Visual Studio Code 都需要登入一次設定同步的話，可能代表你的認證資訊已經亂掉了，需要參考官方文件的 Troubleshooting keychain issues 章節來修復這個問題。

如果是 Windows 的話，透過 PowerShell 執行以下命令即可：

1

cmdkey /list | Select-String -Pattern "LegacyGeneric:target=(vscode.+)" | ForEach-Object { cmdkey.exe /delete $_.Matches.Groups[1].Value }

【Javascript】關於 Functional Programming 函數式編程

Mon, 27 Mar 2023 00:00:00 +0000

在軟體工程開發的領域中，我們為了解決不同的問題，因此衍生出許多不同的程式設計(Programming paradigm)方式，這些設計方法彼此之間並沒有所謂的好壞、優劣，只有解決問題適合度高低的差異。

函數式編程(Functional Programming，以下簡稱 FP)是眾多程式設計(Programming Paradigm) 方式的其中一種，有別於老早就大紅大紫的物件導向編成(object-oriented Programming，OOP) 方式(OO還衍伸出許多設計模式)，FP 則是近年來較為熱門的程式設計方式。像是 React 這套 JavaScript 框架就是使用 FP 來開發程式，因此若想學習 React.js 勢必也要熟悉 FP 的基本概念，而 JavaScript 程式語言也需要符合 FP 的編程理念。本篇將以 JavaScript 作為出發，解釋 JavaScript 函數式編程的重要概念。

本篇皆以 JavaScript 為範例。

First-class & higher-order functions

First-class(一等公民)

我們可以想像成對待函式(Functions) 如同對待其他資料型別一樣。

例如：可以直接賦予值或者存至陣列中當作參數傳遞。

例如，我們可以宣告：

1

const a = 1;

1 的值也就指定給 a。

因此我們也可以直接將函式(Functions) 指定給任一變數：

1

const a = (x,y) => x * y;

a 也就變成 (x * y) Function 的變數，呼叫 a(2, 4) 則會返回值 8。

higher-order functions(高階函式)

在維基百科中高階函式至少會滿足下列其中一項條件：

可以將函式(至少一個)當成參數傳入另一個函式。
可以將函式當成另一個函式的回傳值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var add = function(x) {
 return function(y) {
 return x + y;
 };
};

var addFive = add(5);
var addTen = add(10);

addFive(2); // 7
addTen(2); // 12

由上述範例我們可以得知，add 函式接收參數 (x)，並且回傳一個函式 ( x + y ) 作為回傳值。

因此在宣告 addFive 變數時，同時給定 x = 5 至 add 函式，往後使用 addFive 變數(函式變數)皆會從 5 開始加減。

上述則是符合 higher-order functions 的例子，add 函式(Functions) 接收參數並且回傳一個函式(Functions) 作為回傳值。

函數柯里化文章可參考之前撰寫的(【Function Currying】Javascript 函數柯里化)[/2023-03-16/js-function-currying/]

Pure Functions

Pure Functions(純函式)，意指將相同的 input 丟入函式，永遠會回傳相同的 output 結果，而且在過程中完全沒有任何的副作用。此處的副作用通常意味著「避免狀態改變」、「避免資料改變」，我們可以想成不與函式區塊域(block) 以外的變數做互動(最典型的例子，修改全域變數的值)，或者不論函式以外做了什麼，函式(Functions) 內的運算依舊不受改變。換句話說，Pure Functions 擅於純運算，而不做其他事情(ex. 讀取外部資料)。

範例如下：

1
2
3
4
5
6
7
8
9


// slice: Pure Function
var arr = [1, 2, 3, 4, 5, 6];
arr.slice(0, 3); // output = [1, 2, 3], arr = [1, 2, 3, 4, 5, 6]
arr.slice(0, 3); // output = [1, 2, 3], arr = [1, 2, 3, 4, 5, 6]

// splice: not Pure Function
var arr = [1, 2, 3, 4, 5, 6];
arr.splice(0, 3); // output = [1, 2, 3], arr = [4, 5, 6]
arr.splice(0, 3); // output = [4, 5, 6], arr = []

在 Functional Programming 中，slice 函式(Functions) 就符合我們 Pure Functions 的規範，相同 input，永遠回傳相同 output 且無副作用。而 splice 函式(Functions) 則是每次呼叫，output 以及原始資料皆會不相同，因此不算是 Pure Functions。

副作用

以 JavaScript 為例，副作用還包括：

更改外部變數或者物件屬性(例如：全域變數、父類別範圍內的變數等)
寫入 console.log、檔案
觸發外部流程
呼叫任何有副作用的函式(Functions)

Declarative vs Imperative

函數式編程(Functional Programming) 屬於宣告式編程(Declarative Paradigm) 的一種。

宣告式編程(Declarative Paradigm)：較為抽象的程式碼，可以藉由自然語言直觀的理解該行程式碼想要達到什麼樣的結果。描述該在哪做什麼(what to do)以及資料流程(data flow)。
指令式編程(Imperative Paradigm)：程式碼具體表達需要做什麼來達到目標。描述該做什麼(how to do)以及流程控制(flow control)。

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


var a = [1, 2, 3, 4, 5];

// Declarative Programming
declarativeSquare = (arr) => arr.map((val) => val*val)
declarativeSquare(a); // [1, 4, 9, 16, 25]

// Imperative Programming
imperativeSquare = (arr) => {
 for (var i = 0; i < arr.length; i++) {
 arr[i] *= arr[i];
 }
 return arr;
}
imperativeSquare(a); // [1, 4, 9, 16, 25]

宣告式編程(Declarative Paradigm) 較依賴表達式(expression)，表達式是一個單純的運算過程，並且總是會返回值。屬於宣告式編程的程式語言有：HTML、SQL、LINQ。

指令式編程(Imperative Paradigm) 的程式碼經常使用程式語言基本的語句(statement)，例如：for、while、if、switch…等等。屬於指令式編程的程式語言有：C、JAVA。

總結

函數式編程(Functional Programming) 誕生了五十多年後，終於獲得程式開發者大量的關注，目前 ML 非常紅的 Python 以及前後端 JavaScript 等語言，對於函數式編程(Functional Programming) 的支持都很強。本篇文章整理 JavaScript 符合函數式編程(Functional Programming) 概念的幾個元素(First-class、higher-order functions、Pure Functions)，希望透過 JavaScript 的實例理解函數式編程所講述的核心理念為何。最後比較宣告式編程(Declarative Paradigm)以及指令式編程(Imperative Paradigm)，對自己過去在軟體開發這塊領域所學的做個整理，理清並梳理已有的知識。

關於 ASP.NET Core 7.0 的啟動設定檔 (Launch Settings)

Fri, 24 Mar 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 轉載自網站

由於 ASP.NET Core 7.0 與 ASP.NET Core 6.0 的專案範本中的啟動設定檔(Launch Settings)有些許不同，所以來整理一下相關知識，更好的認識這個 Properties\launchSettings.json 檔案。

先看看 Properties\launchSettings.json 的差異

先用 dotnet new mvc 在 ASP.NET Core 6.0 與 ASP.NET Core 7.0 產生一樣的專案：

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


# 6.0
mkdir projectV6
cd projectV6

dotnet new globaljson --sdk-version 6.0.100 --roll-forward latestFeature
dotnet --version
dotnet new mvc

# 7.0
mkdir projectV7
cd projectV7

dotnet new globaljson --sdk-version 7.0.100 --roll-forward latestFeature
dotnet --version
dotnet new mvc

由於專案範本不同，專案內的 Properties\launchSettings.json 檔案內容其實不太一樣：

ASP.NET Core 6.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


{
 "iisSettings": {
 "windowsAuthentication": false,
 "anonymousAuthentication": true,
 "iisExpress": {
 "applicationUrl": "http://localhost:22303",
 "sslPort": 44378
 }
 },
 "profiles": {
 "m1": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "applicationUrl": "https://localhost:7007;http://localhost:5183",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 },
 "IIS Express": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 }
 }
}

ASP.NET Core 7.0

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


{
 "iisSettings": {
 "windowsAuthentication": false,
 "anonymousAuthentication": true,
 "iisExpress": {
 "applicationUrl": "http://localhost:9601",
 "sslPort": 44330
 }
 },
 "profiles": {
 "http": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "applicationUrl": "http://localhost:5041",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 },
 "https": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "applicationUrl": "https://localhost:7068;http://localhost:5041",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 },
 "IIS Express": {
 "commandName": "IISExpress",
 "launchBrowser": true,
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 }
 }
}

從上述內容你可以很清楚的發現 ASP.NET Core 6.0 與 ASP.NET Core 7.0 有以下 2 點差異：

ASP.NET Core 6.0 的 profiles 只有兩個，但是 ASP.NET Core 7.0 的 profiles 卻有三個！
ASP.NET Core 6.0 的第一個 Profile 預設名稱為「專案名稱」(projectV6)，而 ASP.NET Core 7.0 的第一個 Profile 名稱卻是 http，而且還多出一個 https 設定檔。

其實在 ASP.NET Core 6.0 以前，所有的專案範本中第一個 Profile 預設名稱都為「專案名稱」，所以其實大家對這個名字沒有什麼感覺，直到 ASP.NET Core 7.0 做出了改變，這才有人發現原來這東西的用途。

不載入啟動設定檔

從 ASP.NET Core 6.0 開始，透過 dotnet new 專案範本所建立的 ASP.NET Core 專案，預設都不會繼續使用早期的 Port 5000 (http) 與 Port 5001 (https)，可能是因為多專案的架構下太容易衝突，而且太多人不清楚啟動設定檔的存在，所以就改成用亂數的 Port 埠號。

但是亂數的 Port 埠號其實很難寫文件，所以我為了讓學員檢測自己是否有成功裝好 .NET SDK 工具，我會這樣寫：

1
2
3
4
5
6
7
8


# 建立並進入資料夾
mkdir projectV7 && cd projectV7

# 建立 ASP.NET Core MVC 專案範本
dotnet new mvc

# 啟動網站並忽略啟動設定檔
dotnet run --no-launch-profile

這裡的 --no-launch-profile 就是避免 dotnet new 去讀取專案中的 Properties\launchSettings.json 啟動設定檔，而 .NET Runtime 的 dotnet run 命令，在沒有載入啟動設定檔的情況下，在 ASP.NET Core 6.0 與 ASP.NET Core 7.0 有細微的差異：

預設 ASP.NET Core 6.0 網站會監聽 Port 5000 (http) 與 Port 5001 (https)。
預設 ASP.NET Core 7.0 網站會監聽 Port 5000 (http)。

由於 ASP.NET Core 的 TLS 自簽憑證預設只有一年效期，每年都要更新，雖然更新很簡單，命令如下：

1
2


dotnet dev-certs https --clean
dotnet dev-certs https --trust

應該是有很多人搞不定 https 問題，才讓微軟決定降低開發門檻，直接把預設 https 的 binding 移除！

啟動設定檔的用法

我們在執行 dotnet run 的時候，只要沒特別指定啟動設定檔，預設就會自動載入 Properties\launchSettings.json 設定檔中的第一個 profiles 中的設定，由於 ASP.NET Core 7.0 的「第一個」是 http 這個名字：

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


{
 // ...
 "profiles": {
 "http": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "applicationUrl": "http://localhost:5041",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 },
 // ...
 }
 // ...
}

所以當網站啟動時，我們的 applicationUrl 預設就只有 http 的網址而已，因此網站啟動時並不會有 https 可以測試！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


dotnet run

> Building...
> info: Microsoft.Hosting.Lifetime[14]
> Now listening on: http://localhost:5041
> info: Microsoft.Hosting.Lifetime[0]
> Application started. Press Ctrl+C to shut down.
> info: Microsoft.Hosting.Lifetime[0]
> Hosting environment: Development
> info: Microsoft.Hosting.Lifetime[0]
> Content root path: G:\Projects\projectV7

那如果我們也想測試 https 網址怎麼辦，這時你就可以選擇 Properties\launchSettings.json 設定檔中的第二個 profiles 中的設定：

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


{
 // ...
 "profiles": {
 // ...
 "https": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": true,
 "applicationUrl": "https://localhost:7068;http://localhost:5041",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 }
 }
 // ...
}

其啟動的方式如下：

1
2
3
4


dotnet run --launch-profile "https"

# 或者可以簡寫成這樣:
# dotnet run -lp "https"

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


dotnet run --launch-profile "https"

> Building...
> info: Microsoft.Hosting.Lifetime[14]
> Now listening on: https://localhost:7068
> info: Microsoft.Hosting.Lifetime[14]
> Now listening on: http://localhost:5041
> info: Microsoft.Hosting.Lifetime[0]
> Application started. Press Ctrl+C to shut down.
> info: Microsoft.Hosting.Lifetime[0]
> Hosting environment: Development
> info: Microsoft.Hosting.Lifetime[0]
> Content root path: G:\Projects\projectV7

深入瞭解啟動設定檔

在啟動設定檔中有個 launchBrowser 屬性，預設為 true，從字面上來看，就是「啟動瀏覽器」的意思。但其實我們用 dotnet run 並不會因為 launchBrowser 為 true 就開啟網頁，而是要透過 dotnet watch 命令啟動網站才會真的啟動瀏覽器並開啟網頁！

另一方面，你可能會發現我們在 Visual Studio 2022 裡面每次啟動網站都會開啟網頁，這時我其實也會覺得這個設計很煩，每次都一直不斷的開啟新頁籤，其實蠻惱人的。而關掉的方法，就是調整啟動設定檔中的 launchBrowser 屬性，調整為 false 即可！

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


{
 // ...
 "profiles": {
 // ...
 "https": {
 "commandName": "Project",
 "dotnetRunMessages": true,
 "launchBrowser": false,
 "applicationUrl": "https://localhost:7068;http://localhost:5041",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 }
 }
 // ...
}

另外還有一個 dotnetRunMessages 也是個謎一般的存在，完全沒有文件說明，而這個設定也確實沒太多存在感！各位可以看下圖差異之處，只有在 dotnet run 啟動的時候有非常細微的差異而已。我們在透過 dotnet run 啟動網站時，由於要先 dotnet build 過才能真正 Run 起來，而這段時間大概會跑個 2 ~ 3 秒左右，如果在 dotnetRunMessages 為 true 時，在 Console 會優先出現一個 Building… 字樣，讓你知道 dotnet run 沒掛掉，他只是還在跑而已，否則你會有 2 ~ 3 秒的空白，有人會覺得好像程式沒啟動，感覺怪怪的！😅

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


# dotnetRunMessage = true 時
dotnet run

> Building...
> info: Microsoft.Hosting.Lifetime[14]
> Now listening on: http://localhost:5041
> info: Microsoft.Hosting.Lifetime[0]
> Application started. Press Ctrl+C to shut down.
> info: Microsoft.Hosting.Lifetime[0]
> Hosting environment: Development
> info: Microsoft.Hosting.Lifetime[0]
> Content root path: G:\Projects\projectV7

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# dotnetRunMessage = false 時
dotnet run

> info: Microsoft.Hosting.Lifetime[14]
> Now listening on: http://localhost:5041
> info: Microsoft.Hosting.Lifetime[0]
> Application started. Press Ctrl+C to shut down.
> info: Microsoft.Hosting.Lifetime[0]
> Hosting environment: Development
> info: Microsoft.Hosting.Lifetime[0]
> Content root path: G:\Projects\projectV7

詳見 Purpose of dotnetRunMessages in launchSettings.json - Stack Overflow 說明。

最後，還有個 commandName 也是謎一般的存在，依然完全沒有文件說明，但在 Stack Overflow 有篇文章有做詳細說明，其設定值有可能是以下四種：

Project

將當前的這個應用程式作為控制台應用程式運行，這裡的設定跟你用 dotnet run 執行是相同的。

IIS Express

預設使用 IIS Express 開發伺服器來執行 ASP.NET Core 應用程式。

這個選項只能用在 Visual Studio 而已，.NET CLI 是不支援的！

IIS

當你在本機安裝 IIS 後，您可以讓您的應用程式直接在 IIS 執行。

這個選項只能用在 Visual Studio 而已，.NET CLI 是不支援的！

Executable

這讓你可以執行任意執行檔、傳入任意參數，非常靈活的設定！

這個選項只能用在 Visual Studio 而已，.NET CLI 是不支援的！

例如你不想用 Visual Studio 2022 內建難用的 Hot Reload 的話，可以這樣設定：

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


{
 // ...
 "Watch": {
 "commandName": "Executable",
 "dotnetRunMessages": true,
 "executablePath": "dotnet",
 "commandLineArgs": "watch run",
 "workingDirectory": "$(ProjectDir)",
 "launchBrowser": true,
 "applicationUrl": "https://localhost:5001;http://localhost:5000",
 "environmentVariables": {
 "ASPNETCORE_ENVIRONMENT": "Development"
 }
 }
 // ...
}

【Pyenv】輕鬆管理 Python 版本的好工具！

Tue, 21 Mar 2023 00:00:00 +0000

Python 近 10 年來一直在演進，因此 Python 專案的開發也需要考慮版本的問題，特別是 Python 2 已經退休了，而現在的 Python 專案都以 Python 3 為主；然而有些公司內部的老舊專案仍以 Python 2 開發，因此開發者必須在 Python 2 與 3 之間進行切換。

如果你有 Python 版本切換上的困擾，那麼 pyenv 會是你的好朋友！

安裝 Pyenv

Mac 安裝 Pyenv

更新 Homebrew，並安裝 Pyenv 的相依套件：

1
2


brew update
brew install openssl readline sqlite3 xz zlib

透過 Homebrew 在 Mac 安裝 pyenv：

1

brew install pyenv

在 ~/.zshrc 加入 PYENV_ROOT 路徑和 pyenv init：

1
2
3


echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc

重新啟動 shell，就完成囉！

1

exec "$SHELL"

Windows 安裝 Pyenv

使用 git 下載 pyenv-win：

1

git clone https://github.com/pyenv-win/pyenv-win.git "$HOME/.pyenv"

1-2. 亦可使用 pip 進行下載：

PowerShell：

1

pip install pyenv-win --target $HOME\\.pyenv

cmd：

1

pip install pyenv-win --target %USERPROFILE%\.pyenv

設定環境變數：

1
2
3
4


[System.Environment]::SetEnvironmentVariable('PYENV',$env:USERPROFILE + "\.pyenv\pyenv-win\","User")
[System.Environment]::SetEnvironmentVariable('PYENV_ROOT',$env:USERPROFILE + "\.pyenv\pyenv-win\","User")
[System.Environment]::SetEnvironmentVariable('PYENV_HOME',$env:USERPROFILE + "\.pyenv\pyenv-win\","User")
[System.Environment]::SetEnvironmentVariable('path', $env:USERPROFILE + "\.pyenv\pyenv-win\bin;" + $env:USERPROFILE + "\.pyenv\pyenv-win\shims;" + [System.Environment]::GetEnvironmentVariable('path', "User"),"User")

重新開啟終端機，就完成囉！

Linux 安裝 Pyenv

更新 apt-get 和安裝相依性套件：

1
2


apt-get update
apt-get install make build-essential libssl-dev zlib1g-dev libbz2-dev libreadline-dev libsqlite3-dev wget curl llvm libncurses5-dev libncursesw5-dev xz-utils tk-dev libffi-dev liblzma-dev python-openssl git

利用 git 安裝 pyenv：

1

git clone https://github.com/pyenv/pyenv.git ~/.pyenv

在 ~/.bashrc 加入 PYENV_ROOT 路徑和 pyenv init：

1
2
3


echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n eval "$(pyenv init -)"\nfi' >> ~/.bashrc

關於其他 system 需要安裝的相依套件，可以參考這篇文件。

重新啟動 shell，就完成囉！

1

exec "$SHELL"

驗證 Pyenv 是否安裝成功？

1
2
3


pyenv --version

> pyenv 3.1.1

如何使用 Pyenv 切換 Python 版本？

查看 pyenv 可安裝的 Python 版本

1
2
3
4
5
6
7


pyenv install --list # 或 -l

>>> 3.7.6
>>> 3.7.7
>>> 3.8.0
>>> 3.8.1
>>> 3.8.2

安裝想選擇的 python 版本

1

pyenv install 3.7.7

查看 pyenv 已經安裝過的 python 版本

1
2
3
4


pyenv versions

>>> * system (set by /Users/wayne/.pyenv/version)
>>> 3.7.7

切換 Python 版本，可以選擇用 global、local 或 shell 來執行：

1
2
3


pyenv global 3.7.7
# 或 pyenv local 3.7.7
# 或 pyenv shell 3.7.7

global、local、shell 三者使用方法差異在於：

global：對應於全局。
local：對應於當前資料夾。
shell：對應於當前 shell。

優先順序是 shell ➡️ local ➡️ global。

Pyenv 切換 python 版本成功後，如何查看？

可以使用 python3 --version 來查看目前 python 版本，如果顯示的是你剛設定的版本，就代表成功囉！

1
2
3


python3 --version

> Python 3.10.1

Pyenv 如何切換成原始系統的版本？

可以使用 pyenv {{global}} system，system 代表原本系統的 python 版本，就可以切換回去囉！

1

pyenv global system

更新 Python 環境資訊

如果有使用 pip 安裝或解安裝 library 以及異動特定 version Python 的資料夾內容，必須使用 rehash 通知 pyenv 重新對應相關的使用連結。

1

pyenv rehash

物件導向的 Q&A - 以 Python 舉例

Tue, 21 Mar 2023 00:00:00 +0000

物件導向

請問物件導向程式語言有哪些特點，能簡單說明給我聽嗎？

物件導向程式語言 (Object-Oriented Programming，OOP) 的特點有：

物件導向：OOP 程式語言是以物件 (Object) 為基礎建構程式，物件具有狀態 (state) 和行為 (behavior)。
繼承 (Inheritance)：OOP 程式語言允許一個類別 (class) 從另一個類別繼承屬性和行為。
多型 (Polymorphism)：OOP 程式語言允許物件在不同的情況下具有不同的行為。
封裝 (Encapsulation)：OOP 程式語言允許將物件的狀態和行為封裝在一起，保護物件內部狀態不被外界直接存取。
抽象 (Abstraction) ，OOP 程式語言將物件的實作細節與使用者分開，使用者只需要知道物件的公開介面而無需知道其實作。

請問物件具有狀態 (state) 和行為 (behavior)。這句話是什麼意思？能用 python 舉例嗎？

物件具有狀態 (state) 和行為 (behavior) 意思是物件具有兩種不同的特性，狀態代表物件的屬性，行為代表物件的方法。

舉例來說，若我們有一個類別叫做 Car，那麼這個類別可能有一些狀態屬性如 “color”、“speed”、“brand”，而行為可能有 “drive”、“brake”、“turn” 等方法。

用 python 程式碼來實現這個類別可能長得像下面這樣：

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


class Car:
 def __init__(self, color, speed, brand):
 self.color = color
 self.speed = speed
 self.brand = brand

 def drive(self):
 self.speed += 10

 def brake(self):
 self.speed -= 10

 def turn(self, direction):
 print(f"The car is turning {direction}")

my_car = Car("red", 0, "Tesla")
my_car.drive()
my_car.turn("left")
print(my_car.speed) # 10

上面這個例子中，類別 Car 有三個狀態屬性 color、speed、brand 以及三個行為方法 drive()、brake()、turn()。

透過創建一個實體物件 my_car = Car("red", 0, "Tesla") 來使用這些方法及屬性。

請問你能用上面的 Car class 寫一個繼承的範例給我看嗎？

當然可以，我們可以創建一個新的類別來繼承 Car 類別，讓新類別繼承 Car 類別的屬性和方法。

例如我們可以創建一個新的類別 ElectricCar 繼承 Car 類別，並且在 ElectricCar 類別中加入新的屬性和方法。

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


class ElectricCar(Car):
 def __init__(self, color, speed, brand, battery_size):
 super().__init__(color, speed, brand)
 self.battery_size = battery_size

 def charge(self):
 print("The electric car is charging...")

 def drive(self):
 if self.battery_size > 0:
 self.speed += 20
 self.battery_size -= 10
 else:
 print("The battery is empty, please charge the car.")

my_electric_car = ElectricCar("blue", 0, "Tesla", 100)
my_electric_car.drive()
my_electric_car.drive()
my_electric_car.drive()
print(my_electric_car.speed) # 60
print(my_electric_car.battery_size) # 70

在這個例子中，ElectricCar 類別繼承了 Car 類別的所有屬性和方法，並且定義了新的屬性 battery_size 和方法 charge()。

透過使用 super() 函式可以繼承 Car 類別的 init 方法。

使用 my_electric_car = ElectricCar("blue", 0, "Tesla", 100) 來創建實體物件，可以使用 ElectricCar 類別的新屬性及方法。

請問你能用上面的程式碼繼續舉例多型的用法給我看嗎？

當然可以，多型 (Polymorphism) 是指物件在不同的情況下具有不同的行續。一般來說我們可以使用繼承的類別來實現多型。

以上面程式碼為例，我們可以用 ElectricCar 類別繼承 Car 類別，並重新實現 drive 方法來實現多型的用法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


class ElectricCar(Car):
 def __init__(self, color, speed, brand, battery_size):
 super().__init__(color, speed, brand)
 self.battery_size = battery_size

 def charge(self):
 print("The electric car is charging...")

 def drive(self):
 if self.battery_size > 0:
 self.speed += 20
 self.battery_size -= 10
 else:
 print("The battery is empty, please charge the car.")

class GasCar(Car):
 def __init__(self, color, speed, brand, gas_level):
 super().__init__(color, speed, brand)
 self.gas_level = gas_level

 def fill_gas(self):
 self.gas_level = 100

 def drive(self):
 if self.gas_level > 0:
 self.speed += 15
 self.gas_level -= 10
 else:
 print("The gas is empty, please fill the gas.")

my_electric_car = ElectricCar("blue", 0, "Tesla", 100)
my_gas_car = GasCar("black", 0, "Ford", 60)

def drive_car(car):
 car.drive()

drive_car(my_electric_car)
drive_car(my_gas_car)

print(my_electric_car.speed) # 20
print(my_gas_car.speed) # 15

在這個例子中，我們在 ElectricCar 和 GasCar 類別中都重新實現了 drive 方法，並且在 drive_car 函數中只接受 Car 的類別，可以看到在 drive_car 函數中傳入不同類別的實體物件會執行不同的 drive 行為。

這就是多型的用法，可以讓同一個函數或方法支援多種類別的物件，而不需要為每一種類別都寫一個不同的函數或方法。這樣可以增加程式碼的彈性和可讀性。

我們可以在設計類別時統一實現某些方法，並讓類別可以自行選擇如何實現該方法，這樣就可以讓程式碼更具彈性和靈活性。

請問你能用上面的程式碼繼續舉例封裝的用法給我看嗎？

當然可以，封裝 (Encapsulation) 是指將物件的狀態和行為封裝在一起，保護物件內部狀態不被外界直接存取。

在 Python 中，我們可以使用 _ 或 __ 來表示私有變數和方法，這樣的變數和方法只能在類別內部存取。

例如，我們可以把 ElectricCar 類別中的 battery_size 屬性改成私有變數：

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


class ElectricCar(Car):
 def __init__(self, color, speed, brand, battery_size):
 super().__init__(color, speed, brand)
 self.__battery_size = battery_size

 def charge(self):
 print("The electric car is charging...")

 def drive(self):
 if self.__battery_size > 0:
 self.speed += 20
 self.__battery_size -= 10
 else:
 print("The battery is empty, please charge the car.")

 def get_battery_size(self):
 return self.__battery_size

my_electric_car = ElectricCar("blue", 0, "Tesla", 100)
print(my_electric_car.get_battery_size()) #100

在這個例子中，ElectricCar 類別的 battery_size 屬性被定義為私有變數，只能在類別內部存取。如果外部直接存取該變數的話會產生錯誤。

而我們可以使用私有變數所對應的公有方法 get_battery_size() 來存取私有變數。這樣可以保護類別內部狀態不被外部直接存取，也可以通過公有方法給外部提供適當的存取權限。

你說在 Python 中，我們可以使用 _ 或 __ 來表示私有變數和方法，請問 _ 跟 __ 差在哪裡？

用一個底線 _ 表示私有變數和方法並不會真正的阻止外部存取，只是約定俗成的寫法。
而使用兩個底線 __ 來表示私有變數和方法會真正的封裝，阻止外部存取，並且子類別也無法存取，更能保證封裝性。

請問你能用上面的程式碼繼續舉例抽象的用法給我看嗎？

可以，以下是之前提到的 Car、ElectricCar、GasCar 程式碼使用抽象類別和抽象方法的寫法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


from abc import ABC, abstractmethod

class Car(ABC):
 def __init__(self):
 self.__year_model = 0
 self.__make = ""
 self.__speed = 0

 @abstractmethod
 def drive(self):
 pass

class ElectricCar(Car):
 def __init__(self):
 super().__init__()
 self.__battery_type = ""

 def set_battery_type(self, battery_type):
 self.__battery_type = battery_type

 def get_battery_type(self):
 return self.__battery_type

 def drive(self):
 print("Electric car is driving.")

class GasCar(Car):
 def __init__(self):
 super().__init__()
 self.__fuel_type = ""

 def set_fuel_type(self, fuel_type):
 self.__fuel_type = fuel_type

 def get_fuel_type(self):
 return self.__fuel_type

 def drive(self):
 print("Gas car is driving.")

#create object
car = ElectricCar()
car.drive()

car = GasCar()
car.drive()

在這個範例中，Car 類別是一個抽象類別，它定義了一個抽象方法 drive()。ElectricCar 和 GasCar 類別都繼承自 Car 類別，並實現了 drive() 方法。

這樣的設計可以達到封裝的目的，同時也可以達到多型的目的。並且因為 Car 類別是抽象類別，所以不能直接建立 Car 類別的物件，只能用它的子類別來建立物件。

有了繼承的特點為何還需要抽象？感覺不出這兩者有何差別？

繼承的作用是讓子類別可以繼承父類別的屬性和方法，使得子類別可以共用父類別的程式碼，達到代碼重用的目的。這樣可以讓程式碼更簡潔，並且可以讓子類別擁有父類別的特徵。

而抽象則是讓類別有共同的特徵和行為，抽象類別不能被實例化，而是用來被其他類別繼承。抽象類別中可以定義抽象方法(abstract method)和普通方法，抽象方法只有定義，沒有實現。在子類別中必須實現抽象方法。這樣可以確保所有子類別都有相同的行為，但實現可能不同。

在車的例子中，我們可以用繼承的方式，讓 ElectricCar 和 GasCar 繼承 Car 的屬性，例如 make、model、year_model。而用抽象的方式，我們可以在父類別 Car 中定義一個 drive 方法，並在子類別中實現 drive 方法，這樣可以確保所有車子都有 drive 這個行為。

實際業務上來說，何時會想用繼承何時會想用抽象？

實際業務上，繼承和抽象會根據實際需求而使用。

繼承：

要繼承另一個類別的特徵和行為時，就可以使用繼承。例如，你有一個車類別，並且你需要創建一個電動車和汽油車類別，這兩個類別都有許多相同的特徵和行為，那麼你可以使用繼承，將車類別的特徵和行為繼承到電動車和汽油車類別中。

抽象：

當你有一些類別需要共用同一個介面或行為時，就可以使用抽象。例如，你有一個車類別，並且你需要創建多種不同類型的車，例如電動車、汽油車、柴油車等，這些車都需要有 drive 這個行為，那麼你可以使用抽象類別來定義一個 drive 方法，並在電動車、汽油車、柴油車等類別中實現 drive 方法，這樣就可以確保所有車都有 drive 這個行為。

總結來說，繼承是用來繼承父類別的特徵和行為，而抽象則是用來確保類別具有共同的特徵和行為。

請問你說的特徵具體來說是指什麼東西？

特徵是指類別所具有的屬性和行為，包括資料和函式。

屬性是指類別中的變數，它們用來儲存類別中的資料。例如在之前的例子中，Car 類別中的屬性有 make、model、year_model。

而行為是指類別中的函式，它們用來定義類別的動作。例如在之前的例子中，Car 類別中的行為有 drive、get_make、get_model 等。

這些屬性和行為就是類別的特徵。

請問物件導向為何叫做物件導向？

物件導向程式語言之所以叫做物件導向是因為它重視物件 (Object) 這個概念。在物件導向程式語言中，程式設計師可以使用類別 (Class) 來定義物件的共性，並使用物件來實例化類別。

物件具有狀態 (state) 和行為 (behavior)，並且可以互相之間進行溝通和互動。透過物件導向程式設計，可以更加形象地模擬實際世界中的事物，並且更加容易維護和擴展程式碼。

【Function Currying】Javascript 函數柯里化

Thu, 16 Mar 2023 00:00:00 +0000

Currying（柯里化），又稱為 parital application 或 partial evaluation，functional programming 中的一種過程，是個「將一個接受 n 個參數的 function，轉變成 n 個只接受一個參數的 function」的過程。

原理是將傳入 function 的參數，利用 closure（閉包）特性，將它們存放在另一個 function 中並當做回傳值，而這些 function 會形成一個鏈（chain），待最後參數傳入，完成運算。

這樣做的好處是：

簡化參數的處理，基本上是一次處理一個參數，藉以提高程式的彈性和可讀性
將程式碼依功能拆解成更細的片段，有助於重複利用
這對於整理冗長程式碼、需要詳客製化的 function 和非同步呼叫的處理等有很大的幫助。

說明

假設有個 function，傳入被乘數和乘數之後可得到兩數相乘的結果：

1
2
3
4
5


function multiply(x, y){
 return x * y;
}

multiply(3, 5); // 15

柯里化後就是這樣：

1
2
3
4
5


function curriedMultiply(x) {
 return function(y) {
 return x * y;
 }
}

假設固定被乘數為 3，接著會分別帶入乘數為 5 和 10 來取得運算結果。意即，3 * 5 = 15、3 * 10 = 10

1
2
3
4


var multipleOfThreeAndNumberY = curriedMultiply(3);

multipleOfThreeAndNumberY(5); // 15
multipleOfThreeAndNumberY(10); // 30

當然，我們也可以改固定被乘數為 5，分別帶入乘數為 5 和 10 來算結果。

1
2
3
4


var multipleOfFiveAndNumberY = curriedMultiply(5);

multipleOfFiveAndNumberY(5); // 25
multipleOfFiveAndNumberY(10); // 50

備註

curriedMultiply 並沒有計算結果，而是回傳一個 function 作為未來計算結果之用。也就是說，待之後呼叫 multipleOfThreeAndNumberY 和 multipleOfFiveAndNumberY 傳入參數後才回傳計算結果。
multiply(x, y) 等於 curriedMultiply(x)(y)。

1
2
3
4
5


// 用法一
multiply(3, 5); // 15

// 用法二
curriedMultiply(3)(5); // 15

以上這個簡單範例就呼應一開始所提到的柯里化的優點 - 將程式碼拆解成更細的片段，有助於重複利用。

再來看看另一個例子會覺得柯里化更好用 - 在非同步存取資料上的應用。

Currying the Callback

在非同步資料存取上，一般來說，我們常將「讀取資料」和「處理資料」兩件事寫在一起，導致程式碼的冗長與雜亂。例如像這個樣子：

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


function fetchData(path, handler) {
 var xmlHttp = new XMLHttpRequest();
 var result = {};

 xmlHttp.open( "GET", path, false );
 xmlHttp.send( null );
 result = JSON.parse(xmlHttp.responseText);
 handler(result.data);
}

function showResult(result) {
 console.log('The result is: ' + result);
}

var path = 'http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2';
fetchData(path, showResult); // The result is: Hello, World!

若將負責處理資料的 callback 這個參數提出來（在這裡是 handler），就可改善程式碼如下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


function curriedFetchData(path) {
 var xmlHttp = new XMLHttpRequest();
 var result = {};

 xmlHttp.open( "GET", path, false );
 xmlHttp.send( null );
 result = JSON.parse(xmlHttp.responseText);

 return function(_callback) {
 _callback(result.data);
 }
}

function showResult(result) {
 console.log('The result is: ' + result);
}

var path = 'http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2';

// 用法一
var getData = curriedFetchData(path)(showResult);
getData(showResult); // The result is: Hello, World!

// 用法二
curriedFetchData(path)(showResult); // The result is: Hello, World!

這看起來好像沒什麼，那麼再看看如果是這樣的話…

如果在循序讀取下，要取得兩筆資料 - 先取得第一筆，再取得第二筆，並一同做處理，剛剛尚未柯里化的的程式碼就會變得非常龐大複雜…

但柯里化後的程式處理起來就相對容易多了…這因為我們將「讀取資料」和「處理資料」兩個動作拆開的緣故…就算是用 promise 而非 callback hell 也能更順手：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var path1 = 'http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&ver=1';
var path2 = 'http://www.json-generator.com/api/json/get/bPQMSaHjsi?indent=2&ver=2';

var getData1 = curriedFetchData(path1);
var getData2 = curriedFetchData(path2);

getData1(function(result1) {
 getData2(function(result2) {
 console.log(result1 + ' ' +result2); // Hello, World! Hello, World!
 });
});

【Python】裝飾子 (decorator) 教學

Thu, 16 Mar 2023 00:00:00 +0000

Python 的 decorator (或稱: 裝飾子) 是一個非常有用的功能，它的重要程度可以說是沒用過或不會用 decorator 的人就等於沒學過 Python，甚至在一些常見的框架(Framework)，例如 Flask、FastAPI、Django 都提供各種方便的 decorator 供大家使用。

這麼重要的東西，肯定是闖江湖都會用到的金創藥啊！

但如果你剛接觸 Python 就看到類似以下裝飾子的範例，絕對會腦袋打結，為什麼函式前面還要加個 @debug 還有 @cache，而且還很神奇能運作：

1
2
3
4


@debug
@cache
def sum(a, b):
 return a + b

本文就教大家如何理解 Python 的 decorator！

本文 python 環境

Python 3

什麼是 Decorator

簡單來說，Decorator 是程式語言的設計模式，也是一種特殊的 function（把被裝飾函式當做參數傳入裝飾器函式，再把被裝飾函式傳回），透過 Decorator 可以將加上 Decorator 的 function 加上更多能力，重複利用許多程式碼。而在 Python 中我們則是使用 @ 當做 Decorator 使用的語法糖符號（語法糖指的是簡化寫法）。

開始之前

剛學程式的人，如果想要除錯 1 個函式(function)，大多都會選擇在函式內加上 print 吧，通常都會將傳入值與回傳值都列印出來，例如：

1
2
3
4
5


def sum(a, b):
 print('a =', a)
 print('b =', b)
 print('a + b =', a + b)
 return a + b

然而，這樣子只能針對 sum 這個函式除錯，而且每次都要做侵入式的修改，相當不便…。

我們都知道 Python 的傳入與回傳值可以是函式，那麼也許可以做一個函式叫 debug，然後接受任何函式傳入，並且把我們的 debug 功能加在裡面，這樣就能夠針對任何函式進行除錯，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


def sum(a, b):
 return a + b

def debug(func):
 print('接到 func', func.__name__)
 # 我想在這裡 debug
 return func

debug_sum = debug(sum)
debug_sum(1, 2)

p.s. 每個 function 都有 1 個屬性 __name__ 可以取得函式名稱

執行結果：

1

> 接到 func sum

可是上述範例 debug 函式執行過程並沒有辦法呼叫傳入的 func，因為我們無法攔截到未來使用者怎麼呼叫傳進去的 func (也就是 sum 函式），也就是 debug_sum(1, 2) 沒攔截到傳進去的 1、2，所以根本無法完成除錯的目標，但好消息是我們可以攔截到 sum 被傳進去了。

怎麼解決攔截傳入參數的部分？

很簡單！做個中間人！

我們可以把傳進 debug 函式的 func 再用 def 包裝在 1 個新的函式裡面，這個新的函式要負責接受任何參數，然後轉一手再代入先前傳進來的函式，最後我們再將新包裝過的函式回傳回去，於是程式碼會變成這樣：

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


def sum(a, b):
 return a + b

def debug(func):
 print('接到 func', func.__name__)
 def wrapper(*args, **kwargs):
 print('幫忙代入 args', args)
 print('幫忙代入 kwargs', kwargs)
 func(*args, **kwargs)
 return wrapper

debug_sum = debug(sum)
debug_sum(1, 2)
print('debug_sum', debug_sum)

執行結果：

1
2
3
4


> 接到 func sum
> 幫忙代入 args (1, 2)
> 幫忙代入 kwargs {}
> debug_sum <function debug.<locals>.wrapper at 0x107966430>

耶！從上面執行結果看到我們透過再包裝 1 層函式，就能攔截傳入參數的部分。從執行結果也可以看到呼叫完 debug 函式，所得到的 debug_sum 其實就是那個新包裝好的函式，因此上述範例的呼叫 debug_sum 的方式可以進一步濃縮為 1 行：

1

debug(sum)(1, 2)

不過上述範例還是沒有列印 sum 執行結果的部分，所以可以再進一步改成：

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


def sum(a, b):
 return a + b

def debug(func):
 print('接到 func', func.__name__)
 def wrapper(*args, **kwargs):
 print('幫忙代入 args', args)
 print('幫忙代入 kwargs', kwargs)
 result = func(*args, **kwargs)
 print(func.__name__, '執行結果', result)
 return wrapper

debug_sum = debug(sum)
debug_sum(1, 2)

執行結果：

1
2
3
4


> 接到 func sum
> 幫忙代入 args (1, 2)
> 幫忙代入 kwargs {}
> sum 執行結果 3

耶！完美！

完成 debug 函式之後，你就可以任意 debug 函式，而且不需要做到任何侵入性的修改，例如 debug print 函式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


def debug(func):
 print('接到 func', func.__name__)
 def wrapper(*args, **kwargs):
 print('幫忙代入 args', args)
 print('幫忙代入 kwargs', kwargs)
 result = func(*args, **kwargs)
 print(func.__name__, '執行結果', result)
 return wrapper

debug_print = debug(print)
debug_print(1, 2, '3')

看到這邊，大家應該就會了解 Python decorator 在做什麼 - 接收 1 個函式後加工並包裝成 1 個新的函式！

`@` 語法糖(Syntactic sugar)

也由於這種 decorator 的模式很好用，所以 Python 提供 1 種特殊的語法 @ 可以讓我們將 debug_sum = debug(sum) 簡化為：

1
2
3


@debug
def sum(a, b):
 return a + b

這種語法就被稱為是 1 種語法糖，太好吃了，而且會上癮…。

所以這種接受接一個函式作為參數，然後返回一個新的函式的函式都可以在前面加上 @ 作為裝飾子使用，例如下列範例的 timeit （測量函式執行時間）：

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


import time

def timeit(func):
 def wrapper():
 s = time.time()
 func()
 print(func.__name__, 'total time', time.time() - s)
 return wrapper

@timeit
def sleep_10s():
 time.sleep(10)

sleep_10s()

執行結果：

1

> sleep_10s total time 10.000677108764648

多個裝飾子的執行順序

由於裝飾子非常好用，所以你很有可能會看到類似的程式碼片段存在專案之中：

1
2
3
4
5
6


@timeit
@api
@auth_required
@cache
def get_profile():
 # ...(略)

這時候頭就大了，到底要怎麼理解多個裝飾子的執行順序？到底是 @timeit 會先執行？還是 @cache 會先執行呢？

為了解答這個問題，我們可以將 decorator 的數量簡化至 2 個，例如：

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


def deco1(func):
 def wrapper():
 print('deco1')
 func()
 print('deco1 end')
 return wrapper

def deco2(func):
 def wrapper():
 print('deco2')
 func()
 print('deco2 end')
 return wrapper

@deco1
@deco2
def main():
 print('main')

main()

上述執行結果如下：

1
2
3
4
5


> deco1
> deco2
> main
> deco2 end
> deco1 end

其實從執行結果可以看出，最外層的 decorator 會最先執行，最晚結束。

但其實也不難理解，因為 decorator 是一層包一層的形式，所以只要把一層包一層的圖畫出來，再畫一條直線從上往下貫穿，我們就可以理解其執行與結束順序了：

functools.wraps

先前章節提到 decorator 會接受接一個函式作為參數，然後返回一個新的函式的函式，這其實會有 1 個小小問題產生，就是被包裝的函式的名字與 doc string 都會消失，例如：

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


import time

def timeit(func):
 def wrapper():
 s = time.time()
 func()
 print(func.__name__, 'total time', time.time() - s)
 return wrapper

@timeit
def sleep_10s():
 """sleep 10s"""
 time.sleep(10)

print('func', sleep_10s.__name__)
print('doc', sleep_10s.__doc__)

執行結果：

1
2


> func wrapper
> doc string None

從上述執行結果可以看到 sleep_10s 的名字與 doc string 都不是我們所預期的樣子，原因在於 decorator 其實回傳新的函式，所以這些非預期的值都數於新回傳的函式，這樣就對開發協作者比較不友善了…。

如果要修好這個問題，可以用 functools.wrap 再包裝一次回傳的函式：

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


import time
from functools import wraps

def timeit(func):
 @wraps(func)
 def wrapper():
 s = time.time()
 func()
 print(func.__name__, 'total time', time.time() - s)
 return wrapper

@timeit
def sleep_10s():
 """sleep 10s"""
 time.sleep(10)

print('func', sleep_10s.__name__)
print('doc', sleep_10s.__doc__)

執行結果如下，可以看到 sleep_10s 的函式名稱與 doc string 又恢復正常了：

1
2


> func sleep_10s
> doc string sleep 10s

實際上 functool.wraps 可以視情況自行決定要不要加，如果是一定要保留 doc string 或原本的函式名稱的話，就可以用 functool.wraps，否則其實不加也不影響日常使用。

類別裝飾子(Class-based decorators)

其實，不只有函式(function)能夠當裝飾子，類別(class)也能改裝成裝飾子。

類別寫成的裝飾子就稱為 class-based decorator。

實作 classed-based decorator 的方法雖然不如以 function 方式實作直覺，但也很簡單，只要實作 __init__() 方法接受傳入函式，並且實作 __call__ 方法呼叫被傳入的函式即可，例如：

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


class ClsDeco:
 def __init__(self, func):
 self.func = func

 def __call__(self):
 print("before calling", self.func.__name__)
 self.func()
 print("after calling", self.func.__name__)

@ClsDeco
def say_hello():
 print("Hello!")

say_hello()

執行結果：

1
2
3


> before calling say_hello
> Hello!
> after calling say_hello

前述範例其實等同於下列形式，也就是 ClsDeco(say_hello)() 的部分：

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


class ClsDeco:
 def __init__(self, func):
 self.func = func

 def __call__(self):
 print("before calling", self.func.__name__)
 self.func()
 print("after calling", self.func.__name__)

def say_hello():
 print("Hello!")

ClsDeco(say_hello)()

這就是關於 classed-based decorator 的簡單介紹。

更複雜的 decorator - 可設定參數的裝飾子

學會 decorator 與 class-based decorator 之後，還可以進一步製造出更複雜的裝飾子，譬如接受參數設定的裝飾子，例如下列範例 @retry 裝飾子接受參數 max=3，改變裝飾子的行為：

1
2
3


@retry(max=3)
def get_stock_price():
 pass

要怎麼解讀 @retry(max=3) 呢？其實就是 1 個函數回傳另 1 個裝飾子：

1
2
3
4
5


r = retry(max=3)

@r
def get_stock_price():
 pass

實作上就類似下列的程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


def retry(max=1):
 class Wrapper:
 def __init__(self, func):
 self.func = func

 def __call__(self):
 retried = 0
 while retried < max:
 try:
 self.func()
 except Exception:
 retried += 1
 print('Failed. Going to try again (', retried, ')')
 else:
 break
 return Wrapper

@retry(max=3)
def get_stock_price():
 raise ValueError

get_stock_price()

執行結果如下：

1
2
3


> Failed. Going to try again ( 1 )
> Failed. Going to try again ( 2 )
> Failed. Going to try again ( 3 )

從上述結果可以看到，我們藉著 1 個函數回傳另 1 個裝飾子的做法，成功讓裝飾子具有可設定的特性，不過相對也讓程式變了複雜一點。

以上就是關於更複雜的 decorator 的介紹。

總結

Decorator 是一個非常實用的模式/功能，它可以讓我們輕鬆地在既有基礎上疊加額外的功能，除了使程式碼更加簡潔、易讀之外，還可以增加複用性。

不過由於 Decorator 可以不斷疊加的特性，甚至是可以多重包裝一個函式，有時候會適得其反，造成程式碼閱讀困難，使用上還是建議盡量保持單純為佳。

如果你還沒有在 Python 專案中使用 decorator，現在是時候了！

21 個好用與特殊的 CSS 技巧！

Thu, 16 Mar 2023 00:00:00 +0000

MDN 的用法說明
 Can i use 瀏覽器支援度

🚨🚨 本文分享的所有 tips、tricks 都是 GitHub repository【css tips tricks】的一部分 🚨🚨

技巧說明

Docs Layout

僅用兩行 CSS 建立響應式文件樣式的佈局。

1
2
3
4


.parent {
 display: grid;
 grid-template-columns: minmax(150px, 25%) 1fr;
}

自定義游標

查看 css tips tricks 以了解更多訊息。

1
2
3


html {
 cursor: url('no.png'), auto;
}

用圖片填充文本

1
2
3
4
5
6


h1 {
 background-image: url('images/flower.jpg');
 background-clip: text;
 color: transparent;
 background-color: white;
}

注意：在使用此技術時始終指定 background-color，因為這將用作後備值，以防圖像因某種原因無法加載。

給文字加入描邊

使用 text-stroke 屬性使文本更易讀和可見，它會向文本加入筆劃或輪廓。

1
2
3
4
5
6


/* 🎨 對 h1 元素應用 5px 寬的深紅色文本描邊 */

h1 {
 -webkit-text-stroke: 5px crimson;
 text-stroke: 5px crimson;
}

暫停 Pseudo Class

使用 :paused 選擇器在暫停狀態下設置媒體元素的樣式同樣 :paused 我們也有 :playing。

目前僅 Safari 支持

1
2
3
4
5
6
7
8


/* 目前僅 Safari 支持 */
video:paused {
 opacity: 0.6;
}

video:playing {
 opacity: 1;
}

強調文字

使用 text-emphasis 屬性將強調標記應用於文本元素。您可以指定任何字串，包括表情符號作為其值。

1
2
3


h1 {
 text-emphasis: "⏰";
}

樣式首字偽元素

避免不必要的 <span>，而是使用偽元素來為您的內容設置樣式，就像 first-letter 偽元素一樣，我們也有 first-line 偽元素。

1
2
3
4


h1::first-letter {
 font-size: 2rem;
 color:#ff8A00;
}

變數的回退值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* 🎨 由於未定義 var(--black)，將 h1 回退為紅色 */

:root {
 --orange: orange;
 --coral: coral;
}

h1 {
 color: var(--black, red);
}

改變書寫模式

您可以使用書寫模式屬性 writing-mode 來指定文本在您的網站上的佈局方式，即垂直或水平。

1

<h1>Cakes & Bakes</h1>

1
2
3
4
5


/* 💡 指定文字佈局方向為 sideways-lr */

h1 {
 writing-mode: sideways-lr;
}

彩虹動畫

為元素建立連續循環的彩色動畫以吸引用戶注意力。

閱讀 css tips tricks 以了解何時使用 prefer-reduced-motion 媒體功能。

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


button {
 animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
 to {
 filter: hue-rotate(0deg);
 }
 from {
 filter: hue-rotate(360deg);
 }
}

Hover 時縮放

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


/* 定義圖像容器的高度和寬度並隱藏溢出 */
.img-container {
 height: 250px;
 width: 250px;
 overflow: hidden;
 }

/* 🖼️ 使容器內的圖像填滿容器 */

.img-container img {
 height: 100%;
 width: 100%;
 object-fit: cover;
 transition: transform 200m ease-in;
 }

 img:hover {
 transform: scale(1.2);
 }

屬性選擇器

使用屬性選擇器根據屬性選擇 HTML 元素。

1
2
3


<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>

1
2
3
4
5


/* 🔗 以所有具有 href 屬性的元素為目標 */

a[href] {
 color: crimson;
}

裁剪元素

使用 clip-path 屬性建立有趣的視覺效果，例如將元素剪裁成三角形或六邊形等自定義形狀。

1
2
3
4
5
6


div {
 height: 150px;
 width: 150px;
 background-color: crimson;
 clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

檢測屬性是否支持

使用 CSS @support 規則直接在您的 CSS 中檢測對 CSS 特性的支持。查看 css tips tricks 以了解有關功能查詢的更多訊息。

1
2
3
4
5
6


@supports (accent-color: #74992e) {
 /* 如果支持該屬性，將運行的代碼 */
 blockquote {
 color: crimson;
 }
}

CSS 嵌套

CSS 一直在研究如何向 CSS 加入嵌套。通過嵌套，您將能夠編寫更直觀、更有條理和更高效的 CSS。

目前僅 Safari Technology Preview 支持

1
2
3


<header class="header">
 <p class="text">Lorem ipsum, dolor</p>
</header>

1
2
3
4
5
6
7
8
9


/* 🎉 您現在可以在 Safari Technology Preview 中嘗試 CSS 嵌套 */

.header {
 background-color: salmon;

 .text{
 font-size: 18px;
 }
}

箝制函數

使用 clamp() 函數實現響應式和流暢的排版。

1
2
3
4


/* Syntax: clamp(minimum, preferred, maximum) */
h1 {
 font-size: clamp(2.25rem,6vw,4rem);
}

樣式化可選字段

你可以使用 :optional 偽類來設置表單字段的樣式，例如 input、select 和 textarea，這些字段沒有 required 屬性。

1
2
3
4
5


/* 選擇頁面上的所有可選表單域 */

*:optional {
 background-color: green;
}

字間距屬性

使用 word-spacing 屬性指定單詞之間的空格長度。

1
2
3


p {
 word-spacing: 1.245rem;
}

建立漸變陰影

這就是如何建立漸變陰影以獲得獨特的用戶體驗。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


:root{
 --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
 height: 200px;
 width: 200px;
 background-image: var(--gradient);
 border-radius: 1rem;
 position: relative;
}

div::after {
 content: "";
 position: absolute;
 inset: 0;
 background-image: var(--gradient);
 border-radius: inherit;
 filter: blur(25px) brightness(1.5);
 transform: translateY(15%) scale(0.95);
 z-index: -1;
}

改變標題位置

使用 caption-side 屬性將表格標題（表格標題）放置在表格的指定一側。

建立文本列

使用列屬性為文本元素製作漂亮的列佈局。

1
2
3
4
5
6
7


/* 🏛️ 將 p 元素的內容分成 3 列 */

p {
 column-count: 3;
 column-gap: 4.45rem;
 column-rule: 2px dotted crimson;
}

BONUS(一)：穿透文字效果

使用 mix-blend-mode 製作穿透文字效果。

1
2
3


<div class="image-container">
 <div class="text">NATURE</div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


.image-container {
 background-image: url("img_nature.jpg");
 background-size: cover;
 position: relative;
 height: 300px;
}

.text {
 background-color: white;
 color: black;
 font-size: 10vw;
 font-weight: bold;
 margin: 0 auto;
 padding: 10px;
 width: 50%;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 mix-blend-mode: screen;
}

以上分享，希望對您有幫助！

【Petite-Vue】大小只有 ~6KB 的 mini Vue！

Fri, 10 Mar 2023 00:00:00 +0000

Vue 可以作為獨立的腳本文件使用，無需構建步驟！如果你有一個非前後端分離的歷史項目，並且它已經渲染了大部分的 HTML，或者你的前端邏輯並不復雜，不需要構建步驟，Vue 也提供了另一個適用於此類無構建步驟場景的替代版 Petite-Vue，主要為漸進式增強已有的 HTML 作了特別的優化。功能更加精簡，十分輕量。

Petite-Vue 的特點

相對 Vue3 而言，Petite-Vue 有如下特點：

提供精簡版的與 Vue3 語法和表現一致的模板語言
僅由渲染模塊和響應式系統模塊組成
渲染模塊沒有採用虛擬 DOM，而是採用在線解析渲染的方式
響應式系統模塊對外暴露 reactive 接口提供構建全局狀態管理器的能力
代碼庫體積在 gzip 壓縮後 ~6KB，十分適合與項目已有的 LayUI、MiniUI 等 UI 庫搭配使用

什麼是 Petite-Vue？

根據官方解釋，Petite-Vue 是專門為非前後端分離的歷史項目提供和 Vue 相近的響應式開發模式。與完整的 Vue 相比最大的特點是，面對數據的變化 Petite-Vue 採取直接操作 DOM 的方式重新渲染。

具體的使用方式請參考 GitHub，在這裡我想展示兩個示例：

代碼庫結構介紹

examples 各種使用示例
scripts 打包發布腳本
tests 測試用例
src
- directives v-if 等內置指令的實現
- app.ts createApp 函數
- block.ts 塊對象
- context.ts 上下文對象
- eval.ts 提供 v-if="count === 1" 等表達式運算功能
- scheduler.ts 調度器
- utils.ts 工具函數
- walk.ts 模板解析

若想構建自己的版本只需在控制台執行 npm run build 即可。

範例(一) - 在線渲染

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


<style>
 [v-cloak] {
 display: none;
 }
</style>
<div v-scope="App"></div>

<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module'

 createApp({
 App: {
 $template: `
 <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
 <span v-else> ONLINE </span>
 `,
 }
 status: 'online'
 }).mount('[v-scope]')
</script>

上述代碼最終輸出結果為 <div><span> ONLINE </span></div>，但渲染過程是直接在 DOM Tree 上進行(分為如下4個步驟)，當瀏覽器資源緊張時整個渲染過程將會被用戶一覽無餘：

生成模板

1
2
3
4


<div>
 <span v-cloak v-if="status === 'offline'"> OFFLINE </span>
 <span v-else> ONLINE </span>
</div>

移除 v-cloak 屬性

1
2
3
4


<div>
 <span v-if="status === 'offline'"> OFFLINE </span>
 <span v-else> ONLINE </span>
</div>

解析 v-if 和 v-else 指令

1
2
3


<div>
 <span v-if="status === 'offline'"> OFFLINE </span>
</div>

1
2


<div>
</div>

最終渲染

1
2
3


<div>
 <span> ONLINE </span>
</div>

那麼用戶很有可能會看到閃屏現象：ONLINE ➡️ OFFLINE ONLINE ➡️ OFFLINE ➡️ EMPTY ➡️ ONLINE

範例(二) - 組件化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


<div v-scope="App"></div>

<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module'

 const App = {
 $template: `
 <div v-scope="Counter(1)"></div>
 <div v-scope="Message()"></div>
 `
 }

 const Counter = initialCount => ({
 $template: `
 <span></span>
 <button @click="handleAdd">ADD</button>
 `,
 count: initialCount || 0
 handleAdd() {
 this.count += 1
 }
 })

 const Message = () => {
 $template: `<div></div>`
 }

 createApp({
 App,
 Counter,
 Message,
 }).mount('[v-scope]')
</script>

Petite-Vue 雖然沒有提供明確的組件構建方式，但通過 v-scope 屬性我們依然可以採取組件化構建我們的頁面。

但上述例子有明顯的問題採取全局組件註冊機制，如例子中即使 Message 組件不需要還是能引用 Counter 組件，假如註冊的不是 Counter 組件的構造函數，那麼 Counter 的狀態將會被意外修改。

1
2
3


createApp({
 Counter: Counter()
})

快速上手

自動初始化

Petite-Vue 無需構建流程即可使用。只需從 CDN 加載它：

1
2
3
4
5
6
7


<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- 頁面任意位置 -->
<div v-scope="{ count: 0 }">
 {{ count }}
 <button @click="count++">inc</button>
</div>

用 v-scope 標記頁面上應由 Petite-Vue 控制的區域，同時也是聲明 data 與 methods。
該 defer 屬性使腳本在 HTML 內容被解析後執行。
該 init 屬性告訴 Petite-Vue 自動查找和初始化頁面上的所有包含 v-scope 的元素。

這裡的 init 其實也就是 PetiteVue.createApp().mount() 的簡潔寫法；

閱讀源碼可知：

const s = document.currentScript;

如果 ( s && s . hasAttribute ( ‘init ’ )) {

createApp().mount();

}

如果不想自動初始化，那麼移除 init 屬性，且在 script 標籤中，增加 PetiteVue.createApp().mount()。

手動初始化

如果您不想要自動初始化，請刪除該 init 屬性並將腳本移動到 <body> 末尾：

1
2
3
4


<script src="https://unpkg.com/petite-vue"></script>
<script>
 PetiteVue.createApp().mount()
</script>

或者，使用 ES 模塊構建：

1
2
3
4


<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module'
 createApp().mount()
</script>

重點：在開發時期，CDN 地址可以是 https://unpkg.com/petite-vue 這樣簡短的，但對於生產使用時，應該要使用完整解析的 CDN URL。
如：https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js 或者 https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js (ES 模塊引用時)，避免解析和重定向文本之外，還有避免版本不同導致項目出現意外情況。

使用終端命令可以快速簡單下載代碼到本地：

1

curl unpkg.com/petite-vue@0.4.1/dist/petite-vue.iife.js --output petite-vue@0.4.1-iife.js

根作用域 (Root Scope) / 作用域 (Scope)

這裡的作用域和我們編寫 JavaScript 時說的作用域是一致的，作用是限定函數和變量的可用範圍，減少命名衝突。具有如下特點：

作用域之間存在父子關係和兄弟關係，整體構成一顆作用域樹。
子作用域的變量或屬性可覆蓋祖先作用域同名變量或屬性的訪問性。
若對僅祖先作用域存在的變量或屬性賦值，將賦值給祖先作用域的變量或屬性。

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


// 全局作用域
var globalVariable = 'hello'
var message1 = 'there'
var message2 = 'bye'

(() => {
 // 局部作用域 A
 let message1 = '局部作用域A'
 message2 = 'see you'
 console.log(globalVariable, message1, message2)
})()
// 輸出：hello 局部作用域 A see you

(() => {
 // 局部作用域 B
 console.log(globalVariable, message1, message2)
})()
// 輸出：hello there see you

createApp()，它接收一個數據對像作為根範圍中的變量，供模版中使用。

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


<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module';

 createApp({
 count: 0,
 // getters
 get plusOne() {
 return this.count + 1;
 },
 increment() {
 this.count++;
 },
 }).mount();
</script>

<!-- v-scope value can be omitted -->
<div v-scope>
 <p>{{ count }}</p>
 <p>{{ plusOne }}</p>
 <button @click="increment">increment</button>
</div>

這樣在模版中就可以使用 count 變量、increment 方法了。

掛載元素 (Mount)

mount() 沒有傳入掛載元素時，Petite-Vue 作用於整個頁面，但當傳入掛載元素時，那麼僅作用於掛載元素及其內的元素。

這也意味著，我們可以在同一頁面掛載多個 Petite-Vue 應用，每一個應用都有其獨立的根變量範圍。

1
2
3
4
5
6
7


createApp({
 // root scope for app one
}).mount('#app1');

createApp({
 // root scope for app two
}).mount('#app2');

生命週期

在 Petite-Vue 中，可以監聽每一個元素的掛載和卸載事件。

在 v0.4.0 開始，綁定生命週期事件需要加上 @vue: 前綴。

1
2
3
4
5
6
7
8
9


<!-- v0.4.0 以下 -->
<div v-if="show" @mounted="console.log('mounted on: ', $el)" @unmounted="console.log('unmounted: ', $el)">
 some node
</div>

<!-- v0.4.0 以上 -->
<div v-if="show" @vue:mounted="console.log('mounted on: ', $el)" @vue:unmounted="console.log('unmounted: ', $el)">
 some node
</div>

v-effect

用 v-effect 執行響應式內聯語句：

1
2
3
4


<div v-scope="{ count: 0 }">
 <div v-effect="$el.textContent = count"></div>
 <button @click="count++">++</button>
</div>

effect 響應式的追蹤其依賴，並在依賴更改時重新執行，因此每當更改 count 時它都會重新運行。

組件 (Component)

組件的概念在 Petite-Vue 中有所不同，因為它更加簡單。

組件有兩種方式來創建，分別是純數據的函數組件和帶有模板的函數組件。

使用組件，是需要在元素中用 v-scope 來調用函數。

純數據的函數組件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module'

 function Counter(props) {
 return {
 count: props.initialCount,
 inc() {
 this.count++
 },
 mounted() {
 console.log(`I'm mounted!`)
 }
 }
 }

 createApp({
 Counter
 }).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @vue:mounted="mounted">
 <p>{{ count }}</p>
 <button @click="inc">increment</button>
</div>

<div v-scope="Counter({ initialCount: 2 })">
 <p>{{ count }}</p>
 <button @click="inc">increment</button>
</div>

帶有模板的函數組件

如果還需要模板的話，相比函數組件是多了一個字段來聲明模板：$template，該字段的值可以是一個模板字符串，也可以是 <template> 元素的 ID 選擇器。(推薦用 template 元素)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


<script type="module">
 import { createApp } from 'https://unpkg.com/petite-vue?module';

 function Counter(props) {
 return {
 $template: '#counter-template',
 // $template: `
 // My count is {{count}}
 // <button @click="inc">+aaa+</button>
 // `,
 count: props.initialCount,
 inc() {
 this.count++;
 },
 };
 }

 createApp({
 Counter,
 }).mount();
</script>

<template id="counter-template">
 My count is {{ count }}
 <button @click="inc">++</button>
</template>

<!-- reuse it -->
<div v-scope="Counter({ initialCount: 1 })"></div>
<div v-scope="Counter({ initialCount: 2 })"></div>

全局狀態管理

沒錯，即便是簡單的 mini Vue，也可以有全局狀態管理。這裡使用的是 vue3 的 reactive API，來實現全局狀態管理。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


<script type="module">
 import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

 const store = reactive({
 count: 0,
 inc() {
 this.count++
 }
 })

 // manipulate it here
 store.inc()

 createApp({
 // share it with app scopes
 store
 }).mount()
</script>

<div v-scope="{ localCount: 0 }">
 <p>Global {{ store.count }}</p>
 <button @click="store.inc">increment</button>

 <p>Local {{ localCount }}</p>
 <button @click="localCount++">increment</button>
</div>

指令 (Directive)

內建指令

v-model
v-if / v-else / v-else-if
v-for
v-show
v-on(别名：@)
v-bind(别名：:)
v-html / v-text / v-pre
v-once
v-cloak (可用來配合 CSS 做未渲染時隱藏)

自定義指令

Petite-Vue 的自定義指令與 vue 有些不同，那麼怎麼註冊一個指令？

指令聲明：一個函數，const myDirective = (ctx) => {};
- ctx 是一個對象，裡面有 el、arg、get、effect 等屬性，具體可以參考文檔或者閱讀源碼
- 函數 return，是在指令卸載時候會觸發。
註冊指令：createApp().directive('dir-name', dirFn).mount()

v-html 指令的實現：

1
2
3
4
5
6


const html = ({ el, get, effect }) => {
 // effect 每次 get() 更改後就會執行
 effect(() => {
 el.innerHTML = get();
 });
};

自定義指令範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


const myDirective = (ctx) => {
 // the element the directive is on
 ctx.el
 // the raw value expression
 // e.g. v-my-dir="x" then this would be "x"
 ctx.exp
 // v-my-dir:foo -> "foo"
 ctx.arg
 // v-my-dir.mod -> { mod: true }
 ctx.modifiers
 // evaluate the expression and get its value
 ctx.get()
 // evaluate arbitrary expression in current scope
 ctx.get(`${ctx.exp} + 10`)

 // run reactive effect
 ctx.effect(() => {
 // this will re-run every time the get() value changes
 console.log(ctx.get())
 })

 return () => {
 // cleanup if the element is unmounted
 }
}

// register the directive
createApp().directive('my-dir', myDirective).mount()

自定義模板

這個可以通過給 createApp 的配置項增加屬性 $delimiters: ['${', '}'] 來實現，通常在服務器端模板語言一起使用時比較有用。

Petite-Vue vs Vue

Petite-Vue 僅有的特性：

v-scope
v-effect
@vue:mounted、@vue:unmounted 事件

不同的功能：

在表達式中，$el 指向指令綁定到的當前元素（而不是組件根元素）
createApp() 接受全局狀態而不是組件
組件被簡化為函數返回對象
自定義指令有不同的語法

共用的特性：

共有的特性
`{{ }}`
v-bind
v-on
v-model
v-if / v-else / v-else-if
v-for
v-show
v-html
v-text
v-pre
v-once
v-cloak
reactive()
nextTick()
Template refs

Petite-Vue 不支持的特性：

一些特性因為它們在漸進增強的背景下具有相對較低的使用頻率而被丟棄。

如果你需要這些特性，你可能應該只使用標準的 Vue：

ref()、computed() 等組合式API
Render functions ( Petite-Vue 沒有 Virtual DOM)
Reactivity 響應式數據類型(Map、Set、…等，為了體積更小而刪除)
Transition、KeepAlive、Teleport、Suspense
v-for 的深解構
v-on="object" 對象語法
v-is 動態組件
v-bind:style 自動前綴

總結

總結來說，Petite-Vue 這個項目，挺適合「用不到 Vue、React 等這些偏大的前端框架的簡單頁面」，或是「既有的非前後端分離的歷史項目」來做使用的，有著 Vue 的開發體驗，也能不增加項目的複雜度，簡直是一個完美的體驗！

【Typescript】tsconfig.json 的設定與資料型別介紹筆記

Tue, 07 Mar 2023 00:00:00 +0000

本篇來簡單說明一下 typescript 的 tsconfig.json，並記錄一下 typescript 各個資料型別。

TypeScript 是什麼？

❓這個應該是大家都有犯的錯誤，下面這張圖你看到錯誤了嗎？

.
.
.

🅰️：就是寫錯字，record 少了個 s，有時候即使報 error 了，你還找不到。

JavaScript 就是一個自由的靈魂，你永遠不知道你接了什麼物件，寫的時候很爽，debug 的時候黑人問號。

✅ 而下面這張就引用了 TypeScript 的 interface 來定義物件的型別，讓你在開發的時候就可以馬上知道錯誤，減少了很多 debug 的時間。

tsconfig.json

tsconfig.json 是 typescript 編譯設定的文件。

在目錄下執行以下指令，產生 tsconfig.json：

1

tsc --init

tsconfig.json 的預設

一開始我們拿到的 tsconfig 檔，裡面的預設就有這些：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "compilerOptions": {
 "target": "es5", // 指定編譯生成的JS版本
 "module": "commonjs", // 指定生成哪種模組
 "strict": true, // 啟用所有嚴格類型檢查選項
 "esModuleInterop": true, // 兼容模組導入的方式
 "skipLibCheck": true, // 不會檢查引入的函式庫檔案
 "forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致
 }
}

tsconfig.json 還有哪些設定？

除了預設 compilerOptions 的設定外，還有：

compileOnSave：在最上層設定 compileOnSave 屬性，可以讓 IDE 編輯器在儲存檔案的時候根據 tsconfig.json 重新產生編譯檔案。
compilerOptions：所有的編譯設定都會寫在 compilerOptions 裡，我們一開始取得的預設設定就在 compilerOptions。
include：指定編譯需要編譯的文件或目錄。
exclude：指定編譯器需要排除的文件或文件夾。如默認排除 node_modules 文件夾。
- include 及 exclude 最常見的萬用字元包括：
- *：表示匹配0至多個字元(不包含分隔符號)
- ?：匹配一個相符字元(不包含分隔符號)
- **/：表示匹配所有子資料夾
extends：引入其他配置檔案，繼承配置。default 包含當前目錄和子目錄下所有 TypeScript 文件。
files： files 的值為包含相對或絕對文件路徑的 list，表示需要編譯的文件。default 包含當前目錄和子目錄下所有 TypeScript 文件。若指定 files，則只會編譯指定的檔案。
references：指定要引用的專案。有時候為了方便將前端項目和後端 node 項目放在同一個目錄下開發，兩個項目依賴同一個配置文件和通用文件。
typeAcquisition：設置自動引入函式庫相關定義文件。包含 3 個子屬性：
- enable：布林類型，是否開啟自動引入庫類型定義文件(.d.ts)，默認為 false；
- include：數組類型，允許自動引入的函式庫名，如：[“jquery”, “lodash”]；
- exculde：數組類型，排除的函式庫名；

概括

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79


{
 "compileOnSave": false, // 編輯器在儲存檔案的時候根據 tsconfig.json 重新產生編譯檔案
 "compilerOptions": {
 /* 基本選項 */
 "target": "es5", // 指定編譯生成的 JS 版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
 "module": "commonjs", // 指定生成哪種模組: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
 "lib": [], // 編譯需要引入的特定函式庫檔案
 "allowJs": true, // 允許編譯 javascript 文件
 "checkJs": true, // 報告 javascript 文件中的錯誤
 "jsx": "preserve", // 指定 jsx 代碼的生成: 'preserve', 'react-native', or 'react'
 "declaration": true, // 生成相應的 '.d.ts' 文件
 "declarationMap": true, // 生成宣告檔案的 sourceMap
 "sourceMap": true, // 生成相應的 '.map' 文件
 "outFile": "./", // 將輸出文件合併為一個文件
 "outDir": "./", // 指定輸出目錄
 "rootDir": "./", // 檔案應該要被放置的位置
 "composite": true, // 是否編譯構建引用項目
 "tsBuildInfoFile": "./", // 指定文件存儲增量編譯信息，默認為 tsconfig.tsbuildinfo
 "removeComments": true, // 刪除編譯後的所有的註釋
 "noEmit": true, // 不產生輸出檔案
 "importHelpers": true, // 從 tslib 導入輔助工具函數
 "isolatedModules": true, // 將每個文件做為單獨的 module(與 'ts.transpileModule' 類似)

 /* 嚴格的類型檢查選項 */
 "strict": true, // 啟用所有嚴格類型檢查選項
 "noImplicitAny": true, // 在表達式和聲明上有隱含的 any 類型時報錯
 "strictNullChecks": true, // 啟用嚴格的 null 檢查
 "strictFunctionTypes": true, // 啟用檢查 function 型別
 "strictBindCallApply": true, // 啟用對 bind、call、apply 更嚴格的型別檢查
 "strictPropertyInitialization": true, // 啟用 class 實例屬性的賦值檢查
 "noImplicitThis": true, // 當 this 表達式值為 any 類型的時候，生成一個錯誤
 "alwaysStrict": true, // 以嚴格模式檢查每個 module，並在每個文件裡加入 'use strict'

 /* 額外的檢查 */
 "noUnusedLocals": true, // 有未使用的變數時，拋出錯誤
 "noUnusedParameters": true, // 有未使用的參數時，拋出錯誤
 "noImplicitReturns": true, // 並不是所有 function 裡的代碼都有返回值時，拋出錯誤
 "noFallthroughCasesInSwitch": true, // 報告 switch 語句的 fallthrough 錯誤。 (即不允許 switch 的 case 語句貫穿)
 "noUncheckedIndexedAccess": true, // 檢查 index signature 屬性是否是 undefined

 /* 模組選項 */
 "moduleResolution": "node", // 選擇模組解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
 "baseUrl": "./", // 用於解析非相對模組名稱的基目錄
 "paths": {}, // 模組名到基於 baseUrl 的路徑映射的列表
 "rootDirs": [], // 根文件夾列表，其組合內容表示項目運行時的結構內容
 "typeRoots": [], // 包含類型聲明的文件列表
 "types": [], // 需要包含的類型聲明文件名列表
 "allowSyntheticDefaultImports": true, // 允許從沒有設置默認導出的模組中默認導入

 /* Source Map Options */
 "sourceRoot": "./", // 指定調試器應該找到 TypeScript 文件而不是源文件的位置
 "mapRoot": "./", // 指定調試器應該找到映射文件而不是生成文件的位置
 "inlineSourceMap": true, // 生成單個 soucemaps 文件，而不是將 sourcemaps 生成不同的文件
 "inlineSources": true, // 將代碼與 sourcemaps 生成到一個文件中，要求同時設置了 --inlineSourceMap 或 --sourceMap 屬性

 /* 其他選項 */
 "experimentalDecorators": true, // 啟用裝飾器
 "emitDecoratorMetadata": true, // 為裝飾器提供元數據的支持

 /* 進階選項 */
 "skipLibCheck": true, // 不會檢查引入的函式庫檔案
 "forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致
 },
 "files":[
 "hello.ts" // 若指定 files，則只會編譯指定的 hello.ts 檔案
 ],
 "exclude": [ // 指定編譯器需要排除的文件或文件夾
 "node_modules"
 ],
 "extends": "./tsconfig.base.json", // 把基礎配置抽離成 tsconfig.base.json 檔案，然後引入
 "references": [ // 指定依賴的程式路徑
 { "path": "./common" }
 ],
 "typeAcquisition": { // 自動引入函式庫相關定義文件(.d.ts)。
 "enable": false,
 "exclude": ["jquery"],
 "include": ["jest"]
 }
}

TypeScript 資料型別整理表

先總結一些資料型別，接著再來詳細介紹各個型別。

Type	型別分類	說明
string	primitive	字串型別
number	primitive	數值型別
boolean	primitive	布林型別
null	primitive	空值型別，亦可賦值給所有型別(嚴謹模式則無法)
undefined	primitive	undefined 型別，亦可賦值給所有型別(嚴謹模式則無法)
object	object	物件型別
array	object	可使用「型別 + 方括號」或陣列泛型來表示陣列
function	object	一個函式有輸入和輸出，可以針對參數(輸入)及返回值(輸出)進行型別規範
any	ts	允許賦值為任意型別
unknown	ts	unknown 和 any 一樣可以接受任何型別賦值，但 any 可以賦值給任何型別，unknown 只能賦值給 any 和自己
void	ts	沒有任何返回值的函式
never	ts	表示不應該存在的狀態的型別，一般用於錯誤處理函式
union types	ts	聯合型別(union type) 使用 `｜` 表示其定義的值可以為多種型別
intersection types	ts	交集型別(intersection type) 使用 `&` 表示其定義的值都必須符合多種型別
literal types	ts	某些特殊的"值"可以當作"型別"來使用
tuple	ts	tuple 就是合併了不同型別的物件
enum	ts	列舉(enum)型別可以用來管理多個同系列的常數，作為狀態判斷使用

primitive：原始型別 ts： typescript 的特殊型別

typescript 的特殊型別

any

如果你不希望某些值出現型別檢查錯誤，可以使用 any，他是用來表示允許賦值為任意型別。

❌ 假設我們設定 favoriteNumber 變數的值的型別為 string，若使用數字則會報錯。

1
2
3


let favoriteNumber: string = 'seven';
favoriteNumber = 7;
//error : Cannot assign to 'favoriteNumber' because it is a constant.

✅ 這時候使用 any，則允許任何型別。

1
2


let favoriteNumber: any = 'seven';
favoriteNumber = 7;

宣告一個變數為任意值之後，對它的任何操作，返回的內容的型別都是任意值。在 any 型別下，可以賦值給任何型別，使用任何屬性和方法，都是被允許的。

但這樣是非常危險，非必要都不會使用 any，要慎用！

未宣告型別的變數及參數也視為 any 型別

變數如果在宣告的時候，未指定其型別，那麼它會被識別為 any 型別：

1
2
3


let something; // something: any
something = 7;
something = "seven";

用 noImplicitAny，來提醒我使用了 any

如上面所述，未指定型別則被識為 any，如果你想避免這種情況，可以在 tsconfig 設定 noImplicitAny = true，或是打開 “strict”: true 開啟所有嚴謹模式。他就會提醒你使用了 any 型別。

1
2
3
4
5


{
 // ...
 "noImplicitAny": true,
 // ...
}

unknown

unknow 可以接受任何型別賦值，有點類似 any 類型，但使用上比 any 安全，來看下面例子：

1
2
3
4
5
6
7


function f1(a: any) {
 a.b(); // success
}

function f2(a: unknown) {
 a.b(); // error: Property 'b' does not exist on type 'unknown'.
}

使用 unknow 會報錯，沒有 b 函式的屬性，而 any 則會不會告訴你。

雖然 unknown 和 any 一樣可以接受任何型別賦值，但 any 可以賦值給任何型別，unknown 只能賦值給 any 和自己。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


let value: unknown;

let value1: unknown = value; // success
let value2: any = value; // success
let value3: boolean = value; // error
let value4: number = value; // error
let value5: string = value; // error
let value6: object = value; // error
let value7: any[] = value; // error
let value8: Function = value; // error

void

JavaScript 沒有空值(void)的概念，在 TypeScript 中，可以用 void 表示沒有任何返回值的函式，如以下例子，這個函式只有 alert，不會 return 任何值。

1
2
3


function alertName(): void {
 alert('My name is iris');
}

never

表示不應該存在的狀態的型別，一般用於錯誤處理函式。

1
2
3


function error(message: string): never {
 throw new Error(message);
}

此外，以下面例子，參數使用 Union Types(聯合型別)，當參數被判斷沒有其他型別時，也會被視為 never。

1
2
3
4
5
6
7
8
9


function fn(x: string | number) {
 if (typeof x === "string") {
 // do something
 } else if (typeof x === "number") {
 // do something else
 } else {
 x; // has type 'never'!
 }
}

Union Types (聯合型別)

聯合型別(Union Types)表示取值可以為多種型別中的其中一種。跟JavaScript || or 的概念是一樣的。

✅ 聯合型別使用 | 分隔每個型別。

允許 id 的型別是 string 或者 number，但是不能是其他型別。

1
2
3
4
5


function printId(id: number | string) {
 console.log("Your ID is: " + id);
}
printId(101); // success
printId("202"); // success

❌ 若使用 boolean 值，就會報錯。

1
2


printId(false); // error
// error : Argument of type 'false' is not assignable to parameter of type 'string | number'.Type 'false' is not assignable to type 'number'.

存取聯合型別的屬性或方法

當 TypeScript 不確定一個聯合型別的變數到底是哪個型別的時候，我們只能存取此聯合型別的所有型別裡共有的屬性或方法。

✅ 使用兩種型別都有的屬性時，沒問題。

1
2
3


function printId(id: number | string) {
 console.log(id.toString());
}

❌ 如果使用不同屬性，則會報錯，toUpperCase 屬性無法適用於數值型別。

1
2
3
4
5
6


function printId(id: number | string) {
 console.log(id.toUpperCase());
}

// error: Property 'toUpperCase' does not exist on type 'string | number'.
// Property 'toUpperCase' does not exist on type 'number'.

若要解決不同情境，可以使用 typeof 去做判斷。官網將這些情況限縮某個具體型別上的行為，稱作為 Narrowing。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function printId2(id: number | string) {
 if (typeof id === "string") {
 // 型別為字串才 toUpperCase
 console.log(id.toUpperCase());
 } else {
 // 其他自動判定為 number 型別
 console.log(id);
 }
}
printId2("ABC");

若是陣列型別與其他型別聯合，可以使用 Array.isArray() 來檢查傳入的值是否為一個 Array。

1
2
3
4
5
6
7
8


function welcomePeople(x: string[] | string) {
 if (Array.isArray(x)) {
 console.log("Hello, " + x.join(" and "));
 } else {
 console.log("Welcome lone traveler " + x);
 }
}
welcomePeople(["a","b","c"]);

Intersection Types (交集型別)

Intersection Types (交集型別) 跟 JavaScript 的 && and 概念相同，使用 & 表示其定義的值都必須同時符合兩種型別。

❌ 以下面的例子，Intersection 在 primitive type(原始型別)中使用，是無法同時滿足兩種型別的，會被認定為 never 型別。

1
2
3
4
5
6
7


function printId(id: number & string) {
 console.log("Your ID is: " + id);
}
printId(101); // error
printId("202"); // error

// error: Argument of type 'number' is not assignable to parameter of type 'never'.

✅ 主要用來組合現有的型別，若都沒符合兩種型別，則會報錯提醒。而且像下面的例子，ColorfulCircle 需滿足 Colorful 及 Circle 型別。而且 TS 很聰明，radius 寫錯字寫成 raidus，complier 也會報錯提醒！

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


interface Colorful {
 color: string;
}

interface Circle {
 radius: number;
}

//用 type aliases 宣告 ColorfulCircle 型別，需滿足 Colorful 及 Circle 型別
type ColorfulCircle = Colorful & Circle;

//帶入的參數需滿足 ColorfulCircle 型別
function draw(circle: ColorfulCircle) {
 console.log(`Color was ${circle.color}`);
 console.log(`Radius was ${circle.radius}`);
}

draw({ color: "blue", radius: 42 }); // ok
draw({ color: "red", raidus: 42 }); // error
// error: Argument of type '{ color: string; raidus: number; }' is not assignable to parameter of type 'Colorful & Circle'.
// Object literal may only specify known properties, but 'raidus' does not exist in type 'Colorful & Circle'. Did you mean to write 'radius'?

Literal Types 字面值型別

string literal types

就是值的表現方式，**某些特殊的"值"可以當作"型別"**來使用，用來約束取值只能是某幾個字串中的一個。如下方讓 x 變數的字面值為"hello"。

1
2
3


let x: "hello" = "hello";
x = "hello"; // success
x = "howdy"; // Type '"howdy"' is not assignable to type '"hello"'

但很少情況會使用到一個變數只有一個值，我們可以將想要的值結合起來，如 alignment 給予 3 個字面值，其參數要符合其中一個。如果不符合這 3 個值的其中一個或寫錯字，都會報錯。

1
2
3
4
5
6


function printText(s: string, alignment: "left" | "right" | "center") {
 console.log(`${s} placed at the ${alignment}`)
}
printText("Hello, world", "left"); // success
printText("G'day, mate", "centre"); // error
// error: Argument of type '"centre"' is not assignable to parameter of type '"left" | "right" | "center"'.

numeric literal types

除了文字上，數字的操作也一樣。

執行 compare 函式的回傳值只能 -1、0 和 1：

1
2
3


function compare(a: string, b: string): -1 | 0 | 1 {
 return a === b ? 0 : a > b ? 1 : -1;
}

non-literal types

非字面值型別也可以結合操作：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


interface Options {
 width: number;
}
function configure(x: Options | "auto") {
 console.log(x);
}
configure({ width: 100 }); // success
configure("auto"); // success
configure("automatic"); // 不符 Options 及 "auto"
// error： Argument of type '"automatic"' is not assignable to parameter of type 'Options | "auto"'.

Tuple 元組

Tuple 就是合併了不同型別的物件。

定義一對值分別為 string 和 number 的元組：

1

const wayne: [string, number] = ['wayne', 18];

可以針對型別有的屬性進行使用、賦值。但當直接對元組型別的變數進行初始化或者賦值，需提供所有項目。如果要新增不同型別的項目也是無法的：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


let wayne: [string, number];
wayne = ['wayne', 18]; // 如果只有宣告 wayne 沒賦值，會是undefined，tsconfig strictNullChecks 打開的話會報錯提醒
wayne[0] = 'wayne'; // success
wayne[1] = 25; // success
wayne[0].slice(1); // success
wayne[1].toFixed(2); // success
wayne.push('male'); // success

wayne = ['wayne lin']; // error: Property '1' is missing in type '[string]' but required in type '[string, number]'.
wayne.push(true); // error: Argument of type 'true' is not assignable to parameter of type 'string | number'.

enum

列舉(Enums)型別用於取值被限定在一定範圍內的場景，可以用來管理多個同系列的常數，作為狀態判斷使用。比如一週只能有七天，顏色限定為紅綠藍等。也可以自定義來表示每一個值。

Numeric Enums

使用 enum 關鍵字來定義：

1

enum Days { Sun, Mon, Tue, Wed, Thu, Fri, Sat };

這時候我們來看編譯後，列舉成員會被賦值為從 0 開始自動遞增的數字，同時也會對列舉值到列舉名進行反向對映：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var Days;
(function (Days) {
 Days[Days["Sun"] = 0] = "Sun";
 Days[Days["Mon"] = 1] = "Mon";
 Days[Days["Tue"] = 2] = "Tue";
 Days[Days["Wed"] = 3] = "Wed";
 Days[Days["Thu"] = 4] = "Thu";
 Days[Days["Fri"] = 5] = "Fri";
 Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

手動賦值

可以手動去定義不同的值。

1

enum Days { Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat };

編譯後：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var Days;
(function (Days) {
 Days[Days["Sun"] = 7] = "Sun";
 Days[Days["Mon"] = 1] = "Mon";
 Days[Days["Tue"] = 2] = "Tue";
 Days[Days["Wed"] = 3] = "Wed";
 Days[Days["Thu"] = 4] = "Thu";
 Days[Days["Fri"] = 5] = "Fri";
 Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

要小心覆蓋的情況

如果中間突然指定了了一個值，那他會從當前的值從新開始計算。如下， Days[3] 的值先是 “Sun”，而後又被 “Wed” 覆蓋了。這個 TypeScript 是不會報錯的，所以要特別注意。

1
2
3
4
5
6


enum Days { Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat };

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

可使用型別斷言(Type Assertion)來定義

手動賦值的列舉項其中一個不想是數字，此時可以使用 any 型別斷言來讓 TypeScript 無視型別檢查。

1

enum Days { Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S" };

編譯後：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


var Days;
(function (Days) {
 Days[Days["Sun"] = 7] = "Sun";
 Days[Days["Mon"] = 8] = "Mon";
 Days[Days["Tue"] = 9] = "Tue";
 Days[Days["Wed"] = 10] = "Wed";
 Days[Days["Thu"] = 11] = "Thu";
 Days[Days["Fri"] = 12] = "Fri";
 Days[Days["Sat"] = "S"] = "Sat";
})(Days || (Days = {}));

String Enums 字串列舉

字串 enums 沒有 number enums 可以自動遞增的行為，但字串 enum 自行定義是有他的語意在的。

1
2
3
4
5
6


enum Direction {
 Up = "UP",
 Down = "DOWN",
 Left = "LEFT",
 Right = "RIGHT",
}

Heterogeneous Enums 異構列舉

雖然 enum 可以混合數字與字串，但盡量不要寫這種寫法：

1
2
3
4


enum BooleanLikeHeterogeneousEnum {
 No = 0,
 Yes = "YES",
}

Computed and constant members 常數項和計算所得項

列舉項有兩種型別：常數項(constant member)和計算所得項(computed member)。

前面我們所舉的例子都是常數項，一個典型的計算所得項的例子如下，“blue”.length 就是一個計算所得項：

1
2


enum Color { Red, Green, Blue = "blue".length };
console.log(Color.Blue); // 4

如何定義是常數項，可參考官網。

像是二元運算子 <<、|、& 等都歸為常數項：

1
2
3
4
5
6
7
8
9


enum FileAccess {
 // constant members
 None,
 Read = 1 << 1,
 Write = 1 << 2,
 ReadWrite = Read | Write,
 // computed member
 G = "123".length,
}

Const Enums 常數列舉

可以使用 const enum 定義的列舉型別：

1
2
3
4
5
6
7
8


const enum Directions {
 Up,
 Down,
 Left,
 Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常數列舉與普通列舉的區別是，它會在編譯階段被刪除，並且不能包含 computed member (計算成員)，只能是常數項 (constant member)。

編譯後：

1

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

Ambient Enums 外部列舉

外部列舉 (Ambient Enums) 是使用 declare enum 定義的列舉型別：

1
2
3
4
5
6
7
8


declare enum Directions {
 Up,
 Down,
 Left,
 Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare 定義的型別只會用於編譯時的檢查，編譯結果中會被刪除。

編譯後：

1

var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

【find】在 Linux 使用 find 指令尋找目錄或檔案的速查筆記

Fri, 03 Mar 2023 00:00:00 +0000

在 Linux 平台下找檔案不外乎使用威力強大的 find 命令，威力強大的背後就是有一點點學習曲線，不過整體上來說還算簡單，因此想寫一篇文章留下備忘，讓自己日後可以快速查閱參考。

基本語法

查詢檔案名稱 (也可以查詢「目錄名稱」，其中 * 是萬用字元)

1

find $HOME -name '*.mp3'

註：$HOME 是 Linux 下的一個環境變數，預設指向執行帳號的 HOME 目錄

查詢檔案名稱 (不區分大小寫)

1

find /etc -iname 'Network'

指定只要搜尋「檔案」名稱

1

find /var/log -iname '*.log' -type f

指定只要搜尋「目錄」名稱

1

find /etc -iname 'apache2' -type d

補充說明：可用的 -type 參數值如下

指令參數	說明
b	block (buffered) special
c	character (unbuffered) special
d	directory (一般目錄)
p	named pipe (FIFO)
f	regular file (一般檔案)
l	symbolic link
s	socket
D	door (Solaris)

找尋所有檔案大小大於 50MB 的檔案

1

find /var -type f -size +50M

註：不加上 -name 參數即代表搜尋所有檔案

找尋所有檔案大小小於 50MB 的檔案

1

find /var -type f -size -50M

尋找超過 7 天沒有被存取或修改過的檔案 (判斷檔案存取時間)

1

find $HOME -type f -atime +7

尋找曾經在 7 天內被存取或修改過的檔案 (判斷檔案存取時間)

1

find $HOME -type f -atime -7

尋找超過 10 分鐘沒有被存取或修改過的檔案 (判斷檔案存取時間)

1

find $HOME -type f -amin +10

尋找曾經在 10 分鐘內被存取或修改過的檔案 (判斷檔案存取時間)

1

find $HOME -type f -amin -10

尋找檔案建立時間已超過 30 天的檔案

1

find $HOME -type f -ctime +30

尋找特定使用者的檔案 (以帳號名稱 wayne 為例)

1

find $HOME -type f -user wayne

進階應用

刪除 30 天以上未經存取過的暫存檔案

注意：以下指令最後一個分號(;)前一定要加上反斜線

1

find /tmp -type f -atime +30 -print -exec rm -f '{}' \;

加上 -print 是為了讓被刪除的檔案檔名一併顯示在畫面上，這個參數可以省略
使用 -exec 會讓查詢到的每一個檔案路徑代入 {} 位置，一個檔案會執行一遍 rm 命令

刪除 30 天以上未經存取過的暫存檔案

使用 xargs 當成單一命令的參數

1

find /tmp -type f -print0 | xargs -0 rm -v

加上 -print0 是為了讓輸出的結果不以「斷行字元」分隔，而改以 null 為結果的分隔字元
使用 xargs 命令加上 -0 是為了讓傳入的資料以 null 字元當成參數的分隔
使用 rm 命令加上 -v 是為了能顯示出被刪除的檔案名稱，這個參數可以省略
使用 xargs 會將所有 find 命令查到的檔案轉換成 rm 的參數列，如果檔案過多可能會執行失敗!
使用 xargs 可確保後面的程式 (rm) 只執行一次，所以理論上執行速度較快！

相同參數需輸入多筆並且以「或」邏輯運算時要用 -o 參數串接起來。

例(一)：同時找兩種檔名樣式的檔案

1

find $HOME -name '*.mp3' -o -name '*.ogg'

例(二)：同時找兩個擁有者的檔案

1

find /usr/local -user user1 -o -user user2

注意事項

使用萬用字元時務必加上單引號( ’ )

！！！以下是錯誤示範！！！

1

find $HOME -name *.txt

Cloudflare Tunnel 介紹

Thu, 02 Mar 2023 00:00:00 +0000

以前曾經寫過一篇「透過 ngrok 產生臨時用的網址到指定機器」，這次要介紹的是類似的工具 Cloudflare Tunnel，他們有著共同的功能：

我們有個本機的服務跑在 http://localhost:5000，想讓外部訪問
Cloudflare Tunnel 產生公共網址以及 Cloudflare 節點與本機間的「tunnel」
訪客訪問網址，Cloudflare 節點把請求透過 tunnel 轉送到我們本機的服務，並且把服務的回覆也透過 tunnel 反向的回傳

Cloudflare Tunnel（也稱為 Argo Tunnel）除了名字太長這個問題外，有著這些優勢：

Cloudflare Tunnel 與 ngrok 一樣是免費增值型服務，上述基本的 Cloudflare Tunnel 功能完全免費，進階的 Argo 則是收費的
Cloudflare Tunnel 可以搭配 Cloudflare 自家的 DNS 服務使用，也就是可以用自有的網址，而這在 ngrok 是要收費的
Cloudflare Tunnel 的服務會自動就近分配節點位置，而 ngrok 需要手動指定

安裝 Cloudflare Tunnel

使用 Cloudflare Tunnel 的前提當然是要有 Cloudflare 帳號，以及以 Cloudflare DNS 託管的網域，除這兩點外，我們得在主機上安裝 Cloudflare Tunnel 的代理程式 cloudflared，安裝檔參見 cloudflared 的下載頁。

建立 Tunnel

幫 tunnel 取個名字，這裡叫 local：

1

cloudflared tunnel create local

這只是在 Cloudflare 建一個空的 tunnel 紀錄在案，還沒有真正可以連線的 tunnel。

要檢視自身旗下所有 tunnel，使用命令 list：

1

cloudflared tunnel list

會看到如下的輸出：

1
2
3
4


$ You can obtain more detailed information for each tunnel with `cloudflared tunnel info <name/uuid>`
$ ID NAME CREATED CONNECTIONS
$ e6b1ea74-e6ad-4e36-b8b5-0f8f81ccafec local 2023-02-05T16:29:33Z
$ 9ea66384-6ec7-4b6c-9a05-e57c08a32526 soda 2022-05-26T01:46:42Z

綁定 Tunnel 與網址

目前 tunnel 還沒有網址，給它一個：

1

cloudflared tunnel route dns local local.cccc.ws

那 Cloudflare 會阻止我們這麼做：

1

$ Failed to add route: code: 1003, reason: An A, AAAA, or CNAME record with that host already exists.

連接本地服務

有了 tunnel、有了網址，只剩把服務連上 tunnel 了。

假設我們的機台上有個服務跑在 http://localhost:1111，想要利用 Cloudflare Tunnel 讓外部人士用 https://local.cccc.ws 訪問，最簡單的一行指令如下：

1

cloudflared tunnel run --url http://localhost:1111 local

執行後下面會跑出一堆嘰哩呱啦的訊息，只要沒有紅字就是正常：

1
2
3
4


$ 2023-02-05T16:50:52Z INF Connection e4fe5a22-1e6e-4a05-b24c-95fc3ec62501 registered with protocol: quic connIndex=0 ip=198.41.200.23 location=TPE
$ 2023-02-05T16:50:52Z INF Connection 57570b20-0c60-472b-bfac-eeebe45912ff registered with protocol: quic connIndex=1 ip=198.41.192.227 location=HKG
$ 2023-02-05T16:50:52Z INF Connection 02f8e0ad-dfca-499b-af48-21a8bbfa1b47 registered with protocol: quic connIndex=2 ip=198.41.200.43 location=TPE
$ 2023-02-05T16:50:52Z INF Connection 39c656ce-e08d-49a7-9cfb-1d05d92228fc registered with protocol: quic connIndex=3 ip=198.41.192.27 location=NRT

照紀錄看起來，我們分配到的節點分別位於台北（TPE）、東京（NRT）、香港（HKG），如同最開始所說的，Cloudflare 會自動就近分配 tunnel 節點位置。

跑起來後在 Cloudflare DNS 頁面的確有多了一筆 local.cccc.ws 的紀錄。

關閉 Tunnel

對剛剛在跑著 cloudflared 的 terminal（或 console，不論怎麼叫）按下 CTRL+C 即可中斷 tunnel。

此時若去看 Cloudflare DNS 會發現那筆 local.cccc.ws 還是在，但是確實已經連不到了，此時需要手動砍掉這筆遺留的紀錄（或者射後不理也無妨）。

其他花式玩法

前文所提的命令列用法較適合臨時性的應用，例如開發中的專案需要給手機測試、對外展示等，從 cloudflared 的名字可以推測的出來，字尾的「d」是 daemon 的意思，因此它也可以是服務，配合 tunnel 配置文件，讓開機完就把 tunnel 跑起來，除此之外，除了最典型的轉送給本地 HTTP 服務外，Cloudflare Tunnel 也可以轉送給本地 Unix socket 或者 IP，對 Cloudflare Tunnel 的其他花式玩法有興趣的朋友可參閱〈Argo Tunnels that live forever〉一文。

Clouflare Tunnel 的安全優勢

對於展示、測試開發中專案來說，搭建的 tunnel 往往是臨時性的，可能不用太在意安全性的部份，但 Cloudflare Tunnel 的野心不僅於此，他們希望可以將此技術應用在真實的服務上，帶給服務更多的安全保護，因為覺得滿好的所以也順帶寫一下。

下面的示意圖是未使用 Cloudflare Tunnel 前的一個典型的 DNS A record 訪問模型：

正常的訪客透過 example.com 訪問我們的服務，並且透過 Cloudflare 節點對我們後端的 1.2.3.4 做到基本的防護。

但我們服務的 IP 1.2.3.4 仍然是暴露在公網的，所以有心人士有可能透過一些手段擷取到我們的真實 IP 1.2.3.4，進而展開攻擊。

而在 Cloudflare Tunnel 的連線模型中，一切的傳輸只透過 tunnel，我們的服務始終都是封閉的，不曾暴露於公網，壞人大猩猩最多只能攻擊到 Cloudflare 節點，碰不到我們機台的真身，這可以為我們帶來額外的安全優勢：

另一方面，Cloudflare 有著全球廣佈的快取節點，訪客會查詢到離他所在位置較近的 Cloudflare 節點，藉此加快訪問速度，而 Cloudflare 節點與我們 tunnel 節點間的流量，則由 Cloudflare 自行導引，就像 Cloudflare 自我宣傳的那樣：

【WebAPI】分層設計模式 - 三層式架構

Fri, 24 Feb 2023 00:00:00 +0000

軟體分層設計模式是我這幾年專案必會使用的架構，它的效益在多人團隊分工上有極大的效益，且能有效專注修改區域，提高共用性。

三層式架構 (Three-Tier) 是很常見的架構，可以應用在實體機器架構上，也可以應用在邏輯架構上，可以按照實體與邏輯上去進行區分。

為甚麼要分層？

如果程式全部一條龍寫到底，後續會產生很多問題，難以維護、難以閱讀、更甚至是萬一人家要接手你的程式碼，這時候改Ａ壞Ｂ，耦合度過高的情況下，你只能祈禱接手的人不知道你住哪…

這種情況下只有自己寫可能還好，那如果需要跟人合作呢？

大家可能容易出現重複的 Code，也難以說明誰該負責寫哪部分。

這時候有一個好的架構，就很重要了，分層設計時，遵循了面向介面設計的思想，那麼這種向下的依賴也應該是一種弱依賴關係。因而在不改變介面定義的前提下，理想的分層式架構，應該是一個支持可抽取、可替換的「抽屜」式架構。

WebAPI 的三層式架構

WebAPI 的三層式架構顧名思義，主要分為了三層：

Controller：控制層，作為接口。
Service：商業邏輯層，只要有關商業邏輯部分的處理全部放在這一層。
Repository：倉儲層，作為資料存儲的一層。
Common：共用層，作為存放各層會用到的相同東西。

他們之間的關係如下圖：

優缺點

優點
1、較好形成一個規範，可做為標準化流程。
2、提高重用性，透過分層將相同類型的程式碼放在一塊。
3、團體合作的時候，能夠分層進行；開發人員只需專注於自己開發的那一層即可。
4、具有好的開放性、可擴充性優點。
5、降低程式碼之間的依賴，每層溝通是透過介面。
6、提高系統安全性，因為使用者需要透過 Service 層才有機會與下一層 Repository 撈取資料。

缺點
1、增加了開發成本，傳統一個人負責寫到底；分層下需要多人進行合作。
2、調整程式可能會出現連動性；有的時候修改一個地方，會導致其他層也需要跟著調整。
3、相較於一條龍開發系統性能下降，原本程式可以直接透過 DB 撈取資料，現在需要透過中間層的轉介才能夠拿到。

Controller

在我們 WebAPI 中，Controller 就屬於『接口』，負責處理 Router，如常見的：Get、Post、Patch…等，都會是在這層負責接應相對應的路由。

Controller 接收的是 Parameter，輸出的是 ViewModel。

Service

在我們程式中最重要的就屬於『商業邏輯』了，這一層是會特別關注的一層；這邊大家可能會問，那商業邏輯是指哪些呢？

我自己認為最簡單分辨的方式，舉凡任何需要對資料特別處理的地方都會是放在這一層，如常見的：登入驗證、加減法運算、確認是否驗證成功…等。

Service 接收的是 InfoModel，輸出的是 Dto。

Repository

資料倉儲層，這層主要處理『有關資料串接』的部分，如：資料庫連接、下 SQL 取 Table 資料…等，都會是在 Repository 處理。

這邊有個特別的地方，如果我們程式需要透過別人的 API 取的資料回來做處理呢？

那與對方 API 串接的地方就會是 Repository，所以 Repository 是處理『有關資料串接』的地方，而這資料當然並不只限於從 DB 撈取的資料。

Repository 接收的是 Condition，輸出的是 DataModel。

Common

共用層相對單純，存放各層間會用到的『共同』東西，最常見的例如：Enum…等，就會放在這一層。

常見問題

三層式架構與傳統 MVC 有甚麼不同呢？

傳統 MVC 分成，View(展示層)、Model(資料層)、Controller(控制層)，這邊與三層式架構最大的區別在於傳統 MVC 並沒有特別把『商業邏輯』抽出來；常會看到傳統 MVC 可能會把商業邏輯附加在 Controller，所以 MVC 與三層式架構是不同的。

各層間溝通一定要透過 Model 嗎？

這個答案就我個人使用的理解是，『不一定要透過 Model』，如果只是要回傳簡單的 bool 、或是一兩個參數，直接傳就可以了；那做成 Model 的用意呢？當然也是為了提高重用性，例如 ResultModel。

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


public class ResultModel
{
 /// <summary>
 /// 結果
 /// </summary>
 public bool Result { get; set; }

 /// <summary>
 /// 提示訊息
 /// </summary>
 public string Message { get; set; }
}

雖然只有兩個變數，但還是把它包成了 Model ，因為有很多個地方會需要用到，當然就可以包起來給大家共同使用。

Service 層可以呼叫其他 Service 層的程式嗎？

可以，三層式架構的優點就是要提供重用性，當然如果相同的事情在其他地方已經有做過了，直接拿來使用，就不用做重複的事情。

Model 的名稱分了這麼多？不能直接一個通到底嗎？

這問題也是我一開始不太能夠理解的部分，如果是一個人寫程式的時候都會為了方便，就一個 Model 通到底吧；這時候肯定會有人問就算多人合作也可以啊？

真的可以嗎？

各層間的職責都不同，從 Reoisitory 取出來的資料丟給 Service 做處理，有可能不需要全部完整的資料回傳給 Controller，為了避免這種情況當然是分開會比較妥當，自己使用自己的 Model；多人合作的時候只需要定義說好相互要傳遞的參數就可以分層開發了，也不會因為一個 Model 而影響對方。

小結

當我是一個人開發的時候，分層設計真的感受不深，更多的是為何要弄得這麼複雜，但隨著工作團隊的擴展，多人合作開發的時候，分層設計就發揮出了它的價值，各個成員專注各自的層發開，不會被其他成員影響，當需要修改或擴充時，若是要改 UI，只需要異動展示層，若是新增商業邏輯則只需專注業務層，而是為要換第三方配合廠商或者更換資料庫，則只需專注在資料層去修改，而各層的物件又可以依不同情境做重用，不需重複開發，可謂好處多多。

效益：

適合多人團隊分工時不互相影響 (一條龍開發時感受不深)
分層專注，可以專注修改，不會牽一髮動全身

但真的能達到這樣的效益，其實還有一些必要前提：

物件設計須符合 SOLID 原則
各層依賴介面 (Interface)，不依賴實作
專案需導入 DI Framework，做到依賴注入，達成控制反轉 (IoC)
撰寫單元測試 (Unit Test) 保護每次修改
合理的設計各層職責物件，業務層更為重要

【Javascript】Require 與 Import 的區別

Wed, 22 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站
 參考網站

你有想過，我們在 JavaScript 要引入其他文件，有的時候使用 require，有的時候使用 import，這兩個方式有什麼差別？效能上又有什麼差別呢？本篇就來說明一下！

遵循的模塊化規範不同

require/exports 遵循 CommonJS 規範，主要用於 Node.js 伺服器端開發，以同步方式載入模組，也就是要載入完成後才能執行後面的程式碼。

而 import/export 則是 ES6 模組（ESM）標準，由 TC39 制定，屬於靜態編譯，編譯期就能解析依賴，瀏覽器與 Node.js 都原生支持（Node.js 14+）。若舊環境不支援，則可以透過 Babel + Webpack 轉譯。

出現的時間不同

require/exports：2010 年左右在 CommonJS 規範中出現，Node.js 廣泛採用。
import/export：ES6 (ES2015) 引入，2015 年之後才廣泛使用，Babel 是早期轉譯支援的重要工具。

現在 Node.js 14+ / 16+ 已原生支援 ES Module，不需要 Babel 也能直接使用 import/export。

寫法與使用方式不同

CommonJS (`require/exports`)

1
2
3


const component = require('component')
exports.component = component
module.exports = component

ES6 Module (`import/export`)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import fs from 'fs'
import { readFile } from 'fs'
import { readFile as read } from 'fs'
import fs, { readFile } from 'fs'

export default fs
export const fs
export function readFile
export { readFile, read }
export * from 'fs'

動態載入（Dynamic Import）

靜態 import 必須是字面量字串，編譯期就要能確定模組路徑：

1
2
3
4
5
6


// ❌ 靜態 import 不能使用變數
const url = "./utils.js";
import url; // SyntaxError

// ✅ 靜態 import 正確用法
import myUtil from "./utils.js";

若需要 動態載入，可以使用 CommonJS 的 require() 或 ESM 的動態 import()：

1
2
3
4
5
6
7


// 使用 require()（CommonJS）
const url2 = "./utils.js";
const myUtil2 = require(url2);

// 使用動態 import()（ESM）
const url3 = "./utils.js";
const myUtil3 = await import(url3);

說明

方法	同步/非同步	支援變數	適用環境
`import` (靜態)	靜態編譯	❌	ESM（編譯期）
`require()`	同步	✅	CommonJS (Node.js)
`await import()`	非同步	✅	ESM (Node.js / 瀏覽器)

Node.js 支援情況

Node.js 14.8+：動態 import() 正式可用（無需 flag）。
Node.js 16+ LTS：動態 import() 穩定，CommonJS 與 ESM 都可使用。
靜態 import 與動態 import() 都可以取代 Babel 轉譯的需求，但 Babel/Webpack 仍用於瀏覽器或舊版兼容。

本質上的不同

CommonJS 與 ES Module 輸出都是物件，但 ESM 支援 export default 與強綁定屬性。
require() 載入的是值或引用，靜態與動態都可以。
動態 import() 與 require() 的動態行為對等，但非同步，不阻塞事件循環。

範例比較

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


// counter.js
exports.count = 0
setTimeout(() => {
 console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const { count } = require('./counter')
setTimeout(() => {
 console.log('read count after 1000ms in commonjs is', count)
}, 1000)

// es6.js
import { count } from './counter'
setTimeout(() => {
 console.log('read count after 1000ms in es6 is', count)
}, 1000)

執行結果：

1
2
3
4
5
6
7


node commonjs.js
> increase count to 1 in counter.js after 500ms
> read count after 1000ms in commonjs is 0

babel-node es6.js
> increase count to 1 in counter.js after 500ms
> read count after 1000ms in es6 is 1

效能差異

靜態 import：編譯期執行。
require()：同步載入，阻塞事件循環。
動態 import()：非同步載入，不阻塞事件循環。

在現代 Node.js 專案，如果能用靜態 import 就用，需動態載入才使用 require() 或 await import()。效能差異微乎其微，但動態載入的同步/非同步行為會影響事件循環。

【Node.js】用 Typescript 與 Express 建立一個 server

Tue, 21 Feb 2023 00:00:00 +0000

最近前端離不開 typescript 後，我將原本用 javascript 撰寫的 mock server 改用 typescript 來撰寫；本篇就來記錄一下該如何使用 typescript 建立 node.js 的 Express！

使用 typescript 的好處

typescript 是為了彌補 javascript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 node.js 中使用 typescript 建立 Express，所以就不描述太多 typescript 的特性了。

提供許多 OO pattern 的方法，如介面、繼承與抽象類別
強型別，能夠在編譯過程中先行找到一些錯誤
能夠編譯成不同版本的 JS
有 Declaration files 能夠使用 JS Library，因此不太需要擔心套件相容問題，像是 express 有 @type/express

建立 typescript 環境

進入初始化專案或現有專案的目錄

1
2
3
4


cd ~/project/node-express-project

# 初始化專案
# npm init

安裝 typescript 與 express

1
2


npm install --save-dev typescript @types/express @types/node
npm install --save express

設定 typescript

安裝 typescript 時，也會同時安裝將 typescript 編譯成 javascript 的編譯器 - tsc。

初始化 tsc

1

tsc --init

tsc --init 後會產生 tsconfig.json，當 typescript 透過 tsc 編譯成 javascript 時，就會遵循該檔案的設定進行編譯。

可能遇到的錯誤

tsc command not found

這個 error message ，請先在 global 安裝 typescript。

1

npm install -g typescript

若仍出現 “tsc command not found”，請在終端機輸入：

1

export PATH=”$PATH:/Users/{user name}/.npm-global/lib/node_modules/typescript/bin/”

再輸入 tsc -v ，確認 tsc 的版本即可。

tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "compilerOptions": {
 "target": "es5", // 選擇要編譯成哪種版本的 javascript
 "module": "commonjs",
 "strict": true, // 嚴格模式，啟用後需要指定函數參數的 type
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "outDir": "dist" // 將編譯過後的 js 檔放到 dist 資料夾中
 }
}

官網有 tsconfig.json 所有屬性的說明，請參考官網。

node.js 的設定

安裝完 typescript 環境後，接著我們來設定 node.js 的部分。

1. 新增入口檔案

1
2
3


mkdir src

touch src/app.ts # 入口檔案

src/app.ts

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


import express from 'express';
​
const app = express();
const port = 3000;
app.get('/', (req, res) => {
 res.send('The server is working!');
});
app.listen(port, () => {
 if (port === 3000) {
 console.log('true')
 }
 console.log(`server is listening on ${port} !!!`);
});

2. 安裝 nodemon 與 ts-node

nodemon：用於在每次儲存檔案後自動重啟 node，看到即時的修正。
ts-node：可以當作 node.js + typescript，用於直接在 node.js 執行 typescript 檔案。

在專案資料夾內安裝：

1

npm install --save-dev nodemon ts-node

【推薦】也可以直接安裝於全域環境：

1

npm install -g nodemon ts-node

3. 調整 package.json 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts",
 "build": "tsc --project ./",
 "test": "echo \"Error: no test specified\" && exit 1"
}

4. 執行 npm start

1

npm run start

start 後，nodemon 會監聽檔案是否有儲存的動作，並用 ts-node 來重啟。

npm run build 後則會出現一個 dist 資料夾來存放編譯過後的 js 檔。

BONUS：使用自定義的 tsconfig.json

補充一下，若當前專案包含前後端，而前端也使用 typescript 撰寫時，已經有一隻前端部分的 tsconfig.json，此時若需拆分 Express 的 tsconfig.json，可以透過 nodemon 的參數 --config {express tsconfig.json 檔案位置} 來調整。

先複製一份 tsconfig.json 到 Express src 資料夾內

1
2


# 先複製一份 tsconfig.json
copy tsconfig.json src/tsconfig.json

調整 start 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts --config src/tsconfig.json",
 "build": "tsc --project ./ --config src/tsconfig.json",
 "test": "echo \"Error: no test specified\" && exit 1"
}

使用 http

這邊講解用 http module 寫 node.js，如需直接使用 express 可以直接跳到使用 Express。

建立完 typescript 的環境後，引入 node.js 的核心套件之一：http module。 http module 能讓你建立一個 http server，當你的 code 在執行的時候，可以隨時監聽網路上發送到你 url 的所有 request，並將你寫的程式邏輯 response 回去。

載入 http module 其實跟 javascript 的寫法差不多，只是在 request 和 response 加上對應的型別： IncomingMessage、ServerResponse。

PS：在 node 無法直接使用 import，得透過 Babel 轉譯，可以在 tsconfig.json 中設定 module。

src/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


{
 "compilerOptions": {
 "target": "esnext",
 "module": "CommonJS", // 重點是這行
 "useDefineForClassFields": true,
 "strict": true,
 "jsx": "preserve",
 "outDir": "./dist",
 "importHelpers": true,
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "sourceMap": true,
 "isolatedModules": false,
 "resolveJsonModule": true,
 "baseUrl": ".",
 "types": ["node"],
 "paths": {
 "@/*": ["src/*"]
 },
 "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 "noFallthroughCasesInSwitch": true,
 "forceConsistentCasingInFileNames": true,
 "typeRoots": ["node_modules/@types", "src/types", "src"],
 "suppressImplicitAnyIndexErrors": true
 },
 "include": ["**/*.ts", "**/*.d.ts"]
}

src/app.ts

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


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

如此一來每當有任何 client 對 http://localhost:5000 這個 url 發送 request 時，我們的 server 都會回應 “Hello world!” 給該 client。

取得 request 中的資料

取得 request body

大部分的時候，如果我們需要傳資料到 server，會發送 POST request ，並且將資料存在 body 當中，要在 node.js 取得 request 中的 body data 方法如下：

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


let body = [];
request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 })

如果直接將 chunk console.log 出來會發現是一段看不懂的資料：<Buffer 7b 0d 0a 20 20 20 20 22 74 65 73 74 22 3a 20 22 35 22 0d 0a 7d>，這是因為 http request 在發送給 server 的時候是按照順序一個 byte、一個 byte 以資料流的方式發送的，因此需要用 Buffer.toString() 轉換回原本的資料。

當我使用 POST method 發送 request 時，我的 server 端就會印出 request 中 body 的資料。

取得 request header

直接用 request.headers 取得 request 中的基本資料：

1
2
3
4
5
6
7


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 })

取得 request authorization

authorization 是我們習慣放置 token 的欄位，雖然在 postman 中是獨立的一欄，但事實上是存在 request 的 headers 裡的。

1
2
3
4
5
6
7
8


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 console.log(request.headers.authorization);
 })

完整程式碼

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 const { headers, method, url } = request;
 let body:any = [];
 request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 console.log(request.headers);
 console.log(request.headers.authorization);
 })
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

使用 Express

接著使用 Express 來改寫一下。

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


import express, { Express, Request, Response } from 'express';

const port = 5000;

const app: Express = express();

app.get('/', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('Homepage');
})

app.get('/articles', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('All articles are here!');
})

app.get('/about-me', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('My name is Jimmy.');
})

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

加入 Route 與 Controller

當專案越長越大後，將所有 routes 和邏輯都寫在 app.ts 是個很難維護的做法，因此大多數的專案都會將 routes 和 controllers 獨立出來，把商業邏輯寫在 controllers 中。

Controller：請求經過 router 分配過後，會交由 controller 負責處理商業邏輯，並回傳對應的 response。
Route：我們要將使用者的請求，依照其進入的 Url 分配給不同的 Controller。

Controller

建立 controllers。

src/controllers/api-controllers.ts

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


import { Request, Response, NextFunction } from 'express';

export class ApiControllers {
 getHomePage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('Homepage');
 }

 getAboutPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('My name is Jimmy.');
 }
}

Route

建立 routes。

src/routes/api-routes.ts

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


import express, { Router, Request, Response, NextFunction } from 'express';
import { ApiControllers } from '../controllers/api-controllers';

const apiControllers = new ApiControllers;

export class ApiRouter {
 router: Router;
 constructor() {
 this.router = express.Router();
 this.initializeRoutes();
 }

 initializeRoutes() {
 this.router.get('/', apiControllers.getHomePage);
 this.router.get('/articles', apiControllers.getArticlesPage);
 this.router.get('/about-me', apiControllers.getAboutPage)
 }
}

調整 src/app.ts

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


import express, { Express, Request, Response, NextFunction } from 'express';
import { ApiRouter } from './routes/api-routes';

const port = 5000;

const app: Express = express();
const apiRouter = new ApiRouter;

app.use((request: Request, response: Response, next: NextFunction) => {
 response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader(
 "Access-Control-Allow-Headers",
 "Origin, X-Requested-With, Content-Type, Accept, Authorization"
 );
 response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");

 next();
});

app.use('', apiRouter.router)

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

檔案結構：

將 routes 拆分成多個檔案

先建立一個 route 的 abstract class

src/routes/route.ts

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


import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;

 public getRouter() {
 return this.router;
 }
}

export default Route;

新增 AuthRoute 與 AuthController

src/controllers/AuthController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class AuthController {
 echo(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('echo');
 }
}

export default AuthController;

src/routes/auth.route.ts

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


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

新增 ArticleRoute 與 ArticleController

src/controllers/ArticalController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class ArticleController {
 getArticlesPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('All articles are here!');
 }
}

export default ArticleController;

src/routes/article.route.ts

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


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

建立 router 並加載各個檔案的 route

移除原先的 src/routes/api-routes.ts，統一改成使用 src/routes/router.ts。

src/routes/router.ts

1
2
3
4
5
6
7
8


import Route from "./route";
import AuthRoute from "./auth.route";
import ArticleRoute from "./article.route";

export const router: Array<Route> = [
 new AuthRoute(),
 new ArticleRoute()
]

改寫 src/app.ts

src/app.ts

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


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getRouter());
}

module.exports = app;

前綴 Prefix

同一個 route 檔案常常會有相同的 prefix url，例如說 auth route 可能會有：

POST auth/login
POST auth/logout
POST auth/forgetPassword
…

我們在 Route class 中加入一個新的資料成員 prefix，用來設定每個 route 的前綴網址：

src/routes/route.ts

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




import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;
 protected prefix: string = '/';

 public getRouter() {
 return this.router;
 }

 public getPrefix() {
 return this.prefix;
 }
}

export default Route;

在各個 Route 的建構子中修改它：

src/routes/auth.route.ts

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


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

src/routes/article.route.ts

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


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.prefix = '/articles';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

最後，在 app.ts 中，載入 router 時加入 prefix 的設定：

src/app.ts

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


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

如此一來，原本是 /login 的 url，在加上 prefix 之後，就會變成 /auth/login，而其他在 AuthRoute 定義的 url 也都會變成 /auth/*、在 ArticleRoute 定義的 url 也都會變成 /articles/*。

Middleware

在 Express 中，有三種可以嵌套 middleware 的方式：

應用到單一 url
應用到單一 route 檔案
全域使用，每個請求都會經過這個 middleware

我們先寫一個簡單的 middleware，他只看請求的 header 裡面有沒有 Authorization，若沒有的話會回傳 status code 401：

src/middleware/AuthMiddleware.ts

1
2
3
4
5
6
7
8
9


import { Request, Response, NextFunction } from "express";

export function AuthMiddleware(req: Request, res: Response, next: NextFunction) {
 if (!req.header('Authorization')) {
 return res.status(401).send('unauthorized');
 }

 next();
}

套用在單一 url

若你想套用在單一 url，只需要放在 router.METHOD 的第二個參數即可：

src/routes/auth.route.ts

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


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', AuthMiddleware, this.authController.echo);
 }
}

export default AuthRoute;

套用在單一 route 檔案

套用在單一 route 檔案，則在該 route class 的建構子加入 (必須在 setRoutes() 之前)：

src/routes/auth.route.ts

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


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.router.use(AuthMiddleware); // 必須在 setRoutes() 之前
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

全域使用

全域使用的話，就在 app.ts 裡面加上：

src/app.ts

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


import express from 'express';
import { router } from "./routes/router";
import AuthMiddleware from "../middleware/AuthMiddleware"

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(AuthMiddleware);

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

Validator

若要驗證 Request body 或 query string 的內容，建議可以使用 express-validator 套件，裡面有各式各樣的驗證用 middleware 可供使用。

1

npm install express-validator @types/express-validator

假設我們的登入表單需要有 username 和 password 兩個欄位，且最少要有四個字。

我們能夠將這個驗證寫成 request 檔案：

src/requests/AuthRequest.ts

1
2
3
4
5
6
7
8


import { check } from "express-validator";
import { showApiError } from "../middleware/AuthMiddleware";

export const loginRequest = [
 check('username').exists().isLength({min: 4}),
 check('password').exists().isLength({min: 4}),
 showApiError
];

改寫 AuthMiddleware ：

src/middleware/AuthMiddleware.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Request, Response, NextFunction } from "express";
import { validationResult } from "express-validator";

export function showApiError(req: Request, res: Response, next: NextFunction) {
 const errors = validationResult(req);
 if (!errors.isEmpty()) {
 return res.status(400).json({ errors: errors.array() });
 }

 next();
}

showApiError 是為了在有 input 錯誤發生時，能夠回傳對應的錯誤訊息而使用的 middleware，如果沒有它的話，validator 不會回傳錯誤訊息。

接著我們在 auth route class 裡面載入這個 request：

src/routes/auth.route.ts

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


import AuthController from "../controllers/AuthController";
import Route from "./route";
import { loginRequest } from "../requests/AuthRequest";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', loginRequest, this.authController.echo);
 }
}

export default AuthRoute;

如此一來 POST /login 的請求就會驗證 request body，當我的 username 輸入太短時，會得到以下錯誤：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "errors": [
 {
 "value": "123",
 "msg": "Invalid value",
 "param": "username",
 "location": "body"
 }
 ]
}

因為 request 其實就是 middleware 的陣列，因此若要嵌套其他 middleware 時，使用 Array merge 即可。

【Javascript】整理關於 this 的指向

Fri, 17 Feb 2023 00:00:00 +0000

在 JavaScript 中，「this 是什麼」絕對是讓人頭痛難題前三名。This 和物件方法息息相關，因此這篇文章會先介紹在物件方法、物件方法中的 this 是如何被決定的，把握一個簡單原則就可以知道 this 到底是誰，最後統整各個 this 的指向 😁

講解 this 的文章已經超級無敵多了，而且每一篇都寫得很不錯，之前看完 What’s THIS in JavaScript? 系列之後覺得講解的很完整，若是沒有把握自己能夠講得更清楚或是以不同的角度切入，似乎就沒必要再寫一篇文章；

若是想要「完全」搞懂 this，要付出的成本可能比你想像中要大得多。

這裡所說的「完全」指的是無論在任何情況下，你都有辦法講出為什麼 this 的值是這樣，直接給大家一個範例：

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


var value = 1;

var foo = {
 value: 2,
 bar: function () {
 return this.value;
 }
}

//範例1
console.log(foo.bar());
//範例2
console.log((foo.bar)());
//範例3
console.log((foo.bar = foo.bar)());
//範例4
console.log((false || foo.bar)());
//範例5
console.log((foo.bar, foo.bar)());

你能答的出來嗎？如果不行的話，代表你沒有「完全」懂 this。要完全懂 this 之所以要付出的成本很大，就是因為「完全懂 this」指的就是「熟記 ECAMScript 規範」。this 的值是什麼不是我們憑空想像的，其實背後都有完整的定義，而那個定義就是所謂的 ECMAScript 規範，你必須先搞懂這個規範，才有可能完全理解 this 在每個情況下所指涉的對象。

若是你真的很想完全搞懂，推薦你這一篇：JavaScript 深入之从 ECMAScript 规范解读 this，我上面的範例就是從這一篇拿來的，想看解答、想理解為什麼的話可以去看這一篇。

本篇教的方法，不會讓你把 this 完全搞懂，上面那五個範例你可能會答錯，但基本的題目你依舊可以解的出來，此文的目的是希望提供一個不同的角度來看 this，從為什麼會有 this 下手，再用一套規則來解釋 this 的值，至少讓你不再對 this 有誤解，也會知道一些常見的情境底下 this 到底是什麼。

從物件導向開始談 this

若是你對 JavaScript 的物件導向完全沒概念，你可以先補完相關基礎，並且看完這篇：該來理解 JavaScript 的原型鍊了）

如果你有寫過其他程式語言，你就知道 this 從來都不是一件什麼困難的事。它代表的就是在物件導向裡面，那個 instance 本身。

舉個例子：

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


class Car {
 setName(name) {
 this.name = name
 }

 getName() {
 return this.name
 }
}

const myCar = new Car()
myCar.setName('hello')
console.log(myCar.getName()) // hello

在上面我們宣告了一個 class Car，寫了 setName 跟 getName 兩個方法，在裡面用 this.name 來取放這個 instance 的屬性。

為什麼要這樣寫？因為這是唯一的方法，不然你要把 name 這個屬性存在哪裡？沒有其他地方讓你存了。所以 this 的作用在這裡是顯而易見的，所指到的對象就是那個 instance 本身。

以上面的範例來說，myCar.setName('hello')，所以 this 就會是 myCar。在物件導向的世界裡面，this 的作用就是這麼單純。

或者換句話說：

一但脫離了物件導向，其實 this 就沒有什麼太大的意義

假設今天 this 只能在 class 裡面使用，那應該就不會有任何問題對吧？你有看過其他程式語言像是寫 Java 或是 C++ 的人在抱怨說 this 很難懂嗎？沒有，因為 this 的作用很單純。

那問題是什麼？問題就是在 JavaScript 裡面，你在任何地方都可以存取到 this。所以在 JavaScript 裡的 this 跟其他程式語言慣用的那個 this 有了差異，這就是為什麼 this 難懂的原因。

儘管 this 的定義不太一樣，但我認為本質上還是很類似的。要理解 this 的第一步就是告訴自己：「一但脫離了物件，就不太需要關注 this 的值，因為沒什麼意義」

沒什麼太大意義的 this

1
2
3
4
5


function hello(){
 console.log(this)
}

hello()

this 的值會是什麼？

延續我們前面所講的，在這種情況下我會跟你說 this 沒有任何意義，而且你千萬不要想成 this 會指到 hello 這個 function，沒有這種事。

只要記得我前面跟你說的：「脫離了物件，this 的值就沒什麼意義」。

在這種很沒意義的情況下，this 的值在瀏覽器底下就會是 window，在 node.js 底下會是 global，如果是在嚴格模式(strict)，this 的值就會是 undefined。

這個規則應該滿好記的，幫大家重新整理一下：

嚴格模式(strict)底下就都是 undefined
非嚴格模式，瀏覽器底下是 window
非嚴格模式，node.js 底下是 global

這個就是你在其他文章看到的「預設綁定」，但我在這篇不打算用任何專有名詞去談 this。我認為不用這些名詞也不會妨礙你的理解，甚至還有可能讓你更好理解。我也不是說專有名詞不重要，是說可以先把概念學起來，再回過頭來補專有名詞。

一但脫離了物件，this 的值就沒什麼意義，在沒意義的情況底下就會有個預設值，而預設值也很好記，嚴格模式就是 undefined，非嚴格模式底下就是全域物件。

更改 this 的值

僅管 this 可能有預設的值，但我們可以透過一些方法來改它。這改的方法也很簡單，一共有三種。

前兩種超級類似，叫做 call 跟 apply，這兩種都是能夠呼叫 fucntion 的函式，我舉一個例子給你看比較好懂：

1
2
3
4
5
6
7
8


'use strict';
function hello(a, b){
 console.log(this, a, b)
}

hello(1, 2) // undefined 1 2
hello.call(undefined, 1, 2) // undefined 1 2
hello.apply(undefined, [1, 2]) // undefined 1 2

我們有一個叫做 hello 的函式，會 console.log 出 this 的值以及兩個參數。在我們呼叫 hello(1, 2) 的時候，因為是嚴格模式所以 this 是 undefined，而 a 跟 b 就是 1 跟 2。

當我們呼叫 hello.call(undefined, 1, 2) 的時候，我們先忽略第一個參數不談，你可以發現他其實跟 hello(1, 2) 是一樣的。

而 apply 的差別只在於他要傳進去的參數是一個 array，所以上面這三種呼叫 function 的方式是等價的，一模一樣。除了直接呼叫 function 以外，你也可以用 call 或是 apply 去呼叫，差別在於傳參數的方式不同。

call 跟 apply 的差別就是這麼簡單，一個跟平常呼叫 function 一樣，一個用 array 包起來。

那我們剛剛忽略的第一個參數到底是什麼呢？

你可能已經猜到了，就是 this 的值！

1
2
3
4
5
6
7


'use strict';
function hello(a, b){
 console.log(this, a, b)
}

hello.call('yo', 1, 2) // yo 1 2
hello.apply('hihihi', [1, 2]) // hihihi 1 2

就是如此簡單，你第一個參數傳什麼，裡面 this 的值就會是什麼。儘管原本已經有 this，也依然會被這種方法給覆蓋掉：

1
2
3
4
5
6
7
8
9


class Car {
 hello() {
 console.log(this)
 }
}

const myCar = new Car()
myCar.hello() // myCar instance
myCar.hello.call('yaaaa') // yaaaa

原本 this 的值應該要是 myCar 這個 instance，可是卻被我們在使用 call 時傳進去的參數給覆蓋掉了。

除了以上兩種以外，還有最後一種可以改變 this 的方法：bind。

1
2
3
4
5
6
7


'use strict';
function hello() {
 console.log(this)
}

const myHello = hello.bind('my')
myHello() // my

bind 會回傳一個新的 function，在這邊我們把 hello 這個 function 用 my 來綁定，所以最後呼叫 myHello() 時會輸出 my。

以上就是三種可以改變 this 的值的方法。你可能會好奇如果我們把 call 跟 bind 同時用會怎樣：

1
2
3
4
5
6
7


'use strict';
function hello() {
 console.log(this)
}

const myHello = hello.bind('my')
myHello.call('call') // my

答案是不會改變，一但 bind 了以後值就不會改變了。

這邊還要特別提醒的一點是在非嚴格模式底下，無論是用 call、apply 還是 bind，你傳進去的如果是 primitive 都會被轉成 object，舉例來說：

1
2
3
4
5
6
7


function hello() {
 console.log(this)
}

hello.call(123) // [Number: 123]
const myHello = hello.bind('my')
myHello() // [String: 'my']

詳細可以參考我另一篇文章 - 「使用 bind、call、apply 改變 this 指向的對象」，幫大家做個中場總結：

在物件以外的 this 基本上沒有任何意義，硬要輸出的話會給個預設值
可以用 call、apply 與 bind 改變 this 的值

物件中的 this

最前面我們示範了在物件導向 class 裡面的 this，但在 JavaScript 裡面還有另外一種方式也是物件：

1
2
3
4
5
6
7
8


const obj = {
 value: 1,
 hello: function() {
 console.log(this.value)
 }
}

obj.hello() // 1

這種跟一開始的物件導向範例不太一樣，這個範例是直接創造了一個物件而沒有透過 class，所以你也不會看到 new 這個關鍵字的存在。

再繼續往下講之前，要大家先記住一件事情：

this 的值跟作用域跟程式碼的位置在哪裡完全無關，只跟「你如何呼叫」有關

這個機制恰巧跟作用域相反，不確定我在說什麼的可以先看這篇：所有的函式都是閉包：談 JS 中的作用域與 Closure。

舉個簡單的例子來幫大家複習一下作用域：

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


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

const obj = {
 a: 'ojb',
 hello: function() {
 test() // 10
 },
 hello2: function() {
 var a = 200
 test() // 10
 }
}

test() // 10
obj.hello() // 10
obj.hello2() // 10

無論我在哪裡，無論我怎麼呼叫 test 這個 function，他印出來的 a 永遠都會是全域變數的那個 a，因為作用域就是這樣運作，test 在自己的作用域裡面找不到 a 於是往上一層找，而上一層就是 global scope，這跟你在哪裡呼叫 test 一點關係都沒有。test 這個 function 在「定義」的時候就把 scope 給決定好了。

但 this 卻是完全相反，this 的值會根據你怎麼呼叫它而變得不一樣，還記得我們剛講過的 call、apply 跟 bind 嗎？這就是其中一個範例，你可以用不同的方式去呼叫 function，讓 this 的值變得不同。

所以你要很清楚知道這是兩種完全不同的運行模式，一個是靜態（作用域）、一個是動態（this）。要看作用域，就看這個函式在程式碼的「哪裡」；要看 this，就看這個函式「怎麽」被呼叫。

舉一個最常見的範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const obj = {
 value: 1,
 hello: function() {
 console.log(this.value)
 }
}

obj.hello() // 1
const hey = obj.hello
hey() // undefined

明明就是同一個函式，怎麼第一次呼叫時 this.value 是 1，第二次呼叫時就變成 undefined 了？

記住我剛說的話：「要看 this，就看這個函式『怎麽』被呼叫」。

再繼續往下講之前，先教大家一個最重要的小撇步，是我從 this 的值到底是什么？一次说清楚學來的，是一個很方便的方法。

其實我們可以把所有的 function call，都轉成利用 call 的形式來看，以上面那個例子來說，會是這樣：

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


const obj = {
 value: 1,
 hello: function() {
 console.log(this.value)
 }
}

obj.hello() // 1
obj.hello.call(obj) // 轉成 call -> 1
const hey = obj.hello
hey() // undefined
hey.call() // 轉成 call -> undefined

而規則就是你在呼叫 function 以前是什麼東西，你就把它放到後面去。所以 obj.hello() 就變成了 obj.hello.call(obj)，hey() 前面沒有東西，所以就變成了hey.call()。

轉成這樣子的形式之後，還記得 call 的第一個參數就是 this 嗎？所以你就能立刻知道 this 的值是什麼了！

舉一個更複雜的例子：

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


const obj = {
 value: 1,
 hello: function() {
 console.log(this.value)
 },
 inner: {
 value: 2,
 hello: function() {
 console.log(this.value)
 }
 }
}

const obj2 = obj.inner
const hello = obj.inner.hello
obj.inner.hello(obj.inner)
obj2.hello(obj2)
hello()

你可以不要往下拉，先想一下那三個 function 會各自印出什麼值。

接著我要公布解答了，只要轉成我們上面講的那種形式就好：

. . . . . . . . . .

1
2
3


obj.inner.hello() // obj.inner.hello.call(obj.inner) => 2
obj2.hello() // obj2.hello.call(obj2) => 2
hello() // hello.call() => undefined

特別講一下最後一個 hello 因為沒有傳東西進去，所以是預設綁定，在非嚴格模式底下是 window，所以會 log 出 window.value 也就是 undefined。

只要你把 function 的呼叫轉成用 call 的這種形式，就很容易看出來 this 的值是什麼。

這也是我前面一直在提的：「要看 this，就看這個函式『怎麽』被呼叫」，而你要看怎麼被呼叫的話，就轉成 call 的形式就行了。

學到這邊，其實你看見九成與 this 相關的題目你都會解了，不信的話我們來試試看（為了可讀性沒有防雷空行，所以請自行拉到程式碼就好，再往下拉就會是解答了）：

1
2
3
4
5
6
7
8
9


function hello() {
 console.log(this)
}

var a = { value: 1, hello }
var b = { value: 2, hello }
hello()
a.hello()
b.hello.apply(a)

只要按照我們之前說的，用 call 來轉換一下形式就好：

1
2
3


hello() // hello.call() => window（瀏覽器非嚴格模式）
a.hello() // a.hello.call(a) => a
b.hello.apply(a) => 直接用 apply，所以就是 a

再來一題比較不一樣的，要看仔細囉（假設在瀏覽器底下跑，非嚴格模式）：

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


var x = 10
var obj = {
 x: 20,
 fn: function() {
 var test = function() {
 console.log(this.x)
 }
 test()
 }
}

obj.fn()

這題的話如果你搞錯，一定是你忘記了我們最重要的一句話：

要看 this，就看這個函式「怎麽」被呼叫

我們怎麼呼叫 test 的？ test()

所以就是 test.call() 就是預設綁定，this 的值就會是 window，所以 this.x 會是 10，因為在第一行宣告了一個全域變數 x = 10。

寫到這裡，再來幫大家做個回顧，避免大家忘記前面在講什麼：

脫離物件的 this 基本上沒有任何意義
沒有意義的 this 會根據嚴格模式以及環境給一個預設值
嚴格模式底下預設就是 undefined，非嚴格模式在瀏覽器底下預設值是 window
可以用 call、apply 與 bind 改變 this 的值
要看 this，就看這個函式「怎麽」被呼叫
可以把 a.b.c.hello() 看成 a.b.c.hello.call(a.b.c)，以此類推，就能輕鬆找出 this 的值

不合群的箭頭函式

原本有關 this 的部分應該講到上面就要結束了，但 ES6 新增的箭頭函式卻有不太一樣的運作方式。它本身並沒有 this，所以「在宣告它的地方的 this 是什麼，它的 this 就是什麼」，好，我知道這聽起來超難懂，我們來看個範例：

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


const obj = {
 x: 1,
 hello: function(){
 // 這邊印出來的 this 是什麼，test 的 this 就是什麼
 // 就是我說的： 在宣告它的地方的 this 是什麼，test 的 this 就是什麼
 console.log(this)
 const test = () => {
 console.log(this.x)
 }
 test()
 }
}

obj.hello() // 1
const hello = obj.hello
hello() // undefined

我們在 hello 這個 function 裡面宣告了 test 這個箭頭函式，所以 hello 的 this 是什麼，test 的 this 就是什麼。

所以當我們呼叫 obj.hello() 時，test 的 this 就會是 obj；hello() 的時候 test 的 this 就會是全域物件。這規則其實都跟之前一樣，差別只有在於說箭頭函式的 this 不是自己決定的，而是取決於在宣告時那個地方的 this。

如果你想看更複雜的範例，可以參考這篇：鐵人賽：箭頭函式 (Arrow functions)。

實際應用：React

你有寫過 React 的話，就會知道裡面其實有些概念今天的教學可以派上用場，舉例來說，我們必須在 constructor 裡面先把一些 method 給 bind 好，你有想過是為什麼嗎？

先來看看如果沒有 bind 的話會發生什麼事：

1
2
3
4
5
6
7
8


class App extends React.Component {
 onClick() {
 console.log(this, 'click')
 }
 render() {
 return <button onClick={this.onClick}>click</button>
 }
}

最後 log 出來的值會是 undefined，為什麼？這細節就要看 React 的原始碼了，只有 React 知道實際上在 call 我們傳下去的 onClick 函式時是怎麼呼叫的。

所以為什麼要 bind？為了確保我們在 onClick 裡面拿到的 this 永遠都是這個 instance 本身。

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


class App extends React.Component {
 constructor() {
 super()

 // 所以當你把 this.onClick 傳下去時，就已經綁定好了 this
 // 而這邊的 this 就是這個 component
 this.onClick = this.onClick.bind(this)
 }
 onClick() {
 console.log(this, 'click')
 }
 render() {
 return <button onClick={this.onClick}>click</button>
 }
}

還有另外一種方式是用箭頭函式：

1
2
3
4
5
6
7


class App extends React.Component {
 render() {
 return <button onClick={() => {
 console.log(this)
 }}>click</button>
 }
}

為什麼箭頭函式也可以？因為我們前面提過，「在宣告它的地方的 this 是什麼，它的 this 就是什麼」，所以這邊 log 出來的 this 就會是 render 這個 function 的 this，而 render 的 this 就是這個 component。

如果你有點忘記了，可以把文章拉到最上面去，因為最上面我們就已經提過這些了。

總結

默認綁定的規則

1
2
3
4
5


console.log(this) // window, strict 模式下返回 undefined
function test() {
 console.log(this); // window
}
test(); // 純粹的調用 (Simple call) ==> window.test() 指向 window

隱式綁定規則 (誰呼叫就指向誰)

1
2
3
4
5
6
7
8
9


let a = 0;
let obj = {
 a:2,
 foo: function(){
 console.log(this); // obj => obj 呼叫了 foo，因此 foo 裡的 this 指向為 obj
 }
}

obj.foo()

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


let a = 0;
let obj = {
 a:2,
 foo: function(){
 console.log(this); // 返回 obj

 function test(){
 console.log(this) // window
 }
 test() // obj 呼叫了 foo, 但 test 並不是由 obj呼叫的，而是純粹調用，因此 this 指向 window
 }
}

obj.foo()

IIFE(立即執行函式)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


let a = 0;
let obj = {
 a:2,
 foo: function(){
 (function(){
 console.log(this); // window
 })(); // 立即執行函式(IIFE)都屬於純粹調用，所以 this 的指向都是 window
 }
}
obj.foo()

閉包

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


let a = 0;
let obj = {
 a: 2,
 foo: function () {
 function test() {
 console.log(this) // window
 }
 return test
 }
}

obj.foo()() // obj.foo() 的返回值為 test，因此該表達式 == test() 屬於純粹調用，因此 this 指向 window

變數賦值的情況

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


let a = 0;
function foo(){
 console.log(this);
}

let obj = {
 a:2,
 foo // ES6簡寫
}
obj.foo() // obj

let bar = obj.foo // obj.foo == foo，該表達式的結果是把 foo 的引用地址賦值給了 bar
bar() // 因此 bar == foo ，屬於純粹調用，this 的指向為 window

參數賦值的情況

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


let a = 0;
function foo(){
 console.log(this);
}

function bar(fn){
 // 將傳進來的 obj.foo == foo 賦值給形參 fn
 fn() // == foo() 屬於純粹調用，因此 this 的指向為 window
 // 因此 this 的指向只需要關注函式最終是如何執行的即可
}

let obj = {
 a:2,
 foo
}
bar(obj.foo) // obj.foo == foo 作為實參

阿里巴巴面試題

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


var name = 222;
var a = {
 name: 111,
 say: function () {
 console.log(this.name);
 },
};
var fun = a.say;
fun(); // ?
a.say(); // ?

var b = {
 name: 333,
 say: function (fun) {
 fun();
 },
};
b.say(a.say); // ?
b.say = a.say;
b.say(); // ?

答案：

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


var name = 222;
var a = {
 name: 111,
 say: function () {
 console.log(this.name);
 },
};
var fun = a.say;
fun(); // 222
a.say(); // 111

var b = {
 name: 333,
 say: function (fun) {
 fun();
 },
};
b.say(a.say); // 222
b.say = a.say;
b.say(); // 333

forEach 內的 this 指向

1
2
3
4
5
6
7


let arr = [1,2,3,4,5]

let obj = { name : "obj" }
// 在對應的 api 接口文檔中指明
arr.forEach(function(item, index, arr){
 console.log(this); // 每次都輸出 obj
}, obj) // 這裡的 obj 就是 arr.forEach 遍歷時的 this 指向

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


arr.forEach(function callback(currentValue[, index[, array]]) {
 // your iterator
}[, thisArg]);

// 參數:
// callback
// 這個 callback 函式將會把 Array 中的每一個元素作為參數，帶進本 callback 函式裡，每個元素各執行一次，接收三個參數：

// currentValue
// 代表目前被處理中的 Array 之中的那個元素。

// index (選擇性)
// 代表目前被處理中的 Array 之中的那個元素的 index。

// array (選擇性)
// 呼叫 forEach() 方法的那個 Array 本身，也就是上面語法中的 arr。

// thisArg (選擇性)
// 執行 callback 回呼函式的 this（即參考之 Object）值。

// source: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

顯式綁定: call、apply、bind

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


function foo() {
 console.log(this); // 打印
}
let obj = {
 a: 2,
 foo
}

let bar = obj.foo

obj.foo() // obj

// 以下三種方式都能改變 this 的指向，將 bar 函式 的 this 指向改為 obj
bar.call(obj) // obj
bar.apply(obj) // obj
bar.bind(obj)() // obj

1
2
3
4
5
6
7


function foo(){
 console.log(this)
}

foo.call(1) // Number {1}
foo.call(null) // this 指向 window
foo.apply(undefined) // this 指向 window

建構式的顯式綁定實例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


function Product(name, price) {
 this.name = name;
 this.price = price;

 if (price < 0)
 throw RangeError('Cannot create product "' + name + '" with a negative price');
 return this;
}

function Food(name, price) {
 // new 後 this 的指向就是這個實例物件
 console.log(this);
 Product.call(this, name, price);
 this.category = 'food';
}
Food.prototype = new Product();

function Toy(name, price) {
 Product.call(this, name, price);
 this.category = 'toy';
}
Toy.prototype = new Product();

let cheese = new Food('feta', 5);
console.log(cheese); // Food {name: 'feta', price: 5, category: 'food'}
let fun = new Toy('robot', 40);
console.log(fun); // Toy {name: 'robot', price: 40, category: 'toy'}

new 綁定

1
2
3
4
5
6
7
8


function Person(name='haewon', age=6){
 this.name = name
 this.age = age
 console.log(this) // 這裡會打印 this
}
let me = new Person('pupu', 12) // 打印 Person {name: 'pupu', age: 12}，this 的指向為實例化的物件

Person() // 打印 window; 同時 window.name 的值為 'haewon'; window.age 的值為 6

優先級

顯式綁定 > 隱式綁定

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


function foo(){
 console.log(this.a);
}
let obj1 ={
 a:'obj1',
 foo
}
let obj2 ={
 a:'obj2',
 foo
}
obj1.foo() // obj1
obj2.foo() // obj2

obj1.foo.call(obj2) // obj2
obj2.foo.call(obj1) // obj1

new 綁定 > 顯式綁定

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


function foo(b){
 this.a = b
}
let obj1 = {}
let bar = foo.bind(obj1)
bar(2)

console.log(obj1.a) // 2

let bar_child = new bar(99) // new 將 this 的指向更改為 bar_child
console.log(obj1.a); // 2

console.log(bar_child.a); // {a:99}

Arrow function 的 this 指向

物件中的巢狀函式

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


let a = 0
let obj = {
 a : 'obj',
 foo() {
 let that = this;
 console.log(this);
 function test() {
 console.log(this); // window
 console.log(that); // obj
 }
 test()

 // 也可以通過這種方式使 this 指向 obj 👇🏻
 test.call(this)
 }
}
obj.foo()

箭頭函式中的 this

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


let a = 0
let obj = {
 a: 'obj',
 foo() {
 console.log(this); // obj

 let test = ()=>{
 console.log(this); // obj
 }
 test()
 }
}
obj.foo() // => 箭頭函式內部沒有 this 指向，箭頭函式的 this 指向是由外層函式的作用域決定的

更改箭頭函式的 this 指向

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


function foo(){
 let test = ()=>{
 console.log(this);
 }
 return test
}

let obj1 = {
 a: 'obj1',
 foo
}

let obj2 = {
 a: 'obj2',
 foo
}

obj1.foo()() // 打印obj1
obj2.foo()() // 打印obj2

// => 默認綁定規則(純粹調用) 對箭頭函式無效，因為箭頭函式里面沒有 this

嘗試隱式綁定 this 指向

1
2
3
4
5
6
7
8
9


let obj1 = {
 a: 'obj1',
 foo: ()=>{
 console.log(this)
 }
}
obj1.foo() // window

// => 隱式綁定 對箭頭函式無效

嘗試顯式綁定 this 指向

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


function foo(){
 let test = ()=>{
 console.log(this);
 }
 return test
}
let obj1 = {
 a: 'obj1',
 foo
}

foo()() // window
let bar = foo().call(obj1) // window

// => 顯式綁定 對箭頭函式無效

new 運算子能否改變箭頭函式的 this 指向？

1
2
3
4
5
6
7


let foo = ()=>{
 console.log(this);
}
let test = new foo()
// 報錯 Uncaught TypeError: foo is not a constructor
// => 箭頭函式不能作為建構式
// => 所有綁定規則對箭頭函式都不適用; 箭頭函式的 this 取決於父環境中的 this 指向; => 箭頭函式不存在 this

案例一

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


var name = '我是 window 裡的 name'
let obj1 = {
 name: 'obj1 的 name',
 fn1(){
 console.log(this.name);
 },
 fn2: ()=>{
 console.log(this.name);
 },
 fn3(){
 return function(){
 console.log(this.name);
 }
 },
 fn4(){
 return () => {
 console.log(this.name);
 }
 }
}
let obj2 = {
 name : 'obj2 的 name'
}

obj1.fn1(); // ?
obj1.fn1.call(obj2); // ?

obj1.fn2(); // ?
obj1.fn2.call(obj2); // ?

obj1.fn3()(); // ?
obj1.fn3().call(obj2); // ?
obj1.fn3.call(obj2)(); // ?

obj1.fn4()() // ?
obj1.fn4().call(obj2); // ?
obj1.fn4.call(obj2)(); // ?

答案：

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


obj1.fn1(); // 'obj1 的 name'
obj1.fn1.call(obj2); // 'obj2 的 name'

obj1.fn2(); // '我是 window 裡的 name'
obj1.fn2.call(obj2); // '我是 window 裡的 name'

obj1.fn3()(); // '我是 window 裡的 name'
obj1.fn3().call(obj2); // 'obj2 的 name'
obj1.fn3.call(obj2)(); // '我是 window 裡的 name'

obj1.fn4()() // 'obj1 的 name'
obj1.fn4().call(obj2); // obj1 的 name
obj1.fn4.call(obj2)(); // obj2 的 name

案例二

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


function Foo(){
 getName = function(){
 console.log(1)
 }
 return this
}
Foo.getName = function(){
 console.log(2);
}
Foo.prototype.getName = function(){
 console.log(3);
}
let getName = function(){
 console.log(4)
}
function getName(){
 console.log(5)
}

// 請寫出輸出結果:
Foo.getName(); // ?
getName(); // ?
Foo().getName(); // ?
getName(); // ?

new Foo.getName(); // ?
new Foo().getName(); // ?
new new Foo().getName(); // ?

答案：

1
2
3
4
5
6
7
8


Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1

new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3

【AWS】利用 SNS + Lambda，在 S3 儲存貯體檔案更新時透過 Telegram 通知我！

Thu, 16 Feb 2023 00:00:00 +0000

我的靜態專案放在 Amazon Web Services(AWS) 的 S3 儲存貯體上，最近使用 AWS 的 SNS 服務搭配 AWS Lambda，實作當 S3 儲存貯體內的檔案發生異動時，可以在我的 Telegram 上跳出通知，相當有趣，以下就來分享我的實作過程！

因為我的專案 Git 倉放在 Github 上，暫不考慮 AWS 的 CodeCommit，以目前的架構來規劃玩玩！

架構概括

以下就是將要建立的流程，我將建立一個 SNS 主題，該主題透過接收 S3 的事件並將其發布到 Lambda 函數，再透過 Lambda 發布通知到 Telegram。

創建一個 Telegram bot

首先我們需要先在 Telegram 中創建一個機器人，透過之前的文章 - 「Telegram 機器人說明，並為你的 Drone CI/CD 配置 Telegram 機器人」，向 @BotFather 申請一隻吧！

取得 Telegram bot Token：

先將 Telegram bot 的 Token 存起來，後面會用到。

取得我的用戶 ID

有了 Telegram bot 後，也需要取得我的用戶 ID，才知道機器人要將訊息傳給誰。

先跟機器人講幾句話，以便 getUpdates API 取資料：

透過 telegram 的 getUpdates API 取得我的用戶 ID：

請使用瀏覽器打開以下網址：

1

https://api.telegram.org/bot<機器人的Token>/getUpdates

注意： <機器人的Token> 前面的前綴 bot 不可省略，否則會找不到。

用戶 ID 在這裡： [result][message][from][id]！

將用戶 ID 也存起來，後面會用到。

登入 AWS，在控制台找到 “SNS” 服務。

進入「主題」，點選「建立主題」。

注意：建立主題時，地區一定要與你的 S3 儲存貯體相同，否則 S3 儲存貯體是看不到這個主題的。

選擇「標準」，並給它取個名字：「TelegramSNSNotifierTopic」，然後往下點擊「建立主題」。

創建 Lambda 函數

AWS 的控制台，找到 “Lambda” 服務。

點選「建立函式」，選擇「從頭開始撰寫」，給函數命名：「TelegramSNSNotifierLambda」，runtime 選擇「Python 3.9」，然後往下點擊「建立函式」。

設定 Lambda 的環境變數

進入剛剛建立的函數，在「組態」>「環境變數」內，點選「編輯」。

新增 TOKEN 與 USER_ID 兩個環境變數，值為：

TOKEN：剛剛創建的 Telegram bot token。
USER_ID：剛剛取得的我的 Telegram 用戶 ID。

儲存後，來編輯一下 Lambda 函數的程式碼。

編輯 Lambda 函數

回到「程式碼」頁籤，打開 lambda_function.py 檔案，會看到預設的程式碼。

將以下程式碼覆蓋掉當前 lambda_function.py 內的程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


import json
import os
import logging
import urllib3
import boto3

s3_client = boto3.client("s3")

# S3 Bucket Name
S3_BUCKET = "test-bucket-01"

# 專案中，用來紀錄當前版本號的檔案
object_key = "version.yaml"

http = urllib3.PoolManager()

# 初始化 logger，並設定為 INFO
logger = logging.getLogger()
logger.setLevel(logging.INFO)

# 取得環境變數，並組成 Telegram Bot API URL
TOKEN = os.environ['TOKEN']
USER_ID = os.environ['USER_ID']
TELEGRAM_URL = "https://api.telegram.org/bot{}/sendMessage".format(TOKEN)

# Main Lambda handler
def lambda_handler(event, context):
 # 紀錄事件觸發，以便 debugging
 logger.info("event=")
 logger.info(json.dumps(event))

 try:
 file_content = s3_client.get_object(Bucket=S3_BUCKET, Key=object_key)
 version_info = file_content["Body"].read().decode("utf-8")
 message = f"當前環境版本，{version_info}"

 # 組成用於呼叫 Telegram Bot API 的 Payload
 payload = {
 "text": message.encode("utf8"),
 "chat_id": USER_ID
 }

 # 送出請求到 Telegram Bot API
 http.request('POST', TELEGRAM_URL, payload)

 except Exception as e:
 raise e

如需取得 SNS 服務傳來的 message，可以使用以下版本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


import json
import os
import logging
import urllib3

http = urllib3.PoolManager()

# 初始化 logger，並設定為 INFO
logger = logging.getLogger()
logger.setLevel(logging.INFO)

# 取得環境變數，並組成 Telegram Bot API URL
TOKEN = os.environ['TOKEN']
USER_ID = os.environ['USER_ID']
TELEGRAM_URL = "https://api.telegram.org/bot{}/sendMessage".format(TOKEN)

# JSON Helper function to prettify the message if it's in JSON
def process_message(input):
 try:
 raw_json = json.loads(input)
 output = json.dumps(raw_json, indent=4)
 except:
 output = input
 return output

# Main Lambda handler
def lambda_handler(event, context):
 # 紀錄事件觸發，以便 debugging
 logger.info("event=")
 logger.info(json.dumps(event))

 try:
 # 從回傳的 message 內取得 SNS message 欄位
 message = process_message(event['Records'][0]['Sns']['Message'])

 # 組成用於呼叫 Telegram Bot API 的 Payload
 payload = {
 "text": message.encode("utf8"),
 "chat_id": USER_ID
 }

 # 送出請求到 Telegram Bot API
 http.request('POST', TELEGRAM_URL, payload)

 except Exception as e:
 raise e

程式碼僅依我個人需求撰寫，大家可以自行依自己的需求做撰寫。

接著儲存後進行發布，點選「Deploy」。

成功更新函數！

點選「新增觸發」，來源選擇「SNS」，SNS 主題選擇剛剛建立的「TelegramSNSNotifierTopic」，接著點擊「新增」。

SNS 與 Lambda 已完成配置！

到 S3 儲存貯體設定「事件通知」

前往 AWS S3 服務，並進入你欲設定通知的儲存貯體詳細資訊。

切換到「屬性」頁籤，下滑找到「事件通知」，並點選「建立事件通知」。

依照我的需求，我的設定如下：

事件名稱，我取名「開發環境版本更新」
事件類型，因為我的專案在版本更新時，會自動將 Git 當前版本的 Commit ID(SHA) 更新到根目錄下的 version.yaml 檔案中，所以我選擇：
- PUT「s3:ObjectCreated:Put」
- POST「s3:ObjectCreated:Post」
- 複製「s3:ObjectCreated:Copy」
目的地選擇「SNS 主題」，指定 SNS 主題選擇「從 SNS 主題中選擇」，最後選擇前面建立的 SNS 主題 - 「TelegramSNSNotifierTopic」

接著點選「儲存變更」，就完成設定囉！

測試看看

這邊來手動上傳 version.yaml 到 S3 儲存貯體，試試看是否有成功。

上傳成功後，就會發現 Telegram bot 通知我了！

小結

首先，S3 是一個非常強大的對象儲存服務，可以存儲和檢索大量數據，它的存儲和訪問速度非常快。在使用 S3 時，其簡單易用的界面可以輕鬆地創建存儲桶(bucket)、設置存取權限、上傳和下載文件等。此外，S3 還支持版本控制、交叉區域複製等高級功能。

其次，SNS 是一個強大的消息發布和訂閱服務，可以幫助我將消息發送到多個端點，如電子郵件、短信、移動設備等。SNS 的設置非常簡單，可以輕鬆地創建主題(topic)、訂閱端點(subscription)、設置過濾器(policy)等。同時，SNS 還提供了許多高級功能，如死信隊列(dead-letter queue)、消息篩選等，這些功能可以更好地控制和管理我的消息流。

最後，Lambda 是一個靈活且高效的無伺服器計算服務，可以讓我在不擔心伺服器設置和管理的情況下運行代碼。使用 Lambda 非常方便，只需創建一個函數(function)，然後設置觸發器(trigger)，就可以開始運行我的代碼。同時，Lambda 還支持許多高級功能，如環境變量(environment variables)、VPC 訪問(virtual private cloud access)、調用其他服務等，這些功能可以讓我的代碼更加強大和靈活。

本篇只是分享我試玩一下 AWS SNS 與 Lambda，相當有趣，期待後續有更靈活、更好玩的運用！

【Polacode】一款好用的 VSCode 截圖套件推薦

Tue, 14 Feb 2023 00:00:00 +0000

常常會在社群中看到有些開發者在問問題或是在做討論時，會有需要展示程式碼的部分，這時候如果直接講程式碼貼出來，在沒有排版的情況下，光是要了解對方的程式碼可能就需要一段時間，更何況是要從中找出問題，這樣其實是非常浪費時間的，所以今天來介紹一個相當好用的 VSCode 套件 - 【Polacode】，這個套件可以輕鬆將程式碼做美美的截圖！

如何使用？

到 VSCode 的 Extensions，輸入關鍵字： Polacode。

然後把第一個安裝起來，我們就可以開始截圖啦！

使用快捷鍵：「ctrl + shift + p」 (Mac 系統用 command + shift + p )，找到「Polacode📸」並執行。

你的畫面應該會出現這樣：

接著就照著上面的步驟去操作：

1
2
3
4


console.log('0. Run command `Polacode 📸`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button 📸')

複製你要截圖的程式碼區塊。
在 Polacode 的 file 裡貼上。
點擊按鈕截圖。

完整流程如下：

注意事項

Polacode 會連你的主題一起截取。
Polacode 的 file 會影響你的成品，因此 file 內因為擠壓而換行，儲存出來的成品也會換行。

介紹這個套件是希望在跟其他開發者討論程式碼，或是自己有撰寫部落格與文章的習慣時，可以讓對方或讀者有個良好的閱讀體驗，閱讀起來會更加順暢！

用 Navigator.share() API 實作分享功能

Tue, 14 Feb 2023 00:00:00 +0000

參考網址
 參考網址
 參考網址
 參考網址
 參考網址

Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。

原生的 Android 和 iOS app 如果要做分享，通常會使用原生的分享介面，類似的介面相信大家一定不陌生：

然而手機網頁要達到一樣的效果就沒有那麼容易了，網頁的分享通常體驗會比原生 app 差一點，且如果要讓使用者用得習慣，可能得必須針對不同的平台去盡量模仿原生的介面，這種做法的實作成本相對是高的。這時候 Web Share API 就能派上用場了！

Web Share API 是比較新的瀏覽器 API，可以讓使用者輕鬆地用作業系統原生的介面分享至其他 app、分享給你的朋友等；就像是使用原生 app 一樣。網頁端實作這隻 API，就等於同時實作了 Share to Facebook、Share to Twitter、Share to XXX… 等各種分享至第三方平台的功能了！

另外 Google Chrome Developers 的影片也有對 Web Share API 簡單的介紹 (0:18 ~ 1:00)

要使用 Web Share API 有幾個限制：

你的網站必須支援 https。
只能經由使用者所產生的事件觸發，例如 click 事件。
能夠分享的種類有：文字、URLs、檔案。

Navigator.share()

navigator.share() 使用方法如下：

1
2
3
4
5
6
7
8
9


if (navigator.share) {
 navigator.share({
 title: '標題',
 text: '文字描述',
 url: 'https://wayne-blog.com/',
 })
 .then(() => console.log('成功！'))
 .catch((error) => console.log('發生錯誤', error));
}

首先我們要判斷瀏覽器是否支援這個功能，所以需要加上 if (navigator.share) { // ... } 的判斷。

接著我們呼叫 navigator.share() function，它的參數是一個物件，支援 title、text、url 及 files 四個 key。

最後這個 function 回傳值是一個 promise，所以我們可以分別對成功或是失敗的情況做額外處理。

Canonical URL

有個小細節需要注意，如果你的網站有不同的網址指向同樣的內容（例如：電腦版網頁 www.example.com 用手機瀏覽時會跳轉到手機版網頁 m.example.com），那麼你可能應該分享 canonical URL (標準版的 URL)，而不是 document.location.href。

為什麼呢？因為如果你在手機上瀏覽這個網站，分享出去的會是 m.example.com，而如果手機版沒有做跳轉的話，桌機的使用者就會看到手機版的排版 (感覺這狀況在 FB 挺常見的…)。

如何解決呢？一般來說，這種情況為了 SEO 的緣故會在 HTML head 裡面標記 <link rel="canonical href="xxxxx">，讓搜尋引擎不要重複 index。因此我們可以用幾行簡單的程式碼抓出 canonical URL：

1
2
3


const canonicalElement = document.querySelector('link[rel=canonical]');
const url = canonicalElement && canonicalElement.href || document.location.href;
navigator.share({ url: url });

瀏覽器支援度 Browser Support

這是一個相對較新的標準，截至寫這篇文章為止 (2023 年 2 月)，從 Navigator Share API - caniuse.com 可以看到目前支援 Web Share API 的瀏覽器只有 Safari、Edge、iOS Safari、Chrome for Android 與 Firefox for Android，並沒有受到廣泛地支持。

雖然目前瀏覽器支援度不佳，不過很明顯 Web Share API 的使用情境主要集中在手機上，所以我個人認為只要做好 feature detection，搭配原本習慣的分享方式使用應該不成問題。

寫個範例

來看一下範例程式碼吧，也可以直接看 CodePen。

1
2
3
4
5
6
7
8


// navigator.share 會回傳一個 Promise

// 下面的欄位可以不用全部填寫，可以只分享網址，也可以只分享文字
const sharePromise = navigator.share({
 url: "https://wayne-blog.com/2023-02-14/js-navigator-share-api/", // 要分享的 URL
 title: "Wayne' blog", // 要分享的標題
 text: "偉恩的部落格文章好豐富阿" // 要分享的文字內容
});

See the Pen Web Share API example by wjdesign (@WJDesign) on CodePen.

簡單扼要的介紹什麼是 Node.js？

Tue, 14 Feb 2023 00:00:00 +0000

本文整理自我初學 Node.js 時的筆記，用於對 Node.js 這門語言有興趣的讀者簡單扼要的介紹 Node.js 是什麼，以及該如何學習這門語言。

什麼是 Node.js？

Node.js 是 Ryan Dahl 在 2009 年為了解決 Web 服務器高併發問題而開發的基於 Chrome V8 引擎的 JavaScript 運行時環境。

從這個定義中，可以看到 Node.js 的三個關鍵特徵：

目的：為了解決Web 服務器高並發問題。
底層：使用的是 Chrome V8 引擎。
本質：一個 Javascript 運行時環境(runtime environment)。

因此，要搞清楚什麼是 Node.js，首先就要搞清楚以上三個關鍵特徵。

Node.js 三個關鍵特徵

為了解決 Web 服務器高並發問題

Ryan Dahl 在設計 Node.js 之前，一直致力於解決 Web 服務器高併發引起的性能問題，根據工作經驗，他認為性能問題的瓶頸在於阻塞的 I/O 操作。恰逢 Chrome 推出了高性能的 V8 引擎，Ryan Dahl 認為 JavaScript 天然的異步、事件委託機制以及 JavaScript 語言在服務端無歷史包袱的特性，非常適合通過異步流程控制的方式提升大型分佈式系統性能。於是 Node.js 應運而生。

儘管現在 Node.js 已經被應用於各種各樣的場景。但是我們始終應該認識到，理解 Node.js 的異步流程控制原理才算是掌握了 Node.js 的核心。

Chrome V8 引擎

Chrome 內核基於 WebKit，分為以下兩個引擎：

渲染引擎： Web Core
JavaScript 解釋引擎： JavaScript Core

而 Google 由於不滿意 JavaScript Core 的性能，於是自主研發了性能更好的 V8 引擎予以取代。

作為 JavaScript 的解釋引擎，V8 引擎的主要作用在於：

解釋與編譯JavaScript；
堆管理；
處理內存垃圾回收；
處理內存分配；
…

可以說，V8 引擎提供了一個高性能的 JavaScript 執行環境，因而 JavaScript 能夠有充足的底氣在各平台（瀏覽器，服務端，桌面端）運行。

Javascript 運行時環境

Node.js 既不是一門語言（JavaScript），也不是一個框架（React、Vue、Koa），而是一個 JavaScript 運行時環境(runtime environment)。

那，什麼是 JavaScript 運行時環境(runtime environment) 呢？

顧名思義，是一個可以運行 JavaScript 的環境。

那麼這裡的環境是指什麼呢？主要包含以下兩個方面：

提供了解釋，編譯 JavaScript 的底層能力。
提供了一系列接口，使開發者可以通過 JavaScirpt 調用系統底層能力（例如網絡，文件讀寫等）。

前者是由 Chrome V8 引擎提供的，而後者則是由一個底層由 C、C++ 編寫的高性能的事件驅動的異步 I/O 庫 libuv 所提供。

libuv

libuv 是一個跨平台的事件驅動的異步 I/O 庫，為 Node 提供了 CPU 和操作系統層面的功能。

我們知道不同的操作系統調度硬件的方式不同，CPU 的指令集也各有差異。libuv 則抹平了這一差異，通過名為 Node Bindings 的模塊，向用戶暴露了統一的系統操作接口。

因此現在我們可以說，Node 實際上由兩部分組成：Chrome V8 引擎以及 libuv。這兩層隱藏在 Node Bindings 之下，而用戶面向 Node Bindings 進行編程。

至此你應該理解了什麼是 Node.js。

它是一個跨平台的 JavaScript 可執行環境，在這個環境中你可以使用 JavaScript 充分調動操作系統的能力，做你想做的任何事！

Node.js 的哲學

要充分的理解 Node.js，除了前文提到的異步流程控制原理之外，我們還需要了解下 Node.js 從創始到發展所彰顯的設計哲學，這有利於我們更喜歡 Node.js 生態。

我認為 Node.js 有以下三大特點：

開放

Node.js 在設計之初，就堅持將核心庫做的足夠小，以便讓充分發揮社區的創造性，讓所有搭建大型系統的構建都盡可能來源於社區，因此每個構件都可以快速試錯和迭代。不得不說，這種做法雖然有顯得有些偷懶，但是事實證明這種對社區的信賴，和開放的態度收穫了巨大的回報：Node.js 擁有了全世界最活躍也是最大的社區和包管理平台 npm。

專注

Node.js 社區的開發者始終保留著一個默契，將 package 的功能約束的足夠窄，最好一次只做好一件事(單一職責原則)，並對外暴露單一的接口。這樣 package 的開發，設計，測試就會變得更加簡單，package 也就更加可靠。這種專注，也同時表現了開發者們的謙遜以及效率至上。

簡約

Node.js package 通常只暴露單一模塊和接口，並繼承了 JavaScript 的簡約特點，使用簡單的數據結構。這使得 Node.js 包易於閱讀和理解。

前端開發者如何學習 Node.js？

對於從未涉足過服務端開發的前端開發者而言，以下幾點是學習 Node.js 過程中必須補足的知識：

對 JavaScript 語言特性（特別是 ESNext），語法的深入理解。
數據庫知識與數據表設計能力。
系統架構能力。

而學習 Node.js 則可以分為兩個部分：

學習 Node.js 的核心庫的使用。
學習相關 Web 框架的使用。

在整個學習過程中，建議採用以下四步學習：

閱讀官方文檔。
撰寫 Demo 熟悉語法驗證思路。
在此過程中不斷地問自己問題，並深入調研得到答案。
通過對外輸出，分享所得加深自己的印象。

小結

Node.js 在如今已經是每一位前端開發者必須掌握的技術，它通過 libuv 向前端開發者開放了操作系統層面的底層能力，讓開發者能夠全面使用計算機的算力和功能。並用一種語言解決 Web 應用開發的所有問題的想法成為可能。希望通過本文的介紹，您能夠對 Node.js 產生好奇，祝您在未來的探索旅途中，過得愉快。

【C#】實作 Debounced Job

Mon, 13 Feb 2023 00:00:00 +0000

前言

Debounce (去抖動)是前端開發時很常用的技巧，經典應用是整合 AJAX 的欄位輸入自動完成。原始設計是每敲一個字元查一次，當使用者連續輸入 w a y n e b 便會發出 “w”、“wa”、“way”、“wayn”、“wayne”、“wayne-b” 等六次 AJAX 查詢，而使用者期望的是用 wayne-b 帶出 wayne-blog 提示，因此前面五次純屬無效查詢，平白浪費頻寬跟主機資源。有效的改善方法是改成每次敲完一個字元先稍待 0.5 秒或 1 秒，確認沒有要輸入其他字元，最後一次送出 “wayneb”。這在網頁上用 JavaScript setTimeout/clearTimeout 即可輕易實現，這個做法有個術語叫 - Debounce。

伺服器端有類似的應用情境嗎？有。

提到系統自動通知，經常是一筆記錄發一次通知(運作最簡單，系統內建提供不需客製)，而某些事件一旦發生會噴出數十上百筆通知，短短幾秒收件匣或 LINE/Slack 就被暴力洗版。更理想的做法是把短時間內的連續訊息彙整成一封，而這類似前面說的「彙整多個輸入字元再一次發出 AJAX 請求」，可以靠 Debounce 機制改善。而我們要做的就是用 C# 實現類似邏輯，收到第一則通知時先不要馬上轉發，若一段時間內接連還有其他訊息進來都先存起來，等到 30 秒內沒有新訊息，再將累積的訊息彙整成一筆送出。

實作

寫個 ASP.NET Core Minimal API 做概念性驗證(Proof of Concept；POC)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68


using System.Collections.Concurrent;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// 用途：訊息存於記憶體，不考慮程序異常資料遺失問題
var msgQueue = new ConcurrentQueue<string>();

// 延遲 5 秒執行，期間累積的訊息一次處理
var debouncePrint = new DebouncedJob(TimeSpan.FromSeconds(5));

app.MapPost("/alert", (HttpRequest request) =>
{
 string msg = request.Form["msg"].ToString();
 if (!string.IsNullOrEmpty(msg))
 {
 msgQueue.Enqueue(msg);

 // 若怕新訊息源源不絕一直 Delay 下去，可加入訊息數上限
 // 當 msgQueue 累積數量達上限時，不透過 DebouncedJob 直接執行

 debouncePrint.Run(() =>
 {
 Console.ForegroundColor = ConsoleColor.Yellow;
 Console.WriteLine($"Debounce Print: {DateTime.Now:mm:ss}");
 Console.ResetColor();
 while (msgQueue.TryDequeue(out string m))
 {
 Console.WriteLine(" " + m);
 }
 });
 }
 return Results.Content("OK");
});

app.MapGet("/", () => Results.Content(@"<!DOCTYPE html>
<html>
 <head>
 <meta charset=""utf-8"">
 <title>DebouncedJob</title>
 </head>
 <body>
 <form action=https://wayne-blog.com/alert method=post target=result id=frm >
 <input type=hidden name=msg id=msg />
 </form>
 <iframe name=result style=display:none></iframe>
 <button onclick='test()' >Run Test</button>
 <ul id=log></ul>

 <script>
 let delays = [1, 1, 2, 3, 1, 4, 6, 1, 1, 7, 1];
 function test() {
 send();
 }
 function send() {
 let m = `Sent on ${new Date().toISOString().split('T')[1].substr(3, 5)}`;
 document.getElementById('log').innerHTML += `<li>${m}</li>`;
 document.getElementById('msg').value = m;
 document.getElementById('frm').submit();
 if (delays.length) {
 setTimeout(send, delays.shift() * 1000);
 }
 }
 </script>
 </body>
</html>", "text/html"));

app.Run();

目的是由 /alert 收訊息用 Console.WriteLine 顯示出來，但中間加上 5 秒的 Debounce 機制。做法是收到 /alert 時先將 msg 存進 ConcurrentQueue (不考慮程序異常資料遺失)，並排定一個將 ConcurrentQueue 內容全部印出來的動作，若 5 秒內沒有其他 /alert 被呼叫，排定的 Console.Print 才會真的執行。首頁的部分我寫了簡單的 JavaScript，模擬間隔 1、1、2、3、1、4、6、1、1、7、1 秒各呼叫一次 /alert。由於超過 5 秒才會 Print，預期會在等 6 秒、等 7 秒及最後分三次印出。

測試成功，結果符合預期。

運作的關鍵在 Debounced Job，那 Debounced Job 要怎麼寫？

其實還蠻簡單的，.NET 沒有 setTimeout、clearTimeout，但我們可以用 Task.Delay().ContinueWith() 配上 CancellationToken 實現取消要延遲執行作業的相似邏輯，Task.Delay() 像 Thread.Sleep() 可以不佔用 CPU 等待指定時間，但多了接收 CancellationToken 隨時中斷等待的功能，配合 ContinueWith() 時檢查 CancellationToken.IsCancellationRequested 偵測被中斷的話放棄執行，便能實現 clearTimeout 放棄執行的效果。(延伸閱讀：NET 非同步工作的延續 by Huanlin 學習筆記)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


public class DebouncedJob
{
 private CancellationTokenSource _cts = new CancellationTokenSource();
 private readonly object _lock = new object();
 private readonly TimeSpan _delay;

 public DebouncedJob(TimeSpan delay)
 {
 _delay = delay;
 }

 public void Run(Action action)
 {
 lock (_lock)
 {
 // 取消上一次的執行
 // 概念上類似 JavaScript debounce 的 clearTimeout() 技巧
 _cts.Cancel();
 _cts.Dispose();
 }

 _cts = new CancellationTokenSource();
 var token = _cts.Token;

 Task.Delay(_delay, token).ContinueWith(task =>
 {
 // 執行到這裡有兩種情況：
 // 1. 延遲時間到
 // 2. 延遲時間未到，CancellationToken 被取消
 // 後者不執行 action
 if (!token.IsCancellationRequested)
 {
 action();
 }
 });
 }
}

學會這個技巧，未來遇到需要將動作化零為整，提高處理效率及資訊可讀性的場合，我們就可以靠它寫出更貼心有效率的程式囉。

你可能會想，在極端狀態下若訊息源源不絕進來，發送動作將被無限延遲影響通知時效。

這還可透過設定等待上限解決，試寫一個可指定等待上限的版本(預設上限時為等待時間的兩倍)：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


public class DebouncedJob
{
 private CancellationTokenSource _cts = new CancellationTokenSource();
 private readonly object _lock = new object();
 private readonly TimeSpan _delay;
 private readonly TimeSpan? _maxDelay;

 public DebouncedJob(TimeSpan delay, TimeSpan? maxDelay = null)
 {
 _delay = delay;
 // 未指定 maxDelay 時，預設為兩倍 delay 長度
 _maxDelay = maxDelay ?? delay * 2;
 }

 private DateTime? firstRunTime = null;

 public void Run(Action action)
 {
 lock (_lock)
 {
 // 取消上一次的執行
 // 概念上類似 JavaScript debounce 的 clearTimeout() 技巧
 _cts.Cancel();
 _cts.Dispose();
 }

 _cts = new CancellationTokenSource();
 var token = _cts.Token;

 if (firstRunTime == null)
 {
 firstRunTime = DateTime.Now;
 }
 // 超過 maxDelay 直接執行 action
 else if (DateTime.Now - firstRunTime > _maxDelay)
 {
 firstRunTime = null;
 action();
 return;
 }

 Task.Delay(_delay, token).ContinueWith(task =>
 {
 // 執行到這裡有兩種情況：
 // 1. 延遲時間到
 // 2. 延遲時間未到，CancellationToken 被取消
 // 後者不執行 action
 if (!token.IsCancellationRequested)
 {
 firstRunTime =null;
 action();
 }
 });
 }
}

修改 Program.cs，var debouncePrint = new DebouncedJob(TimeSpan.FromSeconds(5), TimeSpan.FromSeconds(8)); 設定八秒上限，可觀察到第一波拆成兩批顯示，最久只會延遲到 8 秒：

學習 CSS 中的 :where() 與 :is() 函式

Mon, 13 Feb 2023 00:00:00 +0000

:where() 函式接受一個選擇器列表作為參數，允許你編寫更少的代碼並同時設置它們的樣式。本篇文章我們來討論 :where() 的偽類函式，並示範如何在生產環境中使用它。我們將回顧與 :where() 函式相關的疊加、優先級和安全性；另外我們還研究一些特定的範例，並討論它與 :is() 函式的差別！

`:where()`？

根據MDN，:where() 是一個CSS 偽類函數選擇器，它接受一個選擇器列表作為參數，並將給定的樣式應用於該列表中的任何元素，因此 :where() 對於縮短一個較長的選擇器列表非常有用。

在 CSS 中，當多個元素同時應用相同的樣式規則時，我們通常會編寫一長串以逗號分隔的選擇器。

下面是一個例子，我們將相同的樣式應用到 header、main 元素和 footer 元素中的所有 a 標籤：

1
2
3
4
5
6


header a:hover,
main a:hover,
footer a:hover {
 color: green;
 text-decoration: underline;
}

在上面的代碼片段中，我們只選擇了三個元素，但是如果有大量的元素和選擇器，代碼將開始看起來不整潔，並且可能變得難以閱讀和理解。這就是 :where() 偽類函數發揮作用的地方。

下面是上面的例子使用 :where() 函數的樣子：

1
2
3
4


:where(header, main, footer) a:hover {
 color: red;
 text-decoration: underline;
}

當瀏覽器到達該代碼片段時，該代碼指示瀏覽器查找 header、main 和 footer 選擇器，並定位這些選擇器中的所有 a 標籤。

當用戶將鼠標懸停在任何這些 a 標籤上時，瀏覽器應該應用指定的樣式，在本例中為文字顏色紅色與下劃線。這個偽類函數使我們能夠以更短、更容易理解的方式編寫一個很長的選擇器列表。

組合、分割與疊加 `:where()` 函數

使用 :where() 函數，我們可以以多種方式和組合對元素進行分組。

我們可以將 :where() 函數放在選擇器的開頭、中間或結尾。

下面是一個有多個選擇器和樣式的例子：

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


/* first list */
header a:hover,
main a:hover,
footer a:hover {
 color: green;
 text-decoration: underline;
}

/* second list */
article header > p,
article footer > p{
 color: gray;
}

/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
 color: purple;
}

下面是相同的代碼，用 :where() 函數重寫：

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


/* first list */
:where(header, main, footer) a:hover {
 color: red;
 text-decoration: underline;
}

/* second list */
article :where(header, footer) > p {
 color: gray;
}

/* third list */
.dark-theme :where(button, a) {
 color: purple;
}
.dim-theme :where(button, a) {
 color: purple;
}

在第一個列表中，我們指定「紅色」和「下劃線」樣式應應用於懸停時的 header 元素、main 元素和 footer 元素。在第二個列表中，我們指定 article元素、header元素和 footer 元素應該使用灰色樣式。

為了更清晰，我們將第三個列表分為兩個 :where() 函數。在這個列表中，我們指定 .dark-theme、.dim-theme 裡的 button 和 a 元素的樣式應該是紫色。

現在，我們將進一步減少第三個列表函數，將它們變成一個 :where() 函數：

1
2
3
4


/* 堆疊 */
:where(.dark-theme, .dim-theme) :where(button, a) {
 color: purple;
}

這種減少複雜選擇器列表的方式稱為疊加。

`:where()` 選擇器的優先級

:where() 函數選擇器的優先級總是零。

因此，以該函數為目標的任何元素也會自動獲得 0 的優先級。這使我們能夠輕鬆地取消任何元素的樣式。

下面是一個 HTML 有序列表的例子：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


<div>
 <h2>First list no class</h2>
 <ol>
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>
<div>
 <h2>Second list with class</h2>
 <ol class="second-list">
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>

<div>
 <h2>Third list with class</h2>
 <ol class="third-list">
 <li>List Item 1</li>
 <li>List Item 2</li>
 </ol>
</div>

在上面的代碼片段中，有三個有序列表，每個列表中有兩個項。第二個和第三個列表有一個給定的類，而第一個列表沒有。

沒有任何樣式，我們可以看到每個列表是按數字順序排列的：

現在讓我們添加一些樣式：

1
2
3


:where(ol[class]) {
 list-style-type: none;
}

在上面的代碼片段中，我們使用 :where() 偽類函數來選擇應用了類的所有 ol 標籤。

下面，我們看到第二個和第三個列表，它們都有一個類，被 :where() 函數作為目標，並刪除了它們的 list-style-type：

現在，讓我們添加一些額外的樣式：

1
2
3
4
5
6
7


:where(ol[class]) {
 list-style-type: none;
}

.second-list {
 list-style-type: disc;
}

只針對使用類名的第二個列表，我們可以看到它現在顯示為項目符號，而第三個列表仍然沒有列表樣式類型：

你可能會想，“這不應該是這樣嗎，因為新的樣式寫在 :where() 函數樣式下面？“不，它不是，我們一會兒就會看到。

讓我們看看當我們把剛剛添加的代碼移到代碼塊的頂部，並把 :where() 函數部分移到底部時，會發生什麼：

1
2
3
4
5
6
7


.second-list {
 list-style-type: disc;
}

:where(ol[class]) {
 list-style-type: none;
}

注意樣式仍然沒有改變：

記住：:where() 函數的優先級為零。

`:where()` 選擇器的安全性

對於選擇器列表，如果瀏覽器不能識別列表中的一個選擇器，則整個選擇器列表將被視為無效，並且它們的樣式將不會被應用。然而對於 :where() 偽類函數就不是這樣了。

如果 :where() 函數中的元素是無效選擇器的目標，則該元素將不會獲得任何樣式。其餘的元素仍然會被設置樣式。:where() 函數將跳過無效的選擇器到下一個（有效）選擇器。

這就是為什麼 :where() 被稱為安全的選擇器。

在下面的例子中，:unsupported 對於許多瀏覽器來說是無效的選擇器。下面的代碼將被正確解析，並且仍然會匹配 :valid 選擇器，即使在不支持 :unsupported 選擇器的瀏覽器中，如下所示：

1
2
3


:where(:valid, :unsupported) {
 /* ... */
}

而在不支持 :unsupported 選擇器的瀏覽器中，以下代碼將被忽略，即使它們支持 :valid 選擇器：

1
2
3


:valid, :unsupported {
 /* ... */
}

`:where()` 函數的特殊用例

在一些特殊的用例中，:where() 函數可能是一個有用的工具，但也有一些情況下應該避免使用它。

使用 :where() 偽類函數時出現的幾乎所有問題都歸結為優先級。

因為 :where() 的優先級為零，我們需要非常小心地選擇何時何地使用這個函數。

首先，讓我們看看幾個用例，在這些用例中 :where() 可能特別有用。

改進 CSS 重置

CSS 重置是指在任何其他樣式之前加載一組樣式規則，以清除瀏覽器的內置樣式。
CSS 重置通常放置在 CSS 樣式表的頂部或開始，所以它們首先加載。
開發人員通常使用它們來刪除瀏覽器最初給幾個元素的默認樣式，然後才開始實際設計他們的元素和網站。
CSS 重置還可以幫助消除不同瀏覽器之間的不一致。
CSS 重置是臨時的樣式，稍後會在樣式化過程中更改。

然而，根據 CSS 重置中使用的元素或元素組的選擇器的簡單性或複雜性，稍後在代碼中可能很難覆蓋初始樣式。

例如，假設我們將網站上的所有的 a 標籤設置為綠色。

然後我們稍後決定將所有 header 裡的 a 標籤的樣式設置為灰色。

由於在 CSS 重置中選擇的複雜性，新的（灰色）樣式不會被應用。

重置中的選擇器比後面代碼中僅針對 header 裡的 a 標籤使用的選擇器具有更高階的優先級，因此沒有應用灰色樣式。

現在，如果我們將 :where() 偽類函數添加到 CSS 重置中，這將自動為重置中的所有元素賦予零的優先級。

這使得我們以後更容易更改樣式，而不必擔心優先級衝突。

刪除樣式

如果想要刪除或取消樣式或降低一個或一組元素的優先級，則 :where() 函數非常有用。

保持樣式

如果要確保一個元素或元素集的樣式或優先級在未來的任何時候都不會改變，那麼不要使用 :where() 偽類。

`:is()`？

:is() 函數的運行方式幾乎與 :where() 函數相同。

你可以用它來簡化複雜的選擇器，也可以把它放在選擇器的開頭、中間或結尾，就像 :where() 函數一樣。

它也是安全的，就像 :where() 函數一樣。因此，當其中一個選擇器無效時，瀏覽器將忽略該選擇器，但有效選擇器的樣式將添加到所選元素中。

`:where()` 和 `:is()` 函數的區別？

這兩個函數的區別在於 :where() 函數的優先級總是零，則 :is() 函數的優先級取決於其最特定參數的優先級。

例如，讓我們看看 header 元素中的段落文本：

1
2
3


<header>
 <p>This is a paragraph text.</p>
</header>

然後，讓我們嘗試使用四種不同的選擇器來改變文本顏色：

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


header p {
 color: blue;
}

:is(header, section) p {
 color: green;
}

p {
 color: blue;
}

:where(header, section) p {
 color: blue;
}

第一個選擇器將文本的顏色設置為藍色。使用 :is() 的第二個選擇器與第一個選擇器具有相同的優先級，但由於它位於第一個選擇器之後，因此它將文本顏色從藍色更改為綠色。第三個選擇器的優先級低於第一個和第二個選擇器，對文本沒有影響。最後是第四個，它使用 :where() 函數對文本沒有影響，因為它的零優先級。

瀏覽器兼容性

所有瀏覽器，無論是桌面瀏覽器還是移動瀏覽器，都完全支持 :where() 函數，包括對其安全特性的支持。因此，你不必擔心你的樣式是否會在瀏覽器中正確呈現。

Golang 的超級初心者筆記

Fri, 10 Feb 2023 00:00:00 +0000

簡介

Go 語言是由 Google 開發的開放原始碼項目，目的之一為了提高開發人員的程式設計效率。
Go 語言語法靈活、簡潔、清晰、高效。它對併發的特性可以方便地用於多核處理器和網絡開發，同時靈活新穎的類型系統可以方便地撰寫模組化的系統。
Go 可以快速編譯，同時具有記憶體垃圾自動回收功能，並且還支持運行時反射。
Go 是一個高效、靜態類型，但是又具有解釋語言的動態類型特徵的系統級語法。

由來！？

下載中斷是再正常不過的事，但對知名 Google 程式設計師菲茲派翠克（Brad Fitzpatrick）來說，這件事情太難以忍受。

令人不耐的下載速度

其實他並不孤單，多年來很多人都曾抱怨 dl.google.com 系統不夠穩定。

這個系統非常重要，任務範圍幾乎涵蓋所有 Google 下載任務，包括 Chrome 瀏覽器安裝、Android 原始程式碼，以及較小的 JavaScript。但，問題是該檔案伺服器系統的基礎代碼已經超過五年，相當老舊。

菲茲派翠克認為代碼必須不斷更新提升，最初的 C++ 語言缺乏規範的文檔，自動化測試也未達水準，沒有人能搞懂它，只是不斷做一些小幅改變。最後在負責維護的程式人員眼裡，這些代碼根本是一團糟。

不穩定的系統讓伺服器運營團隊相當苦惱，但沒有人有時間重寫代碼。於是菲茲派翠克自告奮勇接手，他在 Google 底下的 25 人工程師團隊 —– 地鼠隊（Gopher Team）中，負責開發一種程式設計語言命名為 Go。這個機會讓他非常興奮。(以上內容節錄自 Wired)

為什麼要學習 Golang？

Golang 易學易用：Golang 基本上是強化版的 C 語言，都以核心語法短小精要著稱。
Golang 是靜態型別語言：很多程式的錯誤在編譯期就會挑出來，相對易於除錯。
Golang 編譯速度很快：帶動整個開發的流程更快速。
Golang 支援垃圾回收：網頁程式較接近應用程式，而非系統程式，垃圾回收在這個情境下不算缺點；此外，使用垃圾回收可簡化程式碼。
Golang 內建共時性的語法：goroutine 比起傳統的執行緒 (thread) 來說輕量得多，在高負載時所需開銷更少。
Golang 是跨平台的：只要程式中不碰到 C 函式庫，在 Windows (或 Mac) 寫好的 Golang 網頁程式，可以不經修改就直接發布在 GNU/Linux 伺服器上。
Golang 的專案不需額外的設定檔：在專案中，只要放 Golang 程式碼和一些 assets 即可運作，所需的工具皆內建在 Golang 主程式中，省去學習專案設罝的功夫。
Golang 沒有死硬的程式架構：用 Golang 寫網頁程式思維上接近微框架 (micro-framework)，只要少數樣板程式碼就可以寫出網頁程式，也不限定可用的第三方函式庫。
Golang 函式庫很多，甚至可以直接使用 GitHub 上面的函式庫。
Golang 多傳回值，你函式的回傳值可以是多個。
真要說的話，真的列舉不完，以上幾點是我特別看中喜愛的點，希望能勾起大家對於 Golang 的興趣！

但 Golang 並非完美無缺，以下是要考量的點：

Golang 並非完整的物件導向 (object-oriented) 語言，頂多是基於物件的 (object-based) 語言。
Golang 的語言特性相對少：這是 Golang 時常被攻擊的點，這只能靠自己調整寫程式的習慣。
在一些情境下，Golang 程式碼相對笨拙冗餘，像是排序 (sorting)。

開發環境設定

Go 本身支援 Cross Compile 當然有準備各個平台的安裝方法囉！每次發佈的版本都會包括知名的三大平台 (Windows, Linux, Mac OS)，立刻就去下載安裝！

檔案下載網址

等等！Unix Like 的使用者先等等，有個更好用的東西可以讓各位使用，我們有 GVM 可以用，GVM 可以有效的管理 Go 的版本，連 GOPATH 都幫你設定好，超方便的！即時是最新的也都能馬上使用他下載安裝，真的是棒的沒話說，就讓我們來使用他吧！記得要先看一下 Requirements 喔，不然會裝不起來。

另外我的部落格有輕鬆搭建 Go 開發環境的教學 - 在 Windows 平台打造完美的 Go 開發環境 (WSL 2)，可以直接參考該篇文章進行搭建！(開發工具使用 Visual Studio Code)

Go 指令

在終端機上執行 go 指令就會看到一系列的指令介紹：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53


$ go
Go is a tool for managing Go source code.

Usage:

 go command [arguments]

The commands are:

 bug start a bug report
 build compile packages and dependencies
 clean remove object files and cached files
 doc show documentation for package or symbol
 env print Go environment information
 fix update packages to use new APIs
 fmt gofmt (reformat) package sources
 generate generate Go files by processing source
 get add dependencies to current module and install them
 install compile and install packages and dependencies
 list list packages or modules
 mod module maintenance
 work workspace maintenance
 run compile and run Go program
 test test packages
 tool run specified go tool
 version print Go version
 vet report likely mistakes in packages

Use "go help <command>" for more information about a command.

Additional help topics:

 buildconstraint build constraints
 buildmode build modes
 c calling between Go and C
 cache build and test caching
 environment environment variables
 filetype file types
 go.mod the go.mod file
 gopath GOPATH environment variable
 gopath-get legacy GOPATH go get
 goproxy module proxy protocol
 importpath import path syntax
 modules modules, module versions, and more
 module-get module-aware go get
 module-auth module authentication using go.sum
 packages package lists and patterns
 private configuration for downloading non-public code
 testflag testing flags
 testfunc testing functions
 vcs controlling version control with GOVCS

Use "go help <topic>" for more information about that topic.

如果對於某個指令特別需要幫助可以用 go help [topic] 指令。

這邊特別介紹的有四個指令：go run、go build、go install、go clean。

go run

直接執行 golang code。

1
2
3


go run src/helloWorld/main.go

> Hello World

go build

build，如果沒有錯誤就產生執行檔於當前目錄。

1

go build

build 後產生的檔案即是執行檔。

go install

如果沒有錯誤則產生執行檔於 $GOPATH/bin。

1
2
3
4
5
6


go install

# 查看執行檔
ls $GOPATH/bin

> helloWorld

go clean

執行後會將 build 產生的檔案都刪除。(install的不會刪)

1

go clean

Javascript v.s. Golang

由於我是從前端寫到後端，這邊用吃飯工具 Javascript 與 Golang 做個寫法比較。

Hello World

Javascript：

1

console.log("hello world");

Golang：

1
2
3
4
5
6
7
8


package main
import (
 "fmt"
)

func main() {
 fmt.Println("hello world")
}

Array

Javascript：

1

const names = ["hello", "world"];

Golang：

1

names := []string { "hello", "world" }

印出後面幾個字的子字串

Javascript：

1
2


let game = "hello world";
console.log(game.substr(8, game.length));

Golang：

1
2


game := "hello world"
fmt.Println(game[8: ])

流程控制

Javascript：

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


const gender = 'female';

switch (gender) {
 case 'female':
 console.log("you are a girl");
 break;
 case 'male':
 console.log("your are a boy");
 break;
 default:
 console.log("you are a third gender");
}

Golang：

1
2
3
4
5
6
7
8
9


gender := "female"
switch gender {
case "female":
 fmt.Println("you are a girl")
case "male":
 fmt.Println("your are a boy")
default:
 fmt.Println("you are a third gender")
}

看來 Go 省略了 break 這關鍵字。

Loop

Javascript 有 for loop、while loop、do while loop。
Go 只有 for loop 就能模擬上面三個。
Golang：

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


for i := 0; i < 10; i++ {
 fmt.Println(i)
}

// key value pairs
kvs := map[string]string {
 "name": "wayne blog",
 "website": "https://wayne-blog.com/",
}

for key, value := range kvs {
 fmt.Println(key, value)
}

Object

Javascript：

1
2
3
4
5
6


const Post = {
 ID: 10213107,
 Title: "Golang 的新手教學",
 Author: "Wayne",
 Difficulty: "Beginner"
}

Golang：

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


type Post struct {
 ID int
 Title string
 Author string
 Difficulty string
}

p := Post {
 ID: 10213107,
 Title : "Golang 的新手教學",
 Author: "Wayne",
 Difficulty:"Beginner",
}

Go 能透過定義抽象的 struct 與其屬性，再實例化。

也能透過 map[string]interface 來定義：

1
2
3
4
5
6


Post := map[string]interface{} {
 "ID": 10213107,
 "Title" : "Golang 的新手教學",
 "Author": "Wayne",
 "Difficulty":"Beginner",
}

舉幾個例子比較一下，後面會慢慢補充。

變數型態與宣告方式

Go 和你所知道的大多數語言相同，會有各種型態，如果你有學過 C 語言，這邊你可以很輕鬆的看過去，而且你會發現它跟 C 語言有許多相似之處，Go 之所以被稱為「21 世紀 C 語言不是沒有原因」，另外如果沒有學過，也別擔心，它沒有很困難，那就讓我們來認識看看有哪些型態。

整數

整數的型態很多種，以下表格是 Go 語言擁有的整數型態，以及它的範圍。

類型	位元	值的範圍
int8	1	-128 ~ 127
uint8(byte)	1	0 ~ 255
int16	2	-32768 ~ 32767
uint16	2	0 ~ 65535
int32	4	-2147483648 ~ 2147483647
uint32	4	0 ~ 4294967295
int64	8	-9223372036854775808 ~ 9223372036854775807
uint64	8	0 ~ 18446744073709551615
int	視平台而定	視平台而定
uint	視平台而定	視平台而定
uintptr	同指標	32 位元平台： 4 位元 64 位元平台： 8 位元

PS：unit(unsigned integer) 意味沒有符號的整數

範例：

1
2
3
4
5
6
7


package main

import "fmt"

func main() {
 fmt.Println("1 + 1 =", 1 + 1)
}

浮點數

浮點數囊括任何帶有小數點的數值(.00也算在浮點數)。
浮點數包涵兩種型態 float32、float64。
要注意的是，如果初始化的時候沒有加小數點會被推斷為整數，另外初始化的時候沒有指定型態的話，會被自動推斷為 float64。
float64 在 Go 語言相當於 C 語言的 Double，且 float32 與 float64 是無法一起計算的，需要強制轉型。

範例：

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


package main

import "fmt"

func main() {
 var floatValue float64
 floatValue = 7.0
 var floatValue2 = 3.0
 fmt.Println("7.0/3.0 =", floatValue/floatValue2)

 var test float64
 var test2 float32
 test = 1.1
 test2 = 2.2
 fmt.Println("test + test2 =", float32(test) + test2)
}

複數

複數包涵兩種型態 complex64、complex128。
我覺得算是 Go 的特色之一，其他語言很少有這種型態，一個完整的複數需要包涵實數、虛數。
如果是初始化讓 Go 自動判斷型態的型態會是 complex128，而不會是 complex64。

範例：

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


package main

import "fmt"

func main() {
 var complexValue complex64
 complexValue = 1.2 + 12i
 complexValue2 := 1.2 + 12i
 complexValue3 := complex(3.2, 12)

 fmt.Println("complexValue =", complexValue)
 fmt.Println("complexValue2 =", complexValue2)
 fmt.Println("complexValue3 =", complexValue3)

 fmt.Println("complexValue3 實數 =", real(complexValue3))
 fmt.Println("complexValue3 虛數 =", imag(complexValue3))
}

字串

請注意字串型態無法在初始化後被修改。

範例：

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


package main

import "fmt"

func main() {
 fmt.Println("1" + "1")
 fmt.Println(len("Hello World"))
 fmt.Println("Hello World"[1])
 fmt.Println("Hello" + "World")

 a := "Hello World"
 fmt.Printf("%c",a[1])
}

布林

Go 語言中的布林與其他語言一致，關鍵字一樣是 bool，可以賦予值為 true 和 false。

範例：

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


package main

import "fmt"

func main() {
 var a bool
 a = true
 fmt.Println("a =", a)

 b := false
 fmt.Println("b =", b)

 fmt.Println(true && true)
 fmt.Println(true && false)
 fmt.Println(true || true)
 fmt.Println(true || false)
 fmt.Println(!true)
}

如何宣告？

Golang 在變數宣告的一開始是不需要指定型別的。

例如這樣即可：

1

var myName

如果宣告時順便初始化可以這樣寫：

1

var myName = "Wayne"

或是有更簡潔的寫法：

1

myName := "Wayne"

當然也可以一次宣告很多個：

1

myName, myAge, isPassed := "Wayne", 18, true

Q：你可能會問，那我這樣寫會發生什麼事？

1

myName, myAge, isPassed := "Wayne", 18

A：那個 isPassed 將不會被初始化。

如果想要指定變數型態的話，只需要在 var 後面加上指定型態即可：

1
2
3
4
5


var (
 myName string = "Wayne"
 myAge int = 18
 isPassed boolean = true
)

記得每個變數要不同行，中間不需要逗號分隔

最後有個比較特別的：常數(const)，常數為一個固定值，當然之後在程式內是不允許被修改的。

1
2


const pi = 3.14
const hello_str = "Hello World"

迴圈

Go 只有一種迴圈 -「for」。

除了基本的「for」迴圈，沒有了「()」之外（甚至強制不能使用它們），它看起來跟 C 或者 Java 中做的一樣，而「{}」是必須的。

for

1
2
3


for i := 0; i <= 100; i++ {
 // do something
}

巢狀迴圈

1
2
3
4
5


for i := 0; i <= 100; i++ {
 for j := 0; j <= 100; j++ {
 // do something
 }
}

while 用法的 for 迴圈

1
2
3
4


i := 0
for i <= 10 {
 // do something
}

無窮迴圈

1
2
3


for {
 // do something
}

break

break 終止迴圈執行。

1
2
3
4
5
6
7
8


i := 0
for {
 // do something
 if i >= 100 {
 break;
 }
 i++
}

continue

有 break 當然也會有 continue，continue 就是略過本次的迴圈，直接進行下一輪：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


for {
 i++
 if i % 2 == 0 {
 continue
 }
 fmt.Print(i)
 if i > 50 {
 break
 }
}

if 條件判斷

if 語句除了沒有了「()」之外（甚至強制不能使用它們），看起來跟 C 或者 Java 中的一樣，而「{}」是必須的。

if

如果為 true 就執行，如果為 false 的話就不會執行：

1
2
3
4
5
6
7
8
9


if true {
 fmt.Println("This is true")
}
if false {
 fmt.Println("This line will not be executed")
}

// 輸出結果：
// This is true

&&：且
||：或

1
2
3
4
5
6
7
8


sex := "male"
age := 20
if sex == "male" && age >= 18 {
 fmt.Println("成年男性")
}

// 輸出結果：
// 成年男性

相反(`!`)

在 ture 或 false 之前加上!，會使結果顛倒，true 會變成 false，false 變成 true。

1
2
3
4
5
6
7
8
9


if !true {
 fmt.Println("This is !true")
}
if !false {
 fmt.Println("This is !false")
}

// 輸出結果：
// This is !false

if…else

1
2
3
4
5
6
7
8
9


myMoney := 100
if myMoney > 99 {
 fmt.Println("I can buy it")
} else {
 fmt.Println("I can't buy it")
}

// 輸出結果：
// I can buy it

if…else if

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


myMoney := 100
iceCream := 20
if myMoney-iceCream > 50 {
 fmt.Println("buy it!")
} else if myMoney-iceCream < 50 {
 fmt.Println("sorry, I won't buy")
}

// 輸出結果：
// buy it!

if…else if…else

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


myMoney := 100
ferrari := 450
bmw := 250

if myMoney > ferrari {
 fmt.Println("buy Ferrari")
} else if myMoney > bmw {
 fmt.Println("buy BMW")
} else {
 fmt.Println("buy Toyota")
}

// 輸出結果：
// buy Toyota

if 簡短的敘述

跟「for」一樣，「if」語句可以在條件之前執行一個簡單的語句，由這個語句定義的變數的作用範圍僅在「if」範圍之內。

（在最後的 return 語句處使用 v 看看。）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


package main

import (
 "fmt"
 "math"
)

func pow(x, n, lim float64) float64 {
 if v := math.Pow(x, n); v < lim {
 return v
 }
 return lim
}

func main() {
 fmt.Println(
 pow(3, 2, 10),
 pow(3, 3, 20),
 )
}

// 輸出結果：
// 9 20

switch 條件判斷

switch 在很多情況下可以取代 if 的功能，而且寫起來會更加簡潔。

範例：

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


myfriend := "Tony"
switch myfriend {
 case "Amy":
 fmt.Println("Hi, Amy")
 case "Tony":
 fmt.Println("Hi bro")
 case "Jackey":
 fmt.Println("GO AWAY!")
}

// 輸出結果：
// Hi bro

要注意的是 case 中只需要:，並不需要 {} 來分隔。

default

如果都不在 case 裡的情況就會執行 default：

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


myfriend := "Jason"
switch myfriend {
case "Amy":
 fmt.Println("Hi, Amy")
case "Tony":
 fmt.Println("Hi bro")
case "Jackey":
 fmt.Println("GO AWAY!")
default:
 fmt.Println("Nice to meet you, but who are you?")
}

// 輸出結果：
// Nice to meet you, but who are you?

fallthrough

在 case 中加入 fallthrough，會接著執行下一個 case。

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


myfriend := "Amy"
switch myfriend {
case "Amy":
 fmt.Println("Hi, Amy")
 fallthrough
case "Tony":
 fmt.Println("Hi bro")
case "Jackey":
 fmt.Println("GO AWAY!")
default:
 fmt.Println("Nice to meet you, but who are you?")
}

// 輸出結果：
// Hi, Amy
// Hi bro

多重 case

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


myfriend := "Paul"
switch myfriend {
 case "Amy", "Emily":
 fmt.Println("Hi, beautiful gril")
 case "Tony", "Paul":
 fmt.Println("Hi bro")
}

// 輸出結果：
// Hi bro

switch 沒有對象

這個情況就有點像是 if 的功能了：

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


myMoney := 100
switch {
 case myMoney > 500:
 fmt.Println("buy Ferrari")
 case myMoney > 250:
 fmt.Println("buy BMW")
 default
 fmt.Println("buy Toyota")
}

// 輸出結果：
// buy Toyota

BONUS(一)：goto

Go 語言跟 C 語言一樣也有「goto」，但是不建議使用，會讓程式的結構變得很糟糕。

1
2
3
4
5
6
7
8
9


func main() {
 i := 0
HERE:
 fmt.Print(i)
 i++
 if i < 10 {
 goto HERE
 }
}

BONUS(二)：defer

就許多現代語言而言，例外處理機制是基本特性之一，然而，例外處理是好是壞，一直以來存在著各種不同的意見，在 Go 語言中，沒有例外處理機制，取而代之的，是運用 defer、panic、recover 來滿足類似的處理需求。

defer

在 Go 語言中，可以使用 defer 指定某個函式延遲執行，那麼延遲到哪個時機？簡單來說，在函式 return 語句之後準備返回呼叫的函式之前，例如：

延遲效果

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


func myfunc() {
 fmt.Println("B")
}

func main() {
 defer myfunc()
 fmt.Println("A")
}

// 輸出結果：
// A
// B

可在返回之前修改返回值

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


func Triple(n int) (r int) {
 defer func() {
 r += n // 修改返回值
 }()

 return n + n // <=> r = n + n; return
}

func main() {
 fmt.Println(Triple(5))
}

// 輸出結果：
// 15

變數的快照

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


func main() {
 name := "go"
 defer fmt.Println(name) // 變數 name 的值被記住了，所以會輸出go

 name = "python"
 fmt.Println(name) // 輸出：python
}

// 輸出結果：
// python
// go

應用

反序調用

如果有多個函式被 defer，那麼在函式 return 前，會依 defer 的相反順序執行，也就是 LIFO，例如：

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


func deferredFunc1() {
 fmt.Println("deferredFunc1")
}

func deferredFunc2() {
 fmt.Println("deferredFunc2")
}

func main() {
 defer deferredFunc1()
 defer deferredFunc2()
 fmt.Println("Hello, 世界")
}

// 輸出結果：
// Hello, 世界
// deferredFunc2
// deferredFunc1

defer 與 return

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


func f() {
 r := getResource() // 0: 獲取資源
 // ......
 if ... {
 r.release() // 1: 釋放資源
 return
 }
 // ......
 if ... {
 r.release() // 2: 釋放資源
 return
 }
 // ......
 r.release() // 3: 釋放資源
 return
}

使用 defer 後，不論在哪 return 都會執行 defer 後方的函數，如此便不用在每個 return 前寫上 r.release()

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


func f() {
 r := getResource() // 0: 獲取資源

 defer r.release() // 1: 釋放資源
 // ......
 if ... {
 // ...
 return
 }
 // ......
 if ... {
 // ...
 return
 }
 // ......
 return
}

以下是清除資源的範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


package main

import (
 "fmt"
 "os"
)

func main() {
 f, err := os.Open("/tmp/dat")
 if err != nil {
 fmt.Println(err)
 return;
 }

 defer func() { // 延遲執行，而且函式 return 後一定會執行
 if f != nil {
 f.Close()
 }
 }()

 b1 := make([]byte, 5)
 n1, err := f.Read(b1)
 if err != nil {
 fmt.Printf("%d bytes: %s\n", n1, string(b1))
 // 處理讀取的內容...
 }
}

BONUS(三)：panic()

如果在函式中執行 panic()，那麼函式的流程就會中斷，若 A 函式呼叫了 B 函式，而 B 函式中呼叫了 panic()，那麼 B 函式會從呼叫了 panic 的地方中斷，而 A 函式也會從呼叫了 B 函式的地方中斷，若有更深層的呼叫鏈，panic 的效應也會一路往回傳播。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


package main

import (
 "fmt"
 "os"
)

func check(err error) {
 if err != nil {
 panic(err)
 }
}

func main() {
 f, err := os.Open("/tmp/dat")
 check(err)

 defer func() {
 if f != nil {
 f.Close()
 }
 }()

 b1 := make([]byte, 5)
 n1, err := f.Read(b1)
 check(err)

 fmt.Printf("%d bytes: %s\n", n1, string(b1))
}

如果在開啟檔案時，就發生了錯誤，假設這是在一個很深的呼叫層次中發生，若你直接想撰寫程式，將 os.Open 的 error 逐層傳回，那會是一件很麻煩的事，此時直接發出 panic，就可以達到想要的目的。

BONUS(四)：recover

如果發生了 panic，而你必須做一些處理，可以使用 recover，這個函式必須在被 defer 的函式中執行才有效果，若在被 defer 的函式外執行，recover 一定是傳回 nil。

如果有設置 defer 函式，在發生了 panic 的情況下，被 defer 的函式一定會被執行，若當中執行了 recover，那麼 panic 就會被捕捉並作為 recover 的傳回值，那麼 panic 就不會一路往回傳播，除非你又呼叫了 panic。

因此，雖然 Go 語言中沒有例外處理機制，也可使用 defer、panic 與 recover 來進行類似的錯誤處理。例如，將上頭的範例，再修改為：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


package main

import (
 "fmt"
 "os"
)

func check(err error) {
 if err != nil {
 panic(err)
 }
}

func main() {
 f, err := os.Open("/tmp/dat")
 check(err)

 defer func() {
 if err := recover(); err != nil {
 fmt.Println(err) // 這已經是頂層的 UI 介面了，想以自己的方式呈現錯誤
 }

 if f != nil {
 if err := f.Close(); err != nil {
 panic(err) // 示範再拋出 panic
 }
 }
 }()

 b1 := make([]byte, 5)
 n1, err := f.Read(b1)
 check(err)

 fmt.Printf("%d bytes: %s\n", n1, string(b1))
}

陣列

如何宣告陣列呢？很簡單！只要在變數宣告後面多加 [] 就可以了，裡面要填寫宣告的陣列數字。

1

var x [5]int

完整的範例：

1
2
3
4
5
6
7
8
9


package main

import "fmt"

func main() {
 var x [5]int
 x[4] = 100
 fmt.Println(x)
}

這邊來稍微說明一下：

1

x[4] = 100

這一行的意思是說「x 的第五個元素賦予值 100」，之所以是第五個元素是因為，我們一開始用 var x [5]int 宣告了五個元素的陣列，而陣列的起始元素是第 0 個，從頭開始算 0, 1, 2, 3, 4 五個元素，所以 x[4] 表示的是第五個元素，如果要選擇第 0 個元素要寫 x[0]。

接下來稍微看一個進階的例子來討論一下：

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


func main() {
 var x [4]float64
 x[0] = 23
 x[1] = 45
 x[2] = 33
 x[3] = 21

 var total float64 = 0
 for i := 0; i < 4; i++ {
 total += x[i]
 }
 fmt.Println(total / 4)
}

這邊一樣是宣告五個元素的陣列，x[0] ~ x[4] 的部分是初始化數值的動作，後面 for 迴圈是走訪所有個元素並且加到 total 這個變數中，最後在 Println 的部分再除以 4 計算平均。雖然這個程式沒有問題，但是沒有彈性，如果我今天加入六個元素、七個元素，你就必須要更改三個地方（宣告、for 迴圈、fmt.Println），所以我們稍微將它更改一下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


var x [4]float64
x[0] = 23
x[1] = 45
x[2] = 33
x[3] = 21

var total float64 = 0
for i := 0; i < len(x); i++ {
 total += x[i]
}
fmt.Println(total / len(x))

我們利用內建的函式 len() 來計算陣列的數量，這樣子如果元素有修改，我們就只需要修改一個部分就可以了，剩下的 len() 會自己去計算陣列的數量。但是！！！這個程式執行會有問題，如果你執行程式碼會看到錯誤：

1

invalid operation: total / 4 (mismatched types float64 and int)

這是因為 total 變數和 len() 計算完成後的型態不同，一個是 float64 另一個則是 int，所以發生錯誤，你必須要讓它強制轉型才可以執行。

1

fmt.Println(total / float64(len(x)))

另外 for 迴圈有另外一種內建的寫法可以走訪每個陣列，就是利用 range ，但是他預設會有兩個回傳值，一個是鍵一個是值。

1
2
3
4
5


var total float64 = 0
for i, value := range x {
 total += value
}
fmt.Println(total / float64(len(x)))

這個程式乍看之下沒有問題，但是我們都知道 Go 沒有使用的函式、變數，被 compile 看到連編譯都不給編，會出現「i declared and not used」錯誤，但是這邊我們真的不需要「i」這個鍵怎麼辦？我們可以利用「_」這個佔位符來取代。

1
2
3
4
5


var total float64 = 0
for _, value := range x {
 total += value
}
fmt.Println(total / float64(len(x)))

讓我們來稍微檢視一下最後修改的版本：

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


func main() {
 var x [4]float64
 x[0] = 23
 x[1] = 45
 x[2] = 33
 x[3] = 21

 var total float64 = 0
 for _, value := range x {
 total += value
 }
 fmt.Println(total / float64(len(x)))
}

看起十分的精簡又方便維護！但是就只有這樣了嗎？我個人覺得初始化的部份還是太長了，就讓我們來簡化它！

1

x := [4]float64{23, 45, 33, 21}

很短對不對！不過它很不方便閱讀，所以你也可以改成：

1
2
3
4
5
6


x := [4]float64{
 23,
 45,
 33,
 21,
}

注意最後一個逗點要留著喔！不然編譯會出錯，你不要覺得這個逗點很奇怪，一切都是有原因的，原因就在於方便維護！

Slice（切片）

在建立陣列的時候要指定元素的大小，但是！我們今天如果不知道要多大怎麼辦？陣列可以不輸入元素大小嗎？答案是可以！不過這個方法會有問題！而且他的型態不是陣列，而是 Slice。

建立 Slice

1

var x []float64

夠簡單了吧！其實就只是指陣列不寫元素大小而已。

Slice 有兩種數值，一個是容量一個是長度。這兩個有什麼不同呢？其實容量就是最大能裝多少，而長度不能超過容量。

那我們要怎麼設定長度跟容量呢？

1

x := make([]float64, 5)

這是標準的建立 slice 的方法，這裡設定一個長度和容量都是 5 的 slice 變數 x，這時候你會問：為什麼我只有指定一個 5 ，它卻幫我把長度跟容量設定為 5 呢？這是因為這裡設定的 5 其實是長度，容量則是系統自動配置，會符合最適當大小，所以也是 5。

如果要自訂容量大小，只要再多一個參數就可以設定囉：

1

x := make([]float64, 5, 10)

我們還可以利用另外一個方法建立 Slice，[low : high] 這個方法來參考別的 Slice 或是陣列來建立 Slice。

1
2


arr := [5]float64{1,2,3,4,5}
x := arr[0:5]

需要特別注意的點是 high 表示的是結束的點，而不是它的元素位置喔！

以上面的例子來說 arr[0:5] 其實是指 [1,2,3,4,5]，如果是 arr[1:4] 則是 [2,3,4]。

另外在某些情況下 low 跟 high 是可以省略的，像是 arr[0:5] 這樣子就可以省略成 arr[:5]；

如果省略成 arr[0:] 則是相當於 arr[0: len(arr)]；

是的，你發現了嗎？你當然可以省略成 [:]，它相當於 arr[0:len(arr)]。

Append 與 Copy

Slice 有兩個一定要學會的函式，一個是 Append 另一個是 Copy，讓我們逐一看一下例子：

1
2
3
4
5


func main() {
 slice1 := []int{1,2,3}
 slice2 := append(slice1, 4, 5)
 fmt.Println(slice1, slice2)
}

這邊使用 append 把 4、5 加入到 Slice1 中，並且賦予 Slice2。如果要更改原本的內容則是要這樣寫：

1

slice1 = append(slice1, 4, 5)

只要重新覆蓋掉 slice1 就可以了，但是要特別注意！不可以加冒號！冒號是宣告的時候用的短語法。

Map

在 Golang 中，有沒有一個類似 JSON 陣列的方法、型態呢？你可以使用 Map！

建立與使用 Map

1

var x map[string]int

跟 Array 還有 Slice 有點相似對吧？我這邊說明一下：

x 是變數名稱
map 這個是建立 Map 的時候用的關鍵詞彙不能省略
括弧中的 string 表示鍵的型態，int 則是值的型態。

我們來嘗試建立看看一個 Map：

1
2
3


var x map[string]int
x["key"] = 10
fmt.Println(x)

什麼！？居然出現 Panic，這個是什麼？

1

panic: runtime error: assignment to entry in nil map

我稍微省略了一些錯誤的 log ，讓我們聚焦在最重要的這一句話上面，他的意思是說不能賦予值到 nil map 上面。原來我們用 var x map[string]int 建立 Map 的時候沒有初始化它，所以它會建立一個 nil map，而 nil map 不能使用鍵，所以導致這樣的錯誤，那初始化怎麼寫呢？

1
2
3


x := make(map[string]int)
x["key"] = 10
fmt.Println(x)

如果你只是要印出鍵的數值：

1

fmt.Println(x["key"])

當然 string 不是唯一的選項，你也可以用 int。

1
2
3


x := make(map[int]int)
x[1] = 10
fmt.Println(x[1])

這樣就可以使用數字當作鍵來用。

另外可以新增，但是要怎麼刪除呢？ Go 有內建函式可以使用：

1

delete(x, 1)

除了新增刪除，如果今天我想要知道 map 有多少元素呢？

我們之前介紹過得 len() 也可以用的喔，如果只是剛建立沒有給值會是 0 ，如果像是前面的 x[1] = 10 這樣賦予值就會變成 1，以此類推。

1

len(x)

如果鍵沒有宣告？

如果我們今天印出的鍵值沒有宣告，例如：

1
2
3
4
5


elements := make(map[string]string)
elements["H"] = "Hydrogen"
elements["He"] = "Helium"

fmt.Println(elements["Al"])

通常我們要印出不存在的，在編譯的時候會報錯，但是這邊你執行後你會發現 Map 不會。

那 Go 有沒有方法可以判斷它是否是空的呢？當然有的！

1
2


name, ok := elements["Al"]
fmt.Println(name, ok)

這樣會印出什麼呢？它會印出 false，因為他是空值，但是你會發現明明 map 就回傳兩個返回值，為什麼印出來只有 false？原因是 name 其實對應到 value，但是值是空值，所以就沒有印了，而 ok 是返回它有沒有值。

我們再來利用這個語法來做點進階的應用：

1
2
3


if name, ok := elements["Al"]; ok {
 fmt.Println(name, ok)
}

這裡的意思是說「Al 是否有值呢？如果有的話請印出」。

如果覺得前面初始化的太長了，你可以試試這種簡短的寫法：

1
2
3
4


elements := map[string]string{
 "H": "Hydrogen",
 "He": "Helium",
}

當然我們都知道 JSON 格式可以是巢狀的，Go 當然一定也可以囉！

但是要怎麼做呢？

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


func main() {
 elements := map[string]map[string]string{
 "H": map[string]string{
 "name":"Hydrogen",
 "state":"gas",
 },
 "He": map[string]string{
 "name":"Helium",
 "state":"gas",
 },
 }

 if el, ok := elements["He"]; ok {
 fmt.Println(el["name"], el["state"])
 }
}

Struct

Struct 是一個可以自定義型態的功能。

Struct 就是有點類似 OOP(物件導向) 的概念。比如說我今天想要建立一個型態"人"，那人有姓名和身高，這時候就可以使用 Struct。

1
2
3
4


type person struct {
 name
 height
}

實例化：

1

p := person{"Tony", 169}

{} 內的順序依定義 struct 的順序，或是可以指定項目初始化：

1

p := person{name: "Tony", height: 169}

如果想要存取 struct 裡面的內容，只要在後面加 . 就好了；比如說我想存取 person 的 name：

1

fmt.Println(person.name)

多重定義

比如說我的人比較多了，想要建立群組，裡面有群組名稱及人：

1
2
3
4
5
6
7
8
9


type person struct {
 name string
 height int
}

type group struct {
 name string
 person
}

實例化：

1

g := group{"LINE", person{name: "Emily", height: 158}}

這時候就算是 struct 裡面又包了 struct。

函式

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


package main

import "fmt"

func add(x int, y int) int {
 return x + y
}

func main() {
 fmt.Println(add(42, 13))
}

// 輸出結果：55

函數可以沒有參數或接受多個參數。

在這個例子中，“add” 接受兩個 int 類型的參數(注意類型在變數之後)。

return 代表傳回的數值為何？這裡表示傳回 x + y 也就是 42 + 13 ，所以結果會是 55。

當兩個或多個連續的函數命名參數是同一類型，則除了最後一個類型之外，其他都可以省略：

1

x int, y int

可以縮寫成：

1

x, y int

也就是說上面的程式碼可以改成：

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


package main

import "fmt"

func add(x, y int) int {
 return x + y
}

func main() {
 fmt.Println(add(42, 13))
}

// 輸出結果：55

多數值的返回

函數可以返回任意數量的返回值，這個函數返回了兩個字串：

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


package main

import "fmt"

func swap(x, y string) (string, string) {
 return y, x
}

func main() {
 a, b := swap("hello", "world")
 fmt.Println(a, b)
}

// 輸出結果：world hello

命名返回值

在 Go 中，函數可以返回多個「結果參數」，而不僅僅是一個值。它們可以像變數那樣命名和使用。

如果命名了返回值參數，一個沒有參數的 return 語句，會將當前的值作為返回值返回。

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


package main

import "fmt"

func split(sum int) (x, y int) {
 x = sum * 4 / 9
 y = sum - x
 return
}

func main() {
 fmt.Println(split(17))
}

// 輸出結果：7 10

以這個程式碼為例，sum int 表示宣告整數 sum，將參數 17 放入 sum 中，x, y int 宣告整數 x,y 在下面使用，由於 return 沒有設定返回值，這邊程式就將 x,y 都回傳了，所以結果會出現 7 10。

Goroutine

Go 很酷的特色 Goroutine，他類似於其他語言的 Thread，意思即一支程式同時進行好幾個小程式。

要使用 Goroutine 非常的簡單，只要一個字，一個很熟悉的字，「go」。

讓我們看看下面這個簡單的例子：

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


package main

import (
 "fmt"
)

func f(n int) {
 for i := 0; i < 10; i++ {
 fmt.Println(n, ":", i)
 }
}

func main() {
 go f(0)
}

你執行後你會發現什麼東西都沒有印出！

不是 Go 有問題，因為使用 goroutine 是平行處理的，所以在還沒開始印 n 之前，main 這個主要的函式已經結束了。

我們使用一下內建的 time 函式，讓 main 函式等一下，讓 goroutine 跑完。

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


package main

import (
 "fmt"
 "time"
)

func f(n int) {
 for i := 0; i < 10; i++ {
 fmt.Println(n, ":", i)
 }
}

func main() {
 go f(0)
 time.Sleep(time.Second * 1) // 暫停一秒鐘
}

你就可以看到印出 1 ~ 10 了。

WaitGroup

有鑑於剛剛背景 Thread 所執行的項目都還沒開始程式就結束了，WaitGroup 的功能即為等待這個 Group 的項目執行完再繼續進行。

首先，因為 WaitGroup 是包含在 package sync 裏頭的，所以需要引入一下：

1

import "sync"

宣告一個 WaitGroup 變數：

1

var wg sync.WaitGroup

當 WaitGroup 裏頭的空間等於 0 的時候就會繼續進行主程式，下面會介紹一些操作方式。

Add()

增加 WaitGroup 裡可以容納個 Thread。

1

wg.Add(2)

Wait()

等待 WaitGroup 裡的 Thread 執行完畢再繼續進行。

1

wg.Wait()

Done() 或是 Add(-1)

使 WaitGroup 的容量 - 1。

1
2
3


wg.Done()
// or
// wg.Add(-1)

有了這些基本操作後，我們可以改良剛剛的程式：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


package main

import (
 "fmt"
 "sync"
)

func foo() {
 for i := 1; i <= 10; i++ {
 fmt.Println("Foo: ", i)
 }
 wg.Done()
}

func bar() {
 for i := 1; i <= 10; i++ {
 fmt.Println("Foo: ", i)
 }
 wg.Done()
}

var wg sync.WaitGroup

func main() {
 wg.Add(2)
 go foo()
 go bar()
 wg.Wait()
}

Sleep

讓程式暫停。

這個功能是放在 package time 裡面的，所以又要引入了。

1
2
3


import "time"

time.Sleep(5 * time.Millisecond)

這個範例是暫停五秒鐘。

Race condition

有了 go 這個好用的東西可以分成好幾個 Thread 同時進行，那就有可能會有同時搶奪資源的情況。比方說兩個 Thread 同時都要讀取並修改同一個變數，拿一個情境題來舉例：

如果今天同一個銀行的網路銀行有提款功能，而有人同時在兩台電腦都登入了要提款，兩台電腦都送出了提領 1000 的請求會怎樣呢？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


package main

import (
 "fmt"
 "sync"
 "time"
)

func withdraw() {
 balance := money
 time.Sleep(3000 * time.Millisecond)
 balance -= 1000
 money = balance
 fmt.Println("After withdrawing $1000, balace: ", money)
 wg.Done()
}

var wg sync.WaitGroup
var money int = 1500

func main() {
 fmt.Println("We have $1500")
 wg.Add(2)
 go withdraw() // first withdraw
 go withdraw() // second withdraw
 wg.Wait()
}

到最後大家會發現 1500 提領了兩次 1000 還剩 500？為甚麼呢？

因為在第一次提領的時候，系統先讀取餘額為 1500 元，同時第二台電腦也登入了餘額也是顯示為 1500 元，這時候就是因為兩邊同時搶著讀取餘額的原因，所以第一次提領 1000 元時回報給系統"餘額剩 500 元"，第二台領了 1000 元也回報系統"餘額剩 500 元"。

不過 Golang 的編譯器可以檢查是不是有 race condition，只要在平常執行 go run 後面加上參數 -race 即可。

1

go run -race main.go

Mutex、Lock()、Unlock()

那要如何避免這樣的情況發生呢？Mutex 可以解決上面這樣的問題。這個也是在 package sync 裏頭。

1
2
3
4


import "sync"

// 宣告一個 Mutex 變數
var mu sync.Mutex

當使用 mu.Lock() 的時候，之後所用到的變數就會上鎖，只有在使用中的 Thread 可以存取，其他都需要等到釋放後才能存取。

1

mu.Lock()

釋放 lock 變數：

1

mu.Unlock()

所以我可以將剛剛 withdraw() 改良：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


func withdraw() {
 mu.Lock()
 balance := money
 time.Sleep(3000 * time.Millisecond)
 balance -= 1000
 money = balance
 mu.Unlock()
 fmt.Println("After withdrawing $1000, balace: ", money)
 wg.Done()
}

因為 Lock() 和 Unlock() 通常都會一起出現，所以有些人會這樣寫：

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


func withdraw() {
 {
 mu.Lock()
 balance := money
 time.Sleep(3000 * time.Millisecond)
 balance -= 1000
 money = balance
 mu.Unlock()
 }
 fmt.Println("After withdrawing $1000, balace: ", money)
 wg.Done()
}

全部的程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


package main

import (
 "fmt"
 "sync"
 "time"
)

func withdraw() {
 mu.Lock()
 balance := money
 time.Sleep(3000 * time.Millisecond)
 balance -= 1000
 money = balance
 mu.Unlock()
 fmt.Println("After withdrawing $1000, balace: ", money)
 wg.Done()
}

var wg sync.WaitGroup
var money int = 1500
var mu sync.Mutex

func main() {
 fmt.Println("We have $1500")
 wg.Add(2)
 go withdraw() // first withdraw
 go withdraw() // second withdraw
 wg.Wait()
}

如此一來就解決 race condition 的問題了！

Channel

Channel 也是 Golang 非常特別的特色。

要建立一個 Channel 很簡單，make(chan string) 這樣就可以了。

1

c := make(chan int)

Send

要將東西送到 channel 就把資料指向 channel 變數就好：

1

c <- 5

Receive

就將箭頭往外指。

1

x := <-c

Close()

當 Channel 被 Close 之後，就只能讀取不能寫入了：

1

close(c)

當變數傳遞

channel 其實就是一個變數，在 function 裡是可以傳入傳出的。

1
2
3
4
5
6
7
8
9


// 傳入
func foo(c chan int) {
 // do something
}

// 傳出
func foo() {
 // do something
}

這邊簡單建立了一個 message 的 channel，可以傳輸字串，然後用 go 來 call goroutine 執行函式，然後 msg 負責接收 messages 的傳輸資料，goroutine 執行的函式裡面傳 “ping” 到 messages 這個 channel 裡面，再由 message 傳給 msg 變數印出。

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


package main

import "fmt"

func main() {

 messages := make(chan string)

 go func() { messages <- "ping" }()

 msg := <-messages
 fmt.Println(msg)
}

再講個範例可能會比較容易懂：

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


package main

import (
 "fmt"
)

func main() {
 c := make(chan int)

 // 在 goroutine 之下執行這個 function
 go func() {
 for i := 0; i < 10; i++ {
 c <- i
 }
 close(c)
 }()

 for n := range c {
 fmt.Println(n)
 }
}

在這裡 go func() 將 i 傳入 c，下面的 for 會等待 c 有什麼時候有新東西，一有新東西他就會 print 出來！

很簡單直覺對吧！透過這個方法就可以簡單的讓 Goroutine 可以溝通！

Select

Channel 有一個類似 Switch 的流程控制「Select」，它只能應用於 Channel 讓我們一起來看看。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


package main

import "time"
import "fmt"

func main() {

 c1 := make(chan string)
 c2 := make(chan string)

 go func() {
 time.Sleep(time.Second * 1)
 c1 <- "one"
 }()
 go func() {
 time.Sleep(time.Second * 2)
 c2 <- "two"
 }()

 for i := 0; i < 2; i++ {
 select {
 case msg1 := <-c1:
 fmt.Println("received", msg1)
 case msg2 := <-c2:
 fmt.Println("received", msg2)
 }
 }
}

這邊用 go 建立兩個 goroutine 分別將 one 和 two 傳給 c1、c2，下面主函式的 for 回會將 1、2 透過 select 流程控制來接收 channel 的訊息再印出。

是不是很簡單，這樣子就可以更有效的控制 channel 了。

錯誤處理

有時候程式的錯誤是在預料之內的，防範也防範不了，但總不能因為一個錯誤就讓整支程式停下來吧？因此就需要 Error Handling。如果有學過其他程式語言可能會覺得用法跟 try…cache 有點不同。

如何使用？

其實滿簡單的，只要知道所使用的 function 有回傳 error 就可以使用，通常在使用手冊上會看到，以 HTTP GET 來說：

1
2
3
4
5


resp, err := http.Get("http://example.com/")
// ...
resp, err := http.Post("http://example.com/upload", "image/jpeg", &buf)
// ...
resp, err := http.PostForm("http://example.com/form", url.Values{})

官方使用手冊就有回傳 err 的參數，意思就是錯誤內容會傳到 err 內。

那就 HTTP GET 來舉例，如果有 Get 到東西的話就會存到 resp，沒有的話就會把錯誤訊息存到 err：

1
2
3
4


resp, err := http.Get("http://ithelp.ithome.com.tw/")
if err != nil {
 fmt.Println(err)
}

錯誤內容 err 是可以直接 Print 出來的！

Fatalln()

Fatalln() 這個 function 就是兩行 code 的組合，這個 function 是包在 “log” 中的。

1
2
3
4
5


import "log"

// Print 出錯誤內容後結束程式
fmt.Println(err)
os.Exit(1)

淺談 package

package 可以將一些常常會用的程式碼獨自建立一個檔案，所以在同一個資料夾內可以有好幾個 package 檔案。某方面來說也是便於管理程式碼。

package 的有效範圍

在同一個 package 中可以把這些檔案看作是在同一個檔案內。

比如說 package person 中第一個檔案 personName.go：

personName.go

1
2
3


package person

var MyName = "Wayne"

package person 中第二個檔案 sayHelloTo.go：

sayHelloTo.go

1
2
3
4
5
6


package person

func SayHelloTo(s string) string {
 str := "Hello " + s + "!"
 return str
}

這兩個檔案都在 package person 中，所以可以把它視為這樣：

1
2
3
4
5
6
7
8


package person

var MyName = "Wayne"

func SayHelloTo(s string) string {
 str := "Hello " + s + "!"
 return str
}

該如何使用 package？

只要在程式一開始 import 就行了，常用的 fmt 就是一個標準 package。

要注意的是路徑是從 $GOPATH/src/ 為起始目錄的相對路徑。

1
2
3
4


import {
 fmt
 "github.com/xxx"
}

大小寫的差異

在 package 中變數或函式的命名開頭字元大小寫是有差異的：

大寫開頭：在 package 之外可見，稱作 exported
小寫開頭：僅限於 package 內使用，稱作 unexported

注意：這概念跟其他語言的 public、private 很像，但是在 GO 的領域通常還是講 exported、unexported。

舉個例子來說：

alien.go

1
2
3
4


package alien

// name start with capital will be exported in another file
var AlienName = "Wayne"

這邊的 AlienName 大寫開頭 - exported

所以在其他檔案中只要 import 就可以使用：

main.go

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


package main

import (
 "fmt"
 "alien"
)

func main() {
 fmt.Println(alien.AlienName)
}

如果是 function 也是一樣：

person.go

1
2
3
4
5
6


package person

func SayHelloTo(s string) string {
 str := "Hello " + s + "!"
 return str
}

main.go

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


package main

import (
 "fmt"
 "person"
)

func main() {
 fmt.Println(person.SayHelloTo("Wayne"))
}

變數的可視範圍

變數的宣告其實也是門學問，很多新手會想說"全部都宣告全域變數就好了啊"，但為了安全性、可讀性以及有效的執行最小權限原則(即為要用到的變數才看的到，用不到的就不需要看到)，這裡就仔細地跟大家講解。

package

同一個 package 可以視為程式碼都在同一個檔案內。

括號內的變數 `{}`

括號內的變數只要是同樣在括號內都能使用，括號外則不行。

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


package main

import "fmt"

func main() {
 x := 1
 foo() // 錯誤，因為 x 屬於 main 中的變數
}

func foo() {
 fmt.Println(x)
}

全域變數

這個比較猛，意思就是在程式中都能讀到他，每個地方的操作都會改變他的值。

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


package main

import "fmt"

var x = 0

func xPlus() {
 x++
}

func main() {
 x++ // x = 1
 xPuls() // x = 2
}

順序

宣告的順序當然也很重要，宣告之後才可用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


package main

import "fmt"

func main() {
 x := 5
 fmt.Println(x)
 fmt.Println(y) // 這樣是找不到 y 的
 y := 10
}

變數和函式名稱相同

這樣用是不會出錯，但是不建議，日後 debug 可能造成麻煩。

Pointer

將變數直接指向記憶體位置就叫做 Pointer，要修改內容就直接到該記憶體位置修改。

基本操作

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


package main

import "fmt"

func main() {
 var p *int // 宣告 p 是一個 int 的指標，但此時他要指向哪還不知道
 a := 10 // a 佔用了一個記憶體空間

 p = &a // 將 p 指到 a 的記憶體位置

 fmt.Println(p) // p 所指到的記憶體位置
 fmt.Println(*p) // * 代表顯示該記憶體位置的值
}

function 的運作

有了 Pointer 的概念，就比較好理解 function 是怎麼傳值的。

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


package main

import "fmt"

func foo(x int) {
 fmt.Println(&x) // function 內 x 的記憶體位置
}

func main() {
 a := 10
 fmt.Println(&a) // main 裡面 a 的記憶體位置
 foo(a)
}

結果會看到兩個記憶體位置是不一樣的。代表在 function 傳值過去後，function 複製該值到另一個空間來操作，對於原本 main 裡面的值是不會影響的。

function 傳指標

當然，想要在傳指標到 function 內操作也是可以的。

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


package main

import "fmt"

func foo(x *int) {
 fmt.Println(x) // function 內 x 的記憶體位置
}

func main() {
 a := 10
 fmt.Println(&a) // main 裡面 a 的記憶體位置
 foo(&a)
}

可以看到傳指標過去後，兩邊操作的是同一個東西。

測試

寫了這麼多小程式，甚至也自己打包了成 Package 了，那 Go 有提供自動化測試的方法嗎？測試程式是否正常？讓我們一起來看看 Go 的測試方法。

首先我們先寫一個簡單的 Package 來看看：

testing.go

1
2
3
4
5
6
7
8
9


package math

func Average(xs []float64) float64 {
 total := float64(0)
 for _, x := range xs {
 total += x
 }
 return total / float64(len(xs))
}

這個很簡單，這裡簡單建立一個叫 math 的 Package，這是一個簡單算平均的 Package，將讀取進來的浮點數陣列一個一個用 for 讀取進來累加，然後在返回總和除總數的結果。

main.go

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


package math

import "testing"

func TestAverage(t *testing.T) {
 var v float64
 v = Average([]float64{1,2})
 if v != 1.5 {
 t.Error("Expected 1.5, got", v)
 }
}

然後我們來寫另外一個檔案，這個是測試的寫法，建議檔名取 math_test.go，因為前面的 Package 取名叫做 math.go。

一開始先宣告測試用的變數 t，然後引用 Average 函數將 1、2 拿進去計算，如果答案不對利用 t 返回錯誤，使用起來相當的直覺。

操作檔案

讓我們先看看下面這個簡單的範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


package main

import (
 "fmt"
 "os"
)

func main() {
 // 首先我們先利用內建的函式庫 os ，利用 open 方法來開起檔案：
 // file 為開啟後的檔案，用來做後續的操作，err 這個是當開啟失敗的時候返回的錯誤訊息
 file, err := os.Open("test.txt")
 if err != nil {
 return
 }
 // 這一行是使用 defer 來確保檔案有被正確的關閉用的
 defer file.Close()

 stat, err := file.Stat()
 if err != nil {
 return
 }

 bs := make([]byte, stat.Size())
 _, err = file.Read(bs) // 一般情況下會是 nil，如果你不需要 error 訊息你可以使用佔位符來取代

 // 這邊則是說如果 err 不是 nil 那就返回，當然你也可以輸入一些你要設定的除錯訊息
 if err != nil {
 return
 }

 str := string(bs)
 fmt.Println(str)
}

時間

時間是一般開發者常常會用到的功能，Go 已經內建得很齊全了，我們一起來看看吧！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


package main

import (
 "fmt"
 "time"
)

func main() {
 p := fmt.Println

 // 獲取目前的時間
 now := time.Now()
 p(now)

 // 獲取自訂時間
 then := time.Date(
 2009, 11, 17, 20, 34, 58, 651387237, time.UTC)
 p(then)

 p(then.Year())
 p(then.Month())
 p(then.Day())
 p(then.Hour())
 p(then.Minute())
 p(then.Second())
 p(then.Nanosecond())
 p(then.Location())

 p(then.Weekday())

 p(then.Before(now))
 p(then.After(now))
 p(then.Equal(now))

 diff := now.Sub(then)
 p(diff)

 p(diff.Hours())
 p(diff.Minutes())
 p(diff.Seconds())
 p(diff.Nanoseconds())

 p(then.Add(diff))
 p(then.Add(-diff))
}

如果要計算時間差呢？只要使用 Sub 方法就可以計算囉！詳細 time 用法可參考網址。

操作字串

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


package main

import (
 "fmt"
 "strings"
)

func main() {
 fmt.Println(
 // true
 strings.Contains("test", "es"),

 // 2
 strings.Count("test", "t"),

 // true
 strings.HasPrefix("test", "te"),

 // true
 strings.HasSuffix("test", "st"),

 // 1
 strings.Index("test", "e"),

 // "a-b"
 strings.Join([]string{"a", "b"}, "-"),

 // == "aaaaa"
 strings.Repeat("a", 5),

 // "bbaa"
 strings.Replace("aaaa", "a", "b", 2),

 // []string{"a","b","c","d","e"}
 strings.Split("a-b-c-d-e", "-"),

 // "test"
 strings.ToLower("TEST"),

 // "TEST"
 strings.ToUpper("test"),
 )
}

Contains：藉由 Contains 可以知道字串中是否包涵哪些字串
Count：用來計算一個字串中的某個字元有幾個
HasPrefix、HasSuffix：用來確認字頭字尾始否有包函某些字串
Index：用來計算指定的字元是字串中的第幾個元素
Join：用來合併成字串，而中間可以嵌入指定的字元
Repeat：重複字串
Split：利用特定字元來拆開字串，拆開的字會放進陣列
ToLower：用來把字串都換成小寫，當然他只有英文XD
ToUpper：用來把字串都換成大寫，當然他只有英文XD

Hash 雜湊

雜湊 (Hash) 是現在很常見的應用，可以用來驗證檔案的正確性、加密等。

範例：

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


package main

import (
 "crypto/sha1"
 "fmt"
 "hash/crc32"
)

func main() {
 h := crc32.NewIEEE()
 h.Write([]byte("test"))
 v := h.Sum32()
 fmt.Println(v)

 i := sha1.New()
 h.Write([]byte("test"))
 bs := i.Sum([]byte{})
 fmt.Println(bs)
}

這邊簡單舉了一般的 Hash 跟 Crypto 的函式用法，當然還有很多種類可以自己看。

這邊 crc32 的部份用 NewIEEE 方法來建立 checksum，然後利用 write 這個內建的 interface 來寫入要算的值，這時候 h 已經是我們要的 Hash 值了，後面這邊在利用 sum32 來返回成我們可以閱讀的 uint32 的值。

sha1 的部份基本上很類似，應該不用多說，馬上可以看懂。

詳細請參考：

hash
crypto

List

有上過資料結構的人都知道 List，Go 有實作喔！不過他不是基礎型別，需要特別引入，讓我們一起來看看。

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


package main

import (
 "container/list"
 "fmt"
)

func main() {
 var x list.List
 x.PushBack(1)
 x.PushBack(2)
 x.PushBack(3)

 for e := x.Front(); e != nil; e = e.Next() {
 fmt.Println(e.Value.(int))
 }
}

先是建立 List x 然後利用 PushBack 函式從後面填入，最後利用 For 迴圈將一個一個取出。

除了 List 外還有 Heap 喔！有興趣的可以參考看看。

詳細請參考：

List
Heap

GET / POST

在錯誤處理的時候有提到 HTTP GET、POST，這邊再來說明一下。

舉個例子：

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


func httpGet() {
 resp, err := http.Get("https://tw.yahoo.com/")
 if err != nil {
 // handle error
 }

 defer resp.Body.Close()
 body, err := ioutil.ReadAll(resp.Body)
 if err != nil {
 // handle error
 }

 fmt.Println(string(body))
}

你可以看到，這是一個 function，我們利用 http.get 的方法來將 request 送給 Yahoo，Get 方法會返回兩個數值，一個是 response，另一個是 error，後面利用 defer 來確定是否有收到，然後將 response 裡的 Body 也就是網頁內容讀取出來，然後轉成字串印出。

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


func httpPost() {
 resp, err := http.Post("https://tw.yahoo.com/",
 "application/x-www-form-urlencoded",
 strings.NewReader("name=test"))
 if err != nil {
 fmt.Println(err)
 }

 defer resp.Body.Close()
 body, err := ioutil.ReadAll(resp.Body)
 if err != nil {
 // handle error
 }

 fmt.Println(string(body))
}

POST 其實大部份就跟 GET 相同，但是不一樣的是 POST 通常傳的資料會比較多，所以這邊可以在後面的參數加上你要傳給伺服器的參數，另外需要特別注意的是，必須使用 application/x-www-form-urlencoded 才能正確的傳值喔！

Martini

我們來玩玩 Framework 吧！

官方網站： http://martini.codegangsta.io/
Repo： https://github.com/go-martini/martini

安裝 Martini

只要用 go get 就可以在本地引入 lib 囉！

1

go get github.com/go-martini/martini

然後我們就可以開始使用官方的 simple code：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


package main

import "github.com/go-martini/martini"

func main() {
 m := martini.Classic()
 m.Get("/", func() string {
 return "Hello world!"
 })
 m.Run()
}

這是一個簡單利用 Martini 來啟動 Server 的範例程式碼，首先引入 Martini，後面宣告 martini 為變數 m，後面在使用 router 來解析網址「/」，再來我們再跟目錄網只要做什麼事情呢？就是返回 “Hello world”！規則都設定完了，那我們就用 Run 來啟動伺服器。

那我們的 Code 都寫完了，那我們就用 go run 來執行它，例如你的 code 檔名取叫 server.go，那你只要使用：

1

go run server.go

就可以執行囉，接下來你就可以開瀏覽器來看看是否有顯示「Hello world!」，網址請打 localhost:3000，3000 為 Martini 的預設 port。

Router、Template

簡單使用 Martini 的 Router 和 Template 做網站開發！

一開始我們會需要另外一個 lib，因為 Martini 的 lib 只有基本伺服器的工具，沒有包函 View Render，所以我們會需要使用 View Render 來操作 Template。

所以我們先使用 go get 來下載：

1

go get github.com/martini-contrib/render

這樣我們就可以引用 lib 了！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


package main

import (
 "github.com/go-martini/martini"
 "github.com/martini-contrib/render"
)

func main() {
 m := martini.Classic()

 m.Get("/hello/:name", func(params martini.Params) string {
 return "Hello " + params["name"]
 })

 m.Use(render.Renderer(render.Options{
 Layout: "layout",
 }))

 type Member struct {
 Id int
 Name string
 Sex string
 }
 member := Member{
 Id: 1, Name: "Negaihoshi", Sex: "Male",
 }

 m.Get("/", func(r render.Render) {
 r.HTML(200, "hello", member)
 })

 m.Run()
}

首先 m.Get 是使用 Get 方法來獲取 response，如同前面的方法，不過稍微不同的是我們這邊稍微做一點進階的操作，我們在 router 的 rule 這邊打上 /hello/:name，這個是什麼意思呢？意思是網址 /hello/ 下網站會看 :name 這個變數來做操作，所以下面就要寫我們要做什麼？而這邊我們返回 "Hello " + params["name"] 而 params 這邊就是用來解析引數的語法。

如果我今天輸入網址 /hello/:Negaihoshi，那我網站就會出現「Hello Negaihoshi」。

下面這邊我們利用 Use 方法來設定 Options，而這邊設定的是我們要使用 layout，並且指定 layout 的位置，而我們這邊寫 “layout”，指的是 templates/layout.tmpl 這個檔案。

往後面看這邊就簡單了，用了前面學過得 stuct 來存放資料，並且使用 Get 方法，當有人瀏覽根目錄的時候，將 member 傳入 hello.tmpl 檔。

1
2
3


<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
{{ yield }}

這邊其實很簡單就是使用 yield 來引入入其他的 tmpl 檔。

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


<table class="table table-hover">
 <thead>
 <tr>
 <td>ID</td>
 <td>Name</td>
 <td>Sex</td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>{{ .Id }}</td>
 <td>{{ .Name }}</td>
 <td>{{ .Sex }}</td>
 </tr>
 </tbody>
</table>

這邊則是印出我們要的數值，而需要用「.」來操作。

資料庫

前面學會了怎麼簡易的使用 martini，這邊我們來使用看看資料庫。

首先我們要安裝 mysql 的驅動程式套件，我們使用 GitHub 上比較知名的的項目來做。

在終端機輸入：

1

go get github.com/go-sql-driver/mysql

這樣就可以使用囉！

當然，我們需要引入它才能使用：

1
2
3
4


import "database/sql"
import \_ "github.com/go-sql-driver/mysql"

db, err := sql.Open("mysql", "user:password@/dbname")

user 和 password 跟 dbname 就要換成你要連接的資料庫的資料囉！

資料都輸入正確就可以連接資料庫了。

記得加入很重要的 error，這樣連接失敗才能正確的回報哦！

1
2
3


if err != nil {
 panic(err.Error())
}

如果有仔細看範例，你可以看到這一句：

1

defer db.Close()

他的意思是說要確保它可以正確的被關閉。

學會連接資料庫了，那要怎麼操作呢？我們來看一個簡單的例子，這邊是官方的範例：

1
2
3
4
5


stmtIns, err := db.Prepare("INSERT INTO squareNum VALUES( ?, ? )") // ? = placeholder
if err != nil {
 panic(err.Error()) // proper error handling instead of panic in your app
}
defer stmtIns.Close() // Close the statement when we leave main() / the program terminates

這邊使用 Prepare 來使用 sql 指令，將值傳給 stmtIns ，操作簡單直覺！

以上，這篇先簡單介紹 Golang，待之後專案使用到時，再來繼續深入研究！

在 Windows 平台打造完美的 Go 開發環境 (WSL 2)

Thu, 09 Feb 2023 00:00:00 +0000

自從 Windows 升級到 Windows 10 Version 2004 之後，因為可以採用效能大幅提昇的 WSL 2 執行環境，像是 .NET Core、Golang 與 Docker 都會全部跑在 WSL 2 的 Linux 下。今天這篇文章，我將介紹如何在 Windows 平台打造完美的 Golang 開發環境，不但可以讓你享受 Linux 平台執行時無比的順暢，更能享受 Windows 平台絕佳的 VSCode 開發體驗。

使用 WSL 在 Windows 上安裝 Linux

開發人員可以在 Windows 計算機上同時訪問 Windows 和 Linux 的強大功能。通過適用於 Linux 的 Windows 子系統(WSL)，開發人員可以安裝 Linux 發行版（例如Ubuntu、OpenSUSE、Kali、Debian、Arch Linux 等），並直接在 Windows 上使用 Linux 應用程序、實用程序和 Bash 命令行工具，不用進行任何修改，也無需承擔傳統虛擬機或雙啟動設置的費用。

安裝 WSL 命令

現在，可以使用單個命令安裝運行 WSL 所需的一切內容。在管理員模式下打開 PowerShell 或 Windows 命令提示符，方法是右鍵單擊並選擇"以管理員身份運行"，輸入 wsl --install 命令，然後重啟電腦。

如果你運行的是舊版，或只是不想使用 install 命令並希望獲得分步指引，請參閱舊版 WSL 手動安裝步驟。

WSL 安裝 Ubuntu

WSL 安裝指令：

1

wsl --install -d <DistroName>

在終端機使用以下指令安裝 Linux Ubuntu：

1

wsl --install -d Ubuntu

設置 Linux 用戶名稱與密碼

使用 WSL 安裝 Linux 發行版的過程完成後，系統將要求你為 Linux 發行版創建"用戶名"和"密碼"。

此用戶名和密碼特定於安裝的每個單獨的 Linux 分發版，與 Windows 用戶名無關。
請注意，輸入密碼時，屏幕上不會顯示任何內容。這稱為盲目鍵入。不會看到正在鍵入的內容，這完全正常。
創建用戶名和密碼後，該帳戶將是分發版的默認用戶，並將在啟動時自動登錄。
此帳戶將被視為 Linux 管理員，能夠運行sudo(Super User Do) 管理命令。
在 WSL 上運行的每個 Linux 發行版都有其自己的 Linux 用戶帳戶和密碼。每當添加分發版、重新安裝或重置時，都必須配置一個 Linux 用戶帳戶。

BONUS：設置 root 密碼

在 WSL 的 Ubuntu，輸入以下指令設定 root 密碼：

1

sudo passwd

測試 root 密碼：

1
2
3
4
5
6
7
8


su -

# 輸入剛剛設定的 root 密碼

# 完成登入

# 退出 root
exit

安裝 Go 版本管理器 (Go Version Manager)

Go Version Manager 簡稱 gvm，專門用來管理 Go 的執行環境，可以讓你任意切換 Go 的 Runtime 版本，又不會搞亂你的作業系統，這可說是兩全其美！

以下兩行命令，就可以輕鬆裝好 gvm 工具：

1
2


bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)
source ~/.gvm/scripts/gvm

安裝 Go 執行環境的門檻已經變的超低，尤其是安裝在 Linux / macOS 底下更是如此，官方已經移除了對各家 Linux Distro 的安裝套件支援，一份 tarball 解壓縮，環境變數 PATH 設定好就可以立刻開始使用，沒那麼多奇奇怪怪的套件管理器混淆 Linux 初學者的地方。

我認為安裝 gvm 對於打造 Go 開發環境來說，還是有好處的。至少安裝完成後的 Go 執行環境非常乾淨，各種複雜的 GO____ 環境變數，全部交由 gvm 來管理。不想要 Go 或 gvm 的時候，只要以下兩行就可以清除乾淨：

1
2


chmod u+w -R ~/.gvm/
gvm implode

安裝 Go 執行環境

先安裝 gvm 所需的必要套件

因為 gvm 可能會用到建置下個版本的 Go 執行環境，所以建議你安裝一些建置工具。

如果你採用 Ubuntu/Debian 系統，請安裝以下套件：

1

sudo apt-get install binutils bison gcc make build-essential -y

如果有遇到不能執行上述安裝的情況，請用以下命令修復，修復後再重新安裝一次即可！

1
2


sudo sed -i -r -e 's/^(set -e)$/#\1/' /var/lib/dpkg/info/libc6\:amd64.postinst
sudo apt --fix-broken install -y

如果跳出 Colud not find bison、binutils、gcc、make，手動一一安裝吧！

1
2
3
4


sudo apt-get install bison
sudo apt-get install binutils
sudo apt-get install gcc
sudo apt-get install make

如果有遇到安裝 gcc 時報 404 Not Found 的錯誤，請先升級你的 apt 後再進行安裝：

錯誤訊息：

1
2
3
4
5


E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/b/binutils/libctf0_2.34-6ubuntu1.1_amd64.deb 404 Not Found [IP: 91.189.88.152 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/b/binutils/binutils-x86-64-linux-gnu_2.34-6ubuntu1.1_amd64.deb 404 Not Found [IP: 91.189.88.152 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/b/binutils/binutils_2.34-6ubuntu1.1_amd64.deb 404 Not Found [IP: 91.189.88.152 80]
E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/l/linux/linux-libc-dev_5.4.0-81.91_amd64.deb 404 Not Found [IP: 91.189.88.152 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?

升級 apt 並重新安裝 gcc：

1
2
3


sudo apt update
sudo apt upgrade
sudo apt install gcc -y

如果你採用 RedHat/CentOS 系統，請安裝以下套件：

1
2
3
4
5
6


sudo yum install curl
sudo yum install git
sudo yum install make
sudo yum install bison
sudo yum install gcc
sudo yum install glibc-devel

安裝完成後查詢 gvm 的版本資訊：

1
2


wayne@Wayne-Desktop:~$ gvm version
Go Version Manager v1.0.22 installed at /home/wayne/.gvm

列出目前 gvm 已安裝的所有 Go 版本

1

gvm listall

撰文當下的回應內容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276


gvm gos (available)

 go1
 go1.0.1
 go1.0.2
 go1.0.3
 go1.1
 go1.1rc2
 go1.1rc3
 go1.1.1
 go1.1.2
 go1.2
 go1.2rc2
 go1.2rc3
 go1.2rc4
 go1.2rc5
 go1.2.1
 go1.2.2
 go1.3
 go1.3beta1
 go1.3beta2
 go1.3rc1
 go1.3rc2
 go1.3.1
 go1.3.2
 go1.3.3
 go1.4
 go1.4beta1
 go1.4rc1
 go1.4rc2
 go1.4.1
 go1.4.2
 go1.4.3
 go1.5
 go1.5beta1
 go1.5beta2
 go1.5beta3
 go1.5rc1
 go1.5.1
 go1.5.2
 go1.5.3
 go1.5.4
 go1.6
 go1.6beta1
 go1.6beta2
 go1.6rc1
 go1.6rc2
 go1.6.1
 go1.6.2
 go1.6.3
 go1.6.4
 go1.7
 go1.7beta1
 go1.7beta2
 go1.7rc1
 go1.7rc2
 go1.7rc3
 go1.7rc4
 go1.7rc5
 go1.7rc6
 go1.7.1
 go1.7.2
 go1.7.3
 go1.7.4
 go1.7.5
 go1.7.6
 go1.8
 go1.8beta1
 go1.8beta2
 go1.8rc1
 go1.8rc2
 go1.8rc3
 go1.8.1
 go1.8.2
 go1.8.3
 go1.8.4
 go1.8.5
 go1.8.5rc4
 go1.8.5rc5
 go1.8.6
 go1.8.7
 go1.9
 go1.9beta1
 go1.9beta2
 go1.9rc1
 go1.9rc2
 go1.9.1
 go1.9.2
 go1.9.3
 go1.9.4
 go1.9.5
 go1.9.6
 go1.9.7
 go1.10
 go1.10beta1
 go1.10beta2
 go1.10rc1
 go1.10rc2
 go1.10.1
 go1.10.2
 go1.10.3
 go1.10.4
 go1.10.5
 go1.10.6
 go1.10.7
 go1.10.8
 go1.11
 go1.11beta1
 go1.11beta2
 go1.11beta3
 go1.11rc1
 go1.11rc2
 go1.11.1
 go1.11.2
 go1.11.3
 go1.11.4
 go1.11.5
 go1.11.6
 go1.11.7
 go1.11.8
 go1.11.9
 go1.11.10
 go1.11.11
 go1.11.12
 go1.11.13
 go1.12
 go1.12beta1
 go1.12beta2
 go1.12rc1
 go1.12.1
 go1.12.2
 go1.12.3
 go1.12.4
 go1.12.5
 go1.12.6
 go1.12.7
 go1.12.8
 go1.12.9
 go1.12.10
 go1.12.11
 go1.12.12
 go1.12.13
 go1.12.14
 go1.12.15
 go1.12.16
 go1.12.17
 go1.13
 go1.13beta1
 go1.13rc1
 go1.13rc2
 go1.13.1
 go1.13.2
 go1.13.3
 go1.13.4
 go1.13.5
 go1.13.6
 go1.13.7
 go1.13.8
 go1.13.9
 go1.13.10
 go1.13.11
 go1.13.12
 go1.13.13
 go1.13.14
 go1.13.15
 go1.14
 go1.14beta1
 go1.14rc1
 go1.14.1
 go1.14.2
 go1.14.3
 go1.14.4
 go1.14.5
 go1.14.6
 go1.14.7
 go1.14.8
 go1.14.9
 go1.14.10
 go1.14.11
 go1.14.12
 go1.14.13
 go1.14.14
 go1.14.15
 go1.15
 go1.15beta1
 go1.15rc1
 go1.15rc2
 go1.15.1
 go1.15.2
 go1.15.3
 go1.15.4
 go1.15.5
 go1.15.6
 go1.15.7
 go1.15.8
 go1.15.9
 go1.15.10
 go1.15.11
 go1.15.12
 go1.15.13
 go1.15.14
 go1.15.15
 go1.16
 go1.16beta1
 go1.16rc1
 go1.16.1
 go1.16.2
 go1.16.3
 go1.16.4
 go1.16.5
 go1.16.6
 go1.16.7
 go1.16.8
 go1.16.9
 go1.16.10
 go1.16.11
 go1.16.12
 go1.16.13
 go1.16.14
 go1.16.15
 go1.17
 go1.17beta1
 go1.17rc1
 go1.17rc2
 go1.17.1
 go1.17.2
 go1.17.3
 go1.17.4
 go1.17.5
 go1.17.6
 go1.17.7
 go1.17.8
 go1.17.9
 go1.17.10
 go1.17.11
 go1.17.12
 go1.17.13
 go1.18
 go1.18beta1
 go1.18beta2
 go1.18rc1
 go1.18.1
 go1.18.2
 go1.18.3
 go1.18.4
 go1.18.5
 go1.18.6
 go1.18.7
 go1.18.8
 go1.18.9
 go1.18.10
 go1.19
 go1.19beta1
 go1.19rc1
 go1.19rc2
 go1.19.1
 go1.19.2
 go1.19.3
 go1.19.4
 go1.19.5
 go1.20
 go1.20rc1
 go1.20rc2
 go1.20rc3
 release.r56
 release.r57
 release.r58
 release.r59
 release.r60
 release.r57.1
 release.r57.2
 release.r58.1
 release.r58.2
 release.r60.1
 release.r60.2
 release.r60.3

安裝 go1.20 版本

1

gvm install go1.20 --binary

列出目前 gvm 已安裝的所有 Go 版本

1

gvm list

設定目前要用的 Go 版本（並設定為預設版本）

1

gvm use go1.20 --default

確認目前執行的 Go 版本

1

go version

BONUS(一)：管理 Gopath 環境

gvm 提供了一个比較簡單的工具 gvm pkgset 可以創建使用 GOPATH 環境：

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


gvm pkgset

# * http://github.com/moovweb/gvm
# == Description
# GVM pkgset is used to manage various Go packages
# == Usage
# gvm pkgset Command
# == Command
# create - create a new package set
# delete - delete a package set
# use - select where gb and goinstall target and link
# empty - remove all code and compiled binaries from package set
# list - list installed go packages

BONUS(二)：卸載指定 Go 版本

1

gvm uninstall go1.13

安裝 VSCode 需要的 go modules 與相關工具

若要從 VSCode 自動開啟網頁，就必須安裝 xdg-utils 套件

1

sudo apt install xdg-utils -y

以下是 Go 擴充套件需要的 go modules

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


go get github.com/sqs/goreturns
go get github.com/mdempsky/gocode
go get github.com/uudashr/gopkgs/v2/cmd/gopkgs
go get github.com/ramya-rao-a/go-outline
go get github.com/acroca/go-symbols
go get golang.org/x/tools/cmd/guru
go get golang.org/x/tools/cmd/gorename
go get github.com/cweill/gotests/...
go get github.com/fatih/gomodifytags
go get github.com/josharian/impl
go get github.com/davidrjenni/reftools/cmd/fillstruct
go get github.com/haya14busa/goplay/cmd/goplay
go get github.com/godoctor/godoctor
go get github.com/go-delve/delve/cmd/dlv
go get github.com/stamblerre/gocode
go get github.com/rogpeppe/godef
go get golang.org/x/tools/cmd/goimports
go get golang.org/x/lint/golint
go get golang.org/x/tools/gopls

啟動 Visual Studio Code 開發工具

你現在可以在任何 WSL Distro 裡面直接輸入 code . 就可以開啟 Windows 環境下的 Visual Studio Code 開發工具！

1

code .

預設會自動安裝並載入 Visual Studio Code Remote - WSL 擴充套件。

安裝 Will 保哥出品的 Go Extension Pack 擴充套件

這份擴充套件包含了以下擴充套件：
執行 VSCode 中 Go 擴充套件的 Go: Install/Update Tools 命令一次

F1 > Go: Install/Update Tools
這個命令會自動安裝遺漏的套件，如果已經安裝過，也會自動更新套件！
調整 Visual Studio Code 使用者設定

在 Will 保哥的 Go Extension Pack 擴充套件說明頁面有提到幾個 Recommended Settings (建議設定)，請記得要手動調整 Visual Studio Code 使用者設定之後才會好用，尤其是快速鍵部分！

測試是否安裝成功

確認目前執行的 Go 版本

1

go version

抓取 Go 套件原始碼回來測試用 VSCode 開啟專案

1
2
3
4


git clone https://github.com/appleboy/gorush.git
cd gorush
make
code .

新增 .vscode/tasks.json 設定檔

預設的「建置」與「測試」命令與參數，每個專案都可能有所不同，請記得手動調整過！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
 {
 "label": "build",
 "command": "go",
 "type": "shell",
 "args": [
 "build",
 "-o",
 "dist/${workspaceFolderBasename}"
 ],
 "group": {
 "kind": "build",
 "isDefault": true
 },
 "presentation": {
 "reveal": "silent"
 },
 "problemMatcher": "$msCompile"
 },
 {
 "label": "test",
 "command": "go",
 "type": "shell",
 "args": [
 "test",
 ],
 "group": {
 "kind": "test",
 "isDefault": true
 },
 "presentation": {
 "reveal": "silent"
 },
 "problemMatcher": "$msCompile"
 }
 ]
}

調整 Visual Studio Code 使用者設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "go.useLanguageServer": true,

 "editor.snippetSuggestions": "top",
 "terminal.integrated.shellArgs.linux": ["-l"],

 "code-runner.saveAllFilesBeforeRun": true,
 "code-runner.ignoreSelection": true,
 "code-runner.runInTerminal": true
}

你/妳真的了解 127.0.0.1 與 0.0.0.0 的區別？

Wed, 08 Feb 2023 00:00:00 +0000

前言

對於工程師來說，127.0.0.1 與 0.0.0.0 這兩個IP地址再熟悉不過了，看起來好像就那麼回事，但真正較起真來，這兩個IP地址到底有什麼作用以及到底有什麼不同？貌似誰可以輕鬆回答，但張嘴卻又不知從何說起…(這要是面試，估計真會被這搞砸…)

本文將系統地總結 127.0.0.1 和 0.0.0.0 這兩個IP地址的作用，以及它們之間的區別，希望能為你解惑。

IP地址分類

我們先回顧一下IP地址的基礎知識（本節內容僅作快速概覽，如您對IP地址知識一無所知，建議首先閱讀《IP地址和子網劃分學習筆記之《IP地址詳解》》）。

IP地址表示

IP地址由兩個部分組成，net-id 和 host-id，即網絡號和主機號：

net-id：表示 ip 地址所在的網絡號。
host-id：表示 ip 地址所在網絡中的某個主機號碼。

即：

1

IP-address ::= { <Network-ID>, <Host-ID>}

就像下圖這樣：

IP地址分類

IP地址一共分為5類，即A～E，它們分類的依據是其 net-id 所佔的字節長度以及網絡號前幾位。

大致分類如下：

A類地址：網絡號佔1個字節，網絡號的第一位固定為0。
B類地址：網絡號佔2個字節，網絡號的前兩位固定為10。
C類地址：網絡號佔3個字節，網絡號的前三位固定位110。
D類地址：前四位是1110，用於多播(multicast)，即一對多通信。
E類地址：前四位是1111，保留為以後使用。

其中，A、B、C 三類地址為單播地址（unicast)，用於一對一通信，是最常用的。

IP地址分類看下面這張圖，可能更直接一些：

（上圖來源於《IP地址和子網劃分學習筆記之《IP地址詳解》》）

這裡還有一張IP地址分類的思維導圖：

（上圖來源於《IP地址和子網劃分學習筆記之《IP地址詳解》》）

特殊IP地址

特殊IP地址就是用來做一些特殊的事情。RFC1700中定義了以下特殊IP地址：

{0,0}：網絡號和主機號都全部為0，表示"本網絡上的本主機"，只能用作源地址。
{0，host-id}：本網絡上的某台主機。只能用作源地址。
{-1,-1}：表示網絡號和主機號的所有位上都是 1（二進制），用於本網絡上的廣播，只能用作目的地址，發到該地址的數據包不能轉發到源地址所在網絡之外。
{net-id,-1}：直接廣播到指定的網絡上。只能用作目的地址。
{net-id,subnet-id,-1}：直接廣播到指定網絡的指定子網絡上。只用作目的地址。
{net-id,-1,-1}：直接廣播到指定網絡的所有子網絡上。只能用作目的地址。
{127,}：即網絡號為 127 的任意 ip 地址。都是內部主機回環地址(loopback)，永遠都不能出現在主機外部的網絡中。

具體來說，特殊的IP地址，主要是以下這些：

0.0.0.0：
嚴格說來，0.0.0.0 已經不是一個真正意義上的IP地址了。它表示的是這樣一個集合：所有不清楚的主機和目的網絡。這裡的"不清楚“是指在本機的路由表裡沒有特定條目指明如何到達。對本機來說，它就是一個”收容所"，所有不認識的"三無"人員，一律送進去。如果你在網絡設置中設置了缺省網關，那麼 Windows 系統會自動產生一個目的地址為 0.0.0.0 的缺省路由。
255.255.255.255：
限制廣播地址。對本機來說，這個地址指本網段內(同一廣播域)的所有主機。如果翻譯成人類的語言，應該是這樣：“這個房間裡的所有人都注意了！"，這個地址不能被路由器轉發。
127.0.0.1：
本機地址，主要用於測試。用漢語表示，就是”我自己"。在 Windows 系統中，這個地址有一個別名"Localhost"。尋址這樣一個地址，是不能把它發到網絡接口的。除非出錯，否則在傳輸介質上永遠不應該出現目的地址為 “127.0.0.1” 的數據包。
224.0.0.1：
組播地址，注意它和廣播的區別。從 224.0.0.0 到 239.255.255.255 都是這樣的地址。224.0.0.1 特指所有主機，224.0.0.2 特指所有路由器。這樣的地址多用於一些特定的程序以及多媒體程序。如果你的主機開啟了 IRDP (Internet路由發現協議，使用組播功能)功能，那麼你的主機路由表中應該有這樣一條路由。
169.254.xx：
如果你的主機使用了 DHCP 功能自動獲得一個IP地址，那麼當你的 DHCP 服務器發生故障，或響應時間太長而超出了一個系統規定的時間，Windows 系統會為你分配這樣一個地址。如果你發現你的主機IP地址是一個諸如此類的地址，很不幸，十有八九是你的網絡不能正常運行了。
10.xxx、172.16.xx～172.31.xx、192.168.xx：
私有地址，這些地址被大量用於企業內部網絡中。一些寬帶路由器，也往往使用 192.168.1.1 作為缺省地址。私有網絡由於不與外部互連，因而可能使用隨意的IP地址。保留這樣的地址供其使用是為了避免以後接入公網時引起地址混亂。使用私有地址的私有網絡在接入 Internet 時，要使用地址翻譯(NAT)，將私有地址翻譯成公用合法地址。在 Internet 上，這類地址是不能出現的。

127.0.0.1 和 0.0.0.0 的區別

基本情況

通過上節基礎知識的回顧，我們回到正題：127.0.0.1 與 0.0.0.0 地址的區別是什麼？

我們先來看下共同點：

都屬於特殊地址。
都屬於A類地址。
都是IPV4地址。

接下來我們分別看下這兩個地址的具體作用，就一目了解了。

0.0.0.0

說明

IPV4中，0.0.0.0 地址被用於表示一個無效的、未知的或者不可用的目標：

在服務器中： 0.0.0.0 指的是本機上的所有IPV4地址，如果一個主機有兩個IP地址，192.168.1.1 和 10.1.2.1，並且該主機上的一個服務監聽的地址是 0.0.0.0 ，那麼通過兩個ip地址都能夠訪問該服務。
在路由中： 0.0.0.0 表示的是默認路由，即當路由表中沒有找到完全匹配的路由的時候所對應的路由。

用途總結

當一台主機還沒有被分配一個IP地址的時候，用於表示主機本身（DHCP 分配IP地址的時候）。
用作默認路由，表示"任意IPV4主機"。
用來表示目標機器不可用。
用作服務端，表示本機上的任意IPV4地址。

127.0.0.1

說明

127.0.0.1 屬於 {127,} 集合中的一個，而所有網絡號為 127 的地址都被稱之為回環地址，所以回環地址不等於 127.0.0.1，它們是包含關係，即回環地址包含 127.0.0.1。

用途總結

回環測試：通過使用 ping 127.0.0.1 測試某台機器上的網絡設備，操作系統或者 TCP/IP 實現是否工作正常。
DDos攻擊防禦：網站收到 DDos 攻擊之後，將域名A記錄到 127.0.0.1，即讓攻擊者自己攻擊自己。
程序測試：大部分 Web 容器測試的時候綁定的本機地址。

回環地址的定義

所有發往該類地址的數據包都應該被 loop back。

BONUS：127.0.0.1 與 localhost 的關係

相比 127.0.0.1，localhost 具有更多的意義。

localhost 是個域名，而不是一個ip地址。之所以我們經常把 localhost 與 127.0.0.1 認為是同一個是因為我們使用的大多數電腦上都講 localhost 指向了 127.0.0.1 這個地址。

在 ubuntu 系統中，/ets/hosts 文件中都會有如下內容：

/ets/hosts

1
2
3
4
5
6
7
8


127.0.0.1 localhost
127.0.1.1 52im-aliyun
# The following lines are desirable for IPv6 capable hosts
::1 ip6-localhost ip6-loopback
fe00::0 ip6-localnet
ff00::0 ip6-mcastprefix
ff02::1 ip6-allnodes
ff02::2 ip6-allrouters

上面第一行是幾乎每台電腦上都會有的默認配置。但是 localhost 的意義並不局限於 127.0.0.1。

localhost 是一個域名，用於指代 this computer 或者 this host，可以用它來獲取運行在本機上的網絡服務。

在大多數系統中，localhost 被指向了 IPV4 的 127.0.0.1 和 IPV6 的::1：

1
2


127.0.0.1 localhost
::1 localhost

所以，在使用的時候要注意確認IPV4還是IPV6。

結語

127.0.0.1 是一個環回地址，並不表示"本機"。

0.0.0.0 才是真正表示"本網絡中的本機"。

在實際應用中：一般我們在服務端綁定端口的時候可以選擇綁定到 0.0.0.0，這樣我的服務訪問方就可以通過我的多個ip地址訪問我的服務。

比如：我有一台服務器，一個外網地址A,一個內網地址B，如果我綁定的端口指定了 0.0.0.0，那麼通過內網地址或外網地址都可以訪問我的應用。

但是如果我只綁定了內網地址，那麼通過外網地址就不能訪問。所以如果綁定 0.0.0.0，也有一定安全隱患，對於只需要內網訪問的服務，可以只綁定內網地址。

每天都在用的 Ping 命令，它到底是什麼？

Wed, 08 Feb 2023 00:00:00 +0000

前言

老於網絡編程熟手來說，在測試和部署網絡通信應用（比如IM聊天、實時音視頻等）時，如果發現網絡連接超時，第一時間想到的就是使用Ping命令，Ping一下服務器看看通不通。甚至在有些情況下通過圖形化的Ping命令工具對目標網絡進行長測（比如：《兩款增強型Ping工具：持續統計、圖形化展式網絡狀況[附件下載]》、《網絡測試：Android版多路ping命令工具EnterprisePing[附件下載]》），可以得出當前網絡通信的網絡延遲、網絡丟包率、網絡抖動等等有價值信息。

Ping命令很簡單，但作為為數不多的網絡檢測工具，卻非常有用，是開發網絡應用時最常用到的命令。雖然Ping這個動作這麼簡單，但你知道Ping命令背後後的邏輯嗎？跟著本篇文章瞭解一下！

Ping命令的作用和原理

簡單來說，「ping」是用來探測本機與網絡中另一主機之間是否可達的命令，如果兩台主機之間ping不通，則表明這兩台主機不能建立起連接。ping是定位網絡通不通的一個重要手段。

ping 命令是基於 ICMP 協議來工作的，「ICMP」全稱為Internet 控制報文協議（Internet Control Message Protocol）。ping 命令會發送一份ICMP回顯請求報文給目標主機，並等待目標主機返回ICMP回顯應答。因為ICMP協議會要求目標主機在收到消息之後，必須返回ICMP應答消息給源主機，如果源主機在一定時間內收到了目標主機的應答，則表明兩台主機之間網絡是可達的。

舉一個例子來描述「ping」命令的工作過程：

假設有兩個主機，主機A（192.168.0.1）和主機B（192.168.0.2），現在我們要監測主機A和主機B之間網絡是否可達，那麼我們在主機A上輸入命令：

1

ping 192.168.0.2。

此時，ping 命令會在主機A上構建一個ICMP的請求數據包（數據包裡的內容後面再詳述），然後ICMP協議會將這個數據包以及目標IP（192.168.0.2）等信息一同交給IP層協議。
IP層協議得到這些信息後，將源地址（即本機IP）、目標地址（即目標IP：192.168.0.2）、再加上一些其它的控制信息，構建成一個IP數據包。
IP數據包構建完成後，還不夠，還需要加上MAC地址，因此，還需要通過ARP映射表找出目標IP所對應的MAC地址。當拿到了目標主機的MAC地址和本機MAC後，一併交給數據鏈路層，組裝成一個數據幀，依據以太網的介質訪問規則，將它們傳送出出去。
當主機B收到這個數據幀之後，會首先檢查它的目標MAC地址是不是本機，如果是，就接收下來處理，接收之後會檢查這個數據幀，將數據幀中的IP數據包取出來，交給本機的IP層協議，然後IP層協議檢查完之後，再將ICMP數據包取出來交給ICMP協議處理，當這一步也處理完成之後，就會構建一個ICMP應答數據包，回發給主機A。
在一定的時間內，如果主機A收到了應答包，則說明它與主機B之間網絡可達；如果沒有收到，則說明網絡不可達。除了監測是否可達以外，還可以利用應答時間和發起時間之間的差值，計算出數據包的延遲耗時。

通過 ping 的流程可以發現，ICMP協議是這個過程的基礎，是非常重要的，下面的章節會把ICMP協議再詳細解釋一下，請繼續往下讀。

正確理解ICMP協議

Ping命令所基於的ICMP協議所處的網絡模型層級：

（▲ 上圖來自《計算機網絡通訊協議關係圖（中文珍藏版）[附件下載]》，您可下載此圖的完整清晰版）

Ping 命令這麼簡單，在任何系統上上手就能使用，很多人可能想當然的認為 Ping 命令使用的ICMP協議應該是基於傳輸層的TCP或UDP協議的吧？

正如上圖所示，ICMP協議既不是基於TCP，也不是基於UDP，而是直接基於網絡層的IP協議，在整個網絡協議棧中屬於相當底層的協議了。這也從側面證明了它的重要性，因為根據ICMP的RFC手冊規定：ICMP協議是任何支持IP協議的系統必須實現的，沒有餘地。而IP協議是整個互聯網的基石，ICMP協議雖簡單，但重要性不言而喻。

所以，以後面試的時候，如果碰到"ICMP協議是基於什麼實現的？“這樣的問題，請一定要記往此節所講的內容。

深入ICMP協議

我們知道，ping 命令是基於ICMP協議來實現的。那麼我們再來看下圖，就明白了ICMP協議又是通過IP協議來發送的，即ICMP報文是封裝在IP包中（如下圖所示）。

IP協議是一種無連接的，不可靠的數據包協議，它並不能保證數據一定被送達，那麼我們要保證數據送到，就需要通過其它模塊來協助實現，這裡就引入的是ICMP協議。

當傳送的IP數據包發送異常的時候，ICMP就會將異常信息封裝在包內，然後回傳給源主機。

將上圖再細拆一下可見：

繼續將ICMP協議模塊細拆：

由圖可知，ICMP數據包由8bit的類型字段和8bit的代碼字段以及16bit的校驗字段再加上選項數據組成。

ICMP協議大致可分為兩類：

查詢報文類型
差錯報文類型

ICMP報文類型	類型的值	ICMP的報文類型
差錯報文類型	3	終點不可達
	4	源點抑制
	11	時間超過
	12	參數問題
	5	改變路由
詢問報文	8	回送請求
	0	回送回答
	13	時間戳請求
	14	時間戳會帶

【關於查詢報文類型】：

查詢報文主要應用於：ping 查詢、子網掩碼查詢、時間戳查詢等等。

上面講到的 ping 命令的流程其實就對應ICMP協議查詢報文類型的一種使用。在主機A構建ICMP請求數據包的時候，其ICMP的類型字段中使用的是8 （回送請求），當主機B構建ICMP應答包的時候，其ICMP類型字段就使用的是0 （回送應答），更多類型值參考上表。

對查詢報文類型的理解可參考一下文章最開始講的 ping 流程，這裡就不做贅述。

【關於差錯報文類型】：

差錯報文主要產生於當數據傳送發送錯誤的時候。

它包括：目標不可達（網絡不可達、主機不可達、協議不可達、端口不可達、禁止分片等）、超時、參數問題、重定向（網絡重定向、主機重定向等）等等。

差錯報文通常包含了引起錯誤的IP數據包的第一個分片的IP首部，加上該分片數據部分的前8個字節。

當傳送IP數據包發生錯誤的時候（例如主機不可達），ICMP協議就會把錯誤信息封包，然後傳送回源主機，那麼源主機就知道該怎麼處理了。

ICMP差錯報文的妙用

正如上一節所介紹的那樣，ICMP協議主要有：查詢報文類型和差錯報文類型兩種。對於差錯報文來說，是不是只有遇到錯誤的時候才能使用呢？不是！

基於這個特性，Linux 下的 Traceroute 指令（Windows 下的對等指令是 tracert）利於ICMP的差錯報文可以實現遍歷到數據包傳輸路徑上的所有路由器！這真是個有用的命令！

百度百科上關於 traceroute 命令的用途：

traceroute (Windows 系統下是 tracert) 命令利用 ICMP 協議定位您的計算機和目標計算機之間的所有路由器。TTL 值可以反映數據包經過的路由器或網關的數量，通過操縱獨立 ICMP 呼叫報文的 TTL 值和觀察該報文被拋棄的返回信息，traceroute 命令能夠遍歷到數據包傳輸路徑上的所有路由器。

ICMP 的差錯報文的使用，使得 Traceroute 成為用來偵測源主機到目標主機之間所經過路由情況的常用工具。Traceroute 的原理就是利用ICMP的規則，製造一些錯誤的事件出來，然後根據錯誤的事件來評估網絡路由情況。

traceroute 的基本原理如下圖所示：

具體做法就是：

Traceroute 會設置特殊的 TTL 值，來追踪源主機和目標主機之間的路由數。首先它給目標主機發送一個 TTL=1 的UDP數據包，那麼這個數據包一旦在路上遇到一個路由器，TTL 就變成了 0（TTL規則是每經過一個路由器都會減1），因為 TTL=0 了，所以路由器就會把這個數據包丟掉，然後產生一個錯誤類型（超時）的ICMP數據包回發給源主機，也就是差錯包。這個時候源主機就拿到了第一個路由節點的IP和相關信息了。
接著，源主機再給目標主機發一個 TTL=2 的UDP數據包，依舊上述流程走一遍，就知道第二個路由節點的IP和耗時情況等信息了。
如此反復進行，Traceroute 就可以拿到從主機A到主機B之間所有路由器的信息了。

但是有個問題是，如果數據包到達了目標主機的話，即使目標主機接收到 TTL 值為 1 的IP數據包，它也是不會丟棄該數據包的，也不會產生一份超時的ICMP回發數據包的，因為數據包已經達到了目的地嘛。那我們應該怎麼認定數據包是否達到了目標主機呢？

Traceroute 的方法是在源主機發送UDP數據包給目標主機的時候，會設置一個不可能達到的目標端口號（例如大於30000的端口號），那麼當這個數據包真的到達目標主機的時候，目標主機發現沒有對應的端口號，因此會產生一份端口不可達的錯誤ICMP報文返回給源主機。

可見 Traceroute 的原理確實很取巧，很有趣。如您對 Traceroute 感興趣，可以深入讀一讀《從 Traceroute 看網絡問題》一文。

ASP.NET Core 網站如何整合 Google 的 reCAPTCHA Enterprise 功能

Tue, 07 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站
 參考網站
 參考網站

網站上幾乎每頁都有聯絡表單，並透過 AJAX 傳送到後端 API 負責記錄並送出郵件到公司的服務信箱，但網站上線後，垃圾訊息太常收到。因此，我打算將表單加入 Google Cloud Platform (GCP) 的 reCAPTCHA Enterprise 服務，減少收到垃圾訊息的機會，這篇文章我來分享一下完整的開發流程！

先整理幾個重要概念

reCAPTCHA 原本是由卡內基梅隆大學所發展的系統，主要目的是利用 CAPTCHA 技術來幫助典籍數位化的進行，這個計畫將由書本掃瞄下來無法準確的被光學文字辨識技術識別的文字顯示在 CAPTCHA 問題中，讓人類在回答 CAPTCHA 問題時用人腦加以識別。2009 年 9 月 17 日 Google 宣佈收購 reCAPTCHA 技術，持續發展之下也提供標準的 API 供用戶免費使用，時至今日已經發展出好幾個版本。

目前可以在 Google 網站找到 3 個不同的版本，其功能與特性各有不同：

reCAPTCHA v2

除了原來的文字掃瞄圖片外，也採用 Google 街景拍攝的門牌號碼相片。

reCAPTCHA v3

採用分數制驗證系統，對使用者在網站上的動作進行評分，若分數過低則會被判定為機器人。

reCAPTCHA Enterprise

與 reCAPTCHA v3 相同，採用分數制驗證系統，但能夠提供更精細的分數以及高風險分數原因代碼，以供進一步分析之用。

本篇文章主要是以 reCAPTCHA Enterprise 為主，版本比較可參考 Comparison of features between reCAPTCHA versions 文件。

reCAPTCHA Enterprise 有個重要的概念，就是 reCAPTCHA keys 或 site keys，我將其翻譯為「網站通關金鑰」或是「驗證金鑰」也許比較恰當，他是一個使用在你網站的一組公開金鑰，透過這個 site keys 會依據使用者端提供的各種資訊，自動產生一個唯一的「回應值」(Response)，你要把這個「回應值」傳到後端的 reCAPTCHA Server 進行驗證，由 reCAPTCHA Server 判斷出這個「回應值」是否是「真人」(Human)或「假人」(Bots)。

reCAPTCHA Enterprise 的 site keys 有 3 種使用方式：

Score-based (no challenge) site keys

以「分數」為基礎的驗證方法，這種驗證方法完全不需要由使用輸入資訊，系統會自動判斷使用者透過瀏覽器、鍵盤或是觸控等使用方式，自動收集使用者跟手機或網頁之間的互動情況，判斷該「使用者」是否為「真人」或「假人」，送到 reCAPTCHA Server 驗證時，會提供你一個「分數」(Score)，從 0.0 ～ 10.0 分，其中 0.0 就是絕對的「假人」，而 10.0 就是絕對的「真人」。這種類型的 site keys 適用於「手機 APP」或「網頁」環境。

這樣對使用者來說非常方便，不用讓客戶還在那邊選「哪幾張圖是公車」之類的，表單輸入門檻會低很多。

Checkbox (checkbox challenge) site keys

所謂 Checkbox 就真的是「核取方塊」的意思（如下圖示），他需要使用者真的去對這個 Checkbox 做個點擊的動作，藉此判斷跟網頁互動的對像是否為「真人」在操作。想當然的，這種驗證方式一定要跟使用者發生互動，所以只能用在「網頁」的介面上，尤其特別適合用在「表單填寫」、「網站登入」、「註冊會員」等網頁功能，但不適用於透過「手機 APP」或其他互動方式。

這種驗證方式可能不適用於所有情境，例如要提供「無障礙」網站的話，對「視覺」有問題的用戶就會很不方便，因此使用時要注意。詳見 Understanding the caveats with CAPTCHA challenges

reCAPTCHA WAF site keys

這個 reCAPTCHA WAF site keys 可以讓你把 sitekey 安裝在 WAF (應用程式防火牆) 這一層，但這種作法必須要合格的 WAF service provider 才能使用，例如 GCP 自家的 Google Cloud Armor 服務。詳情請見 reCAPTCHA Enterprise for WAF and Google Cloud Armor integration overview 說明。

整合 reCAPTCHA Enterprise 的大致流程

想要整合 reCAPTCHA Enterprise 到你的網站，建議多少理解一下 reCAPTCHA Enterprise 的運作流程，你可以從 How reCAPTCHA Enterprise works 看到以下循序圖(sequence diagram)：

即便你大概知道這個流程，我還是覺得整合 reCAPTCHA Enterprise 有一點小門檻，所以我打算簡化成以下 3 個步驟來說明：

申請 reCAPTCHA keys 階段

你要到 Google Cloud console 建立 reCAPTCHA keys

也可以從 Google Cloud console 左上角的漢堡選單選取 Security > reCAPTCHA Enterprise 進入此頁面。

收集前端使用者回應值階段

安裝 reCAPTCHA keys 到網頁上 (主要用來收集 reCAPTCHA 回應值)

後端評估與驗證回應值階段

這個步驟會先從後端應用程式取得前端傳來的回應值，並將回應值送到 reCAPTCHA Server 進行評估(assessment)，並取得一個評估後的 Score (分數)，從該分數判斷這個 HTTP 要求是否要允許通過。

此步驟最為麻煩，主因是缺少 ASP.NET Core 範例，所以上手確實有點門檻！

以下我就依據這三個階段，分別說明作法！

申請 reCAPTCHA keys 階段

可以參考 Creating reCAPTCHA keys 這份文件進行操作。

你要先有一個 Google 帳戶
在 Google Cloud Console 建立一個新專案

啟用 reCAPTCHA Enterprise API 服務

進入 reCAPTCHA Enterprise 頁面，如果尚未啟用 reCAPTCHA Enterprise API 服務的話，會先出現以下畫面，你必須選對 GCP 上面的專案(Project)，然後按下 ENABLE 啟用服務：

建立 reCAPTCHA keys

進入 reCAPTCHA Enterprise 頁面

輸入一個顯示名稱(Display name)與使用 reCAPTCHA keys 的平台(Platform type)，由於我們是一個網站服務，所以記得選擇 Website 選項

如果是網站使用，就要設定網站的域名在此，你可以新增多個域名：

最後按下 CREATE KEY 建立即可。

收集前端使用者回應值階段

我們從上一個步驟可以看到一個 Web integration 區段，這裡有一段 JavaScript 程式碼片段，你直接複製起來，貼上到網頁的 <head> 區段內，即可開始收集前端使用者回應值。

範例程式碼如下：

1
2
3
4
5
6
7
8


<script src="https://www.google.com/recaptcha/enterprise.js?render=6LdSxPgjAAAAAGTKX703ydrWNF8WbQv2pZbRXGyX"></script>
<script>
grecaptcha.enterprise.ready(function() {
 grecaptcha.enterprise.execute('6LdSxPgjAAAAAGTKX703ydrWNF8WbQv2pZbRXGyX', {action: 'login'}).then(function(token) {
 ...
 });
});
</script>

這裡特別需要知道的地方有以下幾點：

程式碼片段的 6LdSxPgjAAAAAGTKX703ydrWNF8WbQv2pZbRXGyX 就是你的 reCAPTCHA key
這裡的 grecaptcha.enterprise.ready() 函式會在載入完 reCAPTCHA Enterprise 函式庫後執行，只會執行一次
這裡的 grecaptcha.enterprise.execute() 函式則會執行 reCAPTCHA 驗證（這個函式會回傳一個 Promise 物件）
這裡的 { action: 'login'} 也很重要，這裡是設定一個「驗證動作」的類型，這個值要跟後端進行驗證時使用相同的 action 才行
Google reCAPTCHA 的 action 參數可以是任何字串，它可以用來標記驗證的目的或類型。一些常用的 action 值包括：login (用於登入驗證)、register (用於註冊驗證)、password_reset (用於密碼重置驗證)、contact (用於聯繫表單驗證)，但其實沒有一定要用哪一種，不知道要挑哪一種的話，你隨便選個 login 其實都可以。
程式碼片段中的 ... 不是真的程式碼，而是一個要你客製化修改的地方！
由於 grecaptcha.enterprise.execute() 函式是一個 Promise 物件，你可以透過 .then() 帶入的 function callback 得到一個 token 字串，這個就是由 reCAPTCHA Enterprise 幫你收集好的「回應值」，你要設法將這個值帶到後端去驗證。

這裡有個地雷是，這個透過 grecaptcha.enterprise.execute() 函式取回的 token 有效期只有 2 分鐘！

各位~只有 2 分鐘就會過時/過期！只要 2 分鐘就會 Timeout！只要 2 分鐘就不能用了！

很重要，所以說三遍，為了 SEO 要求，我用三份關鍵字描述！🔥

超過 2 分鐘之後這個 token 就失效了，所以千萬不能在「網頁載入」的時候就取得 token 回應值，否則表單填寫超過 2 分鐘之後不就自動失效了嗎？這個注意事項是有出現在 Create an assessment 官方文件中，我有點懷疑會有多少人看到？😅

後端評估與驗證回應值階段

這裡的步驟就有點多了，我會以 ASP.NET Core 6 為例進行解說完整步驟。

到 Google Cloud Console 的 IAM & Admin > Service accounts 建立一個服務帳戶(Service Accounts)

要從網站的後端呼叫 GCP 上面的 API 服務，都需要有一個身分(Principal)來呼叫 API 服務。你可以從 APIs & Services > Enabled APIs & Services 找到 reCAPTCHA Enterprise API 服務，點擊進去：

我們要建立一個 reCAPTCHA Enterprise API 所需的 CREDENTIALS (身分認證)

這裡有兩個選項，我們透過網站整合 reCAPTCHA Enterprise API 一定是使用 Service Accounts (服務帳戶) 這項！

設定一個服務帳戶名稱，好記就好

🔥 這個步驟超級重要，你要是不在這裡選對 Role (角色)，也就是 reCAPTCHA Enterprise Agent，就算你取得 Service Account 也沒有權限呼叫 reCAPTCHA Enterprise API！

如果沒設定的話，你的 ASP.NET Core 執行時就會得到以下錯誤訊息：

1

Status(StatusCode="PermissionDenied", Detail="Permission denied for: recaptchaenterprise.assessments.create. Please ensure you have sufficient permissions: https://cloud.google.com/iam/docs/granting-changing-revoking-access")

這個步驟可以不用設定，直接按下 DONE 完成設定。

點擊進入剛剛建立的服務帳戶

🔥 切換到 KEYS 頁籤，建立一把新的私密金鑰(key)，主要用來給後端程式呼叫 API 時通過驗證用！

建立金鑰可以選擇兩種格式，我們選擇 JSON 格式

🔥 按下 CREATE 之後，瀏覽器就會直接下載一個 *.json 檔案，這個檔案就是我們的金鑰檔，之後在 ASP.NET Core 網站中用的到！

這個 JSON 檔案的內容大致如下：

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


{
 "type": "service_account",
 "project_id": "recaptchademo-374714",
 "private_key_id": "9462e07151d......181083e38c718503",
 "private_key": "-----BEGIN PRIVATE KEY-----\nM...g=\n-----END PRIVATE KEY-----\n",
 "client_email": "myrecaptcha@recaptchademo-374714.iam.gserviceaccount.com",
 "client_id": "11581452......4955852",
 "auth_uri": "https://accounts.google.com/o/oauth2/auth",
 "token_uri": "https://oauth2.googleapis.com/token",
 "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
 "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/myrecaptcha%40recaptchademo-374714.iam.gserviceaccount.com"
}

這個步驟我做了好幾次，漏掉一兩步就別想玩下去了，所以 GCP 就是主要的門檻所在！😅

在 ASP.NET Core 網站安裝 Google.Cloud.RecaptchaEnterprise.V1 NuGet 套件

1

dotnet add package Google.Cloud.RecaptchaEnterprise.V1

設定 ASP.NET Core 網站的 DI 容器 (ServiceCollection)

以下程式碼會將 RecaptchaEnterpriseServiceClient 註冊成 Singleton，並設定 JsonCredentials 為我們剛剛下載的私密金鑰 JSON 檔！

1
2
3
4


builder.Services.AddRecaptchaEnterpriseServiceClient(options =>
{
 options.JsonCredentials = File.ReadAllText("recaptchademo-374714-9462e07151d4.json");
});

如果沒有指定 Credentials 的話，執行時就會得到以下錯誤訊息：

1

The Application Default Credentials are not available. They are available if running in Google Compute Engine. Otherwise, the environment variable GOOGLE_APPLICATION_CREDENTIALS must be defined pointing to a file defining the credentials. See https://developers.google.com/accounts/docs/application-default-credentials for more information.

在 Controller 的建構式注入 RecaptchaEnterpriseServiceClient 物件

1
2
3
4
5
6


private readonly RecaptchaEnterpriseServiceClient _recaptchaClient;

public ContactController(RecaptchaEnterpriseServiceClient re)
{
 this._recaptchaClient = re;
}

建立一個 createAssessmentAsync 方法 (Method)

我參考 Create an assessment using the REST API or Client Libraries 的 C# 範例程式進行改寫如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


// Create an assessment to analyze the risk of an UI action.
// projectID: GCloud Project ID.
// recaptchaSiteKey: Site key obtained by registering a domain/app to use recaptcha.
// token: The token obtained from the client on passing the recaptchaSiteKey.
// recaptchaAction: Action name corresponding to the token.
private async Task<bool> createAssessmentAsync(string token,
 string projectID = "recaptchademo-374714",
 string recaptchaSiteKey = "6LdSxPgjAAAAAGTKX703ydrWNF8WbQv2pZbRXGyX",
 string recaptchaAction = "login")
{
 if (String.IsNullOrWhiteSpace(token))
 {
 throw new ArgumentException("The `token` argument must not empty.");
 }

 ProjectName projectName = new ProjectName(projectID);

 // Build the assessment request.
 CreateAssessmentRequest createAssessmentRequest = new CreateAssessmentRequest()
 {
 Assessment = new Assessment()
 {
 // Set the properties of the event to be tracked.
 Event = new Event()
 {
 SiteKey = recaptchaSiteKey,
 Token = token,
 ExpectedAction = recaptchaAction
 },
 },
 ParentAsProjectName = projectName
 };

 Assessment response = await _recaptchaClient.CreateAssessmentAsync(createAssessmentRequest);

 // Check if the token is valid.
 if (response.TokenProperties.Valid == false)
 {
 _logger.LogInformation("The CreateAssessment call failed because the token was: " +
 response.TokenProperties.InvalidReason.ToString());

 return false;
 }

 // Check if the expected action was executed.
 if (response.TokenProperties.Action != recaptchaAction)
 {
 _logger.LogInformation("The action attribute in reCAPTCHA tag is: " +
 response.TokenProperties.Action.ToString());
 _logger.LogInformation("The action attribute in the reCAPTCHA tag does not " +
 "match the action you are expecting to score");
 return false;
 }

 // Get the risk score and the reason(s).
 // For more information on interpreting the assessment,
 // see: https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment

 var score = response.RiskAnalysis.Score;

 _logger.LogInformation("The reCAPTCHA score is: " + score);

 foreach (RiskAnalysis.Types.ClassificationReason reason in response.RiskAnalysis.Reasons)
 {
 _logger.LogInformation(reason.ToString());
 }

 // https://developers.google.com/recaptcha/docs/analytics
 // This chart shows the average score on your site, which is designed to help you spot trends.
 // Scores range from 0.0 to 1.0, with 0.0 indicating abusive traffic and 1.0 indicating good traffic.
 // Sign up for reCAPTCHA v3 to gain more insights about your traffic.
 if (score > 0.5)
 {
 return true;
 }
 else
 {
 return false;
 }
}

這裡 method 總共有 4 個參數，都很重要，除了 token 之外，其他都可以寫進 appsettings.json 組態之中！

因為 GCP 上的每個「專案」都有個唯一的 projectID，你要特別查才知道是什麼，這裡的 projectID 要記得到 https://console.cloud.google.com/welcome 查閱！

這裡的 recaptchaSiteKey 就是你先前建立 site key 時拿到的那組！

這裡的 recaptchaAction 必須跟你在「收集前端使用者回應值階段」設定的 {action: 'login'} 完全一樣，這裡是設定一個「驗證動作」的類型，可以是任意字串！

程式碼邏輯的部分我就不贅述了，大家可以自己看，應該很容易理解。最後的 if (score > 0.5) {} 就是在判斷怎樣的分數允許通過驗證，基本上分數只會介於 0.0 ~ 1.0 之間，共 11 個等級。但在尚未通過 Google Security Review 的前提下，預設只會有 0.1、0.3、0.7 與 0.9 這四個等級，所以建議 Score 結果的判斷式不要用 == 來寫，用 <、<= 或 >、>= 才是比較正確的寫法！

最後要使用就很簡單了，以下是一個簡單的 Action 使用範例

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


[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Index([FromForm] ContactViewModel model)
{
 if (await createAssessmentAsync(model.RecaptchaToken))
 {
 return NoContent();
 }
 else
 {
 return BadRequest();
 }
}

總結

整合 Google 的 reCAPTCHA Enterprise 實在太多雷了，這對 Google Cloud Platform 不太熟悉的人來說，整合起來著實有不小的門檻，本文這麼多步驟，要是我不記錄下來，過一段時間我肯定又忘記了！😅

我來重新總結一下整個開發過程：

先到 Google Cloud console 建立 reCAPTCHA keys
你可能需要建立一個新專案，並啟用 reCAPTCHA Enterprise API 服務，然後才能建立 reCAPTCHA keys。

每個 GCP 上面的新專案，都需要個別手動啟用 API 服務。如果你選用先前建立過的專案，且 reCAPTCHA Enterprise API 服務已經啟用過，那就不需要再次啟用。

安裝 reCAPTCHA keys 到網頁上 (前端 JavaScript 為主)
這邊需要寫一點點 JavaScript 才能將 token 回寫到表單上，幫助前端將 token 送回後端評估。
從後端評估前端送來的 token (回應值) 是否有效
你必須建立一個 GCP 上的 Service Account (服務帳戶)，並賦予 reCAPTCHA Enterprise Agent 角色。然後為這個 Service Account 建立一把 key (私密金鑰) 才能組成一個 Credential (身分認證資訊) 讓應用程式使用，然後用這份 Credential 跟 reCAPTCHA Enterprise API 通訊，取得 Assessment (評估) 結果，然後依據 Score (分數) 判斷是否為真人的流量，通常這個 Score (分數) 只要大於等於 0.7 通常就意味著可信度夠高。

另外，我想補充說明的是，reCAPTCHA Enterprise 有每月 100 萬次免費使用額度，這些次數主要是「後端」對 reCAPTCHA Enterprise API 發送驗證 Assessment (評估) 的次數，對許多網站來說，這個數量應該是綽綽有餘了，所以我才考慮直接使用這個服務。

使用 Node.js 串接 MongoDB (含CRUD)

Mon, 06 Feb 2023 00:00:00 +0000