在现代的前端开发中，使用好现成的 npm 包将会大大地提高我们的工作效率。其中，ember-time-machine 是一个非常优秀的 npm 包，它可以帮助我们在 ember 应用中实现时间旅行功能。
什么是时间旅行
时间旅行，是一种通过记录和回放程序执行记录，可以实现对程序状态进行回溯的功能。它可以帮助我们进行调试，查找 bug，还原操作等一系列功能。在现代的前端框架中，时间旅行功能已经成为了一个很流行且必备的功能。
在 Ember.js 中，你可以通过安装 ember-time-machine 这个 npm 包快速地实现时间旅行功能。下面，我们就来详细的学习一下怎么做。
安装
首先，我们需要在自己的 Ember.js 项目中安装 ember-time-machine。
可以在项目的根目录下运行以下命令：
$ npm install ember-time-machine
这样我们就成功安装了 ember-time-machine。
使用
在项目中引入 ember-time-machine：
import { install } from "ember-time-machine";
export default function() {
install({
// options
});
}这里的 options 可以是以下这些参数：
maxLength- 保留的最多记录数量；interceptRender- 是否拦截 render 方法；ignoreAttributes- 忽略的属性列表。
接下来，我们需要将时间机器和 Ember.js 的应用程序链接起来：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- ----------- ------- --------- -
------------- -
--------------------
---------------- - --- -------------
----------- ----
---
-
-这里使用了 recordable 选项来开启记录功能，这是时间机器最基本的配置。另外，还有很多其他的选项可以设置。
接着，我们可以开始在组件中使用时间机器了：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------
----- ----------- ------- --------- -
------------- -
--------------------
---------------- - --- -------------
----------- ----
---
-
------------------ -
---------------------------------------- -
--------- -
-------- ----------
--------- -- -- -
------------------ -----------
-
-
---
-
-在这段代码中，我们使用了 intercept 方法来拦截了组件对 DOM 的修改，当输入框的值变化时，就会出现 "Input changed!" 的输出。
示例代码
下面是一个完整的示例代码，其中实现了时间旅行功能，以及对输入框的事件监听，详细解释了使用方式。
-- -------------------- ---- -------
------ --------- ---- -------------------
------ - -------- ----------- - ---- ---------------------
------ ------- ------------------
------ -
--------------------------
-- ------
----------
-- --------
---------------- - --- -------------
----------- ----
---
-- --------
---------------------------------------- -
--------- -
-------- ----------
--------- ---------- -- -
------------------------- ----------
-
-
---
--
------------------ -
-- ----
---------------------------
-- ------
------------------------------- ----- --------------
--
-------------------- -
-- --------
-------------------------------- ----- --------------
-- ----
------------------------
--
-------- -
------ -
-- --
------------------------
--
------ -
-- --
------------------------
-
--
-------------------- -
--------------------------- ----------
-
---总结
在本文中，我们详细了解了如何在 Ember.js 应用中使用时间旅行功能。通过这种方式，我们可以方便的实现数据回溯和调试功能，不仅可以提高我们的工作效率，而且可以让我们的项目稳定性大大提高。
如果你是一位前端开发人员，那么建议你在自己的项目中尝试使用 ember-time-machine。他将为你的开发带来极大的便捷和收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb00