如何理解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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/43483.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xterminal工具的安装与使用体验

Xterminal工具的安装与使用体验 一、Xterminal简介二、Xterminal核心特性三、Xterminal使用场景四、Xterminal下载地址五、Xterminal的基本使用5.1 设置仓库密码5.2 SSH连接5.3 Windows远程桌面5.4 笔记功能5.5 AI工具 六、总结 一、Xterminal简介 Xterminal是一款专为开发者设…

【大模型】智能体探秘:从概念到实践的全面指南

智能体探秘:从概念到实践的全面指南 引言一、智能体的基本概念二、智能体的类型三、设计智能体的步骤四、智能体设计实例:迷宫求解智能体五、智能体的评估与优化六、智能体的未来方向结语 引言 在人工智能领域,智能体(Agent&…

【Linux进阶】vim的用法

1.什么是vi/vim? 简单来说,vi是老式的文本编辑器,不过功能已经很齐全了,但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具,就连 vim的官方网站( http://www.vim.org)自己也说vim是一…

独享代理VS共享代理,新手选择攻略

随着互联网的广泛普及和应用,涉及网络隐私、数据安全和网络访问控制的问题变得越来越重要。代理服务器作为一种常见的网络工具,可以在跨境电商、海外社媒、SEO投放、网页抓取等领域发挥作用,实现匿名访问并加强网络安全。在代理服务器类别中&…

Nginx在线安装与启动

Nginx在线安装与启动 系统环境:中科方德桌面操作系统 3.1 内核: SMP CDOS 4.9.25-11cdos44 (2019-12-20) x86_64 GNU/Linux 使用连接工具:FinalShell3.9.5.7 1、下载nginx sudo apt-get update2、安装命令 sudo apt-get install nginx安装…

面向对象编程在Perl中的实现:解锁Perl的OOP潜力

面向对象编程在Perl中的实现:解锁Perl的OOP潜力 Perl作为一种多范式编程语言,支持过程式编程、面向对象编程(OOP)以及函数式编程等多种编程范式。尽管Perl在过程式编程方面非常强大,但在面向对象编程方面同样具有独特…

occ geo

随笔 - 12 文章 - 18 评论 - 117 阅读 - 13万 opencascade造型引擎功能介绍 现今的CAD 系统大多通常都基于CAD 系统提供的二次开发包,用户根据要求定制符合自己要求的功能。AutoCAD就提供了AutoLISP、ADS 等都是比较通用的开发工具包。UG 也提供了多种二次开发…

【力扣: 15题: 三数之和】

15题: 三数之和 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意: 答案中不可以包含重复的三元组。 …

小米摄像头黄灯常亮,小米摄像头不好用了刷机

我是MJSXJ05CM型号 一不小心更新了系统结果就不好用了,这种东西真是要小心,一不小心更新不成就成砖头了。 我按下面方法试了不好用,但是下载链接很多收藏一下!某种程度上说如果服务端故意发布一个错误镜像会导致很多摄像头变成砖头&#xff0…

名企面试必问30题(二十七)——你能为公司带来什么呢?

回答一: “首先,我具备扎实的软件测试专业知识和丰富的实践经验。我能够运用各种测试方法和工具,确保公司产品的质量,降低产品上线后的风险。 其次,我善于发现问题和解决问题。在测试过程中,我不仅能找出软…

Pytest中的钩子函数

在pytest框架中,钩子函数(Hooks)是一种强大的机制,允许用户扩展和定制pytest的行为。钩子函数在pytest的测试执行生命周期的特定点上被调用,提供了一种灵活的方式来修改或增强测试过程的各个方面。以下是对pytest钩子函…

桌面弄一个透明的记事本怎么弄?电脑桌面透明记事本

每次坐在电脑前,我总会被桌面上密密麻麻的图标和文件弄得眼花缭乱。多么希望能有一个透明的记事本,既能随时记录我的想法和任务,又不会遮挡我桌面上的其他内容。 有一天,我偶然发现了透明记事本工具。它不仅解决了我的记事本需求…

cf 7.9 div3

AProblem - A - Codeforces ac代码 #include<bits/stdc.h> typedef long long ll;#define IOS ios::sync_with_stdio(0),cin.tie(0),cout.tie(0) const ll N1e5; using namespace std;int main() {IOS;int t;cin>>t;while(t--){int sum,ansINT16_MAX;int a[3];for…

RK3588 Android12实现UVC输出功能详解

首先需要在相关部分添加uvc的功能&#xff0c;这里参考一下&#xff1a;rockchip rk3588添加uvc及uvc,adb的复合设备_uvc.gs6-CSDN博客 setprop sys.usb.config none;setprop sys.usb.config uvc 或者setprop sys.usb.config none;setprop sys.usb.config uvc,adb 使rk3588 进…

Python实现动态银河系:模拟旋转的银河动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义星系类主循环 完整代码 引言 银河系的旋转动画是一个迷人且富有挑战性的项目。通过模拟星系的旋转&#xff0c;我们可以更好地理解天文学现象&#xff0c;并创造出视觉上令人惊叹的效果。在这篇博客…

jar 生成的jar包去掉-plain后缀

问题&#xff1a; 使用gradle8.6版本的&#xff0c; jar {enabled(true)manifestContentCharset utf-8metadataCharset utf-8exclude(**/**Application.class, **/application**,**/bootstrap**) } 生成的jar&#xff1a; staff-core-1.2.2-SNAPSHOT-plain.jar 多了-p…

springboot考研培训机构管理系统-计算机毕业设计源码16042

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

Python中的类和对象:如何定义一个类以及如何创建类的实例(对象)

在Python中&#xff0c;定义类是通过关键字class实现的&#xff0c;而创建类的实例&#xff08;也称为对象&#xff09;则是通过调用这个类来实现的。下面是一个简单的例子来展示如何定义一个类以及如何创建这个类的实例。 定义类 定义类时&#xff0c;你需要指定类名&#x…

Linux——网络编程——UDP

网络编程之 UDP 用户数据报 1、特性&#xff1a; 无链接 不可靠 大数据 2、框架&#xff1a; C/S模式 server&#xff1a;socket() >bind()>recvfrom()>close() client&#xff1a;socket() >bind()>sendto() >close() 注意&#xff1a;socket(&…

编译libmp3lame支持SSE指令

碰到的编译错误如下&#xff1a; lame/libmp3lame/vector/xmm_quantize_sub.c:72:18: warning: SSE vector return without SSE enabled changes the ABI [-Wpsabi]72 | const __m128 vec_fabs_mask _mm_loadu_ps(&fabs_mask._float[0]);| ^~~~~~~~…