简介
@gemcook/notification 是一款用于浏览器及 Node.js 环境下的轻量级、易于使用的通知插件。它的设计目标是简单易用、高度可定制和可扩展性强。你可以用它来在用户界面中展示 Notifications，其中包括通知的文本、图标，以及其他元数据等信息。
本教程将会教你如何使用 @gemcook/notification 来实现自定义通知的展示，同时我们还会对其源代码进行分析，帮助你更好地理解它的实现原理及设计思想。
安装
你可以使用以下命令来安装 @gemcook/notification：
npm install @gemcook/notification
使用
在浏览器中使用
在浏览器中使用时，你需要在你的 HTML 文件中引入 @gemcook/notification：
-- -------------------- ---- -------
------
----- ----------------
------------------- ---------------
----- ---------------- -------------------------------------------------
-------
------
------- -------------------------------
------- --------------------------------------------------------
--------
----- --------- - --------------------------------------
----------------------------------- -- -- -
-----------
------ ---------
----- ----- -----------------------
-------- -----
---
---
---------
-------在代码中，我们使用 gemNotify 函数来创建一个通知。这个函数接受一个对象作为参数，包含了通知的标题、内容、超时时间等信息。当用户点击通知时，它会自动消失。如果用户没有操作，则在超时时间之后自动消失。
在 Node.js 中使用
在 Node.js 中使用的时候，你需要通过 require 来导入模块：
const gemNotify = require('@gemcook/notification');之后你可以调用 gemNotify 函数来创建通知，接口与浏览器中使用相同：
gemNotify({
title: '这是一个通知',
body: '欢迎使用 @gemcook/notification',
timeout: 2000,
});配置项
@gemcook/notification 内置了丰富的配置项，可以让你更加灵活地定制通知的外观和行为。下面是具体的配置项和使用示例：
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | '' | 通知标题 |
| body | string | '' | 通知内容 |
| icon | string | '' | 通知图标 URL |
| clickAction | string or function | '' | 点击通知的行为，可以是一个 URL，或者一个回调函数 |
| timeout | number | 0 | 自动消失时间，单位为毫秒 |
| tag | string | '' | 通知的标签，用于分类或者去重 |
| badge | string | '' | 通知右上角的提醒图标 URL |
| silent | boolean | false | 是否静音 |
| noscreen | boolean | false | 是否不在锁屏界面和状态栏中显示 |
| sticky | boolean | false | 是否永久保持通知 |
| vibrate | number or number[] | 0 | 设置通知震动模式，参数为一个数字或者数字序列 |
示例：
-- -------------------- ---- ------- ----------- ------ --------- ----- ----- ----------------------- ----- ------------------------------- ------------ ----------------------- -------- ----- ---- ---------- ------ -------------------------------- ------- ------ --------- ------ ------- ------ -------- ----- ---- ----- ---
API
gemNotify(options)
gemNotify 函数用来创建一个通知。它接受一个对象作为参数，包含了通知的各个配置项。返回值为一个 Notification 对象，可以用它来操作通知的状态。
示例：
-- -------------------- ---- ------- ----- ------------ - ----------- ------ --------- ----- ----- ----------------------- -------- ----- --- -------------------------------------- -- -- - ---------------------- --- -------------------------------------- -- -- - ---------------------- ---
gemNotify.requestPermission()
requestPermission 函数用来请求用户授权通知。它返回一个 Promise 对象，表示用户的同意或拒绝。如果用户同意，Promise 的状态为 granted，否则为 denied。
示例：
gemNotify.requestPermission().then((permission) => {
console.log('用户授权状态：', permission);
});源代码解析
@gemcook/notification 本身也是一个比较简单的 Npm 包，它的源代码非常易懂。实现主要基于 Notification API，也就是浏览器通知 API，同时还使用了 ES6 的一些语法和模块化工具。
源代码结构如下：
├── index.js
├── package.json
├── README.md
└── src
├── gem-notify.js
├── gem-notify.scss
└── utils.js其中，src 目录下是 @gemcook/notification 实现的源代码，包括 gem-notify.js、gem-notify.scss 和 utils.js 三个文件，分别对应通知库的主要逻辑、样式和小工具。
具体实现细节可以参考源代码，这里我们简单分析一下主要逻辑。
主要逻辑
以下是 gem-notify.js 的核心代码：
-- -------------------- ---- -------
----- --------------- - -
------ ---
----- ---
----- ---
------------ ---
-------- --
---- ---
------ ---
------- ------
--------- ------
------- ------
-------- ---
--
--- --------- - ------
--- ------------- - ---
-------- --------------------------- -
-- ----------------- -- -------- -
----------------- --- ------
------ -----
-
-- ------------------------ --- ---------- -
-------------------------
------ ----------------------
-
----- - ------ ----- ----- ------------ -------- ---- ------ ------- --------- ------- ------- - - ------------------------------ ---------
----- ------------ - --- ------------------- -
-----
-----
----
------
-------
------------------- -------
----- - ----------- --
---
-------------------------------------- -- -- -
-- ------------ ---------- --------- -
--------------------------
- ---- -- ------------- -
-------------------------
-
---
-- --------- -
-- ------- ----------------- --- ----------- -
---------------------------
- ---- -- ----------------------- -- ------ ------------------------------ --- ----------- -
------------------------------
-
-
-- ---------- -- ------------------ -- ------------------------------------ -
------------------------------------------------- -- -
------------------------------------ -
-----
-----
----
------
-------
------------------- -------
----- - ----------- --
---
---
-
-- --------- -
------------- -- -
--------------------------------
-- ---------
-
---------------------------------
------ -------------
-
-------- ------------------------------- -
---------------------
--------------------------------------------------------- ---
-
-------- ----------------------- -
----- ---------------------- -
-------------------------
-
--------- - ------
-这段代码实现了 @gemcook/notification 的主要功能，它包含了以下几个部分：
- 默认配置项：
DEFAULT_OPTIONS。 - 通知状态记录：
isVisible和notifications。前者记录是否已经弹出了通知，后者是一个数组，记录了所有未关闭的通知。 createNotification函数，用来创建一个新的通知。它首先检查Notification API是否可用，以及用户是否已经授权。然后根据传入的配置项创建Notification对象，将其加入到notifications数组中，并返回该对象。closeNotification函数，用来关闭一个通知。它将清除对应的Notification对象，从notifications数组中移除。同时，在通知的超时时间到达时也会调用该函数，自动关闭该通知。closeAllNotifications函数，用来关闭所有未关闭的通知。它将依次调用closeNotification函数。- 当有操作发生时，如用户点击通知，
Notification对象会发出click、close等事件，我们可以通过监听这些事件来实现一些复杂的功能。
总结
@gemcook/notification 是一款非常方便且易于使用的通知插件，可以帮助我们在浏览器中以及 Node.js 环境下快速创建通知。同时，它具备丰富的配置项和 API，可以让我们更加灵活地定制通知的外观和行为。在实现细节上，它利用了 Notification API，以及 ES6 的一些语法和模块化工具，具有很高的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87657