為什么會 js 但是依然不會寫 node?原因竟是這三點...
Hello,大家好,我是 Sunday。
最近跟一位同學溝通,該同學提到:“學前端幾年了,JS 也用得挺熟了,但是每次涉及到 Node 的部分,就頭疼……完全不知道怎么寫”。
我聽完其實不意外,因為這個情況太普遍了,甚至可以說:90% 的前端,都“只會寫瀏覽器里的 JS”,不會寫 Node 的 JS。
那問題來了:
為啥都是 JS?為啥學會了 JS,卻依然不會 Node?
所以,咱們今天這篇文章,我們就來聊聊這個 “熟悉又陌生” 的 NodeJS!
1.瀏覽器 JS 和 Node JS,有什么區(qū)別?
雖然它們都叫 JavaScript,但環(huán)境差太多了。
咱們平時寫的瀏覽器 JS 是跑在 Chrome、Safari 這些瀏覽器里的,受限于 DOM、BOM,主要是為了“操作頁面”。
而 Node.js 呢,是運行在服務器端的 JS。沒有 window、沒有 document,取而代之的是:
- 文件系統(tǒng)(fs)
- 網(wǎng)絡請求(http、net)
- 子進程(child_process)
- 緩存和流(Buffer、Stream)
等 和服務器(系統(tǒng))直接相關(guān)的內(nèi)容。簡單來說就是:瀏覽器的 JS 是 “畫頁面” 用的,Node 中的 JS 是“操作系統(tǒng)” 用的
也正因為這個“跑的地方不一樣”,導致兩者在 能力邊界 上天差地別:
- 在瀏覽器里,JS 主要用來控制 DOM、監(jiān)聽事件、做動畫、發(fā) AJAX 請求。
- 在 Node 里,JS 主要負責讀寫文件、建立 TCP 連接、處理后臺邏輯、執(zhí)行自動化任務……
所以,雖然語法長得一樣,但“角色”和“能力”完全不一樣。這也解釋了:為什么很多前端寫慣了瀏覽器 JS,一到 Node 的世界就開始完全懵逼了。
2.語法差異性對比
API 完全不一樣
你熟悉的 addEventListener、localStorage、window.location 在 Node 里根本用不了。
Node 有自己的 API,比如:
const fs = require('fs')
fs.readFile('./data.txt', 'utf-8', (err, data) => {
if (err) return console.error(err)
console.log(data)
})是不是看著就有點陌生?而且一堆 callback,邏輯也更偏底層。
沒有 DOM、沒有頁面,找不到“感覺”
瀏覽器 JS 最大的成就感是:“我寫完能看到效果”。 點個按鈕、彈個框、加個動畫,寫完立即見成果,成就感拉滿。
但 Node 不是,它大多運行在命令行或者后臺,沒有畫面,沒有交互,甚至連報錯都是灰撲撲的終端提示。很多人寫著寫著就沒勁了:“寫完這個有啥用?” 不清楚,不知道,導致 沒感覺......
涉及異步、模塊、運行環(huán)境等底層概念
Node 比瀏覽器 JS 更“ 工程化”(實際上很多 工程化 的方案都是通過 NodeJS 來完成的)。
瀏覽器 JS 是 “響應式” 的(比如:Vue 或者 React),響應式的數(shù)據(jù),響應式的事件處理。
但是 Node 不是,Node 是“主動式”的!你要主動去監(jiān)聽網(wǎng)絡端口、要搭建服務、要處理底層 I/O,還得考慮性能、并發(fā)、異常處理……
所以說:Node 更接近 “后端”,更貼近 工程化。
3.怎么系統(tǒng)性地把 Node 補起來?
如果你現(xiàn)在想重新補 Node,建議:別再碎片化地去搜博客、看教程了。零零散散學一堆,最后還是不會用。
建議你按這 三個階段 來學,循序漸進,不走彎路。
第一階段:打通 Node 的“基本認知”
你要先搞懂 Node 究竟是什么、能干嘛,它跟你熟悉的 JS 有哪些根本差異。
關(guān)鍵點在于:
- Node.js 是怎么誕生的?它解決了瀏覽器 JS 的哪些問題?
- Node 和瀏覽器 JS 的最大區(qū)別是什么?(環(huán)境、能力、應用場景)
- Node 的模塊系統(tǒng)怎么用?(
CommonJSvsES Module,requirevsimport) - 全局變量有哪些?(
__dirname、__filename、process、global)
這個階段的目標:不寫代碼也能搞清楚 Node 在干嘛、適合用在哪。
第二階段:掌握常用模塊 + 異步控制
Node 的核心魅力就在于它“能做瀏覽器做不到的事”。
比如這些原生模塊,是你必須掌握的:
fs:讀寫文件path:處理路徑http/https:創(chuàng)建服務器url:解析地址參數(shù)child_process:執(zhí)行系統(tǒng)命令os/process:獲取操作系統(tǒng)信息
另外,Node 的一大特性是異步非阻塞,你還要熟練掌握:
- Promise、async/await 的用法和異常處理方式
- 事件驅(qū)動模型(
EventEmitter) - 異步并發(fā)控制(并發(fā)任務限流、任務隊列等)
可以結(jié)合實際練習,比如:
// 引入 Node.js 的 Promise 版本的文件系統(tǒng)模塊
const fs = require('fs/promises')
// 引入處理路徑的核心模塊(跨平臺拼路徑神器)
const path = require('path')
/**
* 異步讀取指定目錄下的所有文件,并判斷每個是文件還是文件夾
* @param {string} dirPath - 要讀取的目錄路徑
*/
async function readDir(dirPath) {
// 讀取目錄下的所有文件名(返回的是數(shù)組)
const files = await fs.readdir(dirPath)
// 遍歷每一個文件或文件夾
for (const file of files) {
// 拼接完整路徑
const fullPath = path.join(dirPath, file)
// 獲取當前路徑的狀態(tài)信息(判斷是文件還是文件夾)
const stat = await fs.stat(fullPath)
// 打印文件名 + 類型
console.log(file, stat.isDirectory() ? 'folder' : 'file')
}
}
// 調(diào)用函數(shù),讀取當前目錄(./)的文件信息
readDir('./')這個階段的目標是:能用 Node 寫出簡單的后端邏輯,搞定文件、路徑、服務。
第三階段:實戰(zhàn)項目鞏固
理解再多,不動手還是不會的。Node 在國內(nèi)實際應用中大部分是 工具類、BFF 層、服務端渲染
所以,建議大家可以做以下幾個類型的 demo:
1. 命令行工具(CLI):用 Node 寫一個終端命令,比如模擬下 vue-cli 或者 CRA,學會如何用 process.argv 獲取參數(shù)、用 chalk 輸出顏色、用 inquirer 做交互。
2. BFF 層(前后端中間層):用 express 或 koa 寫一個中間層服務,幫助你理解“前端接管部分后端職責”這件事。
- SSR 服務端渲染:利用 Nuxt 或者 Next 購構(gòu)建一個服務端渲染的項目,這里也會用到部分 NodeJS 相關(guān)的知識



























