随着前端技术的不断发展，我们已经不仅仅只是为了展示界面而写代码。现在，前端也可以用来实现各类功能。其中，消息通知是一个非常重要的功能，尤其是在开发协作中，及时的消息通知可以提高开发效率和工作效率。在这个领域里，pcxcore-message 这个 npm 包就可以帮助我们完成这项任务。
1. 安装和引用
使用 npm 安装此包：
npm install pcxcore-message --save
安装完成后，在需要使用此组件的文件中，通过 import 引用：
import { Message } from 'pcxcore-message'2. 基本使用
在需要使用消息通知的地方，我们可以直接使用 Message 中的静态方法：
Message.success(message[, duration[, onClose]]) Message.info(message[, duration[, onClose]]) Message.warning(message[, duration[, onClose]]) Message.error(message[, duration[, onClose]])
其中，message 参数是必填的，表示需要展示的文本内容；duration 控制消息框显示的时间长度，默认为 3 秒；onClose 是消息框关闭时的回调函数。
示例代码：
import { Message } from 'pcxcore-message'
Message.success('消息发送成功！')
这样我们就可以在页面中显示一条成功的消息通知了。
3. 深度剖析
上述的基本使用方式只是 pcxcore-message 的冰山一角。接下来，我们将深入探讨该组件的源码及其底层原理。
3.1 封装 message 展示
在 pcxcore-message 组件中，展示消息的方法遵循了传统的单例模式。即，在组件被创建时，将 <div> 元素添加到页面中，并将该元素暴露出来，以便在后续使用中调用。
在该组件中，Message 就是单例对象，它拥有展示各类消息的 success、info、warning、error 等方法，以及清除消息展示的 destroy 方法。
我们可以通过在页面中调用 createMessage 函数，创建一个新的消息实例，在其中调用 Message 对象中的展示和清除方法，并将实例暴露出去，以便在后续操作中调用。
-- -------------------- ---- -------
-- ----------------
------ - ------- - ---- -----------------
--- --------------- - ----
----- ------------------ - -- -- -
------------------- -
------ ---------------
-
------ ---------------- - --------
-
----- ------------- - -- -- -
------ -
---------------- -------- - -- ------- - -- -- --- -
----- -------- - --------------------
------------------------- --------- --------
--
------------- -------- - -- ------- - -- -- --- -
----- -------- - --------------------
---------------------- --------- --------
--
---------------- -------- - -- ------- - -- -- --- -
----- -------- - --------------------
------------------------- --------- --------
--
-------------- -------- - -- ------- - -- -- --- -
----- -------- - --------------------
----------------------- --------- --------
--
--------- -
----- -------- - --------------------
------------------
--------------- - ----
--
-
-
------ ------- -------------在安装了 pcxcore-message 包后，我们就可以在需要使用通知组件的地方，通过调用 createMessage 函数获取到消息实例对象。
// index.js
import createMessage from './createMessage.js'
const message = createMessage()
message.success('Hello World!')在上述的代码中，我们首先通过 import 语句导入了 createMessage 方法，并在代码的主体部分中调用该方法创建消息实例对象。接下来，我们通过实例对象调用 success 方法显示一条成功通知。到这里，我们已经完成了一条基本消息的展示。
3.2 自定义消息框
基于 pcxcore-message 提供的基本展示方法，我们可以很容易地扩展出自定义展示的方法。
首先，我们可以从 pcxcore-message 组件中导入 Notification 组件，并将其挂在到页面指定元素上。同时，我们将修改默认的展示 UI，以便实现更加自由灵活的展示样式。
-- -------------------- ---- -------
-- ----------------
------ - ------- - ---- -----------------
------ ------------ ---- ----------------------------------
--- --------------- - ----
----- ------------------ - -- -- -
------------------- -
------ ---------------
-
----- --- - -----------------------------
------------------------------
----- -------- - --- -----
--- ----
----------- - ------------ --
------ -
------ -
--------- ---
-
--
-------- -
----------------- -
----- - -------- ----- --------- ------- - - -----
----- -------- - ------------------------------------
----- ----- - ------------------------- -- ----- -- ---------
-------- -- -- -
------------------------- - -----
------------- -- -
--------------------------- --
-- ----
-
--------------------
---- ---------
--------
-----
--------- -------- - -----
--------
----- -----
--
--
----------------------- -
----- ----- - ------------------------- -- ----- -- ---------
-------- -- -- -
------------------------- - -----
------------- -- -
--------------------------- --
-- ----
-
--
--
--------- -
------ --------------- -
------ -
--------- --------------
----------- ----------------
-------------- -------------------
-
--
--
--
--------------- - ---------------------
------ ---------------
-
----- ------------- - -- -- -
------ -
---------------- --------- -------- -
----- -------- - --------------------
--------------------- -------- ----- ---------- --------- ------- --
--
------------- --------- -------- -
----- -------- - --------------------
--------------------- -------- ----- ------- --------- ------- --
--
---------------- --------- -------- -
----- -------- - --------------------
--------------------- -------- ----- ---------- --------- ------- --
--
-------------- --------- -------- -
----- -------- - --------------------
--------------------- -------- ----- -------- --------- ------- --
--
--------- -
----- -------- - --------------------
----------------- - --
--------------- - ----
--
-
-
------ ------- -------------在代码中，我们封装了一个名为 Notification 的组件，在其中定义了层级为 10000 的基础样式。为实现自定义展示，我们将 pcxcore-message 的展示代码复制到 Notification 的模板代码中，并做了相应的修改。此外，我们还增加了事件回调函数，用于实现添加和删除消息通知的逻辑。
-- -------------------- ---- -------
-- ----------------
----------
---- ---------------------
----------------- --------- ------------------- ----------------------
---- ----------------
--------------
--------------- - ----------
--------- --------------------- ------------- - --------- ---
---- --------------------
-- ---------------- ---------------- - ---------------
---- ---------------- ---------------------------
------
-- ----------------- ------------------------------------
------
-------------------
------
-----------
--------
------ ------- -
------ -
--------- -
----- ------
-------- -- -- ---
--
----------- ---------
-------------- ---------
--
--------- -
----- --------------- - -- -- -
----- ----- - ------------------------------
-----------------------------------
-
--------------- - --------------- -- ------------
------------------ - ------------------ -- ------------
-----------------
--
----------- -
----- --------------- - -- -- -
----- ----- - ------------------------------
--------------------------------------
-
----------------------
-------------------
-----------------
--
-
---------
-------
---
- ------------ ------------------------
--
------------- -
-------- -----
---------------- -------
------------ -----------
--------------- -----
-------- ------
--------- ------
---- --
----- --
------ --
------- --
-
------------ -
----------- -----
-
--------- -
----------- - --- ---- ---------------
----------- -----
-------------- --
-------------- ----
-------- -----
------------- -----
----------------- -----
--------- ---------
-------------- -----
--------------- ----
---------- -------------
-
--------------- -
------------------ -------
-
----------------- -
------------------ -------
-
-------------- -
------------------ -------
-
----------------- -
------------------ -------
-
------------ -
-------- -----
-------------- -----
------------ -----
---------- --
-
------------ --------- -
------------- -----
---------- -----
----------- ----- --- ---------
-
------------ --------- -
------------ -------- ------------------------
---------- -----
---------- --
--------------- ------
------ -----
-
---------- -
--------- ---------
------ -----
---- -----
------ -----
---------- -----
---------- ----------
-------- ---
----------- ------- --- ---------
------- --------
-
---------------- -
-------- ---
-
---------- ---- -
-- -
-------- --
---------- -------------
-
-
---------- ---- -
-- -
-------- --
---------- ----------------
-
-
---------- -
---------- -----------------
-------------------- -----
-
----------------- -
------------------- ----
-------------------------- --------------------------------
--------------- -----
-
---------- -
-------------------- -----
-
----------------- -
------------------- ----
-------------------------- ------------------------------
--------------- -----
-
--------3.3 案例示范
在前面我们已经介绍了如何安装、引用、以及自定义 pcxcore-message 消息通知组件。下面，我们结合一个实际的案例，进一步说明该组件的使用和场景应用。
假设我们现在正在开发一个在线画板应用，该应用允许多个用户协同绘制图形。在这种协作，大家会有相互的消息通知，例如其他用户新建了一个绘制组件，或是有人退出了当前绘制应用。这时候我们可以利用 pcxcore-message 组件来实现这样的场景。
首先，我们需要考虑如何将这个组件封装在我们的项目中。在项目中创建 message.js 文件，并在其中导入 pcxcore-message 并创建实例：
// message.js import CreateMessage from 'pcxcore-message' export const message = CreateMessage()
在需要使用消息通知组件的 demo 代码中，我们可以非常容易地使用到它：
-- -------------------- ---- -------
----------
-----
-------------
----
--- ----------- -- --------- -------------- --------------------------------- ------------- -------
-----
------
-----------
--------
------ - ------- - ---- ------------
------ ------- -
------ -
------ -
--------- ----- -- --------- ------- ---- -- --------- ---------
-
--
-------- -
--------------------- -
------------------------------ ----------
--
--
-
---------在上述代码中，我们通过 <li> 元素的点击事件，调用 message.info() 方法弹出信息提示框，表示用户点击了该元素。这是一个简单的使用场景，但是很好地展示了 pcxcore-message 消息框组件的实现方法。
最后，在我们的画板项目中，我们可以在协作处理的相关事件中调用 message 实例的各类方法，来实现消息通知的完整功能。
4. 总结
本文主要介绍了 pcxcore-message 这个 npm 包的使用方法和原理，并从自定义消息框和案例示范两个方面，进一步深入了解了该组件。随着前端技术的不断进化和应用，我们相信消息通知类组件在前端研发中的作用会越来越重要。介绍和学习过这些组件的原理和应用方法，对我们进行前端研发工作是非常有帮助的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005735481e8991b448e95ea