当前位置: 首页 > news >正文

12 分钟讲解所有 JavaScript 库/模块[译]

本内容是对 Every Javascript Library / Module Explained in 12 Minutes 内容的翻译与整理。


jQuery

jQuery 是一个 JavaScript 库,用于简化 HTML DOM 操作,更容易地处理事件,也使得创建动画和执行 Ajax 更加简单。DOM,即文档对象模型,基本上就是网页上每个元素的组织方式。你可以将其想象为一个家谱图,有父元素和子元素等等。

过去人们使用 jQuery 是因为它比原生 JavaScript 更加用户友好,更容易学习和理解。它的语法非常简单,正如前面所说,这种易于阅读的语法让 Ajax(异步 JavaScript)变得更加容易。

自从 ECMAScript 6 标准(简称 ES6)出现后,jQuery 的使用开始减少。随后,JavaScript 框架开始流行起来,用于构建网站。不过别搞错了,直到今天,仍然有许多网站使用 jQuery。

Polymer

Polymer 是由 Google 开发的 JavaScript 库,用于构建可重用的 Web 组件。Web 组件是一段表示网页中某个元素的代码,比如一个按钮、列表、导航栏、巨幕(jumbotron)或轮播图(carousel)。其目的是让这些组件具有可重用性和模块化,使得将它们添加到网页变得非常简单,无需重复编写相同的代码。

Web 组件使用一种称为 shadow DOM 的技术,它是该组件独有的特定元素。这意味着每当 Web 组件更新时,只有该组件对应的网页部分被重新加载,而不是整个页面。

MooTools

MooTools 是一个与 jQuery 类似的 JavaScript 库,用于 DOM 操作、事件处理和 Ajax。它的用途与 jQuery 非常相似,虽然语法略有不同。

Masonry

Masonry 是一个帮助你在网站上构建网格布局(masonry)的工具。它允许你创建基于列的网格布局,添加动画,并能够自定义、对图片进行排序和过滤,同时优化网页上的空间使用,打造美观的设计。

Three.js

Three.js 是一个用于 3D 建模和 3D 动画的库。它使用名为 WebGL 的 JavaScript API,在网页浏览器中渲染 3D 对象。你不仅可以创建 3D 对象,还可以从像 Blender 这样的程序中导入对象。Three.js 通常用于构建 3D 游戏、数据可视化,甚至有时用于 VR 和 AR。

GreenSock

GreenSock,也被称为 GreenSock Animation Platform(GSAP),是一个以高性能动画著称的 JavaScript 库。基本上,任何你可以用 JavaScript 操作的东西,都可以用 GreenSock 动画化,包括 HTML、SVG、Canvas 元素等。它也能与 React、Vue 和 Angular 等 JavaScript 框架无缝配合使用。它最初还是用于 ActionScript 的库,也就是 Flash 使用的语言。啊,Flash,那真是美好的时代。

D3.js

D3.js,也称为 Data-Driven Documents,是一个功能非常强大的 JavaScript 数据可视化库。你能想到的图表、绘图、图形、动画、交互式仪表板,甚至是复杂数据的操作,都可以通过几行代码完成。D3 最著名的是创建和操作 SVG。

Chart.js

Chart.js 是一个 JavaScript 库,用于创建图表。它的名字已经说明了一切,它能让你创建折线图、柱状图、饼图、环形图、散点图,并且图表都是响应式设计,能够适应任何屏幕尺寸。而不是用于创建复杂的 AI 和机器学习算法(开个玩笑)。

AOS

AOS(Animate On Scroll)是一个 JavaScript 库,允许你在滚动时触发动画。它的动画效果很好……

Anime.js

Anime.js 是一个强大而轻量的 JavaScript 动画库。你只需在网页中引入 anime.min.js 文件,就可以开始为网页上的任何元素创建动画。你可以用类名或 ID 选择元素,还可以通过代码实现帧精度的动画控制,同时调整动画的缓动函数和持续时间。

Video.js

Video.js 允许你在网站上放置全屏视频背景。你甚至可以添加文字覆盖层和控制按钮。它非常适合用于着陆页和首页。

Plotly

Plotly 是一个用于创建实时更新图表和数据可视化的库。你可以缩放、平移、悬停查看数据点,并执行其他操作来探索数据。它也支持跨平台和多语言开发,并且可以创建多种类型的图表,就像其他库一样。

Brain.js

Brain.js 是一个在 JavaScript 中实现机器学习和人工智能的方式。你通过在项目中引入 Brain.js 来开始创建神经网络。创建神经网络基本上就是教计算机如何学习。首先,你提供一些训练数据,比如猫的图片,这些数据进入输入层。然后信息通过隐藏层传播,隐藏层处理信息并教神经网络识别特征,比如尖耳朵和胡须。最终结果通过输出层得出。Brain.js 用于模式识别、文本分析和简单预测。

TensorFlow.js

TensorFlow.js 是 TensorFlow 的 JavaScript 版本。虽然它不像 Python 版本那样强大,因为它必须在浏览器中运行,而 Python 版本可以利用高性能的 CPU 和 GPU,但它仍是一个非常优秀的机器学习库。它能够进行图像识别、预测模型、自然语言处理,甚至驱动自动驾驶汽车。

你将数据输入到称为张量(tensor)的结构中,这也是它名字的来源。张量本质上是一个多维数组。想象一个购物清单是一维数组,一个带行和列的表格是二维数组。你甚至可以组织更高维度的信息,这些就被称为张量。

Socket.io

Socket.io 是一个可以实现用户与 Web 服务器之间实时双向通信的库。它主要使用 WebSocket 实现功能。你是否曾想创建自己的实时聊天、直播应用或协作编辑程序?Socket.io 就是实现的方法。

PDF.js

PDF.js 允许你用 JavaScript 为网站创建自定义的 PDF 查看器。它主要通过 HTML canvas 实现功能。你也可以用它来操作 PDF 文档。

Node.js

Node.js 是一个非常流行的 JavaScript 运行环境,允许你在 Web 服务器上运行 JavaScript。在 Node 出现之前,服务器端语言通常是 PHP 或 Java。但 Node.js 能够工作,是因为它建立在 V8 JavaScript 引擎之上,也就是 Chrome 使用的引擎。这为 JavaScript 开发者成为全栈开发者提供了机会。Node.js 还可以处理异步 JavaScript。最重要的是,它自带了 Node 包管理器,也就是常说的 npm,这是一个允许你安装和管理库与模块的工具。

Granim.js

Granim.js 用于实现流畅的渐变动画。通过 HTML canvas 元素,你可以控制颜色数量、动画方向、配色方案等,让你的网站设计脱颖而出。

Deno

Deno 是一个现代化的 JavaScript 和 TypeScript 运行环境,由创建 Node.js 的同一个人开发。它用于在 Web 服务器上运行 JavaScript 和 TypeScript。与 Node.js 的不同之处在于它强调安全性,因为在 Deno 中,程序默认无法访问文件系统或网络,除非获得许可。正如前面所说,它也支持 TypeScript。尽管 Deno 没有像 Node 那样的包管理系统。

Ionic

Ionic 是一个 UI 工具包,用于构建渐进式 Web 应用、桌面应用和移动应用。它支持跨平台开发,包括 iOS、Android 和 Web。它自带预构建的 UI 组件,如列表、按钮、表单、导航栏,并可以与 JavaScript 框架集成使用,比如 React。

Vite

Vite 是一个前端构建工具,可以让 JavaScript 网站的构建速度变得更快。它由 Vue.js 的作者开发。Vite 在法语中意为“快”,这正是它的核心目的。你可以在任何命令行工具中开始,选择一个 vanilla JavaScript 项目或其他多个框架的选项,然后几秒钟内就可以开始构建。

例如,在 Vite 出现之前,要启动一个 React 项目,你必须通过 Node 包管理器使用 create-react-app 命令。如果你用过,你就知道这可能需要一段时间。Vite 使用原生的 ES 模块,这是现代 JavaScript 的标准。它也支持 TypeScript,并具备热模块替换功能(hot module replacement),这意味着你能看到代码的修改实时反映在网页上,而无需刷新页面。

Gatsby

Gatsby 是一个静态网站生成器,主要用于 React,但也可以用于原生 JavaScript。这意味着它可以在构建过程中将网站预构建成静态的 HTML、CSS 和 JavaScript。Gatsby 驱动着很多博客、电商网站、作品集网站,并且非常易于使用插件。

Jest

Jest 是一个主要用于 React 的 JavaScript 测试工具,但也可以用于其他 JavaScript 项目。它主要用于单元测试。单元测试是逐个测试代码片段的方式,以确保每个部分在部署前都能正常运行。其他功能包括为 UI 组件创建快照以用于测试和比较,以及隔离代码进行测试。

Mocha

Mocha 是一个可以在 NodeJS 和浏览器中运行的 JavaScript 测试框架。它适用于单元测试、集成测试和端到端测试。它以异步测试著称,适用于测试处理网络请求和数据库交互的异步代码。

React

React 是一个非常流行的 UI 框架和库,用于构建网站。React 主要用于网站的前端,即用户实际与之交互的部分。它的主要特点是使用可重用的代码块,称为组件。这些组件可以是按钮、文本框、图片、菜单、导航等。组件不仅可重用,而且是模块化的,与其他 React 项目可以很好地配合。

React 使用一种叫做 JSX 的语言编写,看起来像是 HTML 和 JavaScript 的结合。React 还附带自己的库,比如 Redux 和 React Router。

Vue,也和 React 类似,是一个用于构建 UI 组件的 JavaScript 库。虽然它没那么流行,但通常性能更快一些。

Angular

Angular,同样用于构建 UI 组件,不过它更适用于大型和企业级项目。

Svelte

Svelte,是的,也和前面三个类似,用于构建 UI 组件。但它与前面几个的主要区别在于页面渲染方式。之前提到的框架使用虚拟 DOM 来渲染网页,而 Svelte 使用的是编译器。这带来了更快的性能和更小的文件体积。

Express.js

Express.js 是一个用于构建 API(应用程序编程接口)的框架。API 就是两个程序之间交换信息的方式。如果你曾尝试用 Google 账号登录,那就是通过 API 实现的。

Next.js

Next.js 是一个后端 JavaScript 框架,用于搜索引擎优化。它还通过服务器端渲染(在将网页发送给用户之前在服务器上完成渲染)来提升网站性能。

Nest.js 是一个用于构建服务器端应用的框架,构建在 NodeJS 之上。它允许你使用 WebSocket、创建 RESTful API,并处理网站的安全问题。虽然它不是 JavaScript,而是使用 TypeScript 编写的。TypeScript 本质上是 JavaScript 的超集,也就是带有额外功能的 JavaScript,使得代码更可靠。

JavaScript 非常灵活,但有时这会带来问题。TypeScript 更加严格,其中一个方式是使用静态类型。比如你有一个函数应该传入两个数字相加,但你不小心传了一个字符串和一个数字。JavaScript 可能会做出奇怪的事情,或者返回错误。但使用 TypeScript,在运行代码之前就能发现这种错误。

Nuxt.js

Nuxt.js 是一个建立在 Vue.js 之上的框架。Vue.js 是一个专注于网站前端开发的框架,而 Nuxt 是一个处理后端的框架。Nuxt 能够进行服务器端渲染、静态网站生成、数据获取等各种功能,适用于成为一名全栈 Vue 开发者。

相关文章:

  • 曝光融合(Exposure Fusion)
  • java后端学习
  • 【记录】Windows|竖屏怎么调整分辨率使横竖双屏互动鼠标丝滑
  • 51单片机的lcd12864驱动程序
  • uniapp-商城-57-后台 新增商品(弹窗属性数据添加父级)
  • 虚拟机在挂起恢复后时间漂移问题
  • 吉客云数据集成到金蝶云星空的最佳实践
  • HTML常用标签用法全解析:构建语义化网页的核心指南
  • 工具:shell命令提示符自定义之显示GIT当前分支
  • WebGL2光照效果
  • 龙芯新一代国产服务器CPU及产品闪耀信创大会,助力信创与智算新突破
  • SpringBoot3.4.5下Lombok的@Data注解不生效,解决方案
  • 数据科学和机器学习的“看家兵器”——pandas模块 之六
  • 【漫话机器学习系列】261.工具变量(Instrumental Variables)
  • 《AI大模型应知应会100篇》第66篇:用大模型 + 向量数据库构建你的个性化知识库系统(附实战代码)
  • Java 21 + Spring Boot 3.5:AI驱动的高性能框架实战
  • 【漫话机器学习系列】262.交叉项(Interaction Term)
  • 机器学习-特征工程
  • GD32 GPIO失控的解决方案
  • 【动态导通电阻】GaN HEMT动态导通电阻的精确测量
  • 辽宁援疆前指总指挥王敬华已任新疆塔城地委副书记
  • 病愈出院、跳大神消灾也办酒,新华每日电讯:农村滥办酒席何时休
  • 戛纳打破“疑罪从无”惯例,一法国男演员被拒之门外
  • 金融月评|尽早增强政策力度、调整施策点
  • 探秘多维魅力,长江经济带、珠三角媒体总编辑岳阳行启动
  • 美联储主席:供应冲击或更频繁,将重新评估货币政策方法中的通胀和就业因素