npm 包 document-promises-pinkie 的使用教程

阅读时长 4 分钟读完

前言

在开发中,我们经常需要使用到 Promise 对象来处理异步任务,而在 DOM 操作中,Promise 对象不能直接使用。document-promises-pinkie 是一个实现了 DOM 操作上下文中 Promise 对象的 npm 包,它在原生 Promise 的基础上进行了扩展,可以方便地在 DOM 操作中使用 Promise。

安装

使用 npm 安装:

使用

使用时需要先将原生的 Promise 对象绑定到 document 上:

然后就可以在 DOM 操作中使用 Promise 了:

深度说明

在 DOM 操作中,有很多异步操作,如事件回调、动画效果等。在原生的 Promise 对象中,无法直接调用 DOM 操作返回的异步结果,而 document-promises-pinkie 解决了这个问题。

document-promises-pinkie 的源代码涉及到了 Promise 对象的实现原理,它在原生 Promise 的基础上进行了封装扩展,实现了在 DOM 操作中使用 Promise。源码中主要实现了如下内容:

  1. 在 document 上绑定一个 Pinkie 函数,用于生成 Promise 实例;
  2. 通过监听 DOM 操作的方式,获取到操作结果,并返回一个 Promise 实例。

示例代码

我们可以通过一个实例来看看如何在 DOM 操作中使用 Promise。

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  --------- ------------------------ -------------
  -------
    --- -
      ------ ------
      ------- ------
      ----------------- ----
      ---------- ------ ---
    -
    ---------- ------ -
      ---- - -------- -- -
      -- - -------- -- -
    -
  --------
-------
------
  -----------
  ------- --------------------------
-------
-------
-- -------------------- ---- -------
------ ------ ---- ---------------------------

-- --- ------- --- -------- -
---------------- - -------

-- -----------------
----- ------- - ------------------------------
---------------------------------------- -- -- -
  ---------------------- --------
  -- -- --------------- ----------
  ------ ----------------------------
-------------- -- -
  --------------------
-------------- -- -
  ---------------------
---

通过上面的代码,我们可以在动画结束后,打印出 'Animation ended',并且在控制台中输出 'finished'。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005602881e8991b448de568

纠错
反馈