iT邦幫忙

2021 iThome 鐵人賽

DAY 6
2
Modern Web

JavaScript Easy Go!系列 第 6

#6 JavaScript & Node.js

前幾天說了很多純 JavaScript 及 DOM 的東西了,該為進入 Node.js 做準備了,所以今天來說說為什麼我們需要 Node.js 以及 Node.js 和 NPM 到底是什麼。

JavaScript 是怎麼執行的

我們前幾天都是在瀏覽器上執行 JavaScript,看起來也挺好玩的,JavaScript 可以幫我們完成許多事。

所有我們寫的 JavaScript 能在瀏覽器中執行都是因為有瀏覽器中的 JavaScrript 直譯器 (JavaScrript 引擎,其實不只是一般直譯器) 「看了」你寫的程式後叫電腦執行的。

每個瀏覽器都有自己的 JavaScript 引擎,這裡舉出幾個常用瀏覽器的 JavaScript 引擎:

  • Firefox: SpiderMonkey
  • Safari: Nitro
  • Chromium Family: V8

這裡就有個問題可能會發生:相同 JavaScript 程式碼在不同瀏覽器上的表現可能會不盡相同。所有的 JavaScript 引擎都是在實現 JavaScript 標準,但 JavaScript 標準是每年都在變的,所以可能某些引擎還沒實作出來就沒辦法使用了。

如果在寫 JavaScript 時不確定某功能有沒有被廣泛支援,可以在 MDN 或者是 can i use 上查詢。

我們為什麼會需要 Node.js

所以為什麼我們會需要裝Node.js 在電腦上?

為什麼我們不直接隨便搬一個 JavaScript 引擎過來用就好?原因是 JavaScript 引擎本身是用來處理程式的執行與邏輯的,在瀏覽器中很多東西其實都由瀏覽器處理好了,像是網路連線之類的。而且在瀏覽器中的環境畢竟為了安全,所以較直接在電腦環境中封閉,比如說檔案系統的存取又或者是網路連線的並行數都會被瀏覽器限制,你總不希望有人在你瀏覽網站時拿你的電腦挖礦吧。

Node.js 所使用的 JavaScript 引擎就是 Chrome 的 V8。為了讓開發者可以利用 JavaScript 來跟電腦互動,Node.js 做了許多的介面讓你的 JavaScript 可以存取檔案系統、發送大量並行請求、與其他程序互動之類的。

畢竟你的 JavaScript 一般不會編譯成執行檔,所以還是要用 Node.js 來跑你的程式碼。

如何安裝 Node.js

import node_install_tutorial from "google-search";

我不想花太多時間在重複教怎麼裝 Node.js 了,相信鐵人賽已經有很多前輩寫過很好的安裝教學了。
但在你去安裝 Node.js 前請先等等!可以先查查看好用的 NVM (Node.js Version Manager)。

NPM 是什麼

NPM 全名為 Null Pointer Missing,顧名思義就是某種遺失指針的狀況。或是 No More Please,請別人停止說廢話用的簡稱。

NPM 全名為 Node.js Package Manager,顧名思義就是 Node.js 中預設的包管理器。

所謂的包 (Package) 指的就是一套已經寫好的程式,某人寫好後把它註冊到 Registry (類似於記錄有哪些包的資料庫) 上,然後其他人就可以在自己程式中引入包並使用別人寫好的功能。

舉例來說,如果我想要寫一個爬蟲程式,我可以引用別人寫好的「解析HTML」的包,不需要管他的包裡面的魔法是怎麼運作的直接引用解析的程式,就可以專心的研究目標網站結構,加速開發時間,聽起來是不是很棒?

最好還是關心一下包是誰發布的,如果發布者沒聽過,或使用人數少,最好還是注意一下包的內容,畢竟它也是會在你的電腦上被執行的。

當然,NPM 只是「預設」的包管理器,其他著名的包管理器還有 yarnpnpm 等等,主要差在快取的機制造成的速度差異等等的,找一個自己習慣的用就好。


每日鐵人賽熱門 Top 10 (0919)

以 9/19 12:00 ~ 9/20 12:00 文章觀看數增加值排名

  1. +463 Day 1 無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  2. +334 D05 - 準備前端環境
    • 作者: 鱈魚
    • 系列:你渴望連結嗎?將 Web 與硬體連上線吧!
  3. +313 Day 3 雲端四大平台比較:AWS . GCP . Azure . Alibaba
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  4. +264 Day 2 AWS 是什麼?又為何企業這麼需要 AWS 人才?
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  5. +230 Day 4 網路寶石:AWS VPC Region/AZ vs VPC/Subnet 關係介紹
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  6. +211 Day 5 網路寶石:AWS VPC 架構 Routes & Security (上)
    • 作者: 用圖片高效學程式
    • 系列:無限手套 AWS 版:掌控一切的 5 + 1 雲端必學主題
  7. +204 Proxmox VE 儲存基本配置
    • 作者: Jason Cheng (節省哥)
    • 系列:突破困境:企業開源虛擬化管理平台
  8. +201 [Day 01] 在享受tinyML這道美食之前
    • 作者: 史蒂芬周
    • 系列:爭什麼,把AI和MCU摻在一起做tinyML就對了!
  9. +201 [Day 01] 在享受tinyML這道美食之前
    • 作者: 史蒂芬周
    • 系列:爭什麼,把AI和MCU摻在一起做tinyML就對了!
  10. +198 #1 JavaScript Easy Go!
    • 作者: JacobLinCool
    • 系列:JavaScript Easy Go!

Day 1 居然第十名?!


上一篇
#5 JavaScript in Browser
下一篇
#7 JavaScript Modules
系列文
JavaScript Easy Go!31

1 則留言

0
limitx0
iT邦新手 5 級 ‧ 2021-09-21 22:20:40

讚讚

我要留言

立即登入留言