【青训营】-🥝Node.js基础入门

简介: 【青训营】-🥝Node.js基础入门

一、Node.js简介


1.1 安装与运行


Node.js是一个基于Google V8引擎的、跨平台的JavaScript运行环境


d8b9077d105e4d419cff68504be4bfff_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


node程序:


const { readFile } = require('fs');
readFile('./package.json', { encoding: 'utf-8' }, (err,data) => {
    if(err) {
        throw err;
    }
    console.log(data)
})
复制代码


该段代码的作用就是输出package.json文件内容。


1.2 版本管理


在同一个设备上如何切换Node.js版本


版本管理工具:


  • n:一个npm 全局的开源包,是依赖npm 来全局安装、使用的
  • fnm:快速简单,兼容性支持 .node-version.nvmrc文件
  • nvm:独立的软件包,Node Version Manager


1.3 Node.js特点


异步I/O,单线程,跨平台


异步I/O


当Node.js执行I/O操作时,会在响应返回并恢复操作,而不是阻塞线程并浪费CPU循环等待。


![image.png](p1-juejin.byteimg.com/tos-cn-i-k3… 15774042845a472c3f83866d~tplv-k3u1fbpfcp-watermark.image)


单线程


Node.js保持了JavaScript在浏览器中单线程的特点


优点:


  • 不用处处在意状态同步问题,不会发生死锁
  • 没有线程上下文切换带来的性能开销 缺点:
  • 无法利用多核CPU
  • 错误会引起整个应用退出,健壮性不足
  • 大量计算占用导致CPU,无法继续执行


以浏览器为例,浏览器是多进程,JS引擎单线程


95ad668514be446d82a937c60b6a94ec_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


  • Brower进程:浏览器主进程,只有一个
  • 插件进程:插件使用时才创建
  • GPU进程:最多一个用于3D绘制
  • 渲染进程:页面渲染、JS执行、事件处理 GUI渲染线程+JS引擎线程+V8+事件触发线程+定时器触发线程+异步请求线程


跨平台


兼容Windows和Linux平台,主要得益于在操作系统与Node上层模块系统之间构建了一层平台架构。


7be6e1ed51f143dba617ce84e7a19c8d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

应用场景


Node.js在大部分领域都占用一席之地,尤其是I/O密集型的


  1. Web应用: Express / Koa
  2. 前端构建:Webpack
  3. GUI 客户端软件:VSCode / 网易云音乐
  4. 其他:实时通讯、爬虫、CLI等


二、模块化机制


  1. 何为模块化? 根据功能或业务将一个大程序拆分成互相依赖的小文件,再用简单的方式拼装起来
  2. 为什么模块化?无模块化问题


  • 所有script标签必须保证顺序正确,否则会依赖报错
  • 全局变量存在命名冲突,占用内存无法被回收
  • IIFE/namespace会导致代码可读性低等诸多问题


2.1 Common.JS规范


Node.js支持CommonJS模块规范,采用同步机制加载模块

fb5803b8efb7403e8c0578ffc5a0b67e_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


614db77ba7a94e2fb8bb10d0a525e153_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


加载方式


  1. 加载内置模块 require('fs')
  2. 加载 相对|绝对 路径的文件模块
  • require('/User/.../file.js')
  • require('./file.js')
  1. 加载npm 包 require('lodash')


npm 包查找原则:require('lodash')


58c698e965004161a76cba2f9a75b2cc_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


  1. 当前目录 node_modules
  2. 如果没有,父级目录的ndoe_modules
  3. 如果没有,沿着路径向上递归,直到根目录下node_modules
  4. 找到之后会加载package.json.main指向的文件,如果没有package.json则依次查找Index.js、index.json、index.node


require.cache中缓存着加载过的模块,缓存的原因:同步加载


  1. 文件模块查找耗时,如果每次require都需要重新遍历查找,性能会比较查;
  2. 在实际开发中,模块可能包含副作用代码


58c698e965004161a76cba2f9a75b2cc_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


2.2 其他模块化规范


  • AMD是RequireJS在推广过程中规范化产出,异步加载,推崇依赖前置;
  • CMD是SeaJS在推广过程中规范化产出,异步加载,推崇就近依赖;
  • UMD规范兼容AMD和CommonJS模式
  • ES Modules(ESM),语言层面的模块化规范,与环境无关,可借助babel编译


7c653be19d2a48c09c555ce1ae0987c8_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


c7ef1a9a05e74f028b0911f2fc7df687_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


2.3 ES Modules(ESM)


ESM是在ES6语言层面提出的一种模块化标准;


ESM中主要有import、export两个关键词,不能console.log打印两个关键字。


4173f25c800e46d58a84241f1a973b03_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


2.5 CommonJS VS ESM


  • CommonJS模块输出的是一个值的拷贝;ESM模块输出的是值的引用
  • CommonJS模块是运行时加载;ESM模块是编译时输出(提前加载)

可以混用,但是不建议(import commonjs || imprt 中的require)


5bfaf5904cd74956a103cf33ce8c4985_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

2.6 常用模块介绍


03b1c0a3784c4fc7b33aa318b3beb5ec_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


三、包管理


3.1 npm介绍


NPM 是Node.js中的包管理,提供了安装、删除等其它命令来管理包

ea3c9845152442a4a224bd429fa117a8_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

ac14d9fe64ef4ee38cb78a88af63a017_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

aef9341a66a64043a1d827408df3b2a4_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


3.2 私有npm


  • 镜像公司内部私有npm
  • 镜像公司设置npm config set registry=bnpm.byted.org


3.4 其他


  • 并行安装
  • 扁平管理
  • 锁文件(lockfile)
  • 缓存优化

231da797f9ff4057a3c50446b913756a_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png



  • npm | yarn => lock/扁平/缓存
  • pnpm => monorepo/硬、符号链接/安全性高...


四、异步编程


4.1 Callback


0ffea45aae974649b46b8061e8f961ac_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


4.2 Promise


Promise是具有四个状态的有限状态机,其中三个核心为Pending(挂起),Fulfilled(完成)、Rejected(拒绝),以及还有一个未开始状态。

d64bd82d9f6345dcb53fc0ecaa0d1dad_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


使用Promise,实现读取package.json中main字段对应的文件内容。


fe0fa0c157af477bb519c38bf925ec1b_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


Promise解决了回调地狱的问题。


4.3 Event


发布订阅模式,Node.js内置events模块,比如HTTP server on('request')事件监听


1b2703c41789470684483a4e428c8633_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


五、Web应用开发


5.1 HTTP模块


搭建一个最简单的HTTP服务?Node.js内置HTTP模块


const http = require('http');
http.createServer((req,res)=>{
    res.end('Hello World\n');
}).listen(3000,()=>{
    console.log('App running at http://127.0.0.1:3000/')
})
复制代码


5.2 Koa介绍


Koa —— 基于Node.js平台的下一代Web开发框架


Koa它不仅仅提供了一个轻量优雅的函数库,使得编写Web应用变得得心应手,不在内核方法中绑定任何中间件


const app = new Koa();
app.use(async ctx => {
    ctx.body = 'Hello World';
});
app.listen(3000,() =>{
    console.log('App start at http://localost:3000 ...');
})
复制代码


7400155abb3d448bbb4740ad08112e6c_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


5.3 Koa中间件


Koa应用程序是一个包含一组中间件函数的对象,它是按照洋葱模型组织和执行的


f024d66bbd49474490c75e20cd9b4976_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

efc43735dca74163b3a3f04a72330125_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png

020e4f1665c64737a615b4d26b8133cf_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


5.4 基于Koa的前端框架


开源:ThinkJS / Egg ...

内部:Turbo、Era、Gulu ...

它们做了什么?

  • Koa对象 response / request / context / application 等扩展
  • Koa常见中间库
  • 公司内部服务支持
  • 进程管理
  • 脚手架
  • ...


七、线上部署


7.1 利用多核CPU


55b1f5767c3049ed81b8d32b31f247af_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


7.2 进程守护


Node.js进程管理工具:


  • 多进程
  • 自动重启
  • 负载均衡
  • 日志查看
  • 性能监控
  • ...


7.3 复杂计算


87edf65f0dad49d08f1450c9550ad0d8_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


总结


5c0f1302865f4e1eab36f32971c66306_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


最后


⚽本文介绍的Node.js入门知识~

⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏,更多精彩知识正在等你!😘

相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
358 2
|
23天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
23天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
73 10
|
29天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
3月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
2月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
26 1
|
2月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
506 1
|
2月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。