前言
在现代的 Web 开发过程中，后端数据库在 Web 应用程序中起着非常重要的作用。许多前端应用都使用了 Firebase 作为其后端数据库。Ember.js 和 Firebase 的集成已经被证明是一种非常强大和强大的方式，使得开发人员可以使用两个技术来快速开发高性能的应用程序。
EmberFire 是一个非常流行的用于将 Ember.js 和 Firebase 集成在一起的解决方案。它非常强大，但有时可能需要额外的工具来帮助处理 Firebase 的某些特殊情况。这就是 emberfire-utils 这个 npm 包的出现背景。
emberfire-utils 提供了一组辅助函数和 mixins，用于在 Ember.js 和 Firebase 之间轻松交互和协调。在本文中，我将为你提供完整的应用程序代码示例，以了解如何使用这个工具箱，以及使用它将如何改进你的应用程序开发流程。
安装
首先，我们需要将 emberfire-utils 添加到项目中。因为这是一个 npm 包，所以使用命令 npm install --save emberfire-utils 来安装它。
在安装完成后，在你的 Ember 应用程序中添加以下引用：
-- -------------------- ---- ------- -- ------ ------ ----- ---- -------- ------ -------- ---- ----------- ------ ------ ---- ----------------------- ------ --------- ---- ------------ ------ ----------- -- ------------------------- ---- ------------------ ----- -------- - ------ ----- --- - -------------------------- ------------- -------------------- ---------------- ----------------------- -------- --- ------------------------------- ----- ------------------ ----------- ------------------------ --- ------ ------- ----
现在，我们准备好使用 emberfire-utils 的功能。
使用
提供者 (Provider)
在开始使用 emberfire-utils 之前，我们需要准备一些基础工作。首先，我们将创建 firebase 提供程序，将其注入到应用程序中。然后我们将使用这个特定的提供程序实例化 Firebase 服务。
在你的 Ember 应用程序中，添加一个名为 firebase-config 的文件，其中包含 Firebase 的一些配置。
// firebase-config.js
export default {
apiKey: '[API_KEY]',
authDomain: '[AUTH_DOMAIN]',
databaseURL: '[DATABASE_URL]',
storageBucket: '[STORAGE_BUCKET]'
};现在我们已经准备好创建我们的 firebase 提供程序了。在 app.js 中，我们在 Application#service 方法中注入一个已经实例化的 Firebase 服务。
-- -------------------- ---- -------
-- ------
-------------------------------
----- -----------
----------- ------------------- ------------ -
--- -------------- - ------------------------------------------------------
----- ----------- - ---------------------------------------
------------------------------------------- ------------ ------------- --------
--------------------------- -------------- -----------------------
-------------------------------- -------------- -----------------------
-
---模型存储库 (Model Repositories)
在我们使用 emberfire-utils 时，最主要的概念是使用它的模型存储库（Model Repositories）。这是一个简单的抽象，它为我们提供了使用 Firebase 存储数据的方便方法。我们可以将其视为“服务”或数据存储器，其中包含其他服务和数据存储器。
要创建一个模型存储库，首先要导入 Ember 服务和创建一个 ModelRepository 对象的实例。
// app/services/person-repository.js
import Ember from 'ember';
import ModelRepository from 'emberfire-utils/services/model-repository';
export default ModelRepository.extend({
firebaseApp: Ember.inject.service(),
});在这个示例中，我们创建了一个 PersonRepository 类，并从 ModelRepository 中扩展它。这个类还注入了 Firebase 管理服务的实例，使我们可以轻松地在模型中使用 Firebase 实例。
接下来，我们定义模型存储库中的模型。下面是一个 Person 模型的例子。
-- -------------------- ---- -------
-- --------------------
------ ----- ---- --------
------ ----- ---- --------------------
------ ----------- -------- ---- ----------------------------
------ ------- --------------
---------- ----------------------------------------
--------- ---------------------------------------
------ ------------------------------------
------ ------------------------------------
---------- -------------------
--------- --------------------------- ----------- ---------- -
------ ------------------------- -------------------------
--
---请注意，在这个示例中，我们使用了 emberonfire 这个库，它是 ember-on-fire 的简化版，并在其之上构建。我们使用 emberonfire 帮助我们快速构建模型和关系。
在模型存储库中实际使用这个模型，我们只需要扩展一个 ModelRepository 对象，然后将其与我们的数据存储库关联起来。
-- -------------------- ---- ------- -- --------------------------------- ------ ----- ---- -------- ------ --------------- ---- -------------------------------------------- ------ ----------- ---- ------------------- ------ ------- ------------------------ ---------- --------- ------------ ----------------------- ----------- ------------ ---
现在我们可以使用这个 PersonRepository 来检索所有 person 的信息。
-- -------------------- ---- -------
-- --------------------
------ ----- ---- --------
------ ------- --------------------
----------------- -----------------------
------ ---------- -
------ ---------------------------------------
-
---混合器 (Mixin)
当我们需要特殊的 Firebase 功能时， emberfire-utils 还提供了一些混合器，可以轻松地将这些功能与我们的组件和控制器之间进行交互。
例如，我们可能需要在一个控制器中处理某些特定的 Firebase 事件。我们可能希望在组件的初始化阶段执行一些特殊的初始化代码。这些都可以使用 emberfire-utils 的混合器轻松实现。
让我们来看一个例子。我们假设我们需要使用 Firebase 身份验证，创建混合器 FirebaseAuthenticator。这个混合器提供了一些方法，用于管理应用程序的身份验证状态。
-- -------------------- ---- -------
-- ------------------------------------
------ ----- ---- --------
------ ------------ ---- --------------------------------
------ ------- --------------------
-------------------- ------
------------ -----
------------ -----------------------
------------- -------------
----- ---------- -
--------------------------
----------------------- -------------------------------------------------------- -- -
-- ------ -
------------------------------- ------
- ---- -
------------------------------- -------
-
----
--
------------------- ---------- -
----------------------------------
--
------------------ --------------- --------- -
------ ----------------------------------------------------------------- ----------
--
------- ---------- -
------ ------------------------------------------------- -- -
------------------------------- -------
---
-
---在这个例子中，我们将 Firebase 管理服务注入到 firebaseApp 属性中，并将 FirebaseAuth 附加到 firebaseAuth 属性中。我们还创建了一个 authWatcher 属性，以便在应用程序的生命周期中监听 firebase 身份验证状态的变化。最后，我们提供了一个注销方法和一个方法来通过电子邮件和密码进行身份验证。
将此混合器应用于我们的控制器，我们可以为应用程序添加 Firebase 身份验证功能，而无需编写与 Firebase 本身交互的任何代码。
// app/controllers/application.js
import Ember from 'ember';
import FirebaseAuthenticator from '../mixins/firebase-authenticator';
export default Ember.Controller.extend(FirebaseAuthenticator, {
});总结
在本文中，我们详细介绍了如何使用 emberfire-utils 来构建采用 Firebase 的 Ember 应用程序。我们了解了如何通过使用 ModelRepository 和 Model 对象来管理数据库存储，并使用混合器来管理应用程序的身份验证状态。
使用 emberfire-utils 将极大地简化我们与 Firebase 的交互，使我们能够专注于构建我们的应用程序，而不是与 Firebase 进行交互。它提供了一个干净和整洁的界面，以管理我们应用程序和 Firebase 之间的通信和协调。如有帮助，可在我 blog 中查看更多关于 Ember.js 的文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd40