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