6个最常用的JS 库 | 框架推荐 主流的js框架

JavaScript 是目前最流行的编程语言之一，它受欢迎的原因之一是大量框架和库的可用性。与传统的 Vanilla JS 开发相比，它们使开发变得更加容易。

下面我们将分享6个实际开发过程中最常用的JS 库 | 框架，供大家学习参考。

本文提及的6个常用的JS 库 | 框架，包括：

• Vue
• RxJS
• React
• Nest
• Day.js
• Ramda

1. Vue

功能简介：

Vue.js 是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架。vue框架的特点为易用、灵活、高效。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

主要特性：

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。

官网：https://cn.vuejs.org/

2. RxJS

功能简介：

rxjs(Reactive Extensions for JavaScript)是Javascript的响应式扩展, 响应式的思路是把随时间不断变化的数据、状态、事件等转成可被观察的序列(Observable Sequence)，然后订阅序列中对象的变化，一旦变化，就会执行事先安排好的各种转换和操作。

rxjs适用于异步场景，可以用于优化前端交互中的请求、事件。

主要特性：

• 统一异步编程的规范，不管是Promise、ajax还是事件，通通封装成序列(Observable Sequence)，一旦有异步环节发生变更，观察序列即可截获发生变更的信息。

• 前端业务层和展现层解耦，比如展现层不需要关心指定事件触发时和DOM无关的处理逻辑。同时业务层也能组装异步操作中多个异步逻辑之间的关系，无需暴露给展现层。展现层关心的是：异步操作其中环节的数据变化。

• rxjs开发业务层具有高弹性，高稳定性，高实时性等特点。

官网地址：https://rxjs.dev/

3. React

功能简介：

React是一个简单的javascript UI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。

React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。

主要特性：

• 声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。

• 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

• 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入React来开发新功能。

官网地址：https://reactjs.org/

4. Nest

功能简介：

Nest (NestJS) 用于构建高效、可扩展的 Node.js 服务器端应用程序，它利用 JavaScript 的渐进增强的能力，使用并完全支持 TypeScript （仍然允许开发者使用纯 JavaScript 进行开发），并结合了 OOP （面向对象编程）、FP （函数式编程）和 FRP （函数响应式编程）。

主要特性：

• 支持 TypeScript： 自动配置并编译 TypeScript；

• API 路由： 创建 API 端点（可选）以提供后端功能；

• 内置支持 CSS： 使用 CSS 模块创建组件级的样式。内置对 Sass 的支持；

• 代码拆分和打包： 采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法；

• 零配置： 自动编译并打包。从一开始就为生产环境而优化；

• 混合模式： SSG 和 SSR：在一个项目中同时支持构建时预渲染页面（SSG）和请求时渲染页面（SSR）；

• 增量静态生成： 在构建之后以增量的方式添加并更新静态预渲染的页面。

官网：https://nestjs.com/

5. Day.js

功能简介：

Day.js是一个轻量处理时间和日期的 JavaScript 库，可以为现代浏览器解析、验证、操作和显示日期和时间，是Moment.js 的 2kB 轻量化代替方案，拥有同样强大的 API。

主要特性：

• 仅仅 2kb 左右占用空间，无论是加载还是执行都是极简的

• 和 Moment.js 有着相同的 API 和模式，上手无成本

• 所有更改 Day.js 对象的API操作都返回新的实例，防止错误和避免长时间的调试会话

• 提供国际化支持

• 支持 TypeScript

官网地址：https://dayjs.gitee.io/zh-CN/

6.Ramda

功能简介：

Ramda 是一个用于函数式编程的很酷的 JS 库，更容易创建函数式 pipeline、且从不改变用户已有数据。

主要特性：

• Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念。这可以帮助你使用简洁、优雅的代码来完成工作。

• Ramda 函数本身都是自动柯里化的。这可以让你在只提供部分参数的情况下，轻松地在已有函数的基础上创建新函数。

• Ramda 函数参数的排列顺序更便于柯里化。要操作的数据通常在最后面。

最后两点一起，使得将多个函数构建为简单的函数序列变得非常容易，每个函数对数据进行变换并将结果传递给下一个函数。Ramda 的设计能很好地支持这种风格的编程。

官网地址:https://ramda.cn/