目錄
(一)Nodejs簡介
1.nodejs是什么
2.nodejs架構(gòu)
3.nodejs的應(yīng)用場景
(二)準(zhǔn)備工作
1.安裝nodejs
2.nodejs版本管理工具
(三)nodejs的使用
1.node的輸入
2.node的輸出
3.其他的console方法
(四)全局對象
1.常見的全局對象
2.特殊的全局對象
3.global和window的區(qū)別?
(五)模塊化***
1.什么是模塊化
2.CommonJS
(1)CommonJS的廣泛使用
(2)CommonJS在Node的使用
(3)CommonJS在Node實(shí)現(xiàn)的本質(zhì)
(4)module.exports的本質(zhì)
(5)require()查找模塊的細(xì)節(jié)
(6)Node模塊的加載過程
多次引入的模塊加載
循環(huán)引入的模塊加載順序
3.ES Module
(1)es module的導(dǎo)入和導(dǎo)出
(2)導(dǎo)出（暴露）的三種方法?
(3)導(dǎo)入的三種方法
(4)import函數(shù)
import()?
import.meta
(一)Nodejs簡介
1.nodejs是什么
nodejs是基于v8 JavaScript引擎的運(yùn)行時(shí)環(huán)境
node基于v8引擎來執(zhí)行js文件，但不僅僅只有v8引擎，也有額外的操作，如文件讀寫、網(wǎng)絡(luò)IO、加密、壓縮解壓文件等操作
2.nodejs架構(gòu)
node是用JS、C、C++語言編寫的
編寫的js代碼會(huì)通過v8引擎，再經(jīng)過nodejs的bindings，將任務(wù)放到Libuv的事件循環(huán)中
libuv：是使用C語言編寫的庫，提供了事件循環(huán)、文件系統(tǒng)讀寫、網(wǎng)絡(luò)IO等內(nèi)容
3.nodejs的應(yīng)用場景
- 目前前端開發(fā)的庫都是以node包的形式進(jìn)行管理
- npm、yarn、pnpm工具成為前端開發(fā)使用最多的工具
- 使用nodejs作為服務(wù)器開發(fā)、中間件、代理服務(wù)器
- 大量項(xiàng)目需要借助nodejs完成前后端渲染的同構(gòu)應(yīng)用
- 為項(xiàng)目編寫腳本工具
(二)準(zhǔn)備工作
1.安裝nodejs
在中文網(wǎng)里安裝node.js：?Node.Js中文網(wǎng)
LTS版本：更加穩(wěn)定，不會(huì)輕易改變版本（項(xiàng)目開發(fā)推薦）
current版本：最新版本，擁有新特性，不太穩(wěn)定?
2.nodejs版本管理工具
當(dāng)需要使用到多個(gè)版本的node且來回切換時(shí)，可以使用版本工具進(jìn)行快速安裝和切換
n或nvm：適用于Mac系統(tǒng)
nvm-windows：適用于windows系統(tǒng)?GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.
nvm-windows的基本使用：
在github里下載：Releases · coreybutler/nvm-windows · GitHub
nvm list ----列出nvm管理的node版本
nvm install xx版本 ----下載xx版本
nvm use xx版本 ----切換為xx版本
nvm current ----展示當(dāng)前使用的node版本
(三)nodejs的使用
1.node的輸入
在控制臺運(yùn)行js文件：node xxx?
輸出：console.log()
2.node的輸出
輸入：node xxx 變量 變量...
輸入的變量會(huì)存儲(chǔ)在全局對象process的argv數(shù)組里，這個(gè)數(shù)組存儲(chǔ)有node的路徑和運(yùn)行的js文件的路徑，以及輸入的變量
?
因此可以通過process.argv獲取輸入的變量值?
argv是什么？
是argument vector的縮寫，指傳入的具體的參數(shù)
3.其他的console方法
console.clear()清空控制臺
console.trace()打印函數(shù)的調(diào)用棧
更多在文檔中查看：Console | Node.js v19 API
(四)全局對象
這些對象在所有模塊中都可用：Global objects | Node.js v19 API
1.常見的全局對象
global：全局對象
process：process對象提供有關(guān)當(dāng)前Node.js進(jìn)程的信息和控制?Process | Node.js v19 API
console:對控制臺的簡單調(diào)試
定時(shí)器函數(shù)：
setTimeout()
setInterval()
setImmediate()：callback I/O事件之后的回調(diào)立即執(zhí)行
setImmediate和setTimeout的執(zhí)行順序有區(qū)別，后續(xù)再x
process.nextTick()：添加到下一次tick隊(duì)列中
2.特殊的全局對象
以下變量可能看起來是全局的，但實(shí)際上不是。它們只存在于模塊的作用域中
詳情見：CommonJS modules | Node.js v19 API
__dirname：當(dāng)前文件所在的目錄結(jié)構(gòu)
__filename：當(dāng)前目錄+文件名稱
exports、module、require()：在后面的模塊化會(huì)著重講到?
3.global和window的區(qū)別?
global對象是js運(yùn)行時(shí)nodejs提供的全局對象，上文提到的process、console、定時(shí)器函數(shù)等都包含在global對象中；
window對象是瀏覽器的全局對象，里面也包含了console、定時(shí)器函數(shù)等；
但在瀏覽器里global相關(guān)的屬性是不存在的，在node里window屬性也是不存在的
因此使用全局屬性globalThis可以解決該問題
globalThis - JavaScript | MDN
通過使用globalThis，你的代碼將在 window 和非 window 上下文中工作，而無需編寫額外的檢查或測試。在大多數(shù)環(huán)境中，globalThis直接引用該環(huán)境的全局對象。但是，在瀏覽器中，內(nèi)部使用代理來考慮iframe和跨 window 安全性。實(shí)際上，它并不會(huì)改變我們編寫代碼的方式。?
(五)模塊化***
1.什么是模塊化
- 模塊化開發(fā)是將程序劃分為一個(gè)個(gè)小的模塊結(jié)構(gòu)，在各自的模塊中編寫自己的邏輯結(jié)構(gòu)，有自己的作用域，不會(huì)造成全局變量的污染。
- 在這個(gè)模塊結(jié)構(gòu)中，可以將自己的變量、函數(shù)、對象等導(dǎo)出給其他模塊使用，也可以引入其他模塊的變量、函數(shù)、對象等為自己所用。
在早期js開發(fā)中，對于怎么樣導(dǎo)入導(dǎo)出沒有具體的規(guī)范，大家自發(fā)的建立起CommonJS、amd/cmd等模塊開發(fā)規(guī)范，直到ES6的ESModule給出了官方的模塊化規(guī)范?
2.CommonJS
(1)CommonJS的廣泛使用
- node是CommonJS在服務(wù)器端一個(gè)具有代表性的實(shí)現(xiàn)；
- Browserify是CommonJS在瀏覽器的一個(gè)實(shí)現(xiàn)；
- webpack打包工具具備對CommonJS的支持和轉(zhuǎn)換
(2)CommonJS在Node的使用
nodejs的模塊化是基于CommonJS的規(guī)范實(shí)現(xiàn)的
- Node.js 應(yīng)用由模塊組成，每個(gè)文件就是一個(gè)模塊，有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類，都是私有的，對其他文件不可見。
- 模塊中包括CommonJS規(guī)范的核心變量：module、exports、require
模塊的導(dǎo)出
exports、module.exports?
const name = 'csq'
function sayHello() {
console.log('hello');
}
exports.name = name
exports.sayHello = sayHello模塊的導(dǎo)入
require()命令的基本功能是，讀入并執(zhí)行一個(gè) js 文件，然后返回該模塊的 exports 對象。如果沒有發(fā)現(xiàn)指定模塊，會(huì)報(bào)錯(cuò)。
const a = require('./a')
// 解構(gòu)賦值
// const {name,sayHello} = require('./a')
console.log(a.name);
a.sayHello()(3)CommonJS在Node實(shí)現(xiàn)的本質(zhì)
require()通過引用賦值將另一模塊的exports對象綁定在當(dāng)前模塊中
意思是：require獲取到的對象和導(dǎo)出的對象指向同一個(gè)地址
在導(dǎo)入的模塊中修改require獲取到的對象，在導(dǎo)出模塊的exports對象也會(huì)發(fā)生改變；反之，在導(dǎo)出模塊的exports對象發(fā)生改變，那么在導(dǎo)入模塊的require獲取的對象也會(huì)發(fā)生改變。
在main.js中：
const a = require('./a')
console.log(a.name); // ‘csq’
// 2s后修改對象屬性 對應(yīng)導(dǎo)出的exports對象也會(huì)改變
setTimeout(() => {
a.name = 'zkj'
}, 2000)
在a.js中：
const name = 'csq'
setTimeout(() => {
console.log(exports.name); // ‘zkj’
}, 3000);
exports.name = name(4)module.exports的本質(zhì)
CommonJS中是沒有module.exports的概念的，是依靠exports進(jìn)行導(dǎo)出的。而在Node中為了實(shí)現(xiàn)模塊的導(dǎo)出，使用的是Module類，每一個(gè)模塊的實(shí)例也就是module，真正用于模塊導(dǎo)出的是module.exports。因此exports只是指向了module.exports
如下圖，require()導(dǎo)入的a和module.exports、exports都指向同一地址，因此對三者任意一個(gè)進(jìn)行修改，其他的也都會(huì)改變?
在開發(fā)中，更加推薦的導(dǎo)出方法是：
// 推薦導(dǎo)出方法
module.exports = {
name,
sayHello
}這種方法創(chuàng)建了一個(gè)新對象并將module.exports也指向了新的內(nèi)存，exports對象也就沒有了意義
因此，無論如何修改exports內(nèi)的數(shù)據(jù)都不會(huì)影響到module.exports?
(5)require()查找模塊的細(xì)節(jié)
情況一：require("內(nèi)置模塊名")：導(dǎo)入Node內(nèi)置模塊
如：path、http、fs等內(nèi)置模塊
情況二：require("路徑")：導(dǎo)入自定義的模塊
查找順序：如"./xxx"，會(huì)先按照以下順序查找當(dāng)前目錄有無該文件：
? ? ? ? 1.xxx
? ? ? ? 2.xxx.js
? ? ? ? 3.xxx.json
? ? ? ? 4.xxx.node
當(dāng)這些文件都沒有后，再將xxx作為一個(gè)目錄，自動(dòng)補(bǔ)全index文件，查找目錄后有無index文件，沒有就會(huì)報(bào)錯(cuò)
情況三：require("外部模塊")：當(dāng)require內(nèi)不是路徑也不是內(nèi)置模塊時(shí)，會(huì)查找當(dāng)前路徑的node_modules文件夾，再在文件夾內(nèi)尋找有無該模塊；若當(dāng)前路徑?jīng)]有node_modules文件夾，就向上一級文件夾依次繼續(xù)尋找
例如require("axios") 需要通過node i axios下載后才能在node_modules內(nèi)找到?
(6)Node模塊的加載過程
多次引入的模塊加載
第一次加載某個(gè)模塊時(shí)，Node.js 會(huì)緩存該模塊。以后再加載該模塊，就直接從緩存取出該模塊的exports屬性返回
const a = require('./a')
// 第一次加載某個(gè)模塊時(shí)，Node.js 會(huì)緩存該模塊。
// 以后再加載該模塊，就直接從緩存取出該模塊的 module.exports 屬性返回
a.name = 'zkj'
const b = require('./a')
console.log(b.name); // 'zkj'由以上實(shí)例可證明，再次導(dǎo)入該模塊，就不會(huì)再從該模塊中重新加載了
原因：在module對象中有一個(gè)屬性loaded默認(rèn)為false，當(dāng)導(dǎo)入后就會(huì)變?yōu)閠rue，不會(huì)再被加載了
循環(huán)引入的模塊加載順序
當(dāng)出現(xiàn)循環(huán)引入，如圖
Node會(huì)按照圖的深度優(yōu)先算法進(jìn)行遍歷
即順序：main ->aaa->ccc->ddd->eee->bbb?
3.ES Module
commonJS模塊化適用于服務(wù)器端，而官方推出的ES Module是在瀏覽器端實(shí)現(xiàn)模塊化的一個(gè)很好的方案
(1)es module的導(dǎo)入和導(dǎo)出
在瀏覽器中實(shí)現(xiàn)模塊化，只需要在引入時(shí) type=module即可
導(dǎo)入：import {xxx,yyy} from "xxx.js"
在main.js中：
// 在瀏覽器上使用模塊化 導(dǎo)入時(shí)文件名后綴要寫完整
import { name, sayHello } from "./a.js"
console.log(name); // ‘csq’
sayHello() // ‘hello’注意：在瀏覽器使用esModule時(shí)要加上文件后綴js，否則查找不到對應(yīng)文件
導(dǎo)出：export {xxx,yyy}
在a.js中：
let name = 'csq'
function sayHello() {
console.log("hello");
}
export { name, sayHello }注意：在瀏覽器使用ESModule必須開啟一個(gè)服務(wù)端口打開對應(yīng)html文件，否則會(huì)報(bào)錯(cuò)：不能通過本地下載js文件的方式解析，file協(xié)議前綴會(huì)被跨域策略阻止，必須使用http、https等協(xié)議前綴
在MDN上有解釋：JavaScript 模塊 - JavaScript | MDN
你需要注意本地測試——如果你通過本地加載 HTML 文件（比如一個(gè) file:// 路徑的文件），你將會(huì)遇到 CORS 錯(cuò)誤，因?yàn)?JavaScript 模塊安全性需要。你需要通過一個(gè)服務(wù)器來測試。?
(2)導(dǎo)出（暴露）的三種方法?
分別暴露
// 1.分別暴露
export let name = 'csq'
export function sayHello() {
console.log("hello");
}統(tǒng)一暴露
// 2.統(tǒng)一暴露
export { name, sayHello }默認(rèn)暴露
// 3.默認(rèn)暴露 (只能暴露一個(gè)變量、方法或?qū)ο蟮?
export default {
name:'csq',
age:18
}(3)導(dǎo)入的三種方法
// 1.導(dǎo)入方式1
import { name, sayHello } from "./a.js"
// 2.導(dǎo)入方式2 全部導(dǎo)入
import * as a from "./a.js"
// 3.默認(rèn)暴露的導(dǎo)入
import sayHello from "./a.js";注意：默認(rèn)暴露的導(dǎo)入名字是自定義的，一般使用與導(dǎo)出相關(guān)的名字
(4)import函數(shù)
import和export命令只能在模塊的頂層?
import命令會(huì)被 JavaScript 引擎靜態(tài)分析，先于模塊內(nèi)的其他語句執(zhí)行。若在if語句內(nèi)寫import語句，在編譯時(shí)是不會(huì)被處理的，導(dǎo)致報(bào)語句錯(cuò)誤，如下：
if(name){
import { age } from "./b.js"; // 報(bào)錯(cuò)：導(dǎo)入聲明只能在頂層使用
}import()?
?ES2020 引入import()函數(shù)，支持動(dòng)態(tài)加載模塊
import("./xxx.js")函數(shù)返回一個(gè)promise對象
if (name) {
import('./b.js').then(res => {
console.log(res) // module對象
console.log(res.age) // 18
})
}
import()和require()一樣都能實(shí)現(xiàn)動(dòng)態(tài)加載模塊，區(qū)別是：前者是異步加載，后者是同步加載
import.meta
開發(fā)者使用一個(gè)模塊時(shí)，有時(shí)需要知道模板本身的一些信息（比如模塊的路徑）。ES2020 為 import 命令添加了一個(gè)元屬性import.meta，返回當(dāng)前模塊的元信息。
import.meta只能在模塊內(nèi)部使用，如果在模塊外部使用會(huì)報(bào)錯(cuò)
console.log(import.meta); // 在b.js中
?
(5)ESModule解析過程**
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
構(gòu)建：查找、下載并將所有文件解析為模塊記錄（Module record）
實(shí)例化：對模塊記錄進(jìn)行實(shí)例化，分配內(nèi)存空間，然后解析模塊的導(dǎo)入和導(dǎo)出，將導(dǎo)出和導(dǎo)入都指向?qū)?yīng)的內(nèi)存地址
運(yùn)行：運(yùn)行代碼，將實(shí)際的值填入對應(yīng)的內(nèi)存地址中文章來源：http://www.zghlxwxcb.cn/news/detail-761711.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-761711.html
到了這里，關(guān)于NodeJs（一）：初識nodejs、模塊化、CommonJS、ESModule等的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
