介绍
Snackbar 和 FloatingActionButton 是 Material Design 中的两个常见组件，分别用于显示短暂提示和浮动操作按钮。本文将介绍如何结合使用 Snackbar 和 FloatingActionButton 实现一个带撤销操作的提示框。撤销操作的实现将通过 JavaScript 的定时器和闭包实现。
效果演示
首先，我们先看一下本文要实现的效果，在用户完成某个操作后，会出现一个 Snackbar 提示框，在该提示框右侧有一个 FloatingActionButton，当用户点击按钮时，触发成功操作，否则间隔一定时间后自动撤销上一次操作，如下图所示：
实现步骤
1. 引入 Material Design 组件
在 head 标签中引入 Material Design 的样式和 JS 文件：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
2. 创建 HTML 结构
-- -------------------- ---- -------
---- ------------------------
---- ------------- ---------------------- --------------
---- ---------------------------------
------- ---------------------------- -----------------------
------
------
---- -------------------------
-- ----------------- ------------- --------------- -------------------- -------------------- ---------
-- --------------------------------
----
------snackbar-container包裹整个 Snackbar 的容器；snackbar是 Snackbar 实际的容器，其中包括文本和操作按钮；fixed-action-btn是 FloatingActionButton 的容器，mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored是 Material Design 中 FloatingActionButton 的类名；fab是 FloatingActionButton 实际的容器，其中包括一个带有material-icons类名的 iconfont。
3. 创建 Snackbar 实例
在 JavaScript 中，我们需要获取 Snackbar 的实例，实例化方式如下：
-- -------------------- ---- -------
--- ----------------- - ----------------------------------------------
--- -------- - ---------------------------------------------
--- ---- - -
-------- --------
-------- ----- -- -------- ----
-------------- ---------- -
-- --------
--------------------
--
----------- ---------- -- ------
--
--- ---------------- - --- ---------------------------snackbarContainer获取 Snackbar 的容器；- 通过
querySelector获取 Snackbar 的实例； data是 Snackbar 的配置参数，包括提示文本、显示时间、操作按钮、操作按钮点击事件等；- 最后通过
new MaterialSnackbar(snackbar)实例化 Snackbar。
4. 创建储存操作历史的变量
创建一个全局变量 history，用于储存操作历史。因为要支持撤销操作，所以 ouruns 必须使用闭包来储存，并通过 addJob 函数给 history 增加元素，代码如下：
-- -------------------- ---- -------
--- ------- - ---
-------- ---------- -------- -
--- ----- - ---------------
-----------------
--------------------- -
-- ------ --- -------------- - -- -
--------------
-
-- ---------
-history用于保存变量操作；addJob用于给 history 增加元素，其中fn是要执行的函数，timeout是执行间隔时间。
5. 定时器和闭包撤销操作
根据上一节中的 addJob 函数，我们可以通过 setTimeout 方法实现撤销操作的延迟执行。同时，在 addJob 函数中利用闭包保存了 index 的值，因此我们可以在撤销时按照顺序执行历史中的函数操作。
-- -------------------- ---- -------
----------------------------- -
-- --------------- - -- -
-------------------------------
-------- -------------
-------- -----
-------------- ---------- -
----------------
--
----------- ----
---
-
-- ------- 通过
setInterval定时器来定时执行撤销操作检测； - 判断 history 数组是否为空，如果不为空执行操作，使用
snackbarInstance.showSnackbar函数呈现 Snackbar； - 当 Snackbar 上的操作按钮被点击时，通过 history 数组中储存的闭包执行对应的操作。
6. 为 FloatingActionButton 增加点击事件
var fab = document.querySelector('#fab');
fab.addEventListener('click', function() {
addJob(function() {
console.log("操作");
}, 2000);
snackbarInstance.showSnackbar(data);
});- 通过
querySelector获取 FloatingActionButton 实例； - 通过
addEventListener给按钮绑定点击事件； - 在点击事件中使用 addJob 函数增加操作历史。
完整示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------------- --- -------------------- ------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
------- ----- ------------------------------------------------------------
-------
------------------- -
--------- ------
-------- ----
----- ----
---------- -----------------
------- ----
-
----------------- -
--------- ------
------ ---
------- ---
-
--------
-------
------
---- ------------------------
---- ------------- ---------------------- --------------
---- ---------------------------------
------- ---------------------------- -----------------------
------
------
---- -------------------------
-- ----------------- ------------- --------------- -------------------- -------------------- ---------
-- --------------------------------
----
------
--------
--- ----------------- - ----------------------------------------------
--- -------- - ---------------------------------------------
--- ---- - -
-------- --------
-------- ----- -- -------- ----
-------------- ---------- -
-- --------
--------------------
--
----------- ---------- -- ------
--
--- ---------------- - --- ---------------------------
--- ------- - ---
-------- ---------- -------- -
--- ----- - ---------------
-----------------
--------------------- -
-- ------ --- -------------- - -- -
--------------
-
-- ---------
-
----------------------------- -
-- --------------- - -- -
-------------------------------
-------- -------------
-------- -----
-------------- ---------- -
----------------
--
----------- ----
---
-
-- ------
--- --- - -------------------------------
----------------------------- ---------- -
----------------- -
------------------
-- ------
------------------------------------
---
---------
-------
-------总结
本文介绍了如何使用 Material Design 中的 Snackbar 和 FloatingActionButton 实现一款带撤销操作的提示框。其中，我们运用到了 JavaScript 的闭包和定时器等知识点，希望通过本文的介绍，能够帮助读者更好地理解这些知识点，并能够在实际开发中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651eb88195b1f8cacd664fce