跳到主要内容

2 篇博文 含有标签「NodeJs」

查看所有标签

1. Node.js是什么

官方对于Node.js的定义

  • Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境
  • Node.js is a JavaScript runtime build on Chrome's V8 JavaScript engine

V8引擎可以执行JS代码

也就是说Node.js基于V8引擎来执行JavaScript的代码,但是不仅仅只有V8引擎:

  • 前面我们知道V8可以嵌入到任何C++应用程序中,无论是Chrome还是Node.js,事实上都是嵌入了V8引擎来执行JavaScript代码;
  • 但是在Chrome浏览器中,还需要解析、渲染HTML、CSS等相关渲染引擎,另外还需要提供支持浏览器操作的API、浏览器自己的事件循环等;
  • 另外,在Nodejs中我们也需要进行一些额外的操作,比如文件系统读/写、网络IO、加密、压缩解压文件等操作;

1.1 浏览器和Node.js架构的区别

浏览器和Node.js架构的区别

  • Libuv 是由C语言来编写的
  • Node是由什么语言来编写的?有JS,同时有C++,同时有C语言

1.2 Node.js架构

Node.js架构

  • 我们编写的JS代码会经过V8引擎,通过Node.js的Bindings,将任务放到Libuv事件循环中
  • Libuv(Unicorn Velociraptor)使用C语言编写的库
  • libuv提供了事件循环文件系统读写网络IO线程池等内容

1.3 Node.js应用场景

  • 应用一:目前前端开发的库都是以Node包的形式进行管理
Vue/Vue-Router/Pinia/Vuex

React/React-Router

dayjs/loadsh -> script src

npm install dayjs -> import dayjs from "dayjs"
yarn/pnpm add dayjs/axios/vue
  • 应用二:npm, yarn, pnpm 工具称为前端开发使用最多的工具

  • 应用三:越来越多的公司使用Node.js作为web服务器开发,中间件,代理服务器

  • 应用四:大量项目需要借助于Node.js完成前后端渲染的同构应用

    • SSR -> nextjs
  • 应用五:资深前端工程师需要为项目编写脚本工具(前端工程师编写脚本通常会使用Javascript,而不是Python或者shell)

  • 应用六:很多企业在使用Electron来开发桌面应用程序

2. Node.js安装

2.1 NodeJs的安装

  • nodejs.org

  • Node.js 于2009年诞生

    • LTS版本(Long-term support,长期支持),推荐线上环境使用该版本
    • Current版本,最新的Node版本,包含很多新特性
  • msi(microsoft install)

  • macOS

# Download and install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# in lieu of restarting the shell
\. "$HOME/.nvm/nvm.sh"

# Download and install Node.js:
nvm install 24

# Verify the Node.js version:
node -v # Should print "v24.13.0".

# Verify npm version:
npm -v # Should print "11.6.2".

  • 案例
(base) jiexu:001-coderwhy-2022-06-27/ (master✗) $ node example.js       [10:46:49]
aaa
bbb
  • koa搭建服务器,可以尝试下

2.2 Node的版本工具

  • n(TJ写的)/nvm 这两个工具可以用来做版本控制
    • nvm:Node Version Manager
    • n: Interatively Manage Your Node.js Versions(交互式管理你的Node.js版本)
    • 弊端:不支持windows系统

2.2.1. nvm用法

nvm install latest 安装最新的版本

nvm list

nvm use 切换版本

2.2.2. n用法

安装n:直接使用npm安装即可

# 安装工具
npm install -g n

# 查看安装的版本
n --version

安装最新的LTS版本(前面可以添加sudo用来给与权限)

# 安装最新的lts版本
n lts

# 安装最新的版本
n latest

3. JavaScript代码执行

windows下面vscode默认打开终端的是powershell,如何修改?

点击右上角的按钮即可,选择cmd

如果我们编写一个js文件,里面存放JavaScript代码,如何来执行它呢?

目前我们知道有两种方式可以执行:

  • 将代码交给浏览器执行;
  • 将代码载入到node环境中执行;

如果我们希望把代码交给浏览器执行:

  • 需要通过让浏览器加载、解析html代码,所以我们需要创建一个html文件;
  • 在html中通过script标签,引入js文件;
  • 当浏览器遇到script标签时,就会根据src加载、执行JavaScript代码;

如果我们希望把js文件交给node执行:

  • 首先电脑上需要安装Node.js环境,安装过程中会自动配置环境变量;
  • 可以通过终端命令node js文件的方式来载入和执行对应的js文件;

3.2 Node程序传递参数

正常情况下执行一个node程序,直接跟上我们对应的文件即可:

  • node index.js

但是,在某些情况下执行node程序的过程中,我们可能希望给node传递一些参数:

  • node index.js env=development coderwhy

如果我们这样来使用程序,就意味着我们需要在程序中获取到传递的参数:

  • 获取参数其实是在process的内置对象中的;
  • 如果我们直接打印这个内置对象,它里面包含特别的信息:
    • 其他的一些信息,比如版本、操作系统等大家可以自行查看,后面用到一些其他的我们还会提到;

现在,我们先找到其中的argv属性:

  • 我们发现它是一个数组,里面包含了我们需要的参数;
[
'/Users/jiexu/.nvm/versions/node/v22.15.1/bin/node',
'/Users/jiexu/coding/fullstack/learning-notes/100-nodejs/001-coderwhy-2022-06-27/02-node的输入和输出.js',
'num1=20',
'num2=20'
]
const num1 = 100
const num2 = 200

console.log(num1 + num2)

console.log(process.argv) // node 02-node的输入和输出.js num1=20 num2=20

const arg1 = process.argv[2]
const arg2 = process.argv[3]

console.log(arg1, arg2) // node 02-node的输入和输出.js 20 20

3.3 为什么叫argv呢

在C/C++程序中的main函数中,实际上可以获取到两个参数:

  • argc: argument counter的缩写,传递参数的个数;
  • argv: argument vector(向量、矢量)的缩写,传入的具体参数。
    • vector翻译过来是矢量的意思,在程序中表示的是一种数据结构。
    • 在C++、Java中都有这种数据结构,是一种数组结构;
    • 在JavaScript中也是一个数组,里面存储一些参数信息;

可以遍历出来:

process.argv.forEach(item => {
console.log(item)
});

3.4 Console的输入和输出

console.log 最常用的输入内容的方式:console.log

console.clear 清空控制台:console.clear

console.trace 打印函数的调用栈:console.trace

3.5 Node的REPL

什么是REPL呢? REPL是Read-Eval-Print Loop的简称,翻译为"读取-求值-输出"循环;

REPL是一个简单的、交互式的编程环境;

事实上,我们浏览器的console就可以看成一个REPL。

Node也给我们提供了一个REPL环境,我们可以在其中演练简单的代码。

4. Node中的全局对象

console.log(global)

(base) jiexu:001-coderwhy-2022-06-27/ (master✗) $ node 03-node中的全局对象.js [11:54:21]
<ref *1> Object [global] {
global: [Circular *1],
clearImmediate: [Function: clearImmediate],
setImmediate: [Function: setImmediate] {
[Symbol(nodejs.util.promisify.custom)]: [Getter]
},
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Getter]
},
queueMicrotask: [Function: queueMicrotask],
structuredClone: [Function: structuredClone],
atob: [Function: atob],
btoa: [Function: btoa],
performance: [Getter/Setter],
fetch: [Function: fetch],
navigator: [Getter],
crypto: [Getter]
}

global是一个全局对象,事实上前端我们提到的process、console、setTimeout等都有被放到global中:

​ 我们之前讲过:在新的标准中还有一个globalThis,也是指向全局对象的;

​ 类似于浏览器中的window;

  • global和window的区别
    • var定义的属性会被放在window里面,但是不会放在global里面,只会是当前模块中的一个变量

4.1 常见的全局对象

Node中给我们提供了一些全局对象,方便我们进行一些操作:

  • 这些全局对象,我们并不需要从一开始全部一个个学习;
  • 某些全局对象并不常用;
  • 某些全局对象我们会在后续学习中讲到;
    • 比如module、exports、require()会在模块化中讲到;
    • 比如Buffer后续会专门讲到;

Node的全局对象

4.2 特殊的全局对象

这些全局对象实际上是模块中的变量,只是每个模块都有,看来像是全局变量;

在命令行交互中是不可以使用的;

包括:_dirname、__filename、 exports、module、 require()

// 1. 类似于window的全局对象
console.log(global)

// 2. 特殊的全局对象
console.log(__dirname) ///Users/jiexu/coding/fullstack/learning-notes/100-nodejs/001-coderwhy-2022-06-27
console.log(__filename) // /Users/jiexu/coding/fullstack/learning-notes/100-nodejs/001-coderwhy-2022-06-27/03-node中的全局对象.js

// 3. 模块化时具体学习(重要)
console.log(module)
console.log(exports)
console.log(require)

__dirname:获取当前文件所在的路径: 注意:不包括后面的文件名

__filename:获取当前文件所在的路径和文件名称: 注意:包括后面的文件名称

// 1. 类似于window的全局对象
console.log(global)

// 2. 特殊的全局对象
console.log(__dirname) ///Users/jiexu/coding/fullstack/learning-notes/100-nodejs/001-coderwhy-2022-06-27
console.log(__filename) // /Users/jiexu/coding/fullstack/learning-notes/100-nodejs/001-coderwhy-2022-06-27/03-node中的全局对象.js

// 3. 模块化时具体学习(重要)
console.log(module)
console.log(exports)
console.log(require)



// 4. 常见的全局对象,了解
console.log(process)
console.log(process.argv)

// 5. 定时器方法
setTimeout(() => {
console.log("setTimeout")
}, 2000);

setInterval(() => {
console.log("setInterval")
}, 3000)

setImmediate(() => {
console.log("setImmediate")
})

// 额外执行函数
process.nextTick(() => {
console.log("nextTick")
})

// 6. 全局对象
console.log(global)
console.log(globalThis)
console.log(global === globalThis)
NodeJs阅读需 8 分钟

1. 认识模块化开发

1.1 什么是模块化

  • 模块化开发最终的目的是将程序划分成一个个小的结构
  • 这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名时不会影响到其他作用域
  • 这个结构可以将自己希望暴露的变量,函数,对象等导出给其他结构使用
  • 也可以通过某种方式,导入另外结构中的变量,函数,对象等

上面说到的结构,就是模块,按照这种结构划分开发程序的过程,就是模块化开发的过程

无论你多么喜欢JS,以及它现在发展有多好,它都有很多缺陷:

  • 比如var定义的变量作用域问题
  • 比如JS的面向对象并不能像常规面向对象语言一样使用class
  • 比如JS没有模块化的问题

1.2 模块化的历史

ECMAScript没有推出来自己的模块化方案之前,社区有 CommonJS/AMD/CMD几种方案

ES6(ES2015)推出自己的模块化方案: ESModule

  • 在网页开发的早期,Brendan Eich开发JavaScript仅仅作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的:
    • 这个时候我们只需要将JavaScript代码写到<script>标签中即可;
    • 并没有必要放到多个文件中来编写;甚至流行:通常来说JavaScript程序的长度只有一行
  • 但是随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂了:
    • ajax的出现,前后端开发分离,意味着后端返回数据后,我们需要通过JavaScript进行前端页面的渲染;
    • SPA的出现,前端页面变得更加复杂:包括前端路由状态管理等等一系列复杂的需求需要通过JavaScript来实现;
    • 包括Node的实现,JavaScript编写复杂的后端程序,没有模块化是致命的硬伤;
  • 所以,模块化已经是JavaScript一个非常迫切的需求:
    • 但是JavaScript本身,直到ES6(2015)才推出了自己的模块化方案;
    • 在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等;

1.3 没有模块化带来的问题

  • 早期没有模块化带来了很多的问题:比如命名冲突的问题
  • 当然,我们有办法可以解决上面的问题:立即函数调用表达式(IIFE)
    • IlFE (lmmediately Invoked Function Expression)
  • 但是,我们其实带来了新的问题:
    • 第一,我必须记得每一个模块中返回对象的命名,才能在其他模块使用过程中正确的使用;
    • 第二,代码写起来混乱不堪,每个文件中的代码都需要包裹在一个匿名函数中来编写;
    • 第三,在没有合适的规范情况下,每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况;
  • 所以,我们会发现,虽然实现了模块化,但是我们的实现过于简单,并且是没有规范的。
    • 我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码;
    • 这个规范中应该包括核心功能:模块本身可以导出暴露的属性,模块又可以导入自己需要的属性;
    • JavaScript社区为了解决上面的问题,涌现出一系列好用的规范,接下来我们就学习具有代表性的一些规范。

2. CommonJS和Node

2.1 CommonJS规范和Node关系

  • 我们需要知道CommonJS是一个规范,最初提出来是在浏览器以外的地方使用,并且当时被命名为ServerJS,后来为了体现它的广泛性,修改为CommonJS,平时我们也会简称为CJS

    • Node是CommonJS在服务器端一个具有代表性的实现;
    • Browserify是CommonJS在浏览器中的一种实现;
    • webpack打包工具具备对CommonJS的支持和转换;
  • CommonJS规范

    • 模块中要导出内容:exports
    • 模块中要导入内容:require
  • 所以,Node中对CommonJS进行了支持和实现,让我们在开发node的过程中可以方便的进行模块化开发:

    • 在Node中每一个js文件都是一个单独的模块;
    • 这个模块中包括CommonJS规范的核心变量:exports、module.exports、require;
    • 我们可以使用这些变量来方便的进行模块化开发;
  • 前面我们提到过模块化的核心是导出和导入,Node中对其进行了实现:

    • exports和module.exports可以负责对模块中的内容进行导出;
    • require函数可以帮助我们导入其他模块(自定义模块、系统模块、第三方库模块)中的内容;

2.2 exports导出

注意:exports是一个对象,我们可以在这个对象中添加很多个属性,添加的属性会导出;

exports.name = name
exports.age = age
exports.sayHello = sayHello

另外一个文件中可以导入:const bar = require('./bar');

上面这行完成了什么操作呢?理解下面这句话:

  • 意味着main中的bar变量等于exports对象
  • 也就是require通过各种查找方式,最终找到了exports这个对象
  • 并且将这个exports对象赋值给了bar变量
  • bar变量就是exports对象了

2.3 module.exports导出

  • 但是Node中我们经常导出东西的时候,又是通过module.exports导出的:

    • module.exports和exports有什么关系或者区别呢?
  • 我们追根溯源,通过维基百科中对CommonJS规范的解析:

    • CommonJS中是没有module.exports的概念的;
    • 但是为了实现模块的导出,Node中使用的是Module的类,每一个模块都是Module的一个实例,也就是module;
    • 所以在Node中真正用于导出的其实根本不是exports,而是module.exports;
    • 因为module才是导出的真正实现者;
  • 但是,为什么exports也可以导出呢?

    • 这是因为module对象的exports属性是exports对象的一个引用;
    • 也就是说module.exports= exports=main中的bar;
  • 开发中常见的写法

module.exports = {
name,
age,
sayHello
}

这里module.exports不再引用exports对象了,那么修改export就没有意义了

2.4 require函数解析

2.4.1 require细节

我们现在已经知道,require是一个函数,可以帮助我们引入一个文件(模块)中导出的对象

  • 那么,require的查找规则是怎么样的呢?
    • 这里我总结比较常见的查找规则:
    • 导入格式如下:require(X)
2.4.1.1 情况1 导入的是node提供的内置模块
  • X是一个Node核心模块,比如path、http
    • 直接返回核心模块,并且停止查找
// 情况1,导入的是node内置模块
const path = require("path")
const http = require("http")
console.log(path, http)


2.4.1.2 情况2 导入的是自定义的模块

X是以./或../或/(根目录)开头的

第一步:将X当做一个文件在对应的目录下查找;

  • 1.如果有后缀名,按照后缀名的格式查找对应的文件

  • 2.如果没有后缀名,会按照如下顺序: 1>直接查找文件X 2>查找Xjs文件 3>查找X.json文件 4>查找X.node文件

第二步:没有找到对应的文件,将X作为一个目录

  • 查找目录下面的index文件 1>查找X/index.js文件 2>查找X/index.json文件 3>查找X/index.node文件

如果没有找到,那么报错:not found


// 情况2, 导入的是自己定义的模块
const {name, formatCount, formatDate} = require("./utils")
console.log(name)
console.log(formatDate())
2.4.1.3 情况3 导入的名称不是路径,也不是一个内置模块

他会在下面的路径中查找node_modules里面的安装的模块:

如果没有找到,那么报错:not found


// 情况3, 导入的不是自己定义的模块,也不是内置模块
const jie = require("jie")
console.log(jie)

// npm install axios

const axios = require("axios")
console.log(axios)

2.5 模块加载过程

  • 结论一:模块在被第一次引入时,模块中的js代码会被运行一次
  • 结论二:模块被多次引入时,会缓存,最终只加载(运行)一次
    • 为什么只会加载运行一次呢?
    • 这是因为每个模块对象module都有一个属性:loaded
    • 为false表示还没有加载,为true表示已经加载;
  • 结论三:如果有循环引入,那么加载顺序是什么?
    • 这个其实是一种数据结构:图结构;
    • 图结构在遍历的过程中,有深度优先搜索(DFS,depthfirstsearch)和广度优先搜索(BFS,breadthfirst search)
    • Node采用的是深度优先算法:main->aaa->ccc->ddd->eee->bbb

2.6 CommonJS的规范的缺点

  • CommonJS加载模块是同步的:
    • 同步的意味着只有等到对应的模块加载完毕当前模块中的内容才能被运行;
    • 这个在服务器不会有什么问题,因为服务器加载的js文件都是本地文件,加载速度非常快;
  • 如果将它应用于浏览器呢?
    • 浏览器加载js文件需要先从服务器将文件下载下来,之后再加载运行;
    • 那么采用同步的就意味着后续的js代码都无法正常运行,即使是一些简单的DOM操作;
  • 所以在浏览器中,我们通常不使用CommonJS规范:
    • 当然在webpack中使用CommonJS是另外一回事;
    • 因为它会将我们的代码转成浏览器可以直接执行的代码;
  • 在早期为了可以在浏览器中使用模块化,通常会采用AMD或CMD:
    • 但是目前一方面现代的浏览器已经支持ES Modules,另一方面借助于webpack等工具可以实现对CommonJS或者ESModule代码的转换;
    • AMD和CMD已经使用非常少了;

4. AMD和CMD(了解)

4.1 AMD

  • AMD主要是应用于浏览器的一种模块化规范:
    • AMD是**Asynchronous Module Definition(异步模块定义)**的缩写;
    • 它采用的是异步加载模块;
    • 事实上AMD的规范还要早于CommonJS,但是CommonJS目前依然在被使用,而AMD使用的较少了;
  • 我们提到过,规范只是定义代码的应该如何去编写,只有有了具体的实现才能被应用:
    • AMD实现的比较常用的库是require.js和curl.js;

4.1.1 require.js的使用

  • 第一步:下载require.js
  • 第二步:定义HTML的script标签引入require.js和定义入口文件:
    • data-main属性的作用是在加载完src的文件后会加载执行该文件

4.2 CMD规范

  • CMD规范也是应用于浏览器的一种模块化规范:
    • CMD是**CommonModule Definition(通用模块定义)**的缩写;
    • 它也采用的也是异步加载模块,但是它将CommonJS的优点吸收了过来;
    • 但是目前CMD使用也非常少了;
  • CMD也有自己比较优秀的实现方案:
    • SeaJS

4.2.1 SeaJS使用

  • 第一步:下载SeaJS
  • 第二步:引入sea.js和使用主入口文件
    • seajs是指定主入口文件的

5. ESModule用法详解

如果想让浏览器支持模块化,有两种方式:

方式一:esmodule, ECMA2015提出来模块化规范,浏览器本身支持es module

方式二:webpack模块化打包工具,打包之后的js文件就是普普通通的js文件,浏览器可以直接运行

5.1 认识ES module

  • JavaScript没有模块化一直是它的痛点,所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD等,所以在ECMA推出自己的模块化系统时,大家也是兴奋异常。

  • ES Module和CommonJS的模块化有一些不同之处:

    • 一方面它使用了importexport关键字;
    • 另一方面它采用编译期的静态分析,并且也加入了动态引用的方式;
  • ESModule模块采用exportimport关键字来实现模址决化:

    • export负责将模块内的内容导出;
    • import负责从其他模块导入内容;
  • 了解:采用ESModule将自动采用严格模式:use strict

5.2 案例演示

5.2.1 方式1

  • 通过 type = "module"的方式
    <script src="./foo.js" type="module"> </script>
<script src="./main.js" type="module"> </script>
  • 如果直接在浏览器中运行代码,会报如下错误:CORS 错误
  • 这个在MDB上有解释:
  • 我这里使用的VSCode插件:Live Server

5.3 export

5.3.1 导出方式1

// 导出方式1
// export {
// name, age, sayHello
// }

5.3.2 导出方式2

// 导出方式2,给标识符起一个别名
export {
name as fName, age, sayHello
}

5.3.3 导出方式3

// 导出方式3
export const name = "foo"

5.4 import

5.4.1 导入方式1

import {name, age, sayHello } from './foo.js'

5.4.2 导入方式2

// 导入 import
// 注意事项1: 在浏览器中直接使用esmodule时,必须在文件后加上后缀名.js
import {name as fooName, sayHello as fooSayHello } from './foo.js'

5.4.3 导入方式3

// 导出时可以给整个模块起别名

import * as foo from "./foo.js"

console.log(foo.name)

5.5 default 用法

  • 前面我们学习的导出功能都是有名字的导出(named exports)

    • 在导出export时指定了名字;
    • 在导入import时需要知道具体的名字;
  • 还有一种导出叫做默认导出(default export)

    • 默认导出export时可以不需要指定名字;
    • 导入时不需要使用{},并且可以自己来指定名字;
    • 它也方便我们和现有的CommonJS等规范相互操作;
  • 注意:在一个模块中,只能有一个默认导出(export default)

5.6 import 函数

  • 通过import加载一个模块,是不可以在其放到逻辑代码中的

  • 为什么会出现这个情况呢?

    • 这是因为ES Module在被JS引擎解析时,就必须知道它的依赖关系;
    • 由于这个时候js代码没有任何的运行,所以无法在进行类似于if判断中根据代码的执行情况;
    • 甚至拼接路径的写法也是错误的:因为我们必须到运行时能确定path的值;
  • 但是某些情况下,我们确确实实希望动态的来加载某一个模块:

  • 如果根据不同的条件,动态来选择加载模块的路径;

  • 这个时候我们需要使用import()函数来动态加载;

    • import函数返回一个Promise,可以通过then获取结果;

let flag = true

if (flag) {
// const importPromise = import("./foo.js")

// importPromise.then(res => {
// console.log(res.name, res.age)
// })

import("./foo.js").then(res => {
console.log(res.name, res.age)
})

console.log("-------------")
}

5.7 import meta

  • import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。
  • 它包含了这个模块的信息,比如说这个模块的URL;在ES11(ES2020)中新增的特性;

6. ESModule运行原理

6.1 ESModule 解析原理

  • ES Module是如何被浏览器解析并且让模块之间可以相互引用的呢?
  • ESModule的解析过程可以划分为三个阶段:
    • 阶段一:构建(Construction),根据地址查找js文件,并且下载,将其解析成模块记录(ModuleRecord);,
    • 阶段二:实例化(Instantiation),对模块记录进行实例化,并且分配内存空间,解析模块的导入和导出语句,把模块指向对应的内存地址。 阶段三:运行(Evaluation),运行代码,计算值,并且将值填充到内存地址中;

6.1.1 构建阶段

6.1.2 实例化

6.1.3 运行求值阶段

NodeJs阅读需 14 分钟