Node.js与前端开发 | 青训营笔记

60 阅读3分钟

这是我参与「第四届青训营」笔记创作活动的第7天

一、认识Node.js

官方对Node.js的定义:

  • Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境

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

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

二、Node.js 应用场景

  1. 前端工程化

    • 比如 npm yarn pnpm webpack,vite 等工具也都是基于 Node.js 环境
  2. 服务端应用

    • Node.js 中内置了http模块,可以使用该模块完成服务端应用,此致也衍生出了很多基于 hhtp 模块的,服务端node框架,比如 express,egg 等
  3. 跨端桌面应用

    • 比如,Electron,我们常用的vscode就是采用它来进行开发的

三、Node.js 特点

3.1 异步 I/O

当Node.js 执行I/O操作时,会在响应返回后恢复操作,而不是阻塞线程并占用额外内存等待

如果下图所示,下面使用了node的内置模块 fs 来进行文件读取操作,我们都知道文件读取是一个耗时的操作,如果该操作为同步执行,由于 js 主线程是单线程的,那么如果读取文件很大,必然会导致线程长时间堵塞,造成下面代码无法执行,所以 node 的fs模块的readFile方法为异步读取,当然也有对应的同步方法readFileSync,当执行 readFile 方法时,会将该操作交给node的另一个线程进行执行,js 主线程进而不会进行堵塞,可以正常执行,当文件读取完成之后,就会回调该方法传入的回调函数,然后返回读取结果

image.png

3.2 单线程

  • JS单线程
    • 实际:JS线程 + uV 线程池 + V8任务线程池 + V8 Inspector线程
  • 优点:不用考虑多线程状态同步问题,也就不需要锁;同时还能比较高效地利用系统资源;
  • 缺点:阻塞会产生更多负面影响
    • 解决办法:多进程或多线程
    • node在12版本中可以使用 worker_thread 起独立线程, 但每个线程的模型没有太大变化,与主线程基本一致

3.3 跨平台

  • 跨平台(大部分功能、api)
  • Node.js跨平台+JS无需编译环境(+ Web跨平台+诊断工具跨平台)
  • 开发成本低(大部分场景无需担心跨平台问题),整体学习成本低

四、node - http

http 模块是 Node.js 官方提供的、用来创建 web 服务器的模块。通过 http 模块提供的http.createServer() 方法,就能快速开启一个本地服务器,示例如下:

    const http = require('http')
    
    // 创建 web 服务器实例
    const server = http.createServer()
    
    // 为服务器实例绑定 request 事件
    server.on('request', (req, res) => {
       //request事件,只要有客户端来请求我们自己的服务器,就会触发request事件,从而调用这个函数
        console.log('服务器被访问')
    })
    
    //4 启动服务器(8888是端口, 后面是回调函数)127.0.0.1 对应的域名是 localhost
    server.listen(8888, () => {
        console.log('服务器运行在3000端口,请访问http://localhost:8888')
    })

image.png

总结

  • 认识到了 Node 对于前端工程化所带来的影响深远
  • 了解到了node具有异步I/O,跨平台等特点
  • 了解了node编写服务端的应用