前端學習 node 快速入門 系列 —— 初步認識 node

其他章節請看：

前端學習 node 快速入門 系列

初步認識 node

node 是什麼

node（或者稱node.js）是 javaScript（以下簡稱js） 執行時的一個環境。不是一門語言。

以前 js 只能執行在瀏覽器中，瀏覽器中的 js 包含：bom（例如 window）、dom（例如 document）、ecmascript、js 引擎；現在 js 也可以執行在 node 中，node 中的 js 包含：ecmascript（服務端不操作頁面，所以不需要 bom 和 dom）和 js 引擎。

我們編寫的 js 只是一些字串文字，只有 js 引擎才能識別和處理它們；js 引擎有很多種，chrome v8引擎是目前最好的，而且開源；node 的作者就是基於 chrome v8開發了一個 js 執行時環境。

node 能做什麼

• 寫 web 伺服器後臺（java，php 能做的，node也能做）
• 做專案構建工具，例如 webpack、vue-cli 都是用 node 寫的
• 做命令列工具，例如 hexo（一款快速、簡潔且高效的部落格框架）就是用 node 寫的
• 用於桌面開發

安裝 node

進入 node 官網，來到下載頁面，下載對應平臺的 node 即可。我的是 windows 平臺，下載後傻瓜式（一路 next）安裝即可。安裝成功後配置一下環境變數（將 nodejs 的安裝目錄配置到 path 中），接著開啟命令列工具，輸入 node --version，如果能輸出 node 的版本說明安裝成功。

node 有當前釋出版本和長期支援版。前者包含最新特性，可用於學習，後者更穩定。下載頁面也有node 以往的版本的入口，可以從中下載特定版本的 node。

hello-world

建立一個 js 檔案，內容輸入 console.log('hello world')，儲存檔案後，在命令列中輸入 node file-name 就執行了我們的第一個程式。

$ node 1.js 
hello world

我們在瀏覽器中，通常會通過 F12 開啟開發者工具，輸入一些測試語句，例如 Array.isArray(1)，node 也有類似的環境。在命令列中輸入 node 回車，即可進入。請看示例（我的終端是Git Bash）：

$ node
Welcome to Node.js v12.18.1.
Type ".help" for more information.
> console.log(1+1)
2
undefined
> Math.max(1,3,5,7,-1)
7
> Array.isArray(1)
false
> window
Uncaught ReferenceError: window is not defined
> document
Uncaught ReferenceError: document is not defined
> typeof fs
'object'
> typeof http
'object'
>

如果需要退出控制檯，按 Ctrl + c 即可。

最簡單的讀寫檔案

需求：讀取某個檔案的內容並輸出到控制檯；將一段程式碼寫入某檔案

這裡我們只需要使用 node 的內建模組 fs（檔案系統）中的兩個方法 readFile() 和 writeFile() 方法。

先實現讀取檔案。開啟 readFile() 的 api，複製裡面的程式碼，微調，儲存在 2.js 中：

// 匯入內建模組 fs
const fs = require('fs')
// 讀取 1.js
// 1.js 中的內容是：console.log('hello world')
fs.readFile('1.js', (err, data) => {
    if (err) throw err;
    console.log(data.toString()); // {1}
});

在命令列中執行該檔案：

$ node 2
console.log('hello world')

如果不呼叫 toString() 方法（行{1}），則輸出的是十六進位制 <Buffer 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 27 68 65 6c 6c 6f 20 77 6f 72 6c 64 27 29>。

也可以指定編碼來讓它正常輸出，就像這樣：

...
fs.readFile('1.js', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
});
// 輸出：console.log('hello world')

寫檔案就很簡單了，找到 writeFile() 對應的api，微調，程式碼如下：

const fs = require('fs')
const data = 'console.log(1+2)'
fs.writeFile('1.js', data, (err) => {
  if (err) throw err;
  console.log('The file has been saved!');
});

再次執行 $ node 2，然後驗證 1.js 檔案的內容是否已改成 console.log(1+2)

注：本系列教程只講大概5個內建核心模組，不會詳細講解 node 的 API，API 是講不完的。在node 以往的版本中有每個版本對應的API文件。本系列教程選用的API文件是node 12.18.1。

最簡單的伺服器

需求：啟動一個伺服器，通過瀏覽器訪問能顯示 Hello-World

將以下程式碼儲存在一個 js 檔案中，用 node 執行後會啟動一個伺服器。

const http = require('http')
const listenCallback = () => { 
    console.log('服務啟動成功')
}
const requestCallback = () => {
    console.log('已接到您的請求...')
}

const server = http.createServer() // {1}
server.listen('3000', listenCallback) // {2}
server.on('request', requestCallback) // {3}

瀏覽器輸入 http://localhost:3000/ 即可訪問這個伺服器。伺服器接收到請求，會觸發 requestCallback 回撥，這個簡單的伺服器由於沒有實現響應請求的功能，所以我們會看到瀏覽器會一直轉圈圈，等待伺服器的返回。

$ node 3.js
服務啟動成功
// 瀏覽器訪問伺服器後輸出
已接到您的請求...

Tip:伺服器就是一臺 24 小時不斷電的電腦，伺服器上可能有多個應用，所以需要埠號來定位具體的應用；我們的瀏覽器與伺服器通訊時，瀏覽器也會開啟一個埠；我們測試可以使用 3000、5000 這些沒被佔用的埠號。

首先通過 http.createServer（行{1}）建立一個伺服器，接著通過行 server.listen（行{2}）啟動 HTTP 伺服器以偵聽連線，最後通過 server.on（行{3}）給伺服器註冊 request 事件的回撥。

注：初次接觸 Node 的 api 可能會不太適應。筆者就有這種感受，首先 http.createServer() 方法沒有示例，只說返回的是 http.Server 的例項；其次 server.listen() 的語法是從 http.Server 的父類 net.Server 中才找到 server.listen([port[, host[, backlog]]][, callback])；最後 .on() 到底是誰的方法？最初只在 http.Server 中找到 Event: 'request'，是告訴我 server 這個物件支援哪些事件嗎，最終在原始碼（我用的編輯器是vscode，直接點進去，就可以看到對應的原始碼，原始碼是用 typescript 寫的）中發現了下面的線索：

// createServer() 方法返回 Server
function createServer(requestListener?: RequestListener): Server; // {1}

// Server 中有 addListener() 和 on()
class Server extends events.EventEmitter {
    ...
    addListener(event: string, listener: (...args: any[]) => void): this; // {2}
    ...
    on(event: string, listener: (...args: any[]) => void): this; // {3}
    ...
}

createServer() 方法返回 Server，在 class Server 中 定義了 on() 方法。

此外，addListener()（行{2}）和 on()（行{3}）好像只是方法名不同，用 node 的控制檯做如下測試，發現 on() 應該是 addListener() 的別名。

D:\>node
Welcome to Node.js v12.18.1.
> http.createServer().on === http.createServer().addListener
true
>

現在只差最後一步：給瀏覽器返回資料。需要用到下面兩個方法：

response.write(chunk[, encoding][, callback])

• 這傳送了響應主體的一部分。可以多次呼叫此方法以提供身體的連續部分

response.end([data[, encoding]][, callback])

• 此方法向伺服器發出訊號，指示所有響應頭和主體已傳送。該伺服器應認為此訊息已完成。必須在每個響應上呼叫方法response.end（）

接著新增伺服器響應功能，將 Hello World 輸出到瀏覽器頁面。需要改動的程式碼只有 requestCallback() 方法，請看示例：

...
const requestCallback = (req, res) => {
    res.write('Hello World')
    res.end()
}
...

到此，這個需求就做完了。

我們在此基礎上稍微擴充套件一下。

後端傳給前端的通常是 json 資料，模擬如下：

...
const requestCallback = (req, res) => {
    const data = {
        status: 200,
        message: '成功',
        data: {}
    }
    res.write(data)
    res.end()
}
...

瀏覽器訪問後，發現 node 控制檯報錯，提示只能傳 String 或 Buffer 型別的資料，再次修改為 res.write(JSON.stringify(data))，重啟 node（每次修改完 node 程式碼都需要重新重啟 node，後續不在重複說明），瀏覽器訪問頁面顯示 {"status":200,"message":"鎴愬姛","data":{}}，中文亂碼了。

雖然 write() 方法中預設編碼是 utf8，但瀏覽器的編碼預設是根據作業系統來，在中文作業系統中瀏覽器的編碼是 gbk，伺服器和客戶端編碼格式不同，於是亂碼了。

既然瀏覽器的編碼是 gbk，那我將伺服器這邊編碼指定為 gbk 是否就不會亂碼？修改程式碼為 res.write(JSON.stringify(data), 'gbk')，結果瀏覽器頁面出不來了，瀏覽器控制檯輸出了一個錯誤資訊：net::ERR_INVALID_CHUNKED_ENCODING。

網上說 node 不支援 gbk，再次修改程式碼為 res.write(JSON.stringify(data), 'base64')，訪問頁面，沒有了錯誤資訊，直接觸發了一個下載。

node 到底支援哪些編碼，又在哪裡宣告的？

突然想到文件中說 write() 方法只支援 String 和 Buffer兩種資料，於是在 Buffer 中看到 Buffer.isEncoding() 方法，作用是：如果 encoding 是支援的字元編碼的名稱，則返回true；否則返回false。

$ Buffer.isEncoding('utf-8')
true
$ Buffer.isEncoding('gbk')
false
$ Buffer.isEncoding('base64')
true
$

在 Buffer 原始碼中找到了支援的字元編碼，請看：

// Buffer class
type BufferEncoding = "ascii" | "utf8" | "utf-8" | "utf16le" | "ucs2" | "ucs-2" | "base64" | "latin1" | "binary" | "hex";

既然不能把 node 的編碼改為 gbk，那麼我們就把瀏覽器的編碼改成 node 的編碼 utf8，請看程式碼：

...
const requestCallback = (req, res) => {
    ...
    /*
    Content-type，決定瀏覽器以什麼形式，什麼編碼讀取這個檔案

    格式：Content-Type：type/subtype;parameter
        type：主型別，任意的字串，如text，如果是*號代表所有；
        subtype：子型別，任意的字串，如html，如果是*號代表所有，用“/”與主型別隔開；
        parameter：可選引數，如charset，boundary等。

    副檔名與 Content-type 對應關係可以在 w3school 中查閱
    */
    res.setHeader('Content-type', 'text/html;charset=utf8') // {1}
    res.write(data)
    ...
}
...

新增 res.setHeader()（行{1}），通過設定 Content-type 決定瀏覽器用什麼編碼讀取這個檔案。若只輸入 charset=utf8，經測試，仍舊亂碼。

如果給瀏覽器返回一段 html 字串，瀏覽器會有什麼表現？請看下面測試：

// 提示：end() 如果指定了data，則等效於呼叫 write(data)，然後呼叫 end()

// test1：瀏覽器輸出：hello world 浣犲ソ 
res.end('<h1>hello world 你好</h1>') 

// test2：瀏覽器輸出：hello world 你好 
res.setHeader('Content-type', 'text/html;charset=utf8')
res.end('<h1>hello world 你好</h1>')

// test3：瀏覽器輸出：<h1>hello world 你好</h1>
res.setHeader('Content-type', 'text/plain;charset=utf8')
res.end('<h1>hello world 你好</h1>')

test1 表明，node 不顯式宣告 Content-type，如果給瀏覽器返回 html 字串，瀏覽器也能自動識別並渲染出來，效果與 test2 相同。

其他章節請看：

前端學習 node 快速入門 系列