Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理方式，适用于广泛的使用场景，而XState通过状态机和状态图提供了对状态的严格管理，非常适合处理更复杂的状态逻辑。选用哪一个通常取决于应用的需求以及开发团队对于状态管理的偏好。

**集成和生态系统**：
- **Redux** 拥有一个非常成熟和广泛的生态系统。有大量的中间件可用，比如`redux-thunk`和`redux-saga`，用于处理副作用；有开发工具如Redux DevTools，用于调试。
- **XState** 虽然相对年轻，但其生态系统正在快速发展。它提供了与多个框架集成的能力，例如与React的`@xstate/react`。

**学习曲线**：
- 对于初学者来说，**Redux** 的概念可能需要一段时间来适应，尤其是对于不熟悉函数式编程概念的开发者。理解如何组织actions、reducers和中间件可能会有一定难度。
- **XState** 要求开发者理解状态机的理论和概念，这本身就是一个复杂性的来源。但对于已经熟悉状态机理论的开发者来说，XState可以更直观和直接地映射他们的思维。

**性能考量**：
- 在大型应用中，**Redux** 需要特别注意性能问题，因为每个action都可能导致整个状态树被遍历和潜在的重新渲染。
- **XState** 通过状态图确保只有相关的状态和逻辑被激活和执行，这可能在某些情况下带来性能优势。

### 结论

在选择状态管理方案时，重要的是要考虑应用的特定需求。如果你的应用包含了许多不同状态，这些状态之间有复杂的转换规则，那么XState可能是一个更好的选择，因为它可以帮助你以结构化和声明式的方式组织这些逻辑。而如果你的应用需要广泛的状态管理，并且你想要更直接的控制状态变化的方式，Redux可能更适合。无论如何，两者都是强大的工具，能够帮助你构建可维护和可扩展的前端应用。

我创建了 XState，但我不会告诉您是否使用其中之一；这取决于你的团队。相反，我将尝试强调一些关键差异。

终极版

X状态

本质上是一个状态容器，其中事件（在 Redux 中称为_操作_）被发送到更新状态的减速器

也是一个状态容器，但将有限状态（例如，`"loading"`，`"success"`）与“无限状态”或上下文（例如，`items: [...]`）分开

不规定你如何定义你的减速器 - 它们是简单的函数，在给定当前状态和事件（动作）的情况下返回下一个状态

“带有规则的减速器” - 您定义由于事件而导致的有限状态之间的合法转换，以及应在转换中执行哪些操作（或在进入/退出状态时）

没有内置_的_方法来处理副作用；有很多社区选项，例如 redux-thunk、redux-saga 等。

使操作（副作用）具有声明性和显式性 - 它们是`State`每次转换（当前状态 + 事件）时返回的对象的一部分

目前无法可视化状态之间的转换，因为它无法区分有限状态和无限状态

有一个可视化工具： https: [//statecharts.github.io/xstate-viz](https://statecharts.github.io/xstate-viz)由于声明性性质，这是可行的

减速器中表示的隐式逻辑/行为无法以声明方式序列化（例如，在 JSON 中）

表示逻辑/行为的机器定义可以序列化为 JSON，并从 JSON 中读取；这使得行为非常可移植并且可以通过外部工具进行配置

严格来说不是一个状态机

严格遵守 W3C SCXML 规范：[https ://www.w3.org/TR/scxml/](https://www.w3.org/TR/scxml/)

依赖开发人员手动防止不可能的状态

使用状态图自然地定义处理事件的边界，这可以防止不可能的状态并且可以进行静态分析

鼓励使用单一的“全局”原子存储

鼓励使用类似 Actor 模型的方法，其中可以有许多相互通信的分层状态图/“服务”实例

本周我将在文档中添加更多关键差异。

**状态机**不会告诉（强制）您具有单向数据流。与数据流无关。它更多的是关于**约束状态变化**和**状态转换**。因此，通常只有应用程序的某些部分会使用状态机进行设计，仅当您需要_约束/禁止_某些状态更改并且您对转换_感兴趣时_。

请注意，对于状态机，如果由于某种原因（外部 API 依赖等...），应用程序可能会被锁定在由于约束而无法转换到另一个状态的状态，您必须解决它。

**但是，**如果您只对最后一个应用程序状态本身感兴趣，而不是_状态转换_，并且状态约束并不重要，那么您最好不要使用状态机并直接更新状态本身（**您仍然可以通过以下方式将状态包装在 Singleton 类更新中）动作类**）。

* * *

另一方面，**Redux**是**单向架构框架**。单向架构强制您拥有单一方向的数据流。在 Redux 中，它以`User->View->(Action)->Store->Reducer->(Middleware)->Store->(State)->View`. 与状态机一样，您可以使用 Redux 中的中间件触发副作用。如果需要，您可以限制/禁止状态转换。**与状态机不同**，Redux强制数据单向流动，**纯粹**！减速器函数、不可变状态对象、单个可观察的应用程序状态。

下面是我的一些观点。

*   UI 状态和业务/后端状态在 redux 中耦合在一起。因此，UI 或业务状态的每次更新都会在 Redux 存储中创建数据更新。
*   Xstate 将 UI 状态和后端状态解耦。
*   在 redux 中，所有节点都存在于根节点内。Xstate 在独立机器内分散和分发数据。
*   应用程序只能在已经定义的状态之间转换。因此任何错误或错误都可以在机器本身中修复。
*   内部状态由机器本身在 Xstate 中管理。Redux 将新状态表示为标志。
*   渲染器竞争 - 将尽可能多的状态提升到机器中，如果需要，我们可以相对轻松地切换渲染框架（例如从 React 到 vue）。
*   Contexts 提供了具体的类来向外界呈现单个接口。

Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理

Redux 和状态机（例如 xstate）都是用于状态管理的库，但它们各自遵循不同的哲学和实现方式。

### Redux

**概念**：
Redux 是一种基于 Flux 架构思想的状态管理库，主要用于JavaScript应用，特别是React。它提供了一种单一的、不可变的状态树来存储整个应用的状态，并通过纯函数（reducers）来描述状态的变更。在Redux中，所有的状态变化都是显式的和可预测的。

**特点**：
- **单一数据源**：整个应用的状态存储在一个对象树里，便于开发者追踪和调试。
- **状态只读**：唯一改变状态的方法是触发action，action是一个描述已发生事件的普通对象。
- **使用纯函数进行状态变更**：为了描述action如何改变状态树，你需要编写reducers。

**例子**：
在一个购物车应用中，当用户添加一个商品时，应用的状态需要进行更新。在Redux中，你会发出一个如`{ type: 'ADD_ITEM', item }`的action，并通过reducer来定义如何更新state。

### 状态机（XState）

**概念**：
状态机，特别是在XState库中，是用来管理复杂应用状态的。XState实现了有限状态机和状态图的概念，允许开发者定义状态、转换（transitions）、事件和副作用（actions）。XState更加关注于状态的可能性和状态之间的关系，而不是状态的内容。

**特点**：
- **有限状态**：系统中的每个状态都是预定义的，状态机在这些状态之间切换。
- **明确的状态转换**：状态转换是由事件触发的，这些事件定义了从一个状态到另一个状态的路径。
- **可视化**：XState的状态机可以被可视化，提供了状态转换的图形表示，这有助于理解逻辑和调试。

**例子**：
在同样的购物车应用中，状态机会定义如“空购物车”、“含有商品的购物车”、“结算中”等状态。当发生一个事件（如用户点击"添加商品"）时，状态机会根据当前状态和事件触发相应的状态转换。

### 实际区别

**编程范式**：
- Redux使用了更传统的命令式编程范式，通过派发action的方式来描述“发生了什么”。
- XState倾向于声明式编程范式，你定义“什么事情在何时发生”，并让状态机处理实际的逻辑。

**状态表达方式**：
- Redux通常不限制你如何表达状态，你可以有一个非常复杂的状态树来存储应用的所有信息。
- XState鼓励你将状态分解成有限的、预定义的状态和状态之间的转换，这可以促进更结构化和模块化的状态设计。

**调试和可维护性**：
- Redux具有时间旅行调试的能力，能够通过记录action帮助开发者理解状态是如何改变的。
- XState提供可视化的状态转换图，这可以更直观地看到状态的变化，有助于理解和维护复杂的状态逻辑。

**使用场景**：
- Redux适用于那些需要细粒度控制、中到大型应用的状态管理。
- XState更适合处理有复杂状态逻辑、需要明确状态机模型的应用场景。

总结来说，Redux和XState在状态管理上各有所长。Redux提供了灵活的状态管理
方式，适用于广泛的使用场景，而XState通过状态机和状态图提供了对状态的严格管理，非常适合处理更复杂的状态逻辑。选用哪一个通常取决于应用的需求以及开发团队对于状态管理的偏好。

**集成和生态系统**：
- **Redux** 拥有一个非常成熟和广泛的生态系统。有大量的中间件可用，比如`redux-thunk`和`redux-saga`，用于处理副作用；有开发工具如Redux DevTools，用于调试。
- **XState** 虽然相对年轻，但其生态系统正在快速发展。它提供了与多个框架集成的能力，例如与React的`@xstate/react`。

**学习曲线**：
- 对于初学者来说，**Redux** 的概念可能需要一段时间来适应，尤其是对于不熟悉函数式编程概念的开发者。理解如何组织actions、reducers和中间件可能会有一定难度。
- **XState** 要求开发者理解状态机的理论和概念，这本身就是一个复杂性的来源。但对于已经熟悉状态机理论的开发者来说，XState可以更直观和直接地映射他们的思维。

**性能考量**：
- 在大型应用中，**Redux** 需要特别注意性能问题，因为每个action都可能导致整个状态树被遍历和潜在的重新渲染。
- **XState** 通过状态图确保只有相关的状态和逻辑被激活和执行，这可能在某些情况下带来性能优势。

### 结论

在选择状态管理方案时，重要的是要考虑应用的特定需求。如果你的应用包含了许多不同状态，这些状态之间有复杂的转换规则，那么XState可能是一个更好的选择，因为它可以帮助你以结构化和声明式的方式组织这些逻辑。而如果你的应用需要广泛的状态管理，并且你想要更直接的控制状态变化的方式，Redux可能更适合。无论如何，两者都是强大的工具，能够帮助你构建可维护和可扩展的前端应用。

Redux 和状态机(例如 xstate )之间的实际区别是什么?

当选择状态管理库的中间件时，Redux-Observable 和 Redux-Saga 都是强大的选择，它们各自有不同的优点。选择使用 Redux-Observable 的理由可能包括以下几点：

### 响应式编程与RxJS
Redux-Observable 基于 RxJS，这是一个响应式编程库，它可以让你使用 Observables 处理异步事件和基于流的编程。如果团队已经熟悉响应式编程范式，或者项目中已经在使用RxJS，那么使用 Redux-Observable 会更有意义，因为它可以让你利用已有的知识和代码库。

**示例：**
假如我们有一个需要处理多个不同数据流的复杂应用程序，比如实时股票价格更新、用户操作和网络请求等。使用 RxJS，我们可以创建一个统一的流来处理这些信息，并且可以很容易地通过各种操作符来合并、过滤、转换这些流。

### 操作符丰富
RxJS 提供了强大的操作符集合，这使得在复杂场景下处理异步操作变得更加灵活和强大。比如，可以使用 `debounceTime`、`throttleTime`、`switchMap`、`mergeMap`、`concatMap` 等操作符来进行节流、防抖、取消之前的请求等。

**示例：**
考虑一个自动完成的输入框，我们希望在用户输入时调用一个 API 来显示建议，但我们不希望在每次按键上都做这个调用，而是希望在输入稳定后进行。我们可以使用 `debounceTime` 操作符来实现这一点，它会等待一段时间直到没有新的输入，然后才执行 API 调用。

### 更紧密的集成
Redux-Observable 允许开发者以一种更紧密集成的方式将 action 创建者、异步流和 Redux store 结合起来。这样可以让你的 Epic（用于处理异步操作的函数）在不影响 UI 组件的情况下访问当前的 store 状态并且派发多个 action。

**示例：**
假设我们需要根据用户的一系列行为来触发不同的 action。例如，在用户登录成功后，我们可能需要获取用户的个人信息、加载用户的偏好设置等。在 Redux-Observable 中，我们可以在一个 Epic 中监听登录成功的 action，然后使用 RxJS 操作符链来处理这个复杂的流程。

### 流控制和错误处理
在 RxJS 中，流的概念和错误处理是一级公民。这意味着开发者可以以一种声明式的方式来管理流的生命周期和错误，这在某些应用场景下可能比 Redux-Saga 的 Generator 函数更方便。

**示例：**
想象一个情况，我们正在处理网络请求，并希望在请求失败时进行重试。RxJS 提供了 `retry` 或 `retryWhen` 操作符，这让我们可以简单地实现这种复杂的逻辑。

### 总结
选择 Redux-Observable 的理由通常取决于开发团队对响应式编程的偏好，以及对 RxJS 的熟悉程度。如果开发者已经习惯于使用 RxJS，并且希望能够利用其提供的强大功能来处理复杂的异步或基于流的场景，那么 Redux-Observable 是一个非常合适的选择。相比之下，如果团队更熟悉传统的 JavaScript 和异步处理方式，Redux-Saga 可能会更符合他们的习惯。

免责声明：我是 redux-observable 的作者之一，所以我很难做到 100% 公正。

我们目前没有提供任何 redux-observable 比 redux-saga 更好的理由，因为……事实并非如此。😆

tl;dr 两者都有优点和缺点。许多人会发现其中一个比另一个更直观，但如果您不了解 RxJS (redux-observable) 或生成器/“效果作为数据”(redux-saga)，那么以不同的方式学习两者都会很复杂。
--------------------------------------------------------------------------------------------------------------

它们以极其相似的方式解决相同的问题，但存在一些根本性的差异，只有当您充分使用它们时，这些差异才会真正显现出来。

redux-observable 几乎将一切都推迟到惯用的 RxJS。所以如果你有 RxJS 知识（或获得它），学习和使用 redux-observable 是超级超级自然的。这也意味着这些知识可以转移到 redux 之外的其他事物上。如果您决定切换到 MobX，如果您决定切换到 Angular2，如果您决定切换到未来的热门 X，RxJS 很有可能可以帮助您。这是因为 RxJS 是一个通用的异步库，并且在很多方面本身就像一种编程语言——整个“反应式编程”范例。RxJS 自 2012 年起就存在，最初是作为 Rx.NET 的一个端口（几乎每种主要语言都有“端口”，它_很有用_）。

redux-saga 本身提供了基于时间的运算符，因此虽然您在此流程管理器风格中获得的有关生成器和处理副作用的知识是可以转移的，但实际的运算符和用法并未在任何其他主要库中使用。所以这有点不幸，但本身不应该成为破坏交易的因素。

它还使用“效果作为数据”（[此处描述](https://redux-saga.js.org/docs/basics/DeclarativeEffects.html)），一开始可能很难理解，但这意味着您的 redux-saga 代码本身并不实际执行副作用。相反，您使用的辅助函数会创建类似于任务的对象，这些任务代表执行副作用的意图，然后内部库会为您执行它。这使得测试变得非常容易，不需要模拟，并且对某些人来说非常有吸引力。然而，我个人发现这意味着你的单元测试重新实现了你的传奇的大部分逻辑——使得这些测试在我看来不是很有用（并不是每个人都同意这个观点）

人们经常问为什么我们不使用 redux-observable 做类似的事情：对我来说，它从根本上与正常的惯用 Rx 不兼容。在 Rx 中，我们使用类似的运算符`.debounceTime()`来封装去抖所需的逻辑，但这意味着如果我们想要制作一个实际上不执行去抖而是发出带有意图的任务对象的版本，那么您现在已经失去了Rx 的力量，因为你不能再仅仅链接运算符，因为它们将在该任务对象上进行操作，而不是操作的真实结果。这确实很难优雅地解释。它再次需要对 Rx 有深入的了解才能理解方法的不兼容性。如果你_真的_想要这样的东西，请查看[redux-cycles](https://github.com/cyclejs-community/redux-cycles#what-does-this-look-like)，它使用 Cycle.js 并且主要有这些目标。我发现这对我来说需要太多仪式，但如果你感兴趣的话，我鼓励你尝试一下。

正如 ThorbenA 提到的，我并不回避承认 redux-saga 目前（2016 年 10 月 13 日）是 redux 复杂副作用管理领域的明显领导者。它起步较早，拥有更强大的社区。因此，使用事实上的标准比新来的标准更有吸引力。我认为可以肯定地说，如果您在没有先验知识的情况下使用其中任何一个，您就会感到困惑。我们都使用相当先进的概念，一旦你“掌握”了这些概念，复杂的副作用管理就会变得容易得多，但在那之前很多人都会遇到困难。

我能给出的最重要的建议是，在需要这些库之前不要引入它们。如果您只进行简单的 ajax 调用，则可能不需要它们。redux-thunk 学习起来非常简单，并且提供了足够的基础知识——但是异步越复杂，redux-thunk 就越难（甚至不可能）。但对于 redux-observable/saga 在很多方面来说，异步越复杂，它就越闪耀。在同一项目中将 redux-thunk 与其他方法之一（redux-observable/saga）一起使用也有很多优点！redux-thunk 用于常见的简单内容，然后仅使用 redux-observable/saga 来处理复杂的内容。这是保持生产力的好方法，所以你不会为了那些用 redux-thunk 来说微不足道的事情而与 redux-observable/saga 作斗争。

我认为有些事情你需要考虑。

1.  复杂
2.  编码风格
3.  学习曲线
4.  可测试性

> 假设我们想从 API 获取用户

    // Redux-Saga
    
    import axios from 'axios' 
    
    function* watchSaga(){
      yield takeEvery('fetch_user', fetchUser) // waiting for action (fetch_user)
    }
    
    function* fetchUser(action){
        try {
            yield put({type:'fetch_user_ing'})
            const response = yield call(axios.get,'/api/users/1')
            yield put({type:'fetch_user_done',user:response.data})
      } catch (error) {
            yield put({type:'fetch_user_error',error})
      }
    }
    
    // Redux-Observable
    import axios from 'axios'
    
    const fetchUserEpic = action$ => 
        action$
            .ofType('fetch_user')
            .flatMap(()=>
              Observable.from(axios.get('/api/users/1')) // or use Observable.ajax
                .map(response=>({type:'fetch_user_done', user:response.data}))
                .catch(error => Observable.of({type:'fetch_user_error',error}))
                .startWith({type:'fetch_user_ing'})
            )
    

另外，我写这篇文章是为了深入比较 Redux-saga 和 Redux-Observable 之间的差异。请查看[此处的链接](https://hackmd.io/s/H1xLHUQ8e#side-by-side-comparison)或[演示文稿](https://hackmd.io/p/H1xLHUQ8e#/)。

我使用 Redux-Observable 而不是 Redux-Saga，因为我更喜欢使用 observables 而不是生成器。我将它与 RXJS 一起使用，这是一个用于处理数据流的强大库。可以把它想象成异步的 lodash。关于选择其中一个的任何缺点、陷阱和妥协，请看一下Jay Phelps 的[回答](https://stackoverflow.com/a/38597548/2491115)：

> redux-saga 作为一个项目比 redux-observable 存在的时间更长，因此这无疑是一个主要卖点。您会发现更多文档、示例，并且可能有更好的社区可以获得支持。
> 
> 相反的是，你在 redux-saga 中学习的运算符和 API 几乎不像学习 RxJS 那样可转移，而 RxJS 到处都在使用。redux-observable 内部超级超级超级简单，它实际上只是为您提供了一种使用 RxJS 的自然方式。因此，如果您了解 RxJS（或想要了解），那么它是非常合适的。
> 
> 目前我对大多数人的建议是，如果您不得不问应该使用哪一个，那么您可能应该选择 redux-saga。

Redux-Observable 是一个令人惊叹的库，我们在生产中使用它 1.5 年了，到目前为止没有任何问题，它完全可测试，并且可以轻松与任何框架集成。我们的并行套接字通道超载，唯一能避免冻结的就是 Redux-Observable

在这里我想提三点。

**1\. 复杂性和学习曲线**

Redux-saga 在这里轻松击败了 redux-observable。如果你只需要一个简单的请求来完成授权，并且由于某些原因你不想使用 redux-thunk，你应该考虑使用 redux-saga，它更容易理解。

如果您事先没有 Observable 的知识，这对您来说会很痛苦，您的团队将为您提供指导:)

**2\. Observable 和 RxJS 能为我提供什么？**

当谈到异步逻辑时，Observable 就是你的瑞士刀，Observable 几乎可以为你做所有事情。你永远不应该将它们与承诺或发电机进行比较，它的功能要强大得多，就像将擎天柱与雪佛兰进行比较一样。

那么 RxJS 呢？它就像 lodash.js，但对于异步逻辑，一旦你进入，你将永远不会切换到不同的东西。

**3\. 反应式扩展**

只需检查此链接

> [http://reactivex.io/languages.html](http://reactivex.io/languages.html)

反应式扩展适用于所有现代编程语言，它只是函数式编程的关键。

因此，明智地花时间学习 RxJS 并使用 redux-observable :)

我很看重 Rx 所具有的跨语言和运行时的可移植性。即使您的应用程序不会改变语言，您的职业生涯也可能会改变。无论您自己如何衡量，都可以在学习中获得最大的影响力。它是通往 .Net LINQ 的绝佳网关。

为什么使用 redux-observable 而不是 redux- saga ?

在Redux中，将状态写入`localStorage`通常是为了持久化某些数据，以便在页面刷新或关闭后再次访问时能够恢复这些数据。选择何时将状态写入`localStorage`通常取决于应用的具体需求，但以下是一些合适的时机：

1. **应用退出或页面关闭之前**：
   可以监听`window`上的`beforeunload`事件，在应用即将关闭前将当前状态保存到`localStorage`。这样做可以确保即使用户没有显式地保存他们的进度，他们的数据也不会丢失。

2. **状态更新时**：
   如果希望应用的状态实时同步到`localStorage`，可以在Redux的中间件中做这件事情。例如，你可以使用`redux-thunk`或`redux-saga`中间件在每次有相关action被分发且状态更新后，将新状态保存到localStorage。

3. **定期自动保存**：
   对于一些需要自动保存功能的应用，比如在线编辑器，可以设置一个定时器，每隔一定时间将当前状态保存到`localStorage`。

4. **特定的action被分发时**：
   可以在分发某些特定action，如`SAVE_DATA`，时将状态或状态的一部分保存到`localStorage`。

举个例子，假设你有一个在线待办事项应用，用户可以添加、编辑和删除待办事项。你可能希望在以下几种情况下将待办事项列表保存到`localStorage`：

- 用户新增、修改或删除待办事项后，确保这些更改即时保存。
- 用户关闭浏览器标签或窗口前，保证待办事项的最新状态被保留下来。
- 用户可以点击一个“保存”按钮显式地将待办事项列表保存到`localStorage`。

以下是一个简单的中间件示例，它会在每次action分发后同步状态到`localStorage`：

```javascript
const localStorageMiddleware = store => next => action => {
  const result = next(action);
  localStorage.setItem('my-app-state', JSON.stringify(store.getState()));
  return result;
};
```

然而，这里有一点很重要：不是所有的状态都应该存储在`localStorage`中，因为`localStorage`有容量限制，通常为5MB。因此，只有那些必要的、体积较小的状态才应该被持久化。同时，还需要考虑安全性因素，敏感信息绝不应该存储在`localStorage`中。

减速器从来都不是执行此操作的合适位置，因为减速器应该是纯粹的并且没有副作用。

我建议只在订阅者中执行此操作：

    store.subscribe(() => {
      // persist your state
    })
    

在创建存储之前，请阅读这些持久部分：

    const persistedState = // ...
    const store = createStore(reducer, persistedState)
    

如果您使用，`combineReducers()`您会注意到尚未收到状态的减速器将使用其默认`state`参数值正常“启动”。这非常方便。

建议您取消订阅者的抖动，这样就不会太快地写入 localStorage，否则会出现性能问题。

最后，您可以创建一个封装它的中间件作为替代方案，但我会从订阅者开始，因为它是一个更简单的解决方案并且可以很好地完成工作。

要填补 Dan Abramov 答案的空白，您可以`store.subscribe()`这样使用：

    store.subscribe(()=>{
      localStorage.setItem('reduxState', JSON.stringify(store.getState()))
    })
    

在创建存储之前，请检查`localStorage`并解析密钥下的任何 JSON，如下所示：

    const persistedState = localStorage.getItem('reduxState') 
                           ? JSON.parse(localStorage.getItem('reduxState'))
                           : {}
    

然后，您可以将此常量传递`persistedState`给您的`createStore`方法，如下所示：

    const store = createStore(
      reducer, 
      persistedState,
      /* any middleware... */
    )

简而言之：使用中间件[redux-persist](https://github.com/rt2zz/redux-persist)，或者自己写。

如果有人对上述解决方案有任何疑问，您可以写下自己的解决方案。让我告诉你我做了什么。忽略`saga middleware`事物，只关注两件事`localStorageMiddleware`和`reHydrateStore`方法。拉出`localStorageMiddleware`所有内容并将`redux state`其放入本地存储中（如果存在）并将其放入`local storage``rehydrateStore``applicationState``redux store`

    import {createStore, applyMiddleware} from 'redux'
    import createSagaMiddleware from 'redux-saga';
    import decoristReducers from '../reducers/decorist_reducer'
    
    import sagas from '../sagas/sagas';
    
    const sagaMiddleware = createSagaMiddleware();
    
    /**
     * Add all the state in local storage
     * @param getState
     * @returns {function(*): function(*=)}
     */
    const localStorageMiddleware = ({getState}) => { // <--- FOCUS HERE
        return (next) => (action) => {
            const result = next(action);
            localStorage.setItem('applicationState', JSON.stringify(
                getState()
            ));
            return result;
        };
    };
    
    
    const reHydrateStore = () => { // <-- FOCUS HERE
    
        if (localStorage.getItem('applicationState') !== null) {
            return JSON.parse(localStorage.getItem('applicationState')) // re-hydrate the store
    
        }
    }
    
    
    const store = createStore(
        decoristReducers,
        reHydrateStore(),// <-- FOCUS HERE
        applyMiddleware(
            sagaMiddleware,
            localStorageMiddleware,// <-- FOCUS HERE 
        )
    )
    
    sagaMiddleware.run(sagas);
    
    export default store;

基于其他答案（以及[Jam Creencia 的 Medium 文章](https://medium.com/@jrcreencia/persisting-redux-state-to-local-storage-f81eb0b90e7e)）中提供的出色建议和简短代码摘录，这是一个完整的解决方案！

我们需要一个包含 2 个函数的文件，用于将状态保存到本地存储或从本地存储加载状态：

    // FILE: src/common/localStorage/localStorage.js
    
    // Pass in Redux store's state to save it to the user's browser local storage
    export const saveState = (state) =>
    {
      try
      {
        const serializedState = JSON.stringify(state);
        localStorage.setItem('state', serializedState);
      }
      catch
      {
        // We'll just ignore write errors
      }
    };
    
    
    
    // Loads the state and returns an object that can be provided as the
    // preloadedState parameter of store.js's call to configureStore
    export const loadState = () =>
    {
      try
      {
        const serializedState = localStorage.getItem('state');
        if (serializedState === null)
        {
          return undefined;
        }
        return JSON.parse(serializedState);
      }
      catch (error)
      {
        return undefined;
      }
    };

运行代码片段Hide results

展开片段

**这些函数由store.js**导入，我们在其中配置商店：

_注意：您需要添加一个依赖项：**`npm install lodash.throttle`**_

    // FILE: src/app/redux/store.js
    
    import { configureStore, applyMiddleware } from '@reduxjs/toolkit'
    
    import throttle from 'lodash.throttle';
    
    import rootReducer from "./rootReducer";
    import middleware from './middleware';
    
    import { saveState, loadState } from 'common/localStorage/localStorage';
    
    
    // By providing a preloaded state (loaded from local storage), we can persist
    // the state across the user's visits to the web app.
    //
    // READ: https://redux.js.org/recipes/configuring-your-store
    const store = configureStore({
    	reducer: rootReducer,
    	middleware: middleware,
    	enhancer: applyMiddleware(...middleware),
    	preloadedState: loadState()
    })
    
    
    // We'll subscribe to state changes, saving the store's state to the browser's
    // local storage. We'll throttle this to prevent excessive work.
    store.subscribe(
    	throttle( () => saveState(store.getState()), 1000)
    );
    
    
    export default store;

运行代码片段Hide results

展开片段

该商店被导入到**index.js中，因此可以将其传递到包装****App.js**的Provider中：

    // FILE: src/index.js
    
    import React from 'react'
    import { render } from 'react-dom'
    import { Provider } from 'react-redux'
    
    import App from './app/core/App'
    
    import store from './app/redux/store';
    
    
    // Provider makes the Redux store available to any nested components
    render(
    	<Provider store={store}>
    		<App />
    	</Provider>,
    	document.getElementById('root')
    )

运行代码片段Hide results

展开片段

请注意，绝对导入需要对**YourProjectFolder/jsconfig.json**进行此更改- 这告诉它在第一次找不到文件时在哪里查找文件。否则，您会看到有关尝试从**src**外部导入某些内容的抱怨。

    {
      "compilerOptions": {
        "baseUrl": "src"
      },
      "include": ["src"]
    }

运行代码片段Hide results

展开片段

Redux 中什么时候执行本地存储 localstorage？

在JavaScript中，我们可以通过以下步骤将Canvas画布保存为PNG图像：

1. 获取Canvas元素的引用。
2. 使用`toDataURL`方法将Canvas内容转换为数据URL，指定PNG格式作为参数。
3. 创建一个`<a>`元素并将其`href`属性设置为上一步得到的数据URL，然后设置下载属性（`download`）以提供保存时使用的默认文件名。
4. 触发这个`<a>`元素的点击事件来启动下载。

下面是一个具体的实现例子：

```javascript
// 假设我们有一个id为'myCanvas'的<canvas>元素
const canvas = document.getElementById('myCanvas');

// 将canvas转换为数据URL，'image/png'指定了我们需要PNG格式
const imageURL = canvas.toDataURL('image/png');

// 创建一个a元素用于触发下载
const downloadLink = document.createElement('a');

// 设置下载文件的名称，例如 'my-canvas-image.png'
downloadLink.download = 'my-canvas-image.png';

// 将转换得到的图片URL设为a标签的href属性
downloadLink.href = imageURL;

// 隐藏该元素
downloadLink.style.display = 'none';

// 将该链接元素添加到DOM中
document.body.appendChild(downloadLink);

// 触发a标签的点击事件
downloadLink.click();

// 完成后，从DOM中移除该元素
document.body.removeChild(downloadLink);
```

在这个例子中，一个隐藏的`<a>`元素被创建并添加到了文档中。我们设置了它的`href`属性为Canvas的数据URL，并指定了下载时的文件名。接着，通过程序触发了这个链接的`click`事件，这会导致浏览器开始下载这个PNG图像。

请注意，这种方法在一些情况下可能会受到同源策略的限制。如果Canvas画布上绘制了跨域的图像资源，那么在没有适当的CORS标头的情况下，`toDataURL`方法可能会抛出安全错误。

[FileSaver.js](https://github.com/eligrey/FileSaver.js)应该能够帮助您。

    var canvas = document.getElementById("my-canvas");
    // draw to canvas...
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });

我使用此解决方案来设置**文件名**：

HTML：

    <a href="#" id="downloader" onclick="download()" download="image.png">Download!</a>
    <canvas id="canvas"></canvas>
    

JavaScript：

    function download(){
        document.getElementById("downloader").download = "image.png";
        document.getElementById("downloader").href = document.getElementById("canvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
    }

我遇到了这个问题，这是最好的解决方案，无需任何外部或额外的脚本库：在 Javascript 标签或文件中创建此函数：我们假设画布是您的画布：

    function download(){
            var download = document.getElementById("download");
            var image = document.getElementById("canvas").toDataURL("image/png")
                        .replace("image/png", "image/octet-stream");
            download.setAttribute("href", image);
    
        }
    

在 HTML 的正文部分中指定按钮：

    <a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a>
    

这是有效的，下载链接看起来像一个按钮。在 Firefox 和 Chrome 中测试。

JS 如何将 Canvas 画布保存为 png 图像？

在JavaScript中，要实现页面截图功能，通常不会直接使用`canvas`元素来完成，因为`canvas`是HTML5的一部分，它更适合用来绘制图像、制作动画等。页面截图功能通常需要捕获当前页面的DOM并转换为图像，这可以通过HTML2Canvas等第三方库来完成。

HTML2Canvas是一个非常流行的JavaScript库，它可以将HTML元素捕获并转换为canvas图像。以下是使用HTML2Canvas实现页面截屏的基本步骤：

1. 首先，你需要在你的网页中引入HTML2Canvas库。你可以从HTML2Canvas的官网下载库文件或者通过CDN引入：

    ```html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
    ```

2. 接下来，在JavaScript中，你需要调用`html2canvas`函数并传入你想要截图的DOM元素：

    ```javascript
    html2canvas(document.body).then(canvas => {
        // 你现在可以对canvas做你想做的事情了，比如添加到页面中显示
        document.body.appendChild(canvas);
    });
    ```

在这个例子中，我使用`document.body`作为参数，意味着整个页面将被截图。你也可以指定其他的DOM元素以截取页面的一部分。

3. 一旦你获得了canvas元素，你可以使用`toDataURL`函数将canvas转换为图像数据URL，然后你可以将它作为图片的`src`属性，或者使用JavaScript下载这个图像：

    ```javascript
    html2canvas(document.body).then(canvas => {
        // 转换为数据URL
        var imgData = canvas.toDataURL('image/png');

        // 创建一个新的Image元素并设置src属性
        var img = new Image();
        img.src = imgData;
        document.body.appendChild(img);

        // 或者创建一个下载链接
        var a = document.createElement('a');
        a.href = imgData;
        a.download = 'screenshot.png';
        a.click();
    });
    ```

使用HTML2Canvas时，请注意，由于跨域限制，你可能无法截图那些非同源图片和样式。此外，对于复杂的页面布局和高级的CSS特性（比如3D变换、滤镜等），HTML2Canvas可能无法完美地捕捉。

这种方法通过JavaScript和HTML2Canvas库，使得在不同的应用场景下，可以便捷地实现页面截图功能。

之前有人问过一个和这个有点相似的问题。滚动到 Youtube 底部并单击“报告错误”链接。Google 的反馈工具（Javascript 驱动）基本上执行您所描述的操作。从我查看的代码来看，它使用画布并有一个基于 JavaScript 的 JPEG 编码器，可以构建 JPG 图像并发送给 Google。

这肯定需要大量工作，但我相信您可以完成类似的事情。

如果可以选择商业解决方案，请查看[SnapEngage](http://snapengage.com)。单击右上角的“帮助”按钮即可查看其实际情况。这是屏幕截图：-

![在此输入图像描述](https://i.stack.imgur.com/VPHuO.png)

设置非常简单，您只需复制并粘贴几行 JavaScript 代码即可。

SnapEngage 使用 Java Applet 来截取屏幕截图，[这](http://www.barklund.org/blog/2009/10/14/how-snapabug-works/)是一篇有关其工作原理的博客文章。

JS 如何使用 canvas 实现页面截屏？

`requestAnimationFrame`（简写为`rAF`）之所以在性能上优于`setInterval`或`setTimeout`，主要有以下几个原因：

### 1. 浏览器优化

`requestAnimationFrame`是专门为动画设计的API，浏览器知道您通过这个函数请求的回调是用于绘制动画的。因此，浏览器可以对动画进行优化，包括减少在不可见标签页中的动画的帧率，或者是在动画不在屏幕上时停止动画，这样可以提高性能并减少能耗。

### 2. 屏幕刷新率同步

`requestAnimationFrame`回调执行的频率通常与浏览器的屏幕刷新率同步。大多数屏幕有60Hz的刷新率，意味着屏幕每秒刷新60次。`rAF`会尽可能匹配这个频率，每次屏幕刷新时更新一次动画，从而创建平滑的视觉效果。而`setInterval`和`setTimeout`则没有这样的机制，可能会导致动画出现掉帧，或者动画更新与屏幕刷新不同步，造成不必要的计算和屏幕撕裂。

### 3. 减少页面重排和重绘

使用`requestAnimationFrame`进行动画处理，浏览器可以将动画的视觉更新和DOM更新安排在同一个浏览器的绘制周期内，这样可以减少页面重排（layout）和重绘（repaint）的次数，提高性能。

### 4. CPU节能

当使用`setInterval`或`setTimeout`时，如果设定的时间间隔很短，即使元素不可见，它们也会继续运行，这将不必要地占用CPU资源。`requestAnimationFrame`会智能调整，当用户切换到其他标签或最小化窗口时，动画会暂停，这有助于减少CPU消耗，特别是在移动设备上。

### 示例

考虑一个简单的动画例子，比如一个元素的左右滑动。使用`setInterval`可能会这样编写代码：

```javascript
let position = 0;
setInterval(function() {
  position += 5;
  element.style.transform = `translateX(${position}px)`;
}, 16); // 大约对应60Hz刷新率的间隔
```

这段代码会尝试每16毫秒移动元素，但没有机制确保它与屏幕刷新同步。

而使用`requestAnimationFrame`，代码如下：

```javascript
let position = 0;
function step() {
  position += 5;
  element.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(step);
}
requestAnimationFrame(step);
```

这里，动画逻辑与浏览器的刷新率同步，能够根据屏幕刷新情况智能调整执行频率。

综上所述，`requestAnimationFrame`提供了更高效、更平滑的动画体验，尤其是对于复杂或高性能需求的动画，这比使用`setInterval`或`setTimeout`要好得多。

高品质动画。
------

`requestAnimationFrame``setTimeout`产生更高质量的动画，完全消除使用或 时可能发生的闪烁和剪切`setInterval`，并减少或完全消除跳帧。

#### _剪切_

是在显示扫描中途将新的画布缓冲区呈现给显示缓冲区时，导致由不匹配的动画位置引起的剪切线。

#### _闪烁_

是在画布完全渲染之前将画布缓冲区呈现给显示缓冲区时引起的。

#### _跳帧_

这是由于渲染帧之间的时间与显示硬件不精确同步而引起的。每隔这么多帧就会跳过一帧，从而产生不一致的动画。（有一些方法可以减少这种情况，但我个人认为这些方法会产生更糟糕的总体结果）由于大多数设备每秒使用 60 帧（或倍数），导致每 16.666...ms 产生一个新帧，并且计时器并使用整`setTimeout`数值`setInterval`，它们永远无法完美匹配帧速率（如果有的话，四舍五入到 17ms `interval = 1000/60`）

* * *

### 一个演示抵得上一千个字。

**更新问题**[requestAnimationFrame循环不正确的fps](https://stackoverflow.com/a/43381828/3877726)的答案显示了setTimeout的帧时间如何不一致并将其与requestAnimationFrame进行比较。

该演示显示了一个简单的动画（条纹在屏幕上移动），单击鼠标按钮将在所使用的渲染更新方法之间切换。

使用了多种更新方法。动画工件的确切外观将取决于您正在运行的硬件设置。您会在条纹的运动中寻找轻微的抽搐

> 笔记。您可能关闭了显示同步或关闭了硬件加速，这将影响所有计时方法的质量。低端设备也可能在动画方面遇到问题

*   **计时器** 使用 setTimeout 来设置动画。时间为1000/60
    
*   **RAF 最佳质量**，使用 requestAnimationFrame 进行动画处理
    
*   **双定时器**，使用两个定时器，一个每 1000/60 清除调用一次，另一个用于渲染。
    
    **2019 年 10 月更新**计时器呈现内容的方式发生了一些变化。为了表明它`setInterval`无法与显示刷新正确同步，我更改了双计时器示例，以表明使用多个计时器`setInterval`仍然会导致严重闪烁。这将产生的闪烁程度取决于硬件设置。
    
*   **RAF 具有定时动画**，使用 requestAnimationFrame 但使用帧运行时间进行动画处理。这种技术在动画中很常见。我相信它有缺陷，但我把它留给观众
    
*   **带有定时动画的计时器**。作为“具有定时动画的 RAF”，在本例中用于克服“计时器”方法中出现的跳帧。我再次认为这很糟糕，但游戏社区发誓这是当您无法访问显示刷新时使用的最佳方法
    

    /** SimpleFullCanvasMouse.js begin **/
    
    var backBuff;
    var bctx;
    const STRIPE_WIDTH = 250;
    var textWidth;
    const helpText = "Click mouse to change render update method.";
    var onResize = function(){
        if(backBuff === undefined){
            backBuff = document.createElement("canvas")    ;
            bctx = backBuff.getContext("2d");
            
        }
        
        backBuff.width = canvas.width;
        backBuff.height = canvas.height;
        bctx.fillStyle = "White"
        bctx.fillRect(0,0,w,h);
        bctx.fillStyle = "Black";
        for(var i = 0;  i < w; i += STRIPE_WIDTH){
            bctx.fillRect(i,0,STRIPE_WIDTH/2,h)   ;
            
        }
        ctx.font = "20px arial";
        ctx.textAlign = "center";
        ctx.font = "20px arial";
        textWidth = ctx.measureText(helpText).width;
        
    };
    var tick = 0;
    var displayMethod = 0;
    var methods = "Timer,RAF Best Quality,Dual Timers,RAF with timed animation,Timer with timed animation".split(",");
    var dualTimersActive = false;
    var hdl1, hdl2
    
    function display(timeAdvance){  // put code in here
    
        tick += timeAdvance;
        tick %= w;
    
    
        ctx.drawImage(backBuff,tick-w,0);
        ctx.drawImage(backBuff,tick,0);
        if(textWidth !== undefined){
            ctx.fillStyle = "rgba(255,255,255,0.7)";
            ctx.fillRect(w /2 - textWidth/2, 0,textWidth,40);
            ctx.fillStyle = "black";
            ctx.fillText(helpText,w/2, 14);
            ctx.fillText("Display method : " + methods[displayMethod],w/2, 34);
        }
        if(mouse.buttonRaw&1){
            displayMethod += 1;
            displayMethod %= methods.length;
            mouse.buttonRaw = 0;
            lastTime = null;
            tick = 0;
            if(dualTimersActive) {
                 dualTimersActive = false;
                 clearInterval(hdl1);
                 clearInterval(hdl2);
                 updateMethods[displayMethod]()             
            }
        }
    }
    
    
    
    
    
    
    
    
    //==================================================================================================
    // The following code is support code that provides me with a standard interface to various forums.
    // It provides a mouse interface, a full screen canvas, and some global often used variable 
    // like canvas, ctx, mouse, w, h (width and height), globalTime
    // This code is not intended to be part of the answer unless specified and has been formated to reduce
    // display size. It should not be used as an example of how to write a canvas interface.
    // By Blindman67
    const U = undefined;const RESIZE_DEBOUNCE_TIME = 100;
    var w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0; 
    var L = typeof log === "function" ? log : function(d){ console.log(d); }
    createCanvas = function () { var c,cs; cs = (c = document.createElement("canvas")).style; cs.position = "absolute"; cs.top = cs.left = "0px"; cs.zIndex = 1000; document.body.appendChild(c); return c;}
    resizeCanvas = function () {
        if (canvas === U) { canvas = createCanvas(); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext("2d"); 
        if (typeof setGlobals === "function") { setGlobals(); } if (typeof onResize === "function"){ resizeCount += 1; setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);}
    }
    function debounceResize(){ resizeCount -= 1; if(resizeCount <= 0){ onResize();}}
    setGlobals = function(){ cw = (w = canvas.width) / 2; ch = (h = canvas.height) / 2; mouse.updateBounds(); }
    mouse = (function(){
        function preventDefault(e) { e.preventDefault(); }
        var mouse = {
            x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false, buttonRaw : 0, over : false, bm : [1, 2, 4, 6, 5, 3], 
            active : false,bounds : null, crashRecover : null, mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
        };
        var m = mouse;
        function mouseMove(e) {
            var t = e.type;
            m.x = e.clientX - m.bounds.left; m.y = e.clientY - m.bounds.top;
            m.alt = e.altKey; m.shift = e.shiftKey; m.ctrl = e.ctrlKey;
            if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1]; }  
            else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2]; }
            else if (t === "mouseout") { m.buttonRaw = 0; m.over = false; }
            else if (t === "mouseover") { m.over = true; }
            else if (t === "mousewheel") { m.w = e.wheelDelta; }
            else if (t === "DOMMouseScroll") { m.w = -e.detail; }
            if (m.callbacks) { m.callbacks.forEach(c => c(e)); }
            if((m.buttonRaw & 2) && m.crashRecover !== null){ if(typeof m.crashRecover === "function"){ setTimeout(m.crashRecover,0);}}        
            e.preventDefault();
        }
        m.updateBounds = function(){
            if(m.active){
                m.bounds = m.element.getBoundingClientRect();
            }
            
        }
        m.addCallback = function (callback) {
            if (typeof callback === "function") {
                if (m.callbacks === U) { m.callbacks = [callback]; }
                else { m.callbacks.push(callback); }
            } else { throw new TypeError("mouse.addCallback argument must be a function"); }
        }
        m.start = function (element, blockContextMenu) {
            if (m.element !== U) { m.removeMouse(); }        
            m.element = element === U ? document : element;
            m.blockContextMenu = blockContextMenu === U ? false : blockContextMenu;
            m.mouseEvents.forEach( n => { m.element.addEventListener(n, mouseMove); } );
            if (m.blockContextMenu === true) { m.element.addEventListener("contextmenu", preventDefault, false); }
            m.active = true;
            m.updateBounds();
        }
        m.remove = function () {
            if (m.element !== U) {
                m.mouseEvents.forEach(n => { m.element.removeEventListener(n, mouseMove); } );
                if (m.contextMenuBlocked === true) { m.element.removeEventListener("contextmenu", preventDefault);}
                m.element = m.callbacks = m.contextMenuBlocked = U;
                m.active = false;
            }
        }
        return mouse;
    })();
    
    
    resizeCanvas(); 
    mouse.start(canvas,true); 
    onResize()
    var lastTime = null;
    window.addEventListener("resize",resizeCanvas); 
    function clearCTX(){
        ctx.setTransform(1,0,0,1,0,0); // reset transform
        ctx.globalAlpha = 1;           // reset alpha
        ctx.clearRect(0,0,w,h); // though not needed this is here to be fair across methods and demonstrat flicker
    }
    
    
    
    function dualUpdate(){
        if(!dualTimersActive) {
            dualTimersActive = true;
            hdl1 = setInterval( clearCTX, 1000/60);
            hdl2 = setInterval(() => display(10), 1000/60);
        }
    }
    function timerUpdate(){
        timer = performance.now();
        if(!lastTime){
            lastTime = timer;
        }
        var time = (timer-lastTime) / (1000/60);
        lastTime = timer;    
        setTimeout(updateMethods[displayMethod],1000/60);
        clearCTX();
        display(10*time);
    }
    function updateRAF(){ 
        clearCTX();
        requestAnimationFrame(updateMethods[displayMethod]);
        display(10);  
    }
    function updateRAFTimer(timer){ // Main update loop
    
        clearCTX();
        requestAnimationFrame(updateMethods[displayMethod]);
        if(!timer){
            timer = 0;
        }
        if(!lastTime){
            lastTime = timer;
        }
        var time = (timer-lastTime) / (1000/60);
        display(10 * time);  
        lastTime = timer;
    }
    
    displayMethod = 1;
    var updateMethods = [timerUpdate,updateRAF,dualUpdate,updateRAFTimer,timerUpdate]
    updateMethods[displayMethod]();
    
    /** SimpleFullCanvasMouse.js end **/

运行代码片段Hide results

展开片段

为什么 requestanimationframe 比 setinterval 或 settimeout 的性能更好？

在 webpack.config.js 中使用 ES6通常涉及到以下几个步骤:

### 1. 使用 Node.js 的原生 ES6 支持

由于Webpack是在Node.js环境下运行的，而Node.js已经支持了大部分ES6的特性，因此你可以直接在`webpack.config.js`中使用ES6的大部分语法。例如，你可以使用`const`和`let`代替`var`，使用箭头函数等。

```javascript
const path = require('path');

module.exports = {
  // ES6箭头函数
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};
```

### 2. 使用 Babel 转译 ES6+

如果你想使用更高级的ES6特性，或者是ES7/ES8等更高版本的ECMAScript特性，那么你可能需要使用Babel来转译这些代码，让它们能在Node.js中运行。

为了在`webpack.config.js`中使用Babel，你可以遵循以下步骤：

**安装 Babel**

首先，你需要安装Babel相应的依赖包。

```bash
npm install --save-dev @babel/core @babel/preset-env @babel/register
```

**配置 Babel**

然后，创建一个`.babelrc`文件，来配置Babel。

```json
{
  "presets": ["@babel/preset-env"]
}
```

**使用 Babel 注册钩子**

最后，在`webpack.config.js`文件的顶部，你需要添加以下代码来注册Babel的转译过程。

```javascript
require('@babel/register');
```

这样，你就可以在`webpack.config.js`文件中使用完整的ES6+语法了。

```javascript
import path from 'path';

export default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};
```

但要注意，这种方式虽然可以让你使用ES6+的语法编写配置文件，但它可能会稍微降低构建过程的启动速度，因为需要额外的转译步骤。

### 总结

在现代Node.js版本中，许多ES6特性已经被原生支持，所以你可以在`webpack.config.js`中直接使用它们。如果你需要使用超出Node.js原生支持范围的特性，那么可以通过集成Babel来实现。上述两种方法可以帮助你在`webpack.config.js`中使用ES6+的语法，从而让你的配置文件更加现代化和易于维护。

尝试将您的配置命名为`webpack.config.babel.js`. 您应该将[babel-register](https://www.npmjs.com/package/babel-register)包含在项目中。示例见[react-router-bootstrap](https://github.com/react-bootstrap/react-router-bootstrap)。

Webpack 依靠内部[解释](https://www.npmjs.com/package/interpret)来完成这项工作。

作为 @bebraw 建议的替代方案，您可以使用 ES6+ 语法创建 JavaScript 自动化脚本：

    // tools/bundle.js
    
    import webpack from 'webpack';
    import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
    
    const bundler = webpack(webpackConfig);
    
    bundler.run(...);
    

并用 babel 执行它：

    $ babel-node tools/bundle
    

**PS**：当您需要实现更复杂的构建步骤时，通过 JavaScript API 调用 webpack 可能是更好的方法（比通过命令行调用它）。例如，在服务器端捆绑包准备就绪后，启动 Node.js 应用服务器，并在 Node.js 服务器启动后立即启动 BrowserSync 开发服务器。

### 也可以看看：

*   [React 入门套件](https://github.com/kriasoft/react-starter-kit)( `package.json/scripts`, `tools/bundle.js`, `tools/webpack.config.js`)
*   [反应静态样板](https://github.com/kriasoft/react-static-boilerplate)( `run.js`, `webpack.config.js`, `node run`)
*   [您可能不需要 Gulp.js](https://medium.com/swlh/you-might-not-need-gulp-js-89a0220487dd)

另一种方法是使用像这样的 npm 脚本：`"webpack": "babel-node ./node_modules/webpack/bin/webpack"`，然后像这样运行它：`npm run webpack`。

这就是我使用 webpack 4 的效果：

在`package.json`：

    "scripts": {
        "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
    },
    
    "devDependencies": {
        "@babel/core": "^7.0.0-rc.1",
        "@babel/register": "^7.0.0-rc.1",
        "@babel/preset-env": "^7.0.0-rc.1",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
    },
    
    "babel": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current"
          }
        }]
      ],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
    

您可以清楚地看到每个依赖项的使用方式，因此不会有任何意外。

_注意我正在使用[`webpack-serve`\--require](https://github.com/webpack-contrib/webpack-serve)，但如果您想使用该`webpack`命令，请将其替换为`webpack --config-register`. 无论哪种情况，`@babel/register`都需要使这项工作正常进行。_

就是这样！

`yarn dev`

并且可以`es6`在配置中使用！

* * *

对于`webpack-dev-server`，使用与命令`--config-register`相同的选项`webpack`

* * *

### 笔记：

**无需将配置文件重命名为`webpack.config.babel.js`（如已接受的答案所建议的那样）。`webpack.config.js`会工作得很好。**

致 2022 年的读者：

    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
    

1.  加入`"type": "module"`\_`package.json`
    
2.  将您的语法更改`webpack.config.js`为 ESM。
    
3.  享受。

如何在webpack-config-js中使用es6

Rust 需要明确的生命周期（lifetime）注解主要是因为它的内存安全保证。Rust 不使用垃圾回收机制来管理内存，而是通过编译时的所有权（ownership）和借用（borrowing）规则，因此需要精确地知道每个引用的有效范围。

下面是几个关键点解释为什么 Rust 需要明确的生命周期：

1. **避免悬垂指针**（Dangling Pointers）：
   生命周期确保引用不会比它们指向的数据活得更久。没有生命周期，Rust 编译器就无法保证引用的有效性，可能会出现悬垂指针的问题，从而导致未定义的行为。

2. **内存安全**（Memory Safety）：
   通过生命周期，Rust 可以在编译时检查引用是否在它们访问的数据被释放之后还被使用，从而防止诸如野指针（wild pointers）和数据竞争（data races）等问题。

3. **更细粒度的内存管理**：
   生命周期允许 Rust 对内存的控制达到很高的精度，它不需要垃圾回收器来周期性清理内存，而是精确地知道何时不再需要某块内存。

4. **无运行时开销**（Zero Runtime Overhead）：
   由于生命周期是编译时检查的，Rust 可以保证它的内存安全机制不会在运行时带来额外的性能开销。

5. **泛型代码的适应性**：
   在编写泛型函数或者结构体时，生命周期参数允许我们指定不同类型之间的引用关系，这可以让泛型代码处理不同上下文中的引用，保持同样的内存安全。

### 示例：

考虑下面的 Rust 函数：

```rust
fn longest<'a>(x: &'a str, y: &'a str) -> &'a str {
    if x.len() > y.len() { x } else { y }
}
```

这个函数接受两个字符串切片的引用并返回其中较长一个的引用。生命周期注解 `'a` 告诉编译器：返回的引用的生命周期将与传入的两个引用中较短的那个生命周期相同。这确保了无论函数返回 `x` 还是 `y`，返回的引用在使用时都是有效的。如果没有这些生命周期注解，编译器将无法确定返回的引用是否有效，可能会拒绝编译这段代码，或者在没有足够保证的情况下编译，从而可能导致运行时错误。

通过明确的生命周期注解，Rust 可以在没有运行时垃圾回收的情况下，提供强大的内存安全保证，同时也为开发者提供控制内存管理的精细工具。

其他答案都有要点（[fjh的具体例子，其中需要显式生命周期](https://stackoverflow.com/a/31609892/924313)），但缺少一个关键的事情：当_编译器告诉你你弄错了_时，为什么需要显式生命周期？

这实际上与“当编译器可以推断它们时为什么需要显式类型”是同一个问题。一个假设的例子：

    fn foo() -> _ {  
        ""
    }
    

当然，编译器可以看到我正在返回 a `&'static str`，那么为什么程序员必须输入它呢？

主要原因是，虽然编译器可以看到你的代码做了什么，但它不知道你的意图是什么。

函数是防火墙更改代码影响的自然边界。如果我们允许从代码中完全检查生命周期，那么看似无辜的更改可能会影响生命周期，从而可能导致远处的函数出现错误。这不是一个假设的例子。据我了解，当你依赖顶级函数的类型推断时，Haskell 会遇到这个问题。Rust 将这个特殊问题消灭在萌芽状态。

编译器还有一个效率优势——只需解析函数签名即可验证类型和生命周期。更重要的是，它为程序员带来了效率优势。如果我们没有明确的生命周期，这个函数会做什么：

    fn foo(a: &u8, b: &u8) -> &u8
    

如果不检查源代码就不可能知道，这将违背大量的编码最佳实践。

> 通过推断对更广泛范围的引用的非法分配

范围本质上_就是_生命周期。更清楚一点，生命周期`'a`是一个_通用的生命周期参数_，可以根据调用站点在编译时专门用于特定范围。

> 是否确实需要明确的生命周期来防止 \[...\] 错误？

一点也不。需要_生命周期来防止错误，但需要明确的生命周期来保护程序员所拥有的理智。_

让我们看一下下面的例子。

    fn foo<'a, 'b>(x: &'a u32, y: &'b u32) -> &'a u32 {
        x
    }
    
    fn main() {
        let x = 12;
        let z: &u32 = {
            let y = 42;
            foo(&x, &y)
        };
    }
    

在这里，明确的生命周期很重要。之所以能够编译，是因为 的结果`foo`与其第一个参数 ( ) 具有相同的生命周期`'a`，因此它的生命周期可能比第二个参数的生命周期长。这是通过 签名中的生命周期名称来表达的`foo`。如果你切换调用中的参数，`foo`编译器会抱怨它的`y`寿命不够长：

    error[E0597]: `y` does not live long enough
      --> src/main.rs:10:5
       |
    9  |         foo(&y, &x)
       |              - borrow occurs here
    10 |     };
       |     ^ `y` dropped here while still borrowed
    11 | }
       | - borrowed value needs to live until here

生命周期注释的结构如下：

    struct Foo<'a> {
        x: &'a i32,
    }
    

指定`Foo`实例的寿命不应超过其包含的引用（`x`字段）。

您在 Rust 书中遇到的示例并没有说明这一点，因为`f`和`y`变量同时超出了范围。

一个更好的例子是这样的：

    fn main() {
        let f : Foo;
        {
            let n = 5;  // variable that is invalid outside this block
            let y = &n;
            f = Foo { x: y };
        };
        println!("{}", f.x);
    }
    

现在，`f`确实比 指向的变量寿命更长`f.x`。

请注意，除了结构定义之外，该代码段中没有明确的生命周期。编译器完全能够推断`main()`.

然而，在类型定义中，显式生命周期是不可避免的。例如，这里有一个歧义：

    struct RefPair(&u32, &u32);
    

它们应该是不同的生命周期还是应该相同？从使用角度来看，它确实很重要，`struct RefPair<'a, 'b>(&'a u32, &'b u32)`与`struct RefPair<'a>(&'a u32, &'a u32)`.

现在，对于简单的情况，例如您提供的情况，理论上编译器_可以像在其他地方一样_[消除生命周期](https://doc.rust-lang.org/stable/book/second-edition/ch10-03-lifetime-syntax.html#lifetime-elision)，但这种情况非常有限，不值得编译器增加额外的复杂性，并且这种清晰度的提高将在至少值得怀疑。

如果函数接收两个引用作为参数并返回一个引用，则该函数的实现有时可能返回第一个引用，有时返回第二个引用。无法预测给定调用将返回哪个引用。在这种情况下，不可能推断返回引用的生命周期，因为每个参数引用可能引用具有不同生命周期的不同变量绑定。明确的生命周期有助于避免或澄清这种情况。

同样，如果一个结构保存两个引用（作为两个成员字段），则该结构的成员函数有时可能返回第一个引用，有时返回第二个引用。明确的生命周期再次避免了这种歧义。

在一些简单的情况下，存在[_生命周期省略_](https://doc.rust-lang.org/stable/book/second-edition/ch10-03-lifetime-syntax.html#lifetime-elision)，编译器可以推断生命周期。

Rust 为什么需要明确的生命周期？

在使用 Babel 和 Webpack 时，生成sourcemap主要是为了帮助开发者在调试过程中能够追踪到原始源代码，而不是转换后的代码。Sourcemap 是一种映射关系，它可以将压缩、合并或转换后的代码映射回原始源文件。下面是如何在 Babel 和 Webpack 中生成 sourcemap 的步骤：

1. **配置 Babel 生成 sourcemap：**
   在使用 Babel 时，可以在 `.babelrc` 配置文件中或者 Babel 的命令行参数中指定 `sourceMaps` 选项。例如，在 `.babelrc` 文件中，您可以添加：

   ```json
   {
     "presets": ["@babel/preset-env"],
     "sourceMaps": true
   }
   ```

   这会让 Babel 在转换代码时生成对应的 sourcemap 文件。

2. **配置 Webpack 生成 sourcemap：**
   在 Webpack 配置文件 `webpack.config.js` 中，您需要设置 `devtool` 选项来指定生成 sourcemap 的类型。有多种 sourcemap 类型可供选择，例如：

   - `source-map`：在一个单独的文件中生成完整的sourcemap，提供完整的源代码映射，但可能会减慢构建速度。
   - `cheap-module-source-map`：生成较快的sourcemap，但不包含列信息。
   - `eval-source-map`：生成较快的sourcemap，适合开发环境。

   根据您的需求选择合适的类型。示例配置如下：

   ```javascript
   const path = require('path');

   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     devtool: 'source-map', // 选择合适的sourcemap类型
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env'],
               sourceMaps: true, // 确保 Babel 能够生成 sourcemap
             },
           },
         },
         // 其他 loaders 配置...
       ],
     },
     // 其他 Webpack 配置...
   };
   ```

   在上述配置中，Webpack 会在构建过程中生成sourcemap文件，并在生成的 `bundle.js` 文件中添加引用注释，这样浏览器调试工具就可以链接到源代码。

通过这样的配置，当你运行 webpack 构建时，它会输出包含正确sourcemap的代码，这样开发者就能在浏览器的开发者工具中看到原始的源代码，而不是经过转换的代码，极大地方便了调试。

为了使用源映射，您应该将[`devtool`](https://webpack.js.org/configuration/devtool/)选项_值_从更改`true`为中可用的_值_[`this list`](https://webpack.js.org/configuration/devtool/)，例如`source-map`

    devtool: 'source-map'
    

> [`devtool`](https://webpack.js.org/configuration/devtool/): `'source-map'`\- 发出 SourceMap。

也许其他人曾经遇到过这个问题。如果您使用`UglifyJsPlugin`in，`webpack 2`则需要显式指定该`sourceMap`标志。例如：

    new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

带有源映射的 jsx 的最小 webpack 配置：

    var path = require('path');
    var webpack = require('webpack');
    
    module.exports = {
      entry: `./src/index.jsx` ,
      output: {
        path:  path.resolve(__dirname,"build"),
        filename: "bundle.js"
      },
      devtool: 'eval-source-map',
      module: {
        loaders: [
          {
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['es2015', 'react']
            }
          }
        ]
      },
    };
    

运行它：

    Jozsefs-MBP:react-webpack-babel joco$ webpack -d
    Hash: c75d5fb365018ed3786b
    Version: webpack 1.13.2
    Time: 3826ms
            Asset     Size  Chunks             Chunk Names
        bundle.js   1.5 MB       0  [emitted]  main
    bundle.js.map  1.72 MB       0  [emitted]  main
        + 221 hidden modules
    Jozsefs-MBP:react-webpack-babel joco$

**如果针对开发+生产进行优化**，您可以在配置中尝试以下操作：

    const dev = process.env.NODE_ENV !== 'production'
    
    // in webpack.shared.config
    
    {
      devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', 
    }
    

[来自文档：](https://webpack.js.org/configuration/devtool/#devtool)

*   devtool：**“eval-cheap-module-source-map”**提供仅映射行（无列映射）并且速度更快的 SourceMap
*   devtool：**“source-map”**无法缓存模块的 SourceMap，需要为块重新生成完整的 SourceMap。这是用于生产的东西。

另一种选择是假设您不需要用于生产构建的源映射，则为生产返回 false。

我正在使用 webpack 2.1.0-beta.19

在 Webpack 2 上，我尝试了所有 12 个开发工具选项。以下选项链接到控制台中的原始文件并保留行号。请参阅下面的注释：仅限行。

[https://webpack.js.org/configuration/devtool](https://webpack.js.org/configuration/devtool)

**devtool 最佳开发选项**

                                    build   rebuild      quality                       look
    eval-source-map                 slow    pretty fast  original source               worst
    inline-source-map               slow    slow         original source               medium
    cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
    inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best
    

**仅线路**

源映射被简化为每行一个映射。这通常意味着每个语句有一个映射（假设您是这样编写的）。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出一行。

重新审视这一点

在一个大型项目中，我发现... eval-source-map 重建时间约为 3.5 秒 ... inline-source-map 重建时间约为 7 秒

使用 babel 和 webpack 时如何生成 sourcemap 文件？

`publicPath` 是 Webpack 配置中非常重要的一项配置，它用于指定输出目录下的静态资源（如 JavaScript, CSS, 图片等）在浏览器中访问的可用路径。

具体来讲，`publicPath` 指定了打包生成的静态资源在运行时的引用路径前缀。比如说，如果我们在服务器上部署了一个应用，并且希望所有静态资源都放在 `/assets/` 路径下，我们可以将 `publicPath` 设置为 `/assets/`。这样，当Webpack打包过程中遇到代码里静态资源引用时（如图片、字体等），它会自动在资源的URL前面加上 `/assets/` 前缀。

### 示例：
假设我们的项目有一个图片文件：`image.png`，并且我们在JavaScript模块中这样引用它：

```javascript
import image from './image.png';

const imgElement = document.createElement('img');
imgElement.src = image;
document.body.appendChild(imgElement);
```

如果我们的 `webpack.config.js` 文件中 `output` 配置如下：

```javascript
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },
  // ...
};
```

那么在打包后生成的 `bundle.js` 文件中，对 `image.png` 的引用会被转换成 `/assets/image.png`，这意味着图片会从服务器的 `/assets/` 路径下加载。

### 具体作用：

1. **资源的正确加载**：有助于确保无论应用部署在哪里，资源都能正确地加载。
2. **灵活部署**：比如，可以将静态资源部署到CDN，只需要改变`publicPath`的值即可，而无需更改代码中的资源引用路径。
3. **开发与生产环境的区分**：在开发环境和生产环境中可能会使用不同的`publicPath`，比如在开发环境中使用相对路径（例如 `publicPath: '/'`），而在生产环境中使用CDN路径（例如 `publicPath: 'https://cdn.example.com/assets/'`）。

一个常见的使用场景是结合Webpack的热模块替换（Hot Module Replacement，HMR）功能，在本地开发环境中使用相对路径，以便于实时加载更新的模块。

总结来说，`publicPath` 是Webpack中配置静态资源访问路径的关键选项，它在资源部署和优化前端资源加载方面起着至关重要的作用。

`output.path`
-------------

存储所有输出文件的本地磁盘目录**（绝对路径）**。

**例子：** `path.join(__dirname, "build/")`

Webpack 将把所有内容输出到`localdisk/path-to-your-project/build/`

* * *

`output.publicPath`
-------------------

您的浏览器可以在其中访问上传的捆绑文件。**（绝对路径，或相对于主 HTML 文件）**

**例子：** `/assets/`

假设您将应用程序部署在服务器 root 处`http://server/`。

通过使用`/assets/`，应用程序将在以下位置找到 webpack 资源：`http://server/assets/`。在底层，webpack 遇到的每个 url 都将被重写为以“ `/assets/`”开头。

> `src="picture.jpg"`重写➡`src="/assets/picture.jpg"`
> 
> 访问者：( `http://server/assets/picture.jpg`)
> 
> * * *
> 
> `src="/img/picture.jpg"`重写➡`src="/assets/img/picture.jpg"`
> 
> 访问者：( `http://server/assets/img/picture.jpg`)

当在浏览器中执行时，webpack 需要知道您将在哪里托管生成的包。因此，它能够请求额外的块（当使用[代码分割](http://webpack.github.io/docs/code-splitting.html)时）或分别通过[文件加载器](https://github.com/webpack/file-loader)或[网址加载器](https://github.com/webpack/file-loader)加载的引用文件。

例如：如果您将 http 服务器配置为托管生成的包，`/assets/`则应编写：`publicPath: "/assets/"`

publicPath 仅用于开发目的，第一次看到这个配置属性时我很困惑，但现在我已经使用 webpack 一段时间了，它很有意义

假设您将所有 js 源文件放在`src`文件夹下，并配置 webpack 将源文件构建到`dist`带有`output.path`.

但是你想在一个更有意义的位置提供你的静态资源，比如`webroot/public/assets`，这次你可以使用`out.publicPath='/webroot/public/assets'`，这样在你的html中，你可以用.js引用你的js `<script src="/webroot/public/assets/bundle.js"></script>`。

当你请求时`webroot/public/assets/bundle.js`会`webpack-dev-server`在dist文件夹下找到js

**更新：**

感谢查理·马丁纠正我的答案

原文： publicPath 仅用于开发目的，_这不仅仅是用于开发目的_

> 不，此选项在开发服务器中很有用，但其目的是在生产中异步加载脚本包。假设您有一个非常大的单页应用程序（例如 Facebook）。Facebook 不希望在您每次加载主页时都提供所有 javascript，因此它只提供主页所需的内容。然后，当您转到您的个人资料时，它会使用 ajax 为该页面加载更多 javascript。此选项告诉它从服务器上的哪个位置加载该包

**filename**指定**文件名**，_所有捆绑代码在完成构建步骤后将累积到该文件中。_

**path**指定app.js （文件名）将保存在磁盘中的**输出****目录。**如果没有输出目录，webpack 将为您创建该目录。例如：

    module.exports = {
      output: {
        path: path.resolve("./examples/dist"),
        filename: "app.js"
      } 
    }
    

这将创建一个目录**myproject/examples/dist**，并在该目录下创建**app.js**、**/myproject/examples/dist/app.js**。构建后，您可以浏览到**myproject/examples/dist/app.js**查看捆绑的代码

**publicPath：“我应该在这里放什么？”**

**publicPath指定****Web 服务器**中的虚拟目录，从中提供捆绑文件 app.js。请记住，使用 publicPath 时的服务器一词可以是 webpack-dev-server 或express server 或可与 webpack 一起使用的其他服务器。

例如

    module.exports = {
      output: {
        path: path.resolve("./examples/dist"),
        filename: "app.js",
        publicPath: path.resolve("/public/assets/js")   
      } 
    }
    

此配置告诉 webpack 将所有 js 文件捆绑到**Examples/dist/app.js**中并写入该文件。

**publicPath告诉 webpack-dev-server 或 express 服务器从****服务器**（即 /public/assets/js）中的指定虚拟位置提供此捆绑文件（即**Examples/dist/app.js）**。所以在你的 html 文件中，你必须引用这个文件

    <script src="public/assets/js/app.js"></script>
    

总而言之，publicPath就像`virtual directory`服务器中的映射和`output directory`由output.path配置指定的映射，每当对文件**public/assets/js/app.js的**请求到来时，**/examples/dist/app.js**文件将被提供

您可以使用 publicPath 指向您希望 webpack-dev-server 提供其“虚拟”文件的位置。publicPath 选项将与 webpack-dev-server 的 content-build 选项位于同一位置。 [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html)创建启动时将使用的虚拟文件。这些虚拟文件类似于 webpack 创建的实际捆绑文件。基本上，您会希望 --content-base 选项指向您的 index.html 所在的目录。这是一个示例设置：

    //application directory structure
    /app/
    /build/
    /build/index.html
    /webpack.config.js
    
    
    //webpack.config.js
    var path = require("path");
    module.exports = {
    ...
      output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/assets/",
        filename: "bundle.js"
      }
    };  
    
    
    //index.html
    <!DOCTYPE>
    <html>
    ...
    <script src="assets/bundle.js"></script>
    </html>
    
    //starting a webpack-dev-server from the command line
    $ webpack-dev-server --content-base build 
    

webpack-dev-server 创建了一个虚拟资产文件夹及其引用的虚拟bundle.js 文件。您可以通过访问 localhost:8080/assets/bundle.js 来测试这一点，然后在您的应用程序中检查这些文件。它们仅在运行 webpack-dev-server 时生成。

Webpack 中 publicPath 配置项的作用是什么？

Elasticsearch 中的 `connect` 与 `createConnection` 并非是 Elasticsearch 官方提供的 API 或函数，这两个词可能是在特定的上下文或库中使用的，比如说某些客户端库可能会提供这样的方法来管理与 Elasticsearch 集群的连接。

假设您提到的是某个特定的 Elasticsearch 客户端库，那么通常：

- `connect` 方法可能用于建立与 Elasticsearch 集群的连接。它可能是一个简便方法，用于连接到集群并确认连接是活跃的。这个方法可能不需要太多参数，或者它可能会使用一些默认的配置。

- `createConnection` 方法可能更加灵活，允许开发者指定更多的配置选项，比如连接的地址、端口、使用的协议、认证信息等。`createConnection` 方法可能会返回一个连接实例，该实例可以用于后续的操作和查询。

举个例子，如果我们使用的是 Node.js 的 Elasticsearch 客户端，我们可能会这样使用这两个方法（以伪代码为例）：

```javascript
// 假设这是一个假想的Elasticsearch客户端库
const esClient = require('elasticsearch-client');

// 使用connect方法简单地连接到Elasticsearch集群
esClient.connect('http://localhost:9200');

// 使用createConnection创建一个带有详细配置的连接
const connection = esClient.createConnection({
  host: 'http://localhost:9200',
  log: 'trace',
  auth: {
    username: 'user',
    password: 'pass'
  }
});
```

在实际的 Elasticsearch 客户端中，例如官方提供的 `elasticsearch.js` 或者新的 `@elastic/elasticsearch`，您通常直接在客户端实例化时传递配置参数，而不会有单独的 `connect` 或 `createConnection` 方法。如下所示：

```javascript
const { Client } = require('@elastic/elasticsearch');

const client = new Client({
  node: 'http://localhost:9200',
  auth: {
    username: 'user',
    password: 'pass'
  }
});
```

在上面的官方客户端代码示例中，您只需创建一个 `Client` 实例，并通过构造函数传递配置参数来连接 Elasticsearch 集群。

因此，为了提供准确的答案，我需要知道具体是哪个客户端库或应用程序中的 `connect` 和 `createConnection`。如果你能提供更多的上下文或详细信息，我将能够给出更加具体的答案。

> 我对官方文档的理解是，通常当只有一个连接时使用 mongoose.connect() ，而如果有多个连接实例则使用 mongoose.createConnection() 。

是的。确切地说，`.connect()`实际上创建了一个保持打开状态的套接字/连接池（在`poolSize`连接设置中定义，默认值为 5），因此实际上有多个连接，但在单个池中。话虽如此，如果您想要多个具有不同属性的连接池，您应该使用`createConnection`

> 另外，如果我的理解是正确的，那么在单连接中使用 mongoose.createConnection() 有什么缺点？为什么不建议我们在每种情况下都使用 mongoose.createConnection() 来标准化连接？

[这是一个很好的问题，文档](https://mongoosejs.com/docs/connections.html#multiple_connections)中也已经有答案：

> > 当您调用 mongoose.connect() 时，Mongoose 会创建一个默认连接。您可以使用 mongoose.connection 访问默认连接。

基本上`.connect`是一组（大部分）最佳实践设置的简写`createConnection`

在大多数简单的项目中，您不必担心指定不同的读取或写入设置、池大小、与不同副本服务器的单独连接等，这就是`.connect`存在的原因。

但是，如果您有更苛刻的要求（例如出于法律或性能原因），您可能必须使用`createConnection`.

几周前，我遇到了一种情况，我的一个（内部）统计包需要零星但大负载的数据库访问。由于我不想将 db/mongoose 对象传递给包以使其尽可能模块化，因此我只是创建了一个新连接。这非常有效，因为我只需要访问我在包中定义的某个模型，而不是我的“父”包中定义的模型。由于新包只需要读取访问，并且可以从不同的从属/副本数据库读取以减少主数据库的负载，因此我切换到两端的 createConnection 以将连接与主数据库分开。

对我来说，在同一模块中创建多个连接的一大缺点是，如果模型是在不同的连接中定义的，则您无法通过 直接访问模型`mongoose.model`。该答案详细说明了该问题：[https://stackoverflow.com/a/22838614/2856218](https://stackoverflow.com/a/22838614/2856218)

Elasticsearch 中 connect 与 createconnection 的区别是什么？

在CSS中，`display`属性非常重要，它决定了一个元素如何在页面上显示和布局。以下是 `display`属性的一些常用值及其作用：

1. `none`:

   - 作用：完全隐藏元素，并且不为该元素保留空间。
   - 例子：当您希望在某些条件下不显示一些元素，比如用JavaScript动态隐藏或显示内容。
2. `block`:

   - 作用：使元素表现为块级元素，占据一行的全部宽度，之后的元素会在新的一行显示。
   - 例子：用于布局时，如创建一个自包含的内容区块，例如段落、标题和容器等。
3. `inline`:

   - 作用：使元素在行内显示，不会独占一行，元素的宽度仅由内容决定。
   - 例子：用于格式化文本，如 `<span>`或 `<a>`元素，让它们在段落中内联显示。
4. `inline-block`:

   - 作用：结合了 `inline`和 `block`的特点，不会独占一行，但是可以设置宽度和高度。
   - 例子：当你需要在一行中显示多个块，并且控制它们的大小时，如导航菜单的每个项。
5. `flex`:

   - 作用：使元素成为一个flex容器，其子元素可以使用flex布局的强大特性。
   - 例子：用于创建一个响应式的布局，其中子元素的大小和顺序可以灵活调整。
6. `grid`:

   - 作用：使元素成为一个grid容器，可以定义行和列，创建复杂的二维布局。
   - 例子：用于设计复杂的页面布局，如杂志或报纸式的布局。
7. `table`、`table-row`、`table-cell`等：

   - 作用：这些值模仿了HTML表格标签的行为，允许以表格格式布局页面内容。
   - 例子：当你想用CSS的方式呈现表格数据时，可以选择这些值。
8. `list-item`:

   - 作用：使元素表现为列表项，通常与列表标记一起显示。
   - 例子：用于定制列表的外观，如自定义列表项目符号或项目布局。

这些是 `display`属性中一些常用的值。此外，还有许多其他值和属性组合可以用来实现特定的布局需求。随着Web技术的发展，CSS规范也在不断增加新的显示类型以应对更复杂的设计挑战。继续解释更多的 `display` 属性的值：

9. `inline-flex`:

   - 作用：使元素成为一个行内级的flex容器，这意味着元素可以像 `inline`元素一样在文本行中布局，同时其内部的子元素可以使用flexbox模型。
   - 例子：如果你想要一个小的布局单元能够在文本行中布局，同时又想在这个小单元内部使用flexbox布局，比如在一个段落中的小卡片。
10. `inline-grid`:

    - 作用：使元素成为一个行内级的grid容器，结合了 `inline`和 `grid`的特性。
    - 例子：当你需要在文本流中嵌入一个小的网格布局时使用，例如一个复杂的数学公式或图表。
11. `contents`:

    - 作用：使元素的子元素看起来像是直接放置在其父元素所在的位置，父元素本身不会被渲染成任何盒模型，但是其子元素会正常显示。
    - 例子：当你需要一个容器仅用于语义组织，而不希望它在布局中创建一个新层级时使用。
12. `run-in`:

    - 作用：根据上下文，元素可能表现为 `block`或 `inline`元素。
    - 例子：这个值比较少见，某些情况下可以用于标题和段落之间的布局。
13. `flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`:

    - 作用：这些值多用于flex容器的 `align-items`、`align-content`、`justify-content`等属性，而不是 `display`属性，用来定义flex项目在主轴或交叉轴上的对齐方式。
    - 例子：当你需要在一个flex容器内对齐或分散排列子项时使用。
14. `grid-auto-columns`、`grid-auto-rows`:

    - 作用：这些值用于 `grid`容器上，定义网格中隐式创建的行或列的大小。
    - 例子：当你有一个动态数量的网格项，并且需要自动的行或列大小时。
15. `grid-template-columns`、`grid-template-rows`:

    - 作用：这些值用于 `grid`容器上，定义显式创建的行或列的大小和数量。
    - 例子：当你在设计一个明确的网格布局，需要指定每一列或行的大小。
16. `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end`:

    - 作用：这些值用于 `grid`项上，定义它们在网格中的位置和跨越的列或行数。
    - 例子：当你需要在网格中放置一个元素，占据多列或多行时。

CSS的 `display`属性是个非常复杂且强大的工具，能够应对各种各样的布局需求。随着CSS规范的不断发展，新的 `display`值和布局模型如Flexbox和Grid提供了前所未有的灵活性和控制力。


使用文件加载器模块请求资源是 webpack 的使用方式（[source](https://github.com/webpack/webpack/issues/395)）。但是，如果您需要更大的灵活性或想要更清晰的界面，您也可以使用我的`copy-webpack-plugin`（[npm](https://www.npmjs.com/package/copy-webpack-plugin)、[Github](https://github.com/kevlened/copy-webpack-plugin)）直接复制静态文件。以你`static`为例`build`：

    const CopyWebpackPlugin = require('copy-webpack-plugin');
     
    module.exports = {
        context: path.join(__dirname, 'your-app'),
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    { from: 'static' }
                ]
            })
        ]
    };
    

* * *

_兼容性说明：_如果您使用的是旧版本的 webpack，例如`webpack@4.x.x`，请使用`copy-webpack-plugin@6.x.x`. 否则使用最新的。

你不需要复制东西，webpack 的工作方式与 gulp 不同。Webpack 是一个模块捆绑器，您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载程序。

所以如果你写：

    var myImage = require("./static/myImage.jpg");
    

Webpack 首先尝试将引用的文件解析为 JavaScript（因为这是默认的）。当然，那会失败。这就是为什么您需要为该文件类型指定一个加载器。[例如，文件](https://github.com/webpack/file-loader)或url [\-loader](https://github.com/webpack/url-loader)获取引用的文件，将其放入 webpack 的输出文件夹（应该`build`在您的情况下）并返回该文件的哈希 url。

    var myImage = require("./static/myImage.jpg");
    console.log(myImage); // '/build/12as7f9asfasgasg.jpg'
    

通常加载器是通过 webpack 配置应用的：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            loaders: [
                { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
            ]
        }
    };
    

当然，您需要先安装文件加载器才能使其工作。

如果您想复制静态文件，可以通过以下方式使用文件加载器：

对于 html 文件：

在 webpack.config.js 中：

    module.exports = {
        ...
        module: {
            loaders: [
                { test: /\.(html)$/,
                  loader: "file?name=[path][name].[ext]&context=./app/static"
                }
            ]
        }
    };
    

在你的 js 文件中：

      require.context("./static/", true, /^\.\/.*\.html/);
    

./static/ 是相对于你的js文件所在的位置。

您可以对图像或其他内容执行相同的操作。上下文是一种强有力的探索方法！

前面提到的**copy-webpack-plugin**带来的一个之前没有解释过的优点是，这里提到的所有其他方法仍然将资源捆绑到你的捆绑文件中（并要求你在某个地方“需要”或“导入”它们）。如果我只想移动一些图像或一些模板部分，我不想用对它们的无用引用来弄乱我的 javascript 捆绑文件，我只希望在正确的位置发出文件。我还没有找到任何其他方法可以在 webpack 中执行此操作。诚然，这不是 webpack 最初设计的目的，但它绝对是当前的用例。（@BreakDS 我希望这能回答你的问题 - 如果你想要的话，这只是一个好处）

Webpack 5 添加了[资产模块](https://webpack.js.org/guides/asset-modules/)，这些模块本质上是常见文件加载器的替代品。我复制了以下文档的相关部分：

> *   `asset/resource`发出一个单独的文件并导出 URL。以前可以通过使用`file-loader`.
> *   `asset/inline`导出资产的数据 URI。以前可以通过使用`url-loader`.
> *   `asset/source`导出资产的源代码。以前可以通过使用`raw-loader`.
> *   `asset`自动选择导出数据 URI 和发出单独的文件。以前可以通过使用`url-loader`资产规模限制来实现。

要添加一个，您可以使您的配置如下所示：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                    type: "asset/resource"
                }
            ]
        }
    };
    

要控制文件的输出方式，您可以使用[模板化路径](https://webpack.js.org/configuration/output/#template-strings)。

在配置中，您可以在此处设置全局模板：

    // webpack.config.js
    module.exports = {
        ...
        output: {
            ...
            assetModuleFilename: '[path][name].[hash][ext][query]'
        }
    }
    

要覆盖一组特定的资产，您可以执行以下操作：

    // webpack.config.js
    
    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                    type: "asset/resource"
                    generator: {
                        filename: '[path][name].[hash][ext][query]'
                    }
                }
            ]
        }
    };
    

提供的模板将生成类似于`build/images/img.151cfcfa1bd74779aadb.png`. 哈希对于缓存清除等很有用。您应该根据您的需要进行修改。

Webpack 如何将静态文件复制到构建产物目录？

在Mongoose中，验证电子邮件格式通常是通过在Schema定义中使用正则表达式来完成的。Mongoose提供了一个名为`validate`的功能，它可以接受一个验证函数或者正则表达式以及一个错误消息。

以下是一个如何在Mongoose中定义一个简单的用户模型，并对电子邮件字段进行格式验证的例子：

```js
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// 定义正则表达式来验证电子邮件格式
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

// 创建一个新的用户模式
const userSchema = new Schema({
  email: {
    type: String,
    required: true,
    unique: true,
    // 使用正则表达式进行验证
    validate: {
      validator: function(email) {
        return emailRegex.test(email);
      },
      // 如果验证失败，Mongoose将使用此消息
      message: props => `${props.value} is not a valid email address!`
    }
  },
  // 其他字段定义...
});

// 创建模型
const User = mongoose.model('User', userSchema);

// 使用模型创建一个新用户实例
const user = new User({
  email: 'example@domain.com',
  // 其他字段值...
});

// 保存用户并处理可能出现的验证错误
user.save(function(err) {
  if (err) {
    // 如果电子邮件格式不正确，将会有一个验证错误
    console.error('Error occurred:', err.message);
  } else {
    console.log('User saved successfully!');
  }
});
```

在这个例子中，`emailRegex` 定义了电子邮件的验证规则，通过 `userSchema` 中的 `validate` 选项应用。如果提供的电子邮件不符合正则表达式的规则，Mongoose 会在尝试保存用户时抛出一个错误，并附带我们定义的错误消息。

需要注意的是，这个正则表达式只是一个基本的电子邮件验证规则，电子邮件地址的实际规则更为复杂，这个正则表达式不能覆盖所有有效的电子邮件地址格式。在实际应用中，可能需要使用更复杂的正则表达式或第三方库来更准确地验证电子邮件地址。

您还可以使用**match**或**validate**属性在模式中进行验证

例子

    var validateEmail = function(email) {
        var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return re.test(email)
    };
    
    var EmailSchema = new Schema({
        email: {
            type: String,
            trim: true,
            lowercase: true,
            unique: true,
            required: 'Email address is required',
            validate: [validateEmail, 'Please fill a valid email address'],
            match: [/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, 'Please fill a valid email address']
        }
    });

我使用[验证器](https://github.com/chriso/validator.js)来进行输入清理，它的使用方式非常酷。

安装它，然后像这样使用它：

    import { isEmail } from 'validator';
    // ... 
    
    const EmailSchema = new Schema({
        email: { 
            //... other setup
            validate: [ isEmail, 'invalid email' ]
        }
    });
    

工作起来很享受，而且读起来也很好。

您可以使用正则表达式。看看这个问题：[Validate email address in JavaScript?](https://stackoverflow.com/questions/46155/validate-email-address-in-javascript)

我过去用过这个。

    UserSchema.path('email').validate(function (email) {
       var emailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
       return emailRegex.test(email.text); // Assuming email has a text attribute
    }, 'The e-mail field cannot be empty.')

验证[器](https://www.npmjs.com/package/validator) 不能很好地与猫鼬一起摆脱警告设置 isAsync 为 false

    const validator = require('validator');
    
    email:{
    type:String,
    validate:{
          validator: validator.isEmail,
          message: '{VALUE} is not a valid email',
          isAsync: false
        }
    }

我知道这已经很旧了，但我没有看到这个解决方案，所以我想分享一下：

    const schema = new mongoose.Schema({
        email: {
            type: String,
            trim: true,
            lowercase: true,
            unique: true,
            validate: {
                validator: function(v) {
                    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v);
                },
                message: "Please enter a valid email"
            },
            required: [true, "Email required"]
        }
    });
    

您可以对要验证的任何类型执行此操作，只需传递适当的正则表达式即可。如果您搜索要验证的类型及其相关的正则表达式，则很容易找到解决方案。这将使您的验证保持一致，并将所有代码放入架构中，而不是挂起函数。

Mongoose 如何验证电子邮件格式？

在Mongoose中，实现一对多关系通常涉及两个模型：父模型（例如“用户”）和子模型（例如“评论”），其中父模型会引用多个子模型的实例。以下是如何在Mongoose中实现这样的一对多关系：

首先，定义子模型的schema，例如评论模型：

```javascript
const mongoose = require('mongoose');
const { Schema } = mongoose;

const commentSchema = new Schema({
  text: String,
  createdAt: {
    type: Date,
    default: Date.now
  },
  // 其他字段...
});

const Comment = mongoose.model('Comment', commentSchema);
```

接着，定义父模型的schema，并使用数组字段来引用子模型的ObjectId。Mongoose中的`ref`关键字用来指定引用的模型名称：

```javascript
const userSchema = new Schema({
  username: String,
  email: String,
  comments: [
    {
      type: Schema.Types.ObjectId,
      ref: 'Comment'
    }
  ]
  // 其他字段...
});

const User = mongoose.model('User', userSchema);
```

在这个例子中，每个用户可以有多个评论，用户模型中的`comments`字段是一个数组，存储了指向`Comment`模型document的ObjectId。

当需要查询用户及其相关的评论时，可以使用`populate()`函数来自动替换这些ObjectId为对应的评论文档：

```javascript
User.findById(userId)
  .populate('comments')
  .exec((err, user) => {
    if (err) {
      // 处理错误...
    }
    console.log(user.comments); // 这里的comments将会是Comment的文档数组
  });
```

在实际应用中，还可以进一步为`populate()`函数指定需要的字段，或者对结果进行排序、过滤等操作。

这样的引用关系是灵活的，因为可以独立地添加或删除评论，而不需要修改用户文档。同时，也能够轻松地查询到与特定用户相关的所有评论。不过，需要注意的是，如果一对多的关系中“多”的一方数量非常大，那么可能需要考虑分页或限制引用的数量，以避免性能问题。

参考[population](http://mongoosejs.com/docs/populate.html)，这里摘取Mongoose的一个例子。

    var mongoose = require('mongoose')
    , Schema = mongoose.Schema
    
    var personSchema = Schema({
      _id     : Schema.Types.ObjectId,
      name    : String,
      age     : Number,
      stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
    });
    
    var storySchema = Schema({
      _creator : { type: Schema.Types.ObjectId, ref: 'Person' },
      title    : String,
      fans     : [{ type: Schema.Types.ObjectId, ref: 'Person' }]
    });
    
    var Story  = mongoose.model('Story', storySchema);
    var Person = mongoose.model('Person', personSchema);
    

`Story`因此，有关模型商店的示例`Person._id`与`Story._creator`. 当找到 的文档时`Story`，可以使用`populate()`方法来定义要`Person`同时检索模型中的哪个属性，例如：

    Story.findOne({_id: 'xxxxxxx'}).populate('person', 'name age').exec(function(err, story) {
      console.log('Story title: ', story.title);
      console.log('Story creator', story.person.name);
    });
    

我相信这就是您所寻找的。或者，您可以改用[嵌套集合](https://docs.mongodb.org/manual/tutorial/model-tree-structures-with-nested-sets/)。

这个问题的先前答案很有帮助，但查看更详细的代码可能会很有用。以下代码来自我的应用程序的 Express.js 后端。我的应用程序允许用户撰写评论。当查询用户时，我返回用户所做的所有评论。

用户模型.js

    import mongoose, { Schema } from 'mongoose';
    
    
    const UserSchema = new Schema({
      firstname: String,
      lastname: String,
      username: { type: String, unique: true },
      reviews: [{ type: Schema.Types.ObjectId, ref: 'Review' }],
    }, {
      toJSON: {
        virtuals: true,
      },
    });
    
    const UserModel = mongoose.model('User', UserSchema);
    export default UserModel;
    

review\_model.js

    import mongoose, { Schema } from 'mongoose';
    
    const ReviewSchema = new Schema({
      body: String,
      username: String,
      rating: Number,
    }, {
      toJSON: {
        virtuals: true,
      },
    });
    
    const ReviewModel = mongoose.model('Review', ReviewSchema);
    export default ReviewModel;
    

review\_controller.js

    // . . .
    export const createReview = (req, res) => {
        const review = new Review();
        review.username = req.body.username;
        review.rating = req.body.rating;
        review.body = req.body.body;
        review.save()
          .then((result) => {
            User.findOne({ username: review.username }, (err, user) => {
                if (user) {
                    // The below two lines will add the newly saved review's 
                    // ObjectID to the the User's reviews array field
                    user.reviews.push(review);
                    user.save();
                    res.json({ message: 'Review created!' });
                }
            });
          })
          .catch((error) => {
            res.status(500).json({ error });
          });
    };
    

用户控制器.js

     export const createUser = (req, res) => {
       const user = new User();
       user.username = req.body.username;
       user.email = req.body.email;
       user.save()
           .then((result) => {
                res.json({ message: 'User created!', result });
            })
            .catch((error) => {
              res.status(500).json({ error });
            });
        };
    
    // . . .
    // returns the user object associated with the username if any
    // with the reviews field containing an array of review objects 
    // consisting of the reviews created by the user
    export const getUser = (req, res) => {
        User.findOne({ username: req.params.username })
          .populate('reviews')
          .then((result) => {
            res.json(result);
          })
          .catch((error) => {
            res.status(500).json({ error });
          });
      };

正如[人口文档](http://mongoosejs.com/docs/populate.html)中所说

    var aaron = new Person({ _id: 0, name: 'Aaron', age: 100 });
    
    aaron.save(function (err) {
      if (err) return handleError(err);
    
      var story1 = new Story({
        title: "Once upon a timex.",
        _creator: aaron._id    // assign the _id from the person
      });
    
      story1.save(function (err) {
        if (err) return handleError(err);
        // thats it!
      });
      //then add story to person
      aaron.stories.push(story1);
      aaron.save(callback);
    });

这是创建一对多关系的好方法。

1.  首先，我们在Comment.js中定义Comment模型。

    const mongoose = require("mongoose");
    
    const Comment = mongoose.model(
      "Comment",
      new mongoose.Schema({
        username: String,
        text: String,
        createdAt: Date
      })
    );
    
    module.exports = Comment;
    

2.  在Tutorial.js中，添加注释数组，如下所示：

    
    
    const mongoose = require("mongoose");
    
    const Tutorial = mongoose.model(
      "Tutorial",
      new mongoose.Schema({
        title: String,
        author: String,
        images: [],
        comments: [
          {
            type: mongoose.Schema.Types.ObjectId,
            ref: "Comment"
          }
        ]
      })
    );
    
    module.exports = Tutorial;
    

3.  在server.js中，添加createComment函数。

    
    const createComment = function(tutorialId, comment) {
      return db.Comment.create(comment).then(docComment => {
        console.log("\n>> Created Comment:\n", docComment);
    
        return db.Tutorial.findByIdAndUpdate(
          tutorialId,
          { $push: { comments: docComment._id } },
          { new: true, useFindAndModify: false }
        );
      });
    };

**单向或双向关系**

您可能会考虑另一种可能性：您_真的_需要双向关联吗？`_creator`或者只将其存储在每个中就足够了`Story`。并且不要_存储_for `list of stories`every `Person`。故事列表仍然可以在搜索中查询：

    let allStoriesOfOneCreator = Stories.find({_creator: person._id});
    

[https://docs.mongodb.com/manual/tutorial/model-referenced-one-to-many-relationships- Between-documents/](https://docs.mongodb.com/manual/tutorial/model-referenced-one-to-many-relationships-between-documents/)

最终这取决于您的应用程序的要求。您多久需要一次创作者的故事？

如何在猫鼬中引用一对多关系

在使用Mongoose操作MongoDB时，有时候需要执行一系列的数据库操作，比如检索一个文档然后更新它。在Mongoose中，可以使用多种方式来“合并”两次请求操作，使得它们能够顺利协作完成一项任务。

以下是一些常见的方式来合并两次请求操作：

### 1. Callbacks
最基础的方式是使用嵌套的回调函数。首先执行第一个操作，在其回调函数中执行第二个操作。

```javascript
Model.findOne({ name: 'John Doe' }, (err, user) => {
  if (err) throw err;
  if (user) {
    user.age = 30;
    user.save((err) => {
      if (err) throw err;
      // 这里处理额外的逻辑，因为两个操作已经合并完成
    });
  }
});
```

### 2. Promises
Promises 提供了一个更加优雅的方式来处理异步操作。你可以连续使用 `.then()` 来处理多个步骤。

```javascript
Model.findOne({ name: 'John Doe' })
  .then(user => {
    if (!user) throw new Error('User not found');
    user.age = 30;
    return user.save();
  })
  .then(() => {
    // 这里处理额外的逻辑
  })
  .catch(err => {
    // 处理出错的情况
  });
```

### 3. Async/Await
使用 ES7 的 async/await 可以写出更加直观和同步的风格代码，同时保持异步操作的优势。

```javascript
async function updateUserAge() {
  try {
    const user = await Model.findOne({ name: 'John Doe' });
    if (!user) throw new Error('User not found');

    user.age = 30;
    await user.save();

    // 这里处理额外的逻辑
  } catch (err) {
    // 处理出错的情况
  }
}

updateUserAge();
```

### 4. Mongoose Middleware (Pre/Post Hooks)
Mongoose 允许你定义 pre 和 post 钩子（hooks），它们可以在某些操作执行前后自动运行。这可以用于合并像验证或者自动填充等操作。

```javascript
schema.pre('save', function(next) {
  // 在文档保存之前执行一些操作
  next();
});

schema.post('save', function(doc) {
  // 在文档保存之后执行一些操作
});
```

### 5. 事务（Transactions）
MongoDB 4.0 以上版本支持多文档事务。如果需要合并的操作涉及到多个文档或集合的变更，可以使用事务来保证数据的一致性。

```javascript
const session = await mongoose.startSession();
session.startTransaction();

try {
  const opts = { session };
  const user = await Model.findOne({ name: 'John Doe' }, null, opts);
  user.age = 30;
  await user.save(opts);

  // 可以在此添加更多操作，它们都将成为这个事务的一部分

  await session.commitTransaction();
  session.endSession();
} catch (err) {
  await session.abortTransaction();
  session.endSession();
  throw err;
}
```

在实际的应用中，这些方法可以根据具体的业务逻辑和操作的复杂度来选择。代码的可维护性、错误处理方式、以及对并发操作的处理都是选择合适方法时需要考虑的因素。

It's probably easiest to create your query object directly as:

      Test.find({
          $and: [
              { $or: [{a: 1}, {b: 1}] },
              { $or: [{c: 1}, {d: 1}] }
          ]
      }, function (err, results) {
          ...
      }
    

But you can also use the [`Query#and`](http://mongoosejs.com/docs/api.html#query_Query-and) helper that's available in recent 3.x Mongoose releases:

      Test.find()
          .and([
              { $or: [{a: 1}, {b: 1}] },
              { $or: [{c: 1}, {d: 1}] }
          ])
          .exec(function (err, results) {
              ...
          });

在 Mongoose 中，要使用 AND 组合两个 OR 查询，可以使用查询构造器来添加复杂的查询条件。Mongoose 提供了 `.and()` 方法来指定 AND 条件，同时 `.or()` 方法用于指定 OR 条件。每个 `.or()` 方法调用可以包含一个条件数组，表示所有数组内的条件中至少有一个要为真。

下面我将通过一个例子来说明如何在 Mongoose 中组合两个 OR 查询。

设想我们有一个用户模型，包含字段 `name` 和 `status`，我们想找到以下两组用户的并集：

1. 名字是 "Alice" 或 "Bob" 的用户。
2. 状态为 "active" 或 "pending" 的用户。

此时我们需要组合两个 OR 查询，可以这么做：

```javascript
const mongoose = require('mongoose');
const { Schema } = mongoose;

// 假设有如下用户模型
const UserSchema = new Schema({
  name: String,
  status: String
});

const User = mongoose.model('User', UserSchema);

User.find()
  .and([
    { $or: [{ name: 'Alice' }, { name: 'Bob' }] },
    { $or: [{ status: 'active' }, { status: 'pending' }] }
  ])
  .exec((err, users) => {
    if (err) throw err;
    // 处理查询到的用户
    console.log(users);
  });
```

在这个例子中，`.find()` 方法首先被调用，然后是 `.and()` 方法，它接受一个数组作为参数。这个数组包含了两个对象，每个对象都是一个 OR 查询。第一个 OR 查询 `{ $or: [{ name: 'Alice' }, { name: 'Bob' }] }` 表示查找名字为 "Alice" 或者 "Bob" 的用户，第二个 OR 查询 `{ $or: [{ status: 'active' }, { status: 'pending' }] }` 表示查找状态为 "active" 或者 "pending" 的用户。这两个 OR 查询通过 AND 条件组合，最终结果是同时满足这两个条件的用户集合。

请注意，每个 `.or()` 查询实际上是通过 `$or` 操作符实现的，这是 MongoDB 的查询语法。Mongoose 使得构建这种查询变得更为直观。

还有其他方式来实现相同的查询，例如直接在 `.find()` 方法中构造查询对象：

```javascript
User.find({
  $and: [
    { $or: [{ name: 'Alice' }, { name: 'Bob' }] },
    { $or: [{ status: 'active' }, { status: 'pending' }] }
  ]
})
.exec((err, users) => {
  if (err) throw err;
  // 处理查询到的用户
  console.log(users);
});
```

这种方法直接将 AND 和 OR 查询组合为一个查询对象，然后将其作为 `.find()` 方法的参数传递。两种方法在功能上是等价的，你可以根据自己的喜好和具体需求选择使用。

Mongoose 如何合并两次请求操作？

Mongoose 是一个 MongoDB 对象模型库，用于在 Node.js 环境中以对象映射文档（Object-Document Mapping，ODM）的方式操作 MongoDB 数据库。`.save()` 方法和 `update()` 方法都用于在数据库中持久化文档数据，但它们之间存在一些关键区别：

### `.save()` 方法

1. **创建或更新：** `.save()` 通常用于保存一个新的文档实例或更新现有的文档。如果保存的文档实例具有 `_id` 字段并且在数据库中能找到对应的记录，那么它会执行更新操作。如果没有 `_id` 字段或者 `_id` 在数据库中找不到匹配的记录，则会创建一个新记录。

2. **全文档操作：** 当你使用 `.save()` 时，你通常是在操作整个文档。无论是创建新文档还是更新现有文档，你都会发送整个文档的数据到数据库。

3. **中间件触发：** `.save()` 方法会触发 Mongoose 的中间件（如 `pre` 和 `post` 钩子）。这意味着在保存过程中，可以执行自定义逻辑（如密码加密、数据验证等）。

4. **返回值：** `.save()` 方法执行后，会返回被保存的文档对象。

5. **示例：**
    ```javascript
    const user = new UserModel({
      name: 'Alice',
      email: 'alice@example.com'
    });
    user.save(function(err, savedUser) {
      if (err) throw err;
      // savedUser 是保存后的文档对象
    });
    ```

### `update()` 方法

1. **只用于更新：** `.update()` 方法仅用于更新已存在的文档。它不能用于创建新文档。

2. **部分文档操作：** 当你使用 `.update()` 方法时，你可以只更新文档的某些部分，而不是发送整个文档。这通常用于性能优化，因为只传输需要更新的字段。

3. **没有中间件触发：** 使用 `.update()` 方法时，通常不会触发 Mongoose 中间件。如果需要在更新操作前后执行特定逻辑，可能需要手动处理。

4. **返回值：** `.update()` 方法执行后，返回的是一个包含操作结果的对象，如更新的文档数量，而不是更新后的文档对象。

5. **示例：**
    ```javascript
    UserModel.update({ _id: userId }, { $set: { name: 'Bob' } }, function(err, result) {
      if (err) throw err;
      // result 是操作结果对象，可以通过 result.nModified 获取被更新的文档数量
    });
    ```

总结一下，`.save()` 用于创建新文档或替换整个文档，而 `.update()` 用于修改现有文档的部分字段。`.save()` 方法会触发中间件，返回保存的文档；`.update()` 方法不触发中间件，返回操作的结果。根据具体的应用场景和性能考虑，开发者可以选择最合适的方法进行数据库操作。### 应用场景比较

#### `.save()` 方法的应用场景：

- **新建文档场景**：当你有一个全新的文档并打算将其添加到数据库中时，可以使用 `.save()` 来实现。例如，当一个新用户注册到你的应用时，你需要创建一个新的用户文档。

- **完整文档更新场景**：如果你需要更新文档，并且更新涉及许多字段，或者你已经在应用层加载并可能修改了整个文档，那么使用 `.save()` 方法更新整个文档可能更为方便。

- **需要中间件处理的场景**：当你的保存逻辑需要触发 Mongoose 中间件，比如数据验证、自动设置时间戳、散列密码等操作时，`.save()` 方法是更好的选择。

#### `.update()` 方法的应用场景：

- **部分更新场景**：当你需要更新文档中的一个或几个字段，并且不需要加载整个文档时，`.update()` 是一个更高效的选择。这常见于需要快速响应的Web应用中。

- **批量更新场景**：当你需要更新多个文档且每个文档的更新都是相同的操作时，`.update()` 方法可以通过一次操作来更新所有匹配的文档，这通常比逐一加载文档并调用 `.save()` 更有效率。

- **无需中间件场景**：如果你不需要触发保存过程中的中间件，比如在执行一些批量操作或后台任务时，`.update()` 可以避免中间件的性能开销。

### 直接修改和替换文档

- **`.save()` 替换文档**：当你使用 `.save()` 方法时，如果文档存在 `_id` 字段且该 `_id` 在数据库中找到了对应的记录，Mongoose 会替换掉原来的文档。这意味着，如果有些字段在新文档中没有指定，它们将从数据库中的文档里被移除。

- **`.update()` 修改字段**：与 `.save()` 不同，`.update()` 方法默认仅修改指定的字段，而不会影响未指定的字段。对于需要保留其他字段内容的场合，这通常是更加安全和预期的行为。

### 性能考量

- **性能优化**：在大型应用中，`.update()` 方法对性能的影响通常小于 `.save()` 方法。特别是在进行部分字段更新时，`.update()` 方法不需要发送整个文档数据，也不需要加载文档到应用层，从而减少了网络传输和内存使用。

- **原子操作**：`.update()` 方法允许使用 MongoDB 的原子更新操作符，如 `$set`, `$inc`, `$push` 等，这样可以确保更新操作的原子性，防止在并发场景下出现数据不一致的问题。

### 总结

根据你的需要，你可能会选择使用 `.save()` 或 `.update()`——或者是 Mongoose 提供的其他相关方法，如 `.updateOne()`, `.updateMany()`, `.findOneAndUpdate()` 等，这些方法提供了不同的功能和性能取舍。选择哪一种方法取决于你的具体需求，比如是否需要处理整个文档，是否需要触发中间件，是否关注性能优化，以及操作的原子性等因素。

先说两个概念。您的应用程序是**客户端**，Mongodb 是**服务器**。

主要区别在于，`.save()`您的客户端代码中已经有一个对象，或者在写回数据之前必须从服务器检索数据，并且您正在写回整个内容。

另一方面`.update()`不需要**将**数据从服务器加载到客户端。所有交互都发生在服务器端，而不检索到客户端。因此，`.update()`当您向现有文档添加内容时，这种方式可以非常有效。

此外，还有一个`multi`参数`.update()`允许对多个符合查询条件的文档执行操作。

当用作调用时，便利方法中的一些东西你会失去`.update()`，但某些操作的好处是你必须承担的“权衡”。有关此内容以及可用选项的更多信息，请参阅[文档](http://mongoosejs.com/docs/api.html#model_Model.update)。

简而言之`.save()`是客户端接口，`.update()`是服务器端。

一些差异：

*   正如其他地方所指出的，它比其次`update`更有效，因为它避免了加载整个文档。`find``save`
*   Mongoose`update`会转换为 MongoDB `update`，但 Mongoose`save`会转换为 MongoDB `insert`（用于新文档）或`update`.
*   需要注意的是`save`，[Mongoose 在内部比较文档](https://github.com/Automattic/mongoose/blob/168f516902bf142006581479d58d19867fb844e8/lib/model.js#L146)并仅发送实际更改的字段。这有利于原子性。
*   默认情况下，[验证不会运行](https://www.mongodb.com/blog/post/introducing-version-40-mongoose-nodejs-odm)，`update`但可以启用。
*   中间件 API（`pre`和`post`钩子）是不同的。

Mongoose 有一个有用的功能，称为中间件。有“前”和“后”中间件。中间件会在您执行“保存”时执行，但不会在“更新”期间执行。例如，如果您想在每次修改密码时对 User schema 中的密码进行哈希处理，则可以使用 pre 来执行此操作，如下所示。另一个有用的示例是为每个文档设置lastModified。[该文档可以在http://mongoosejs.com/docs/middleware.html](http://mongoosejs.com/docs/middleware.html)找到[](http://mongoosejs.com/docs/middleware.html)

    UserSchema.pre('save', function(next) {
    var user = this;
    // only hash the password if it has been modified (or is new)
    if (!user.isModified('password')) {
        console.log('password not modified');
        return next();
    }
    console.log('password modified');
    // generate a salt
    bcrypt.genSalt(10, function(err, salt) {
        if (err) {
            return next(err);
        }
    
        // hash the password along with our new salt
        bcrypt.hash(user.password, salt, function(err, hash) {
            if (err) {
                return next(err);
            }
            // override the cleartext password with the hashed one
            user.password = hash;
            next();
        });
    });
    });

一个不容忽视的细节：**并发性**

正如前面提到的，在执行操作时`doc.save()`，您必须先将文档加载到内存中，然后对其进行修改，最后将`doc.save()`更改发送到 MongoDB 服务器。

**当同时以**这种方式编辑文档时就会出现问题：

*   A 加载文档 (v1)
*   B 加载文档 (v1)
*   B 保存对文档的更改（现在是 v2）
*   A 保存对过时 (v1) 文档的更改
*   A 会看到 Mongoose 抛出 VersionError，因为文档自上次从集合加载以来已发生更改

在执行像这样的原子操作时，并发不是问题`Model.updateOne()`，因为操作完全在 MongoDB 服务器中完成，MongoDB 服务器执行一定程度的**[并发控制](https://docs.mongodb.com/manual/faq/concurrency/)**。

因此，要小心！

Mongoose 是一个 MongoDB 对象模型库，用于在 Node.js 环境中以对象映射文档（Object-Document Mapping，ODM）的方式操作 MongoDB 数据库。`.save()` 方法和 `update()` 方法都用于在数据库中持久化文档数据，但它们之间存在一些关键区别：

### `.save()` 方法

1. **创建或更新：** `.save()` 通常用于保存一个新的文档实例或更新现有的文档。如果保存的文档实例具有 `_id` 字段并且在数据库中能找到对应的记录，那么它会执行更新操作。如果没有 `_id` 字段或者 `_id` 在数据库中找不到匹配的记录，则会创建一个新记录。

2. **全文档操作：** 当你使用 `.save()` 时，你通常是在操作整个文档。无论是创建新文档还是更新现有文档，你都会发送整个文档的数据到数据库。

3. **中间件触发：** `.save()` 方法会触发 Mongoose 的中间件（如 `pre` 和 `post` 钩子）。这意味着在保存过程中，可以执行自定义逻辑（如密码加密、数据验证等）。

4. **返回值：** `.save()` 方法执行后，会返回被保存的文档对象。

5. **示例：**
    ```javascript
    const user = new UserModel({
      name: 'Alice',
      email: 'alice@example.com'
    });
    user.save(function(err, savedUser) {
      if (err) throw err;
      // savedUser 是保存后的文档对象
    });
    ```

### `update()` 方法

1. **只用于更新：** `.update()` 方法仅用于更新已存在的文档。它不能用于创建新文档。

2. **部分文档操作：** 当你使用 `.update()` 方法时，你可以只更新文档的某些部分，而不是发送整个文档。这通常用于性能优化，因为只传输需要更新的字段。

3. **没有中间件触发：** 使用 `.update()` 方法时，通常不会触发 Mongoose 中间件。如果需要在更新操作前后执行特定逻辑，可能需要手动处理。

4. **返回值：** `.update()` 方法执行后，返回的是一个包含操作结果的对象，如更新的文档数量，而不是更新后的文档对象。

5. **示例：**
    ```javascript
    UserModel.update({ _id: userId }, { $set: { name: 'Bob' } }, function(err, result) {
      if (err) throw err;
      // result 是操作结果对象，可以通过 result.nModified 获取被更新的文档数量
    });
    ```

总结一下，`.save()` 用于创建新文档或替换整个文档，而 `.update()` 用于修改现有文档的部分字段。`.save()` 方法会触发中间件，返回保存的文档；`.update()` 方法不触发中间件，返回操作的结果。根据具体的应用场景和性能考虑，开发者可以选择最合适的方法进行数据库操作。

Mongoose 是一个 MongoDB 对象模型库，用于在 Node.js 环境中以对象映射文档（Object-Document Mapping，ODM）的方式操作 MongoDB 数据库。`.save()` 方法和 `update()` 方法都用于在数据库中持久化文档数据，但它们之间存在一些关键区别：

### `.save()` 方法

1. **创建或更新：** `.save()` 通常用于保存一个新的文档实例或更新现有的文档。如果保存的文档实例具有 `_id` 字段并且在数据库中能找到对应的记录，那么它会执行更新操作。如果没有 `_id` 字段或者 `_id` 在数据库中找不到匹配的记录，则会创建一个新记录。

2. **全文档操作：** 当你使用 `.save()` 时，你通常是在操作整个文档。无论是创建新文档还是更新现有文档，你都会发送整个文档的数据到数据库。

3. **中间件触发：** `.save()` 方法会触发 Mongoose 的中间件（如 `pre` 和 `post` 钩子）。这意味着在保存过程中，可以执行自定义逻辑（如密码加密、数据验证等）。

4. **返回值：** `.save()` 方法执行后，会返回被保存的文档对象。

5. **示例：**
    ```javascript
    const user = new UserModel({
      name: 'Alice',
      email: 'alice@example.com'
    });
    user.save(function(err, savedUser) {
      if (err) throw err;
      // savedUser 是保存后的文档对象
    });
    ```

### `update()` 方法

1. **只用于更新：** `.update()` 方法仅用于更新已存在的文档。它不能用于创建新文档。

2. **部分文档操作：** 当你使用 `.update()` 方法时，你可以只更新文档的某些部分，而不是发送整个文档。这通常用于性能优化，因为只传输需要更新的字段。

3. **没有中间件触发：** 使用 `.update()` 方法时，通常不会触发 Mongoose 中间件。如果需要在更新操作前后执行特定逻辑，可能需要手动处理。

4. **返回值：** `.update()` 方法执行后，返回的是一个包含操作结果的对象，如更新的文档数量，而不是更新后的文档对象。

5. **示例：**
    ```javascript
    UserModel.update({ _id: userId }, { $set: { name: 'Bob' } }, function(err, result) {
      if (err) throw err;
      // result 是操作结果对象，可以通过 result.nModified 获取被更新的文档数量
    });
    ```

总结一下，`.save()` 用于创建新文档或替换整个文档，而 `.update()` 用于修改现有文档的部分字段。`.save()` 方法会触发中间件，返回保存的文档；`.update()` 方法不触发中间件，返回操作的结果。根据具体的应用场景和性能考虑，开发者可以选择最合适的方法进行数据库操作。
### 应用场景比较

#### `.save()` 方法的应用场景：

- **新建文档场景**：当你有一个全新的文档并打算将其添加到数据库中时，可以使用 `.save()` 来实现。例如，当一个新用户注册到你的应用时，你需要创建一个新的用户文档。

- **完整文档更新场景**：如果你需要更新文档，并且更新涉及许多字段，或者你已经在应用层加载并可能修改了整个文档，那么使用 `.save()` 方法更新整个文档可能更为方便。

- **需要中间件处理的场景**：当你的保存逻辑需要触发 Mongoose 中间件，比如数据验证、自动设置时间戳、散列密码等操作时，`.save()` 方法是更好的选择。

#### `.update()` 方法的应用场景：

- **部分更新场景**：当你需要更新文档中的一个或几个字段，并且不需要加载整个文档时，`.update()` 是一个更高效的选择。这常见于需要快速响应的Web应用中。

- **批量更新场景**：当你需要更新多个文档且每个文档的更新都是相同的操作时，`.update()` 方法可以通过一次操作来更新所有匹配的文档，这通常比逐一加载文档并调用 `.save()` 更有效率。

- **无需中间件场景**：如果你不需要触发保存过程中的中间件，比如在执行一些批量操作或后台任务时，`.update()` 可以避免中间件的性能开销。

### 直接修改和替换文档

- **`.save()` 替换文档**：当你使用 `.save()` 方法时，如果文档存在 `_id` 字段且该 `_id` 在数据库中找到了对应的记录，Mongoose 会替换掉原来的文档。这意味着，如果有些字段在新文档中没有指定，它们将从数据库中的文档里被移除。

- **`.update()` 修改字段**：与 `.save()` 不同，`.update()` 方法默认仅修改指定的字段，而不会影响未指定的字段。对于需要保留其他字段内容的场合，这通常是更加安全和预期的行为。

### 性能考量

- **性能优化**：在大型应用中，`.update()` 方法对性能的影响通常小于 `.save()` 方法。特别是在进行部分字段更新时，`.update()` 方法不需要发送整个文档数据，也不需要加载文档到应用层，从而减少了网络传输和内存使用。

- **原子操作**：`.update()` 方法允许使用 MongoDB 的原子更新操作符，如 `$set`, `$inc`, `$push` 等，这样可以确保更新操作的原子性，防止在并发场景下出现数据不一致的问题。

### 总结

根据你的需要，你可能会选择使用 `.save()` 或 `.update()`——或者是 Mongoose 提供的其他相关方法，如 `.updateOne()`, `.updateMany()`, `.findOneAndUpdate()` 等，这些方法提供了不同的功能和性能取舍。选择哪一种方法取决于你的具体需求，比如是否需要处理整个文档，是否需要触发中间件，是否关注性能优化，以及操作的原子性等因素。

Mongoose 中 save 和 update 有什么区别？

在使用Mongoose操作MongoDB时，您可以通过不同的方式删除数据库中的数据。以下是几种删除操作的方法：

### 删除文档

1. **使用`remove`方法**：这是删除匹配条件的所有文档的传统方法。但请注意，从Mongoose v5.0开始，`remove`方法已被弃用，建议使用`deleteOne`或`deleteMany`。

    ```javascript
    // 假设我们有一个名为Model的模型
    Model.remove({ _id: '某个特定的ID' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("文档删除成功");
        }
    });
    ```

2. **使用`deleteOne`方法**：这是用来删除第一个匹配条件的单个文档的方法。

    ```javascript
    Model.deleteOne({ name: '待删除的名称' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("单个文档删除成功");
        }
    });
    ```

3. **使用`deleteMany`方法**：这是用来删除所有匹配条件的文档的方法。

    ```javascript
    Model.deleteMany({ age: { $gte: 18 } }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("多个文档删除成功");
        }
    });
    ```

### 删除集合

如果您想要删除整个集合，您可以调用集合的`drop`方法。请谨慎使用，因为这会删除整个集合及其所有文档。

```javascript
mongoose.connection.db.dropCollection('collectionName', function(err, result) {
    if(err) {
        console.error("删除集合失败！", err);
    } else {
        console.log("集合删除成功", result);
    }
});
```

### 删除数据库

如果您需要删除整个数据库，可以使用MongoDB原生驱动的`dropDatabase`方法。这将删除当前连接的数据库，包括所有的集合和文档。

```javascript
mongoose.connection.db.dropDatabase(function(err, result) {
    if(err) {
        console.error("删除数据库失败！", err);
    } else {
        console.log("数据库删除成功", result);
    }
});
```

在执行这些删除操作时，一定要小心谨慎，因为它们会永久移除数据。在删除操作之前，确保您有相关数据的备份，或已经确认这些数据不再需要了。在开发阶段，可以在测试数据库上操作，以避免对生产数据库造成不必要的风险。### 确认删除操作

删除数据是一个危险的操作，尤其是在生产环境下。因此，在执行删除之前，您应该确保实施一些确认步骤，比如：

- **备份数据**：在删除任何数据之前，确保您已经备份了数据库或相应的数据集。
- **双重确认**：在执行删除操作之前，最好有一个提示让用户确认他们确实想要删除数据。
- **权限检查**：确保只有拥有适当权限的用户才能删除数据。

### 使用事务处理（在支持的情况下）

如果您的MongoDB版本支持事务（如MongoDB 4.0及以上的副本集），您可能想要在事务中执行删除操作。这样，如果事务中的某个部分失败，所有更改都可以回滚，从而避免了数据不一致的风险。

```javascript
const session = await mongoose.startSession();
session.startTransaction();
try {
    await Model.deleteMany({}, { session });
    // ... 可能还有其他数据库操作 ...
    await session.commitTransaction();
} catch (error) {
    await session.abortTransaction();
    throw error;
} finally {
    session.endSession();
}
```

### 软删除

有时候，您可能并不想从数据库中完全删除数据，而是想进行所谓的"软删除"。软删除通常意味着将文档标记为已删除，而实际上并不从数据库中移除它们。这可以通过在文档上添加一个`isDeleted`字段来实现，并在查询时过滤掉这些被标记为`isDeleted`的文档。

```javascript
// 软删除示例
Model.updateMany({}, { $set: { isDeleted: true } }, function(err) {
    if(err) {
        console.error("软删除失败！", err);
    } else {
        console.log("文档已被软删除");
    }
});

// 查询时跳过软删除的文档
Model.find({ isDeleted: { $ne: true } }).exec(function(err, docs) {
    // 返回未被软删除的文档
});
```

软删除通常用于需要保留数据完整性或历史记录的场景。

### 总结

删除操作应该谨慎进行，以防止意外数据丢失。在进行删除之前，确认操作的必要性，备份数据库，并只允许具有相应权限的用户执行这些操作。在某些场景下，您可能会考虑软删除而不是硬删除数据，以便未来的恢复或审计。

There is no method for dropping a collection from mongoose, the best you can do is remove the content of one :

    Model.remove({}, function(err) { 
       console.log('collection removed') 
    });
    

But there is a way to access the mongodb native javascript driver, which can be used for this

    mongoose.connection.collections['collectionName'].drop( function(err) {
        console.log('collection dropped');
    });
    

### Warning

Make a backup before trying this in case anything goes wrong!

Mongoose will create a database if one does not already exist on connection, so once you make the connection, you can just query it to see if there is anything in it.

You can drop any database you are connected to:

    var mongoose = require('mongoose');
    /* Connect to the DB */
    mongoose.connect('mongodb://localhost/mydatabase',function(){
        /* Drop the DB */
        mongoose.connection.db.dropDatabase();
    });

If you modify @hellslam's solution like this then it will work

I use this technique to drop the Database after my integration tests

    //CoffeeScript
    mongoose = require "mongoose"
    conn = mongoose.connect("mongodb://localhost/mydb")
    
    conn.connection.db.dropDatabase()
    
    //JavaScript
    var conn, mongoose;
    mongoose = require("mongoose");
    conn = mongoose.connect("mongodb://localhost/mydb");
    
    conn.connection.db.dropDatabase();
    

HTH at least it did for me, so I decided to share =)

在使用Mongoose操作MongoDB时，您可以通过不同的方式删除数据库中的数据。以下是几种删除操作的方法：

### 删除文档

1. **使用`remove`方法**：这是删除匹配条件的所有文档的传统方法。但请注意，从Mongoose v5.0开始，`remove`方法已被弃用，建议使用`deleteOne`或`deleteMany`。

    ```javascript
    // 假设我们有一个名为Model的模型
    Model.remove({ _id: '某个特定的ID' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("文档删除成功");
        }
    });
    ```

2. **使用`deleteOne`方法**：这是用来删除第一个匹配条件的单个文档的方法。

    ```javascript
    Model.deleteOne({ name: '待删除的名称' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("单个文档删除成功");
        }
    });
    ```

3. **使用`deleteMany`方法**：这是用来删除所有匹配条件的文档的方法。

    ```javascript
    Model.deleteMany({ age: { $gte: 18 } }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("多个文档删除成功");
        }
    });
    ```

### 删除集合

如果您想要删除整个集合，您可以调用集合的`drop`方法。请谨慎使用，因为这会删除整个集合及其所有文档。

```javascript
mongoose.connection.db.dropCollection('collectionName', function(err, result) {
    if(err) {
        console.error("删除集合失败！", err);
    } else {
        console.log("集合删除成功", result);
    }
});
```

### 删除数据库

如果您需要删除整个数据库，可以使用MongoDB原生驱动的`dropDatabase`方法。这将删除当前连接的数据库，包括所有的集合和文档。

```javascript
mongoose.connection.db.dropDatabase(function(err, result) {
    if(err) {
        console.error("删除数据库失败！", err);
    } else {
        console.log("数据库删除成功", result);
    }
});
```

在执行这些删除操作时，一定要小心谨慎，因为它们会永久移除数据。在删除操作之前，确保您有相关数据的备份，或已经确认这些数据不再需要了。在开发阶段，可以在测试数据库上操作，以避免对生产数据库造成不必要的风险。

在使用Mongoose操作MongoDB时，您可以通过不同的方式删除数据库中的数据。以下是几种删除操作的方法：

### 删除文档

1. **使用`remove`方法**：这是删除匹配条件的所有文档的传统方法。但请注意，从Mongoose v5.0开始，`remove`方法已被弃用，建议使用`deleteOne`或`deleteMany`。

    ```javascript
    // 假设我们有一个名为Model的模型
    Model.remove({ _id: '某个特定的ID' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("文档删除成功");
        }
    });
    ```

2. **使用`deleteOne`方法**：这是用来删除第一个匹配条件的单个文档的方法。

    ```javascript
    Model.deleteOne({ name: '待删除的名称' }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("单个文档删除成功");
        }
    });
    ```

3. **使用`deleteMany`方法**：这是用来删除所有匹配条件的文档的方法。

    ```javascript
    Model.deleteMany({ age: { $gte: 18 } }, function(err) {
        if(err) {
            console.error("发生错误！", err);
        } else {
            console.log("多个文档删除成功");
        }
    });
    ```

### 删除集合

如果您想要删除整个集合，您可以调用集合的`drop`方法。请谨慎使用，因为这会删除整个集合及其所有文档。

```javascript
mongoose.connection.db.dropCollection('collectionName', function(err, result) {
    if(err) {
        console.error("删除集合失败！", err);
    } else {
        console.log("集合删除成功", result);
    }
});
```

### 删除数据库

如果您需要删除整个数据库，可以使用MongoDB原生驱动的`dropDatabase`方法。这将删除当前连接的数据库，包括所有的集合和文档。

```javascript
mongoose.connection.db.dropDatabase(function(err, result) {
    if(err) {
        console.error("删除数据库失败！", err);
    } else {
        console.log("数据库删除成功", result);
    }
});
```

在执行这些删除操作时，一定要小心谨慎，因为它们会永久移除数据。在删除操作之前，确保您有相关数据的备份，或已经确认这些数据不再需要了。在开发阶段，可以在测试数据库上操作，以避免对生产数据库造成不必要的风险。
### 确认删除操作

删除数据是一个危险的操作，尤其是在生产环境下。因此，在执行删除之前，您应该确保实施一些确认步骤，比如：

- **备份数据**：在删除任何数据之前，确保您已经备份了数据库或相应的数据集。
- **双重确认**：在执行删除操作之前，最好有一个提示让用户确认他们确实想要删除数据。
- **权限检查**：确保只有拥有适当权限的用户才能删除数据。

### 使用事务处理（在支持的情况下）

如果您的MongoDB版本支持事务（如MongoDB 4.0及以上的副本集），您可能想要在事务中执行删除操作。这样，如果事务中的某个部分失败，所有更改都可以回滚，从而避免了数据不一致的风险。

```javascript
const session = await mongoose.startSession();
session.startTransaction();
try {
    await Model.deleteMany({}, { session });
    // ... 可能还有其他数据库操作 ...
    await session.commitTransaction();
} catch (error) {
    await session.abortTransaction();
    throw error;
} finally {
    session.endSession();
}
```

### 软删除

有时候，您可能并不想从数据库中完全删除数据，而是想进行所谓的"软删除"。软删除通常意味着将文档标记为已删除，而实际上并不从数据库中移除它们。这可以通过在文档上添加一个`isDeleted`字段来实现，并在查询时过滤掉这些被标记为`isDeleted`的文档。

```javascript
// 软删除示例
Model.updateMany({}, { $set: { isDeleted: true } }, function(err) {
    if(err) {
        console.error("软删除失败！", err);
    } else {
        console.log("文档已被软删除");
    }
});

// 查询时跳过软删除的文档
Model.find({ isDeleted: { $ne: true } }).exec(function(err, docs) {
    // 返回未被软删除的文档
});
```

软删除通常用于需要保留数据完整性或历史记录的场景。

### 总结

删除操作应该谨慎进行，以防止意外数据丢失。在进行删除之前，确认操作的必要性，备份数据库，并只允许具有相应权限的用户执行这些操作。在某些场景下，您可能会考虑软删除而不是硬删除数据，以便未来的恢复或审计。

Mongoose 如何删除数据库？

`exec` 函数在 Mongoose 中用于执行一个查询并返回一个 promise。当你使用 Mongoose 构建查询时，直到你调用 `exec`，`then`，`catch`，或者使用 `await` 时，查询才会被发送到 MongoDB 数据库执行。

在 Mongoose 中，查询构建器允许链式调用各种方法来构建一个复杂的查询。例如，你可能会使用 `find`，`sort`，`limit`，`select` 等方法。调用 `exec` 是在链式构建完成之后触发实际数据库操作的一种方式。

这里有一个例子：

```javascript
const mongoose = require('mongoose');
const { Schema } = mongoose;

// 假设我们有一个名为 User 的模型
const UserSchema = new Schema({
  name: String,
  age: Number,
  email: String
});

const User = mongoose.model('User', UserSchema);

// 构建一个查询来查找所有年龄在30岁以上的用户，并按照名称进行排序
User.find({ age: { $gt: 30 } })
  .sort('name')
  .select('name email')
  .exec() // 在这里，exec() 会执行上面构建的查询
  .then(users => {
    // 处理查询结果
    console.log(users);
  })
  .catch(err => {
    // 处理可能发生的错误
    console.error(err);
  });
```

在这个例子中，`exec` 返回一个 promise，该 promise 在查询成功执行后解析查询结果，在出现错误时拒绝。

使用 `exec` 的优势是可以让你更灵活地处理结果和错误，例如可以使用 `async/await` 语法，这样代码更加简洁和现代：

```javascript
async function findUsers() {
  try {
    const users = await User.find({ age: { $gt: 30 } })
      .sort('name')
      .select('name email')
      .exec(); // 使用 async/await 等待查询结果
    console.log(users);
  } catch (err) {
    console.error(err);
  }
}

findUsers();
```

在这个例子中，我们通过 `await` 关键字等待 `exec()` 的结果，这样就可以用同步代码的方式写异步操作，提高代码的可读性和维护性。

Basically when using mongoose, documents can be retrieved using helpers. Every model method that accepts query conditions can be executed by means of a `callback` or the `exec` method.

`callback`:

    User.findOne({ name: 'daniel' }, function (err, user) {
      //
    });
    

`exec`:

    User
      .findOne({ name: 'daniel' })
      .exec(function (err, user) {
          //
      });
    

Therefore when you don't pass a callback you can build a query and eventually execute it.

You can find additional info in the [mongoose docs](http://mongoosejs.com/docs/queries.html "mongoose docs").

**UPDATE**

Something to note when using [Promises](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) in combination with Mongoose async operations is that Mongoose queries are **not** Promises. Queries do return a _thenable_, but if you need a _real_ Promise you should use the `exec` method. More information can be found [here](http://mongoosejs.com/docs/promises.html).

During the update I noticed I didn't explicitly answer the question:

> Ive never seen that method in Javascript before? What does it do exactly?

Well it's **not** a native JavaScript method, but part of the Mongoose API.

I never use `exec()` function to complete a CRUD(Create, Read, Update, Delete) on a model. When I want CRUD on a model, I use it like this:

    const user = await UserModel.findOne(userCondition);
    

And it always does the job. So I wondered "what does `exec()` use for"? As I searched in mongoose document, I found the answer [here](https://mongoosejs.com/docs/promises.html).  

> Should You Use exec() With await?  

And here is the story.  
You have two ways to execute a query on a model. Using `callback` or using `exec()` function. "But" you can use `await` too. `exec()` function returns a promise, that you can use it with `then()` or `async/await` to execute a query on a model "asynchronous". So the question is "If I can just use `user = await UserModel.find()` and it works currectly, so why should I use `exec()` function?". The answer that you can find in the [document](https://mongoosejs.com/docs/promises.html) is:  
  
There are two difference between using `await` with `exec()` or without it.  

*   As a functionality point of view, there is no difference between using `await` with `exec()` or without it. Just when you call a query without `exec()` or `callback`, it returns a `thenable` which is something like promise but it's not a promise.(You can find the difference [here](https://mongoosejs.com/docs/queries.html#queries-are-not-promises)). But when you use `exec()` to run a query, you get exactly a promise as response.

    // returns a thenable as response that is not a promise, but you can use await and then() with it.
    const user = await UserModel.findOne(userCondition);
    
    // returns exactly a promise.
    const user = await UserModel.findOne(userCondition).exec(); 
    

*   Another difference is, if you use `await` with `exec()` you get a better "stack trace" if you catch any error in executing queries. So:  
      
    These two line, do the same thing:

    const user = await UserModel.findOne(userCondition);
    
    // does exactly as the before line does, but you get a better stack trace if any error happened
    const user = await UserModel.findOne(userCondition).exec();

Daniel has answered this quite beautifully. To elaborate on an exhaustive list of ways to build and execute queries, look at the following use cases:

**Query Building**

Mongoose will not execute a query until `then` or `exec` has been called upon it. This is very useful when building complex queries. Some examples can include using the `populate` and `aggregate` functions.

    User.find({name: 'John'}) // Will not execute
    

**Execution via callback**

Although disliked by many due to its nesting nature, queries can be executed by providing the optional callback.

    User.find({name: 'John'}, (err, res) => {}) // Will execute
    

**Then API as a Promises/A+**

Mongoose queries do provide a `then` function. This is not to be confused with regular promises. Simply put, the Promises/A+ specification requires a `then` function to work much like how we're used to with promises.

    User.find({name: 'John'}).then(); // Will execute
    Promise.all([User.find({name: 'John'}), User.find({name: 'Bob'})]) // Will execute all queries in parallel
    

**The exec function**

From Mongoose docs `If you need a fully-fledged promise, use the .exec() function.`

    User.find({name: 'John'}).exec(); // Will execute returning a promise

`exec()` will return a promise if no callback is provided. So the following pattern is very convenient and generic - it can handle callbacks or promises nicely:

    function findAll(query, populate, cb) {
    
      let q = Response.find(query);
    
      if (populate && populate.length > 0) {
        q = q.populate(populate);
      }
    
      // cb is optional, will return promise if cb == null
      return q.lean().exec(cb);
    
    }
    

I recommend using Bluebird promises with Mongoose, to do that, use this call:

    const mongoose = require('mongoose');
    mongoose.Promise = require('bluebird');

all answers are correct but the easiest way is to use modern async await approach..

    async ()=> {
    const requiresUser = await User.findByIdAndUpdate(userId,{name:'noname'},{ new:true}).exec()

Mongoose 中 Exec 函数的作用是什么？

在 Node.js 中，如果您使用的是 Mongoose.js 来与 MongoDB 数据库交互，将字符串转换为ObjectId对象是一项常见的任务，特别是当您需要用字符串形式的 ID 对数据库中的文档进行引用或查询时。Mongoose.js 中内置了一个 `ObjectId` 类型，它是 MongoDB 官方的 `bson` 库的一部分。

假设您得到了一个字符串形式的 ID，如 `'5f8d0d55b54764421b7156d9'`，并希望将其转换为 `ObjectId` 对象，您可以按照以下步骤操作：

1. 首先，确保您已经安装了 mongoose：
   
   ```bash
   npm install mongoose
   ```

2. 在您的 Node.js 代码中，引入 `mongoose` 包，并使用 `mongoose.Types.ObjectId` 来创建一个新的 `ObjectId` 实例：

   ```javascript
   const mongoose = require('mongoose');

   // 假设我们有一个字符串形式的 ID
   const idString = '5f8d0d55b54764421b7156d9';

   // 使用 mongoose 的 Types.ObjectId 方法来转换
   const objectId = mongoose.Types.ObjectId(idString);

   console.log(objectId); // 这将输出一个有效的 ObjectId 对象
   ```

3. 确保传入的字符串是有效的 ObjectId 字符串。它应该是一个24个字符长的字符串，包含 12 字节的数据（通常是16进制表示的）。

如果您传入的字符串不是有效的 ObjectId，Mongoose 会抛出一个错误提示。在实际应用中，您可能需要对这种情况进行处理，例如：

```javascript
const mongoose = require('mongoose');

const idString = 'invalid-object-id';

try {
  const objectId = mongoose.Types.ObjectId(idString);
  console.log(objectId);
} catch (error) {
  console.error('Error converting string to ObjectId:', error.message);
}
```

确保您捕获并妥善处理任何可能因无效的字符串输入而抛出的错误，以避免在您的应用程序中引入 bug。

你可以这样做：

    var mongoose = require('mongoose');
    var id = mongoose.Types.ObjectId('4edd40c86762e0fb12000003');

你也可以用这个

    const { ObjectId } = require('mongodb');
    const _id = ObjectId("4eb6e7e7e9b7f4194e000001");
    

这是最简单的方法

你可以这样做：

    var mongoose = require('mongoose');
    var _id = mongoose.mongo.BSONPure.ObjectID.fromHexString("4eb6e7e7e9b7f4194e000001");
    

编辑：新标准有 fromHexString 而不是 fromString

从评论来看，您正在寻找：

    mongoose.mongo.BSONPure.ObjectID.isValid
    

或者

    mongoose.Types.ObjectId.isValid

var mongoose = require('mongoose');
    var _id = mongoose.mongo.ObjectId("4eb6e7e7e9b7f4194e000001");

Mongoose 如何将字符串转换为 objectID ？

当您在Mongoose中定义模式时，`created_at`和`updated_at`字段通常用于跟踪记录的创建和最后更新时间。要在Mongoose中添加这两个字段，您可以使用内置的`timestamps`选项，它会自动为您的模式添加这两个字段。以下是一个如何在Mongoose模式中实现它的示例：

```javascript
const mongoose = require('mongoose');

const Schema = mongoose.Schema;

// 定义模式
const exampleSchema = new Schema({
  // 模式的其他字段
  name: {
    type: String,
    required: true
  },
  description: {
    type: String
  }
  // 您不需要显式添加created_at和updated_at字段
}, {
  timestamps: true // 这将会自动添加created_at和updated_at字段
});

// 创建模型
const ExampleModel = mongoose.model('Example', exampleSchema);

module.exports = ExampleModel;
```

在这个例子中，`timestamps`选项被设置为`true`，这告诉Mongoose自动为每个模式实例添加`createdAt`和`updatedAt`字段。当您创建一个新的文档时，Mongoose会自动设置`createdAt`和`updatedAt`字段的值为当前时间戳。当您更新文档时，只有`updatedAt`字段会被更新为最新的时间戳。

默认情况下，这些字段被命名为`createdAt`和`updatedAt`。如果您想要自定义这些字段的名称，可以通过传递一个包含`createdAt`和`updatedAt`属性的对象来实现：

```javascript
const exampleSchema = new Schema({
  // 模式的其他字段
  name: {
    type: String,
    required: true
  },
  description: {
    type: String
  }
}, {
  timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' } // 自定义字段名称
});
```

通过使用`timestamps`选项，您可以确保每次创建或更新文档时，这些字段都会自动得到处理，这样可以在不增加额外代码的情况下轻松跟踪文档的历史。

**更新：**（5年后）

> **注意：**如果您决定使用[Kappa 架构](http://milinda.pathirage.org/kappa-architecture.com/)（_事件溯源 + CQRS_），那么您根本不需要更新日期。由于您的数据是不可变的、仅附加的事件日志，因此您只需要事件创建日期。类似于_Lambda 架构_，如下所述。那么您的应用程序状态是事件日志（派生数据）的投影。如果您收到有关现有实体的后续事件，则您将使用该事件的创建日期作为实体的更新日期。这是微服务系统中常用（且常被误解）的做法。

**更新：**（4年后）

如果您使用`ObjectId`作为您的`_id`字段（通常是这种情况），那么您需要做的就是：

    let document = {
      updatedAt: new Date(),
    }
    

检查下面我的原始答案，了解如何从`_id`字段获取创建的时间戳。如果您需要使用外部系统的 ID，请查看 Roman Rhrn Nesterov 的答案。

**更新：**（2.5年后）

现在，您可以将[#timestamps](http://mongoosejs.com/docs/guide.html#timestamps)选项与 mongoose 版本 >= 4.0 一起使用。

    let ItemSchema = new Schema({
      name: { type: String, required: true, trim: true }
    },
    {
      timestamps: true
    });
    

如果设置时间戳、猫鼬分配`createdAt`和`updatedAt`字段到您的模式，分配的类型是`Date`。

您还可以指定时间戳字段的名称：

    timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' }
    

> **注意：**如果您正在开发包含关键数据的大型应用程序，您应该重新考虑更新文档。我建议您使用不可变的、仅附加的数据（[lambda 架构](https://en.wikipedia.org/wiki/Lambda_architecture)）。这意味着您只允许插入。**不允许更新和删除！**如果您想“删除”一条记录，您可以轻松插入带有某些`timestamp`/的文档的新版本`version` ，然后将`deleted`字段设置为`true`。类似地，如果您想更新文档 - 您创建一个新文档，更新相应的字段并复制其余字段。然后，为了查询该文档，您将获得具有最新时间戳或最高版本的文档，即未“删除”（该`deleted`字段未定义或 false\`）。
> 
> 数据不变性确保您的数据是可调试的——您可以跟踪每个文档的历史记录。如果出现问题，您还可以回滚到文档的先前版本。如果您采用这样的架构`ObjectId.getTimestamp()`就足够了，并且它不依赖于 Mongoose。

* * *

**原答案：**

如果您使用 ObjectId 作为身份字段，则不需要`created_at`字段。ObjectIds 有一个名为 的方法`getTimestamp()`。

ObjectId("507c7f79bcf86cd7994f6c0e").getTimestamp()

这将返回以下输出：

ISODate("2012-10-15T21:26:17Z")

更多信息请点击这里[如何从 Mongo ObjectID 中提取创建日期](https://stackoverflow.com/questions/7327296/how-do-i-extract-the-created-date-out-of-a-mongo-objecti)

为了添加`updated_at`字段，您需要使用以下命令：

    var ArticleSchema = new Schema({
      updated_at: { type: Date }
      // rest of the fields go here
    });
    
    ArticleSchema.pre('save', function(next) {
      this.updated_at = Date.now();
      next();
    });

从 Mongoose 4.0 开始，您现在可以在 Schema 上设置时间戳选项，让 Mongoose 为您处理此问题：

    var thingSchema = new Schema({..}, { timestamps: true });
    

您可以更改所使用字段的名称，如下所示：

    var thingSchema = new Schema({..}, { timestamps: { createdAt: 'created_at' } });
    

[http://mongoosejs.com/docs/guide.html#timestamps](http://mongoosejs.com/docs/guide.html#timestamps)

这就是我最终所做的：

    var ItemSchema = new Schema({
        name    : { type: String, required: true, trim: true }
      , created_at    : { type: Date }
      , updated_at    : { type: Date }
    });
    
    
    ItemSchema.pre('save', function(next){
      now = new Date();
      this.updated_at = now;
      if ( !this.created_at ) {
        this.created_at = now;
      }
      next();
    });

使用您的架构的内置`timestamps`选项。

    var ItemSchema = new Schema({
        name: { type: String, required: true, trim: true }
    },
    {
        timestamps: true
    });
    

这会自动将`createdAt`和`updatedAt`字段添加到您的架构中。

[http://mongoosejs.com/docs/guide.html#timestamps](http://mongoosejs.com/docs/guide.html#timestamps)

像这样添加`timestamps`到你的然后会自动为你生成`Schema``createdAt``updatedAt`

    var UserSchema = new Schema({
        email: String,
        views: { type: Number, default: 0 },
        status: Boolean
    }, { timestamps: {} });
    

[![在此输入图像描述](https://i.stack.imgur.com/pLmsj.png)](https://i.stack.imgur.com/pLmsj.png)  
您也可以`createdAt -> created_at`通过以下方式更改

    timestamps: { createdAt: 'created_at', updatedAt: 'updated_at' }

所有问题