02-Node.js基础(一)

article/2025/10/4 7:57:33

目录

  • 一、什么是Node.js
  • 二、Node.js在软件架构中的地位
  • 三、Node.js 可以做什么(作用)
    • 浏览器端的 JavaScript
    • Node端的JavaScript
  • 四、Node.js APIs
    • Web端API
    • Node.js端API
    • Web端JS与Node端JS对比
  • 五、安装 Node.js
    • 第一步:在官网下载 Node.js 安装包
    • 第二步:双击下载下来的安装包,一路 next 安装
    • 第三步:命令行中验证安装是否成功
  • 六、使用Node.js
    • 运行方式
      • 脚本模式
      • 交互模式
    • 全局对象
    • 全局函数
      • JavaScript 提供的全局函数
      • Node.js 提供的全局函数
      • 全局函数的使用示例
        • parseInt 数字转换函数,转换成整数
        • 一次性定时器
        • 立即执行定时器
    • 同步与异步

一、什么是Node.js

Node,js官网(nodejs.org)给出的解释:
Node.js是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境
两个点:Chrome V8 引擎和运行时
运行时
Runtime,运行时,其实就是运行环境。比如,浏览器就是 JavaScript 的一个运行环境。
所以,翻译过来就是,Node.js是一个…的 JavaScript 运行环境。
基于 Chrome V8 引擎
Chrome是谷歌,要想解释V8需要先有一些基础知识:浏览器由两部分组成:外壳和内核,浏览器内核又由两部分组成:渲染引擎和JS引擎,渲染引擎是用来做内容渲染的,HTML和CSS的展示都是依靠渲染引擎;JavaScript代码之所以能在浏览器运行也是因为有JS引擎的存在。
在这里插入图片描述
引擎,可以理解为一个翻译,计算机只认识0和1,我们写的代码被计算机识别,计算机就需要一个翻译,这个翻译就是解释器,也叫引擎。
每个不同的浏览器中的引擎都不一样,比如下面的一些主流浏览器的内核,可以发现,每个浏览器 ,不管是渲染引擎还是JS引擎,都不一样,因为这些浏览器是由不同的公司开发的,所以内核技术也是不一样的。
在这里插入图片描述
JS只能在浏览器运行吗?/ 离开浏览器以后JS还能运行吗?既然JS的运行与JS引擎有关,,那么如果把JS引擎单独拿出来,放到另外一个地方,那么JS是不是可以在另外一个地方运行?浏览器内核中的JS引擎有很多,到底选用哪一个JS引擎呢?
比较出名的就是,谷歌浏览器中的 V8 引擎,也就是说,将谷歌浏览器中的 V8 引擎拿出来,然后在 V8 的基础上做一个封装,形成一个新的JavaScript的运行环境,这个就叫Node.js
将V8引擎单独拿出来做封装,就是Node.js 的作者 Ryan Dahl (瑞安 达尔)在2009年做的。
那么,有了这样的一个 V8 引擎之后,就既可以在浏览器端运行 JavaScript ,也可以在 Node.js 中运行JavaScript。
如果觉得官方解释不好理解,提供另种解释:
Node.js 是除了浏览器之外,还可以运行 JavaScript 的一个环境

二、Node.js在软件架构中的地位

软件架构的最底层是操作系统,操作系统之上是运行环境,在运行环境之上是编程语言比如JavaScript,在编程语言之上是基于语言开发的一些框架。
在这里插入图片描述
Web应用:在操作系统上面有浏览器,浏览器中运行JS,基于JS开发了一些框架比如Vue。
Node.js应用:操作系统之上是Node.js,在Node.js运行JavaScript,在Node.js环境下,也可以基于JavaScript开发一些框架,比如Express。
类比:把JavaScript比喻成飞机,飞机可以在陆地机场起飞,也可以在航母甲板起飞,这是两个不同的运行环境,但是编程语言是一样的,都是飞机,在语言上的框架有很多不同型号的飞机。
在这里插入图片描述
强调:Node.js 即不是一门新的语言,也不是 JavaScript 框架。Node.js与浏览器处于同一层级,都是运行环境。

三、Node.js 可以做什么(作用)

因为Node.js环境运行的仍然是 JavaScript ,所以,要说清楚 Node.js 能做什么,就需要与浏览器端的 JS 进行比较:浏览器中的JS负责前端的功能,Node.js中的JS负责后端的功能,虽然这两部分有一些交集,但是简单理解就是这样。

浏览器端的 JavaScript

  • 响应浏览器事件
    比如鼠标单击、鼠标双击、鼠标滑过、鼠标离开等,通过响应浏览器的事件,可以写出很多友好的交互性的效果。
  • 数据验证
    例如用户在表单里填写的手机号是否合法,邮箱是否合法等,可以通过正则表达式验证。
  • DOM 操作
    比如可以删除页面上的节点或者添加节点

  • 当然浏览器端的 JS 还可以做很多,就不一一列举了。
    浏览器端的 JS 的不足:不能做文件操作,因为浏览器端的 JS 没有相关的 API 。

Node端的JavaScript

因为 Node.js 比浏览器端的 JS 出现得晚,所以 Node.js 自然会对浏览器端的 JS 进行补充。

  • Node.js 适合用于开发前端方向的各种工具
    各种前端工程化的工具就是在 Node.js 环境下开发的
  • Node.js 适合开发服务器端的应用层(BFF)
    为网站,APP,小程序等提供数据服务。提供数据服务时,后台可能会涉及文件的操作,可能会涉及到数据库的操作,这时,可以把 Node.js 端的JavaScript 想象成一门后端开发语言,比如 Java,比如 PHP 等,它们可以做数据库操作,在 Node.js 环境下用JavaScript仍然可以实现。
  • Node.js 可以用来做桌面应用开发
    比如 Office,Office 不需要上网也可以运行。还可以做各种跨平台的桌面应用,比如VS Code,就是用Node.js做的,而且 VS Code 是跨平台的,可以在 Windows 操作系统使用,也可以在 Mac 安装,也可以在 Lunix 安装,因为 Node.js 本身就有跨平台的属性,它可以在各个操作系统上运行;比如 Typora ,是一个 MD 编辑器,也是用 Node.js 做的;比如 insomnia ,是一个接口的调试工具,也是通过 Node.js 做的。
    所以,会发现,其他编程语言能做的,Node.js几乎都可以做,像网站,APP,小程序,桌面应用等,几乎都可以做。也就是说,Node.js 给 JavaScript 插上了全栈编程的翅膀

四、Node.js APIs

Node.js可以做这么多的事情,那么它的背后肯定有相关技术做为支撑,加下来学习Node.js中的API。

Web端API

首先看Web端的API,它包含三部分:ECMAScript也就是ES,和与浏览器进行交互的DOM和BOM。
在这里插入图片描述
ECMAScript中包含JavaScript的基本语法,ECMAScript本身就是JS的标准,比如在JS中如何声明一个常量,如何声明一个变量,常见的流程控制语句,常见内置对象比如日期对象Date,数组对象String等。DOM中有document对象,可以在页面上输入内容,document.write,还有element对象。BOM中有window对象,可以打开或关闭窗口,还有location对象,可以做页面的跳转,可以获取当前的网址信息,还有history对象,可以获取访问过的一些网址信息。

Node.js端API

对应地,在Node环境下的内容:
在这里插入图片描述
Node环境只是JavaScript的一个新的运行环境,所以基础语法部分也就是ECMAScript与Web端是一样的,Web端的ECMAScript的功能在Node端仍然能实现。除此之外,还有Node APIs,这是Node.js的一个新的特征,也是将来我们要学习的。比如,fs 是 file system,是用来操作文件的,可以打开文件,可以写内容,可以读文件,可以关闭文件,可以删除文件,等等;path 可以解析文件路径,比如给一个路径,那么目录是什么,文件扩展名是什么,这些都可以通过 path 来得到;os 是操作系统,可以获取操作系统的相关的信息,比如操作系统是 64 位的还是 32 位的,操作系统中有多少个 CPU,这些都可以通过 os 来得到;http 是负责发布网络服务的,之前想要查看页面效果可能需要借助 Apache 和 Nginx 这种专业的 Web 服务器软件去发布服务,但是在 Node 环境下可以通过 http 这样的一个 API 来实现 Web 服务发布。当然除了这些以外,Node 还有很多 API 。

Web端JS与Node端JS对比

通过对比,我们发现,Web端的JS和Node端的JS其实就是两个集合,它们的交集部分是ECMAScript,Web还有专门负责与浏览器交互的API,Node中的API是负责与操作系统做对接。
在这里插入图片描述

五、安装 Node.js

第一步:在官网下载 Node.js 安装包

Node,js官网(nodejs.org)
在这里插入图片描述
或者点击下面的“其他下载”在下面的页面安装:
在这里插入图片描述

第二步:双击下载下来的安装包,一路 next 安装

下载完成后,双击打开安装包,询问是否运行,点击“运行”后一路 next 安装。

第三步:命令行中验证安装是否成功

按键 win + r,输入 cmd 回车,打开命令行
在这里插入图片描述
以上两种方式效果相同,都可以查看到安装的Node.js的版本,说明安装成功。

六、使用Node.js

Node.js 的使用,其实就是通过 Node.js 运行 JavaScript 代码,具体来说就是通过 Node.js 的命令运行JS代码。

运行方式

Node.js 有两种模式运行 JavaScrip:脚本模式和交互模式
在这里插入图片描述

脚本模式

脚本模式:在命令行输入node,空格,js文件,然后回车,这样 js 文件就可以运行。
在这里插入图片描述
需要强调:一定要将 js 文件的路径写正确

交互模式

交互模式:交互模式其实就相当于浏览器端的控制台,可以在里面实时地查看代码的运行效果。
首先进入交互模式,进入交互模式的命令就是 node回车
进入之后就可以写 JS 代码了,写完代码之后回车,代码就可以直接运行。
需要强调:一旦进入了交互模式,命令行就会处于阻塞状态,也就是说,不能再敲其他的命令了
最后,退出交互模式,退出交互模式有两种方式:可以输入一条命令 .exit;也可以借助快捷键,按两次 ctrl + c,就可以退出交互模式。
在这里插入图片描述
交互模式除了可以运行代码之外,还有其他功能:

  • 在交互模式下,可以使用 tab 键自动补全一些命令
    输入命令 console.l 按下 tab 键,自动补全,变成console.log。这是一个很重要的技巧,只需要知道命令的前缀就可以敲出完整的命令。
  • 在交互模式下,可以探索 JavaScript 对象
    例如,查看Math对象中有什么函数,查看的方式注意,输入的是 Math.(注意后面的点),然后按两次 tab 键。查看到的结果很熟悉,例如Math.abs是求绝对值的函数;Math.PI,PI是π,是圆周率;等等。
    在这里插入图片描述
  • 在交互模式下,可以执行一些点命令
    例如输入 .help 回车 就可以得到一些帮助信息;退出交互模式输入 .exit 也是点命令。
    注意和上面第二条不要搞混淆,查看JS对象时点在后面,输入点命令时点在前面

全局对象

Node.js 下的全局对象是 global。
浏览器端的 JS 中,全局对象是 window。
Node.js 下的全局对象 globa 在两种运行方式下,表现是不一样的:

  • 交互模式下,声明的变量和函数都属于 global
    例如:var a = 1;global.a 可以访问到。
    在这里插入图片描述
  • 脚本模式下,声明的变量和函数都不属于 global
    例如:var a = 1;global.a 访问不到。
    这个是尤其要注意的,全局变量好用归好用,但是,在 Node 环境下用的时候需要慎重。在 Node.js 下,global 用得不是很频繁,没有像在浏览器端用 window 用得那么频繁。
    在这里插入图片描述
    需要强调,不单单是window对象不能访问,其他的浏览器端的宿主对象都不能访问,document不能访问,location不能访问,history也不能访问。也就是说,交集部分可以访问,但是Web端的差集即砖红色部分不能访问。
    在这里插入图片描述
    golbal下面到底有什么?最简单的方式就是在编辑器将global打印出来。
    在这里插入图片描述

全局函数

JavaScript 提供的全局函数

JavaScript 语言提供的全局函数,在 Node.js 下依然可以用,因为 Node.js 只是一个新的运行环境。

  • parseInt(数字转换函数,转整数)/parseFloat(数字转换函数,转小数)/isNaN(判断一个变量是否是非数字)/isFinite(判断变量的值是否是无穷)/eval(在函数中执行一段 JS )…
  • 一次性定时器setTimeout 设置定时器 / clearTimeout 清除定时器)
  • 周期性定时器setInterval 设置定时器/ clearInterval 清除定时器)

一次性定时器相当于定时炸弹,到了时间才执行;周期性定时器像闹钟,每隔一段时间执行一次 。

Node.js 提供的全局函数

Node.js 环境也提供了一些全局函数。

  • 立即执行定时器setImmediate 设置定时器 / clearImmediate 清除定时器)
  • 进程立即执行定时器(process.nextTick

全局函数的使用示例

parseInt 数字转换函数,转换成整数

在这里插入图片描述

一次性定时器

setTimeout 有两个参数:第一个参数是回调函数,这里写成了箭头 函数的形式,也可以用 function 来声明;第二个参数是时间,时间是以毫秒为单位的,2000毫秒就是2秒。

//运行 2 秒之后才会输出1
setTimeout(()=>{console.log(1)
},2000)

要清除定时器就要先获取到一次性定时器的返回值,然后清除即可。

//2秒之后才会输出1
var timer = setTimeout(()=>{console.log(1)
},2000)//清除一次性定时器(即不输出 1 )
clearTimeout(timer);

立即执行定时器

立即执行定时器没有时间参数,只有一个参数回调函数。
在这里插入图片描述
为什么结果是3 2 1?/ 为什么 3 在 2 之前输出?与 JS 的执行方式有关:输出3是执行主程序,输出 2 是执行事件队列,setImmediate 在事件队列顶部。先执行主程序,再执行事件队列,所以 3 在 2 之前输出。

同步与异步

JS 是以单线程的方式运行的,单线程可以理解为单车道,如果前面的车出了事故,后面的车就只能等待,这就是单线程。如果主程序中有多个任务,只有等前面的任务运行完了,才能运行后面的任务。比如要按顺序运行任务 1 2 3 4,如果任务 1 的运行时间很长,那么任务 2 3 4 就必须等待。这是明显的缺陷。
基于这个缺陷,JS中有一个补偿方案,就是事件队列,即,可以将一些执行时间较长的任务暂时丢到事件队列中执行,这样主程序里的任务占用时间整体上就所缩短了。主程序可以认为是同步执行,而事件队列里面的内容可以认为是异步执行,比如任务 5 6 7 。运行过程中,即使是排名靠前的事件队列,也只能等到主程序运行完成之后才能运行事件队列中的任务,这就是为什么我们说事件队列里面的执行是异步执行的原因。
做一个比喻,去车站买票,如果我们自己去车站买票的话需要排队,前面的人没有买完票之前我们是买不到票的,只能等待,这就相当于单线程;如果不想自己去排队等待,可以想一个办法,可以委托黄牛去买票,委托黄牛去买票的动作就相当于把任务丢到了事件队列中,黄牛买完票之后可以通知我们,这就是异步的执行方式。
在这里插入图片描述
setImmediate 位于事件队列的顶部,这里的 Immediate ,立即执行,指的是立即执行事件队列;setTimeout 位于事件队列的中部,所以,setImmediate 会在所有的异步任务之前优先执行。
在这里插入图片描述
很多面试题会将立即执行定时器 setImmediate 和进程立即执行定时器 process.nextTick 作比较:nextTick 是在主程序的最后执行的,这里的 next 指的就是主程序的 next ,主程序的下一步。所以,nextTick 是在主程序结束之后执行, setImmediate 是在事件队列之前执行,而整体的逻辑是先执行主程序,然后执行事件队列,所以下图中执行顺序是:先执行主程序中的1 2 3 4,然后执行5 nextTick ,然后执行6 setImmediate ,setImmediate 执行完之后才会执行事件队列中的 7 8 9。nextTick 与 setImmediate 是经常考的一个题目,要注意!
在这里插入图片描述
示例:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/fpVQO1Bv.shtml

相关文章

vue取绝对值

先放效果&#xff1a; 代码 <template><el-input v-model"num" placeholder"请输入数字" /><el-button type"primary" click"changeNum">取绝对值</el-button> </template> import { ref } from &quo…

关于JSZIP压缩图片打包下载的一些用法

功能介绍 前端在处理一些批量文件或者图片时候&#xff0c;通过使用异步上传&#xff0c;减少表单一次性提交的的数据量。并将这些图片或者文件根据用户自定义压缩、分类保存到本地。是一个用于压缩文件和解压的JavaScript库。 官网地址 https://stuk.github.io/jszip/docume…

jsZip将多个文件压缩成一个压缩包

在项目开发中&#xff0c;搭档大佬要做一个断点续传的功能&#xff0c;让我帮忙研究一下前端将多个文件压缩成一个压缩包的方法&#xff0c;所以就有了这篇文章。 我的demo是写在vue中的&#xff0c;所以首先要有一个vue环境&#xff0c;才能进行接下来的步骤。那么下面我们就…

前端vue使用jszip压缩文件

一.引入element的上传文件组件 <el-form-item label"文件"><el-uploadclass"upload-demo"dragaction"https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"multiple:before-upload"beforeUpload"><el-icon …

vue3中使用jszip压缩文件

1、安装依赖 npm install jszip npm install file-saver --save 2、使用 <template><el-card class"mb15"><template #header><span>jszip</span></template><!-- 二维码容器 --><div id"qrCodeBox">&…

docxtemplater、pizzip、jszip-utils、file-saver 前端实现导出word

一、准备工作 1、插件安装&#xff1a; npm i docxtemplater pizzip jszip-utils file-saver -S2、安装完成&#xff1a; 3、导出的模板文件。 我这里是将其命名word-export.docx,并将其放在public/docxs目录下&#xff0c;如图所示&#xff1a; 二、实现代码 页面使用&…

【sduoj】前端JSZip库的使用

2021SCSDUSC 文章目录 JSZIP安装使用引入实例化读取zip文件读取压缩包中的文件遍历压缩包内的所有文件&#xff08;单层&#xff09; 小结 JSZIP JSZip是一个用于创建、读取和编辑.zip文件的javascript库&#xff0c;具有好用而简单的 API。 安装 在sduoj项目中&#xff0c…

zipJS 前端压缩使用

前端在处理文件时&#xff0c;对于大文件或者多个文件上传、下载、编辑&#xff0c;直接使用原文件不方便&#xff0c;最近使用一个可以前端中处理 zip 文件的库&#xff0c;JSzip&#xff0c;主要功能&#xff1a;前端中压缩、解压缩、编辑zip文件。 在 nodeJS 中&#xff0…

一篇文章介绍JSZip预览压缩包中的文件

安装依赖 npm i jszip 前提准备 准备好一个压缩包&#xff0c;格式为zip&#xff0c;存放两张png图片。 代码实现 <template><h1>JSZip,预览压缩包中的文件</h1><img v-for"(n,m) in picArr.arr":src"n":style"{width:200px}&qu…

VUE+jszip实现下载多个文件导出为一个zip格式

项目需求&#xff1a;将多个文件/图片导出为一个zip格式压缩包&#xff0c;点击<下载全部附件>按钮下载上面三个文件 1、安装jszip和file-saver插件 npm install jszip npm install file-saver2、在所需页面引入 import JSZip from "jszip";import FileSaver …

前端js使用jszip实现文件压缩功能

一、jszip下载 1、github下载地址&#xff1a;https://github.com/Stuk/jszip 2、下载成功后解压&#xff0c;js插件在dist目录里 二、引入jszip插件 <script type"text/javascript" src"./jszip.min.js"></script> 三、使用jszip对文件进…

JSZip 的简单介绍

1、前言 前端处理一些批量文件或者图片时候&#xff0c;通过使用异步上传&#xff0c;减少表单一次性提交的的数据量。但是图片或者文件有删除的时候&#xff0c;服务器上真实的图片不容易删除。找了一些资料发些了JSZip这个技术&#xff0c;可以将文件或者图片打包成一个Zip文…

vue前端下载——jszip压缩和解压,结合file-saver导出图片zip,每20个图片分一个目录

使用jszip和file-saver导出图片&#xff0c;并打包为zip&#xff1a; import JSZip from "jszip"; import FileSaver from "file-saver"; 一&#xff0c;jszip解压缩 使用loadAsync&#xff0c;zipFile为压缩包&#xff0c;下面的例子表示读取zip中的resul…

Nginx工作原理和优化总结。

NGINX以高性能的负载均衡器&#xff0c;缓存&#xff0c;和web服务器闻名&#xff0c;驱动了全球超过 40% 最繁忙的网站。在大多数场景下&#xff0c;默认的 NGINX 和 Linux 设置可以很好的工作&#xff0c;但要达到最佳性能&#xff0c;有些时候必须做些调整。首先我们先了解其…

Nginx详细原理

1、Nginx高可用版原理 nginx采用主从架构&#xff0c;客户端发送请求给master&#xff0c;然后由master下发任务到worker实现。 2、nginx任务分配机制(worker工作机制) nginx中master和woker进程之间使用的不是一种轮询的方式而是争抢机制&#xff0c;由于worker不支持java语言…

nginx的工作原理及配置

nginx的工作原理及配置 nginx的模块与工作原理 nginx由内核和模块组成。其中&#xff0c;内核的设计非常微小和简洁&#xff0c;完成的工作也非常简单&#xff0c;仅仅通过查找配置文件将客户端请求映射到一个location block&#xff08;location是nginx配置中的一个指令&…

服务器 启动多个nginx_Nginx工作原理和优化总结

NGINX以高性能的负载均衡器,缓存,和web服务器闻名,驱动了全球超过 40% 最繁忙的网站。 在大多数场景下,默认的 NGINX 和 Linux 设置可以很好的工作,但要达到最佳性能,有些时候必须做些调整。首先我们先了解其工作原理。 一、Nginx的模块与工作原理 Nginx由内核和模块组成…

Nginx工作原理及基本使用

Nginx工作原理 Nginx默认采用多进程工作方式&#xff0c;Nginx启动后&#xff0c;会运行一个master进程和多个worker进程。其中master充当整个进程组与用户的交互接口&#xff0c;同时对进程进行监护&#xff0c;管理worker进程来实现重启服务、平滑升级、更换日志文件、配置文…

Nginx系列一:Nginx介绍与Nginx工作原理分析

一&#xff1a;Nginx概述 Nginx ("engine x") 是一个高性能的轻量级的 HTTP 和反向代理、负载平衡web服务器。 nginx 的并发能力在同类型的网页服务器中表现较好市场占用率很高&#xff0c;中国大陆使用 nginx网站用户有&#xff1a;百度、京东、新浪、网易、腾讯、…

透彻!Ingress-nginx工作原理和实践,这操作可以吧

本文记录/分享 目前项目的 K8s 部署结构和请求追踪改造方案 这个图算是一个通用的前后端分离的 k8s 部署结构: Nginx Ingress 负责暴露服务(nginx前端静态资源服务)&#xff0c; 根据十二要素应用的原 则&#xff0c;将后端 api 作为 nginx 服务的附加动态资源。 Ingress vs I…