前端學習 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 快速入門 系列