JavaScript 基础教程

JavaScript 首页 JavaScript 路线图 JavaScript 概述 JavaScript 功能特性 JavaScript 启用 JavaScript 位置 JavaScript 语法 JavaScript Hello World JavaScript Console.log() JavaScript 注释 JavaScript 变量 JavaScript let 语句 JavaScript 常量 JavaScript 数据类型 JavaScript 类型转换 JavaScript 严格模式 JavaScript 保留关键字

JavaScript 运算符

JavaScript 运算符 JavaScript 算术运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 位运算符 JavaScript 赋值运算符 JavaScript 条件运算符 JavaScript typeof 运算符 JavaScript 空值合并运算符 JavaScript 安全赋值运算符 JavaScript 删除运算符 JavaScript 逗号运算符 JavaScript 分组运算符 JavaScript Yield 运算符 JavaScript 展开运算符 JavaScript 幂运算符 JavaScript 运算符优先级

JavaScript 控制流

JavaScript If...Else JavaScript While 循环 JavaScript For 循环 JavaScript For...in JavaScript For...of JavaScript 循环控制 JavaScript Break 语句 JavaScript Continue 语句 JavaScript Switch Case JavaScript 用户定义迭代器

JavaScript 函数

JavaScript 函数 JavaScript 函数表达式 JavaScript 函数参数 JavaScript 默认参数 JavaScript Function() 构造函数 JavaScript 函数提升 JavaScript 自调用函数 JavaScript 箭头函数 JavaScript 函数调用 JavaScript 函数 call() 方法 JavaScript 函数 apply() 方法 JavaScript 函数 bind() 方法 JavaScript 闭包 JavaScript 变量作用域 JavaScript 全局变量 JavaScript 智能函数参数

JavaScript 对象

JavaScript Number JavaScript Boolean JavaScript Strings JavaScript Arrays JavaScript Date JavaScript DataView JavaScript Handler JavaScript Math JavaScript RegExp JavaScript Symbol JavaScript Sets JavaScript WeakSet JavaScript Maps JavaScript WeakMap JavaScript 可迭代对象 JavaScript Reflect JavaScript TypedArray JavaScript 模板字面量 JavaScript 带标签的模板

面向对象的 JavaScript

JavaScript 对象 JavaScript 类 JavaScript 对象属性 JavaScript 对象方法 JavaScript 静态方法 JavaScript 显示对象 JavaScript 对象访问器 JavaScript 对象构造函数 JavaScript 原生原型 JavaScript ES5 对象方法 JavaScript 封装 JavaScript 继承 JavaScript 抽象 JavaScript 多态 JavaScript 解构 JavaScript 解构赋值 JavaScript 对象解构 JavaScript 数组解构 JavaScript 嵌套解构 JavaScript 可选链式调用 JavaScript 全局对象 JavaScript Mixins (混合) JavaScript 代理

JavaScript 版本

JavaScript 历史 JavaScript 版本 JavaScript ES5 JavaScript ES6 ECMAScript 2016 ECMAScript 2017 ECMAScript 2018 ECMAScript 2019 ECMAScript 2020 ECMAScript 2021 ECMAScript 2022

JavaScript 异步

JavaScript 异步 JavaScript 回调函数 JavaScript Promises JavaScript Async/Await JavaScript Microtasks (微任务) JavaScript Promises JavaScript Promises 链 JavaScript 定时事件 JavaScript setTimeout() JavaScript setInterval()

JavaScript Cookies

JavaScript Cookies JavaScript Cookie 属性 JavaScript 删除 Cookies

JavaScript 浏览器 BOM

JavaScript 浏览器对象模型 JavaScript Window 对象 JavaScript Document 文档对象 JavaScript Screen 对象 JavaScript History 对象 JavaScript Navigator 对象 JavaScript Location 对象 JavaScript Console 对象

JavaScript Web APIs

JavaScript Web API JavaScript History API JavaScript Storage API JavaScript Forms API JavaScript Worker API JavaScript Fetch API JavaScript Geolocation API

JavaScript 事件

JavaScript 事件 JavaScript DOM 事件 JavaScript addEventListener() JavaScript 鼠标事件 JavaScript 键盘事件 JavaScript 表单事件 JavaScript 窗口/文档事件 JavaScript 事件委托 JavaScript 事件冒泡 JavaScript 事件捕获 JavaScript 自定义事件

JavaScript 错误处理

JavaScript 错误处理 JavaScript try...catch JavaScript 调试 JavaScript 自定义错误 JavaScript 扩展错误

JavaScript 重要关键字

JavaScript this 关键字 JavaScript void 关键字 JavaScript new 关键字 JavaScript var 关键字

JavaScript HTML DOM

JavaScript HTML DOM JavaScript DOM 方法 &属性 JavaScript DOM 文档 JavaScript DOM 元素 JavaScript DOM 属性 (Attr) JavaScript DOM 表单 JavaScript 修改 HTML JavaScript 修改 CSS JavaScript DOM 动画 JavaScript DOM 导航 JavaScript DOM 集合 JavaScript DOM NodeList JavaScript DOM DOMTokenList

JavaScript 高级章节

JavaScript 冒泡排序算法 JavaScript 循环引用错误 JavaScript 使用 Jest 进行代码测试 JavaScript CORS 处理 JavaScript 数据分析 JavaScript 死区 JavaScript 设计模式 JavaScript Engine 和 Runtime JavaScript 执行上下文 JavaScript 函数组合 JavaScript 不可变性 JavaScript Kaboom.js JavaScript 词法作用域 JavaScript 本地存储 JavaScript 记忆化 JavaScript 压缩 JS JavaScript 可变性 vs 不可变性 JavaScript 包管理器 JavaScript 解析 S 表达式 JavaScript 原型继承 JavaScript 响应式 JavaScript Require 函数 JavaScript Selection API JavaScript SessionStorage JavaScript SQL CRUD 操作 JavaScript 增强排序 JavaScript 临时死区 JavaScript 节流 JavaScript TRPC 库 JavaScript 真值和假值 JavaScript 上传文件 JavaScript 日期比较 JavaScript 递归 JavaScript 数据结构 JavaScript Base64 编码 JavaScript 回调函数 JavaScript 当前日期/时间 JavaScript 日期验证 JavaScript 过滤方法 JavaScript 生成颜色 JavaScript HTTP 请求 JavaScript 插入排序 JavaScript 延迟加载 JavaScript 链表 JavaScript 嵌套循环 JavaScript 空值检查 JavaScript 获取当前 URL JavaScript 图算法 JavaScript 高阶函数 JavaScript 空字符串检查 JavaScript 表单处理 JavaScript 函数式编程 JavaScript 形参 vs 实参 JavaScript 原型 JavaScript 响应式编程 JavaScript Reduce 方法 JavaScript Rest 运算符 JavaScript 短路 JavaScript 未定义检查 JavaScript 单元测试 JavaScript 验证 URL

JavaScript 杂项

JavaScript Ajax JavaScript 异步迭代 JavaScript Atomics 原子对象 JavaScript Rest 参数 JavaScript 页面重定向 JavaScript 对话框 JavaScript 页面打印 JavaScript 表单验证 JavaScript 动画 JavaScript 多媒体 JavaScript 图像映射 JavaScript 浏览器 JavaScript JSON JavaScript 多行字符串 JavaScript 日期格式 JavaScript 获取日期方法 JavaScript 设置日期方法 JavaScript 模块 JavaScript 动态导入 JavaScript BigInt JavaScript Blob JavaScript Unicode JavaScript 浅拷贝 JavaScript 调用堆栈 JavaScript 引用类型 JavaScript IndexedDB JavaScript 点击劫持攻击 JavaScript 柯里化 JavaScript 图形 JavaScript Canvas 画布 JavaScript 防抖 JavaScript 性能 JavaScript 代码风格指南

JavaScript 实用资源

JavaScript 面试题 JavaScript 速查表 JavaScript 函数


JavaScript - 包管理器

在 JavaScript 中,包管理器是一种简化项目中库(或包)安装、管理和更新的工具。使用这些包(由其他开发者提供的可复用代码片段),您可以节省时间并无需从头开始添加功能。

包管理器的必要性

假设没有包管理器。在这种情况下,以下任务可能需要手动完成:

  • 找到所有适合您项目的软件包。

  • 验证软件包是否不包含任何已知漏洞。

  • 挑选软件包。

  • 将它们放置在它们所属的位置。

  • 密切关注每个软件包的更新。

  • 如果有新版本发布,请更新所有软件包。

  • 删除所有不必要的软件包。

手动安排数十甚至数百个软件包需要花费大量的精力和时间。 JavaScript 中最常见的两个包管理器如下:

Node 包管理器 (npm)

Node 包管理器 (NPM) 是一个平台,旨在帮助开发者更轻松地使用和共享 JavaScript 代码。它与 Node.js 配合使用,Node.js 是一个 JavaScript 运行时,使 JavaScript 不仅可以在浏览器上运行,还可以在服务器上运行。

NPM 的作用如下:

  • NPM 简化了代码部分(称为包)的添加、修改和删除。这些软件包的工作原理类似于程序员用来向应用程序添加特定功能(包括管理用户输入或连接数据库)的构建块。

  • 使用终端中的命令,开发者可以使用 NPM 快速设置或修改代码(例如,使用 npm install 添加软件包)。

  • NPM 提供了数百万个来自世界各地的人们贡献的软件包,因此,如果您需要用于常见任务的代码,那么毫无疑问有人已经为其创建了软件包。

  • 许多软件包是相互依赖的。NPM 会密切关注这些链接,并确保您拥有运行代码所需的所有资源。

命令

以下是一些可用于发挥 NPM 优势的命令 -

  • npm install "package-name": 使用此命令,您可以安装一个软件包。

  • npm uninstall "package-name": 使用此命令,您可以删除一个软件包。

  • npm update "package-name": 使用此命令,您可以更新一个软件包。

  • npm init: 使用此命令,您可以设置一个新项目并创建一个 package.json 文件。

package.json 文件

每个 JavaScript 项目,无论是 Node.js 还是浏览器应用程序,都可以定义为一个 npm 软件包,其中包含其自己的软件包信息和 package.json文件用于描述项目。

当使用 npm init 启动 JavaScript/Node.js 项目时,会使用开发者提供的以下基本元数据创建 package.json -

  • name: JavaScript 库/项目的名称

  • version: 显示项目的版本。在应用程序开发中,此字段通常会被忽略,因为开源库似乎不需要进行版本控制。但它可以用作部署版本的来源。

  • description: 项目描述。

  • license: 项目的许可证

Yarn

Yarn 与 NPM 类似,是一个允许开发者管理代码包的平台。 Facebook 创建它是为了解决开发人员在使用 NPM 时遇到的某些问题,例如性能和稳定性。

安装方法分为三个步骤 -

  • 解决方案Yarn 首先通过向注册表发送查询并迭代查找每个依赖项来解析依赖项。

  • 获取:接下来,Yarn 检查全局缓存目录,查看所需的包是否已下载。如果尚未下载,Yarn 会获取包的 tarball 并将其保存在全局缓存中,以便离线工作并避免多次下载依赖项。包含依赖项的 tarball 也可以放在源代码管理中,以实现完全离线安装。

  • 链接:最后,Yarn 通过将所有必需的文件从全局缓存复制到本地 node_modules 目录来连接所有内容。

命令

以下是一些可用于使用 yarn 的命令 -

  • yarn add "package-name": 您可以使用此命令安装软件包。

  • yarn remove "package-name": 您可以使用此命令删除软件包。

  • yarn update "package-name": 使用此命令更新软件包。

  • yarn init: 您可以设置一个新项目并创建一个 package.json 文件。

Yarn 使用锁定文件 (yarn.lock) 来验证团队中的所有开发人员是否使用相同版本的软件包。这有助于避免版本变化导致的错误。

为什么要使用包管理器?

npm 和 Yarn 都被广泛使用,两者之间的选择通常基于个人或项目偏好。以下是您应该使用包管理器的原因:

  • 节省时间:轻松安装和使用现有库,从而节省时间。

  • 依赖项管理:自动管理您选择的库所需的库。

  • 轻松更新:当有升级或安全更新可用时,可以快速更新包。