如何理解Node.js?NPM?Yarn?Vue?React?
一、背景
对后端技术栈更熟悉,对前端技术栈不了解,希望通过前后端的技术栈进行对比,可以更直观地了解前端技术栈。
二、Node.js
Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运行,而不仅仅是在浏览器中。
Node.js 可以类比为 Java 的 JRE(Java Runtime Environment),但它们有一些关键的区别和相似之处。
1、相同
(1)运行环境
Node.js:是一个 JavaScript 运行环境,允许你在服务器端运行 JavaScript 代码。
JRE:是一个 Java 运行环境,允许你运行 Java 应用程序。
(2)包含的组件
Node.js:包含了 V8 JavaScript 引擎(用于解析和执行 JavaScript 代码)、内置的库(如 http、fs 等)和一些核心模块。
JRE:包含了 Java 虚拟机(JVM,用于解析和执行 Java 字节码)、核心类库(如 java.lang、java.util 等)和一些其他组件。
(3)跨平台
Node.js:可以在多个操作系统上运行,包括 Windows、macOS 和 Linux。
JRE:同样可以在多个操作系统上运行,包括 Windows、macOS 和 Linux。
2、区别
(1)语言
Node.js:运行 JavaScript 代码。
JRE:运行 Java 代码。
(2)用途
Node.js:最初设计用于服务器端编程,特别适合 I/O 密集型应用,如 Web 服务器、实时应用和 API 服务。
JRE:用于运行各种 Java 应用程序,包括桌面应用、服务器端应用和嵌入式系统。
(3)生态系统
Node.js:依赖于 npm(Node Package Manager)或Yarn来管理和安装第三方库和模块。
JRE:依赖于 Maven、Gradle 等工具来管理和安装第三方库和模块。
(4)执行模型
Node.js:采用单线程、事件驱动的非阻塞 I/O 模型,适合处理大量并发请求。
JRE:多线程模型,适合 CPU 密集型任务和复杂的并发控制。
三、NPM和Yarn
npm和Yarn都是Node.js的包管理器,类似于Maven和Gradle都是JRE的包管理器。
1、NPM
npm(Node Package Manager)是 Node.js 的默认包管理器。它允许开发者安装、共享和管理 JavaScript 代码包(即模块)。
(1)包管理
npm 提供了一个巨大的开源包生态系统,开发者可以轻松安装和使用他人编写的模块。
(2)版本管理
npm 允许你管理项目依赖的版本,以确保项目的稳定性。
(3)脚本运行
npm 可以用来运行项目中的脚本,例如构建、测试和启动项目。
2、Yarn
Yarn 是一个由 Facebook、Google、Exponent 和 Tilde 联合开发的包管理器,旨在解决 npm 的一些问题。它与 npm 类似,但提供了一些增强功能。
(1)快速
Yarn 使用并行安装,速度比 npm 更快。
(2)确定性依赖
Yarn 使用 yarn.lock 文件来确保每次安装的依赖版本一致,避免 "works on my machine" 问题。
(3)离线模式
Yarn 可以在没有网络连接的情况下安装依赖,只要它们之前已经被安装过一次。
四、Ember、Angular、Vue、React
JavaScript 框架是为了提供更好的开发体验。它们没有给 JavaScript 带来新的功能;但它们使你可以更轻松地使用 JavaScript 来构建现代的 web。
目前公认的“四大框架”是React、Vue.js、Angular、Ember。
1、Ember
Ember 于 2011 年 12 月发布,最初作为 SproutCore 项目的延续而开始。比其新式的替代品(例如 React 和 Vue),作为老框架,它的用户人数要少得多。但因其稳定性、社区支持以及编程原则都非常良好,它仍然享有很高的知名度。
2、Angular
Angular 是一个开源 Web 应用程序框架,正式发布于 2016 年 9 月 14 日。它由构建 AngularJS 的团队完全重写,并由 Google 的 Angular 团队社区共同领导。
Angular 是一种基于组件的框架,使用声明式的 HTML 模板。在应用构建时,框架的编译器将 HTML 模板转换为优化好的 JavaScript 指令,这一过程对开发者是透明的。Angular 使用 TypeScript,它是 JavaScript 的超集。
3、Vue
Evan You(尤雨溪)在 2014 年第一次发布 Vue 。Vue 是“四大框架”中最年轻的,但在最近,它的人气迅速上升。
Vue,就像 AngularJS,用它自己的代码拓展了 HTML。除此之外,它还主要依赖于现代的、标准化的 JavaScript。
4、React
Facebook 在 2013 年发布了 React。在当时 React 已经被用于 Facebook 内部用来解决许多问题。严格来说 React 本身并不是框架,而是一个用来渲染用户界面组件的库。React 被用来组合其他用来构建应用的库——React 和 React Native 让开发者能够用 JavaScript 构建移动应用;React 和 ReactDOM 使他们能够被用来制作 web 应用程序等。
因为 React 和 ReactDOM 被经常放在一起使用,通俗地讲,React 可以被理解为是一个 JavaScript 框架。当你通读了这个模块时,我们将使用这种口语化的理解进行描述。
React 用类似 HTML 的语法的 JSX 拓展了 JavaScript。
参考:
https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#ember
相关文章:
如何理解Node.js?NPM?Yarn?Vue?React?
一、背景 对后端技术栈更熟悉,对前端技术栈不了解,希望通过前后端的技术栈进行对比,可以更直观地了解前端技术栈。 二、Node.js Node.js 是一个基于 Chrome V8 JavaScript 引擎的 JavaScript 运行环境。它使得 JavaScript 可以在服务器端运…...

苹果入局,AI手机或将实现“真智能”?
【潮汐商业评论/原创】 “AI应用智能手机不就是现在的AI手机。” 当被问到现阶段对AI手机的看法时,John如是说。“术业有专攻,那么多APP在做AI功能,下载用就是了,也用不着现在换个AI手机啊。” 对于AI手机,或许大多…...

AI网络爬虫019:搜狗图片的时间戳反爬虫应对策略
文章目录 一、介绍二、输入内容三、输出内容一、介绍 如何批量爬取下载搜狗图片搜索结果页面的图片?以孙允珠这个关键词的搜索结果为例: https://pic.sogou.com/pics? 翻页规律如下: https://pic.sogou.com/napi/pc/searchList?mode=2&start=384&xml_len=48&am…...
Windows 网络重置及重置网络可能出现的问题( WIFI 没有了 / WLAN 图标消失)
当 Windows 网络出现本机故障时,一般从以下两个方面解决:网络栈和使用网络栈的组件或程序。 1、Winsock 组件问题 以管理身份运行 cmd,输入以下命令 netsh winsock reset重置 Winsock 组件以修复网络连接问题。 Winsock 是 Windows 操作系…...

100 个网络基础知识普及,看完成半个网络高手!
1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理层,数据链路层,网络层࿰…...

高盛开源的量化金融 Python 库
GS Quant GS Quant是用于量化金融的Python工具包,建立在世界上最强大的风险转移平台之一之上。旨在加速量化交易策略和风险管理解决方案的开发,凭借25年的全球市场经验精心打造。 它由高盛的定量开发人员(定量)创建和维护&#…...
【Linux】docker和docker-compose 区别是什么
Docker 和 Docker Compose 是用于容器化应用的工具,它们在开发、部署和管理容器化应用程序时有不同的作用。以下是对它们的简要介绍和功能描述: Docker 定义: Docker 是一个开源的平台,允许开发者自动化地部署、扩展和管理应用程序容器。容器是一种轻量级、可移植、独立的软…...

Qt图片缩放显示
在Qt中,如果你想显示图片的像素或者对图片进行缩放显示,可以使用 QImage 类来处理图片数据,并使用 QLabel 或自定义的 QWidget 来显示图片,但是很难通过鼠标进行缩放显示 QGraphicsView可以实现此功能 在Qt中,QGraphi…...

47、lvs之DR
1、DR模式: 1.1、lvs三种模式: nat 地址转换 DR 直接路由模式 tun 隧道模式 1.2、DR模式的特点: 调度器在整个lvs集群当中是最重要的,在nat模式下,即负载接收请求,同时根据负载均衡的算法转发流量&…...

分布式技术栈、微服务架构 区分
1.分布式技术栈 这些技术栈都是为了更好的开发分布式架构的项目。 (大营销平台的系统框架如下图,扩展的分布式技术栈) (1)Dubbo——分布式技术栈 DubboNacos注册中心是应用可以分布式部署,并且提供RPC接…...

【JavaEE精炼宝库】文件操作(2)——文件内容读写 | IO流
文章目录 一、输入流1.1 InputStream 概述:1.2 read 方法详解:1.3 close 方法:1.4 利用 Scanner 进行读操作:1.5 Reader: 二、输出流2.1 OutputStream 概述:2.2 write 方法详解:2.3 利用 PrintW…...
C++ 指针变量做参数传递时的情况分析
前言 指针变量作为参数传递时,很容易混淆指针本身和指针指向的内容,实际应用中可能会导致无法预料的问题,所以做一下详细分析。 注意,在测试过程中为了看测试效果,有些指针变量分配了空间,但是未做回收&am…...

Linux环境下Oracle 11g的离线安装与配置历程
在成功体验了 Windows 版本的Oracle 11g 后,这几天心血来潮,决定再挑战一下Linux 环境下的安装,特别是在考虑到部门内部虚拟机无法联网的情况下,我选择了在CentOS 7上进行离线安装。这次安装之旅,主要参考了下面大佬的…...

上位机图像处理和嵌入式模块部署(mcu项目2:串口日志记录器)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 淘宝上面有一个商品蛮好玩的,那就是日志记录器。说是记录器,其实就是一个模块,这个模块的输入是一个ttl串口&am…...

容器是线程不安全的,如果多线程下不加锁直接使用容器会发什么
可能存在的问题 数据竞争 当两个或多个线程同时读写同一个容器且至少有一个线程在写时,会导致数据竞争。这种情况下,容器的内部状态可能会被破坏,从而导致未定义行为。这些未定义的行为包括数据损坏,程序崩溃,以及无…...

配置光源——笔记
一、灯光的类型 (一)Directional Light(定向光) 1、只改变方向变化,不记录位置变化 2、相当于太阳光 3、室外一般使用 (二)Spot 聚光灯:昏暗(凌晨或傍晚),有一个光斑…...

Java---SpringBoot详解一
人性本善亦本恶, 喜怒哀乐显真情。 寒冬暖夏皆有道, 善恶终归一念间。 善念慈悲天下广, 恶行自缚梦难安。 人心如镜自省照, 善恶分明照乾坤。 目录 一,入门程序 ①,创建springboot工程&#…...

MFC扩展库BCGControlBar Pro v35.0 - 可视化管理主题等全新升级
BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中,并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了,这个版本改进类Visual Studio 2022的视觉主题、增强对多个…...
Springboot 配置 log4j2 时的注意事项
感谢博主 https://www.cnblogs.com/fishlittle/p/17950944 依赖 SpringBoot 的 spring-boot-starter/ spring-boot-starter-web 自带的是 logback 日志,若要使用 log4j2 日志,需要引入对应依赖。logback 日志和 log4j2 日志都是对 slf4j 门面的实现&am…...

微服务-初级篇
微服务-初级篇 认识微服务1.1 单体架构1.2 分布式架构1.3 微服务 SpringCloud2.1 了解2.2 服务拆分原则2.3 服务拆分效果 Nacos注册中心3.1 认识和安装Nacos3.1.1 Nacos下载3.1.2 Nacos安装 3.2 服务注册到Nacos Feign远程调用4.1 Feign引入4.2 Feign配置 认识微服务 1.1 单体…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...

Opencv中的addweighted函数
一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...