npm 包 pcxcore-message 使用教程

随着前端技术的不断发展，我们已经不仅仅只是为了展示界面而写代码。现在，前端也可以用来实现各类功能。其中，消息通知是一个非常重要的功能，尤其是在开发协作中，及时的消息通知可以提高开发效率和工作效率。在这个领域里，pcxcore-message 这个 npm 包就可以帮助我们完成这项任务。

1. 安装和引用

使用 npm 安装此包：

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

安装完成后，在需要使用此组件的文件中，通过 import 引用：

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

2. 基本使用

在需要使用消息通知的地方，我们可以直接使用 Message 中的静态方法：

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

其中，message 参数是必填的，表示需要展示的文本内容；duration 控制消息框显示的时间长度，默认为 3 秒；onClose 是消息框关闭时的回调函数。

示例代码：

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

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

这样我们就可以在页面中显示一条成功的消息通知了。

3. 深度剖析

上述的基本使用方式只是 pcxcore-message 的冰山一角。接下来，我们将深入探讨该组件的源码及其底层原理。

3.1 封装 message 展示

在 pcxcore-message 组件中，展示消息的方法遵循了传统的单例模式。即，在组件被创建时，将 <div> 元素添加到页面中，并将该元素暴露出来，以便在后续使用中调用。

在该组件中，Message 就是单例对象，它拥有展示各类消息的 success、info、warning、error 等方法，以及清除消息展示的 destroy 方法。

我们可以通过在页面中调用 createMessage 函数，创建一个新的消息实例，在其中调用 Message 对象中的展示和清除方法，并将实例暴露出去，以便在后续操作中调用。

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

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

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

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

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

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

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

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

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

在安装了 pcxcore-message 包后，我们就可以在需要使用通知组件的地方，通过调用 createMessage 函数获取到消息实例对象。

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

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

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

在上述的代码中，我们首先通过 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 并创建实例：

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

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

在需要使用消息通知组件的 demo 代码中，我们可以非常容易地使用到它：

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

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

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

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

在上述代码中，我们通过 <li> 元素的点击事件，调用 message.info() 方法弹出信息提示框，表示用户点击了该元素。这是一个简单的使用场景，但是很好地展示了 pcxcore-message 消息框组件的实现方法。

最后，在我们的画板项目中，我们可以在协作处理的相关事件中调用 message 实例的各类方法，来实现消息通知的完整功能。

4. 总结

本文主要介绍了 pcxcore-message 这个 npm 包的使用方法和原理，并从自定义消息框和案例示范两个方面，进一步深入了解了该组件。随着前端技术的不断进化和应用，我们相信消息通知类组件在前端研发中的作用会越来越重要。介绍和学习过这些组件的原理和应用方法，对我们进行前端研发工作是非常有帮助的。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005735481e8991b448e95ea

阅读全文

猜你喜欢

  • npm 包 pcxcore-build 使用教程

    简介 在前端开发中，我们经常需要进行构建和打包，将多个 JavaScript 文件合并成一个、压缩代码、转换代码格式等等。这时候打包工具就非常重要了，而 npm 包 pcxcore-build 就是一...

    3 年前
  • npm 包 pcxcore-p2p 使用教程

    pcxcore-p2p 是一个基于 Node.js 的 P2P 网络模块，用于在浏览器和服务器之间建立点对点的连接。它使用了多种协议，包括 WebRTC，WebSocket，UDP 等，为前端开发者提...

    3 年前
  • npm 包 @perillosantana/ps-ajaxqueue 使用教程

    介绍 @perillosantana/ps-ajaxqueue 是一个基于 Promise 的 AJAX 调用队列库，它可以帮助你更好地处理 AJAX 调用的并发和顺序问题，让你的前端应用变得更加稳定...

    3 年前
  • npm 包 generator-vuestacks 使用教程

    简介 generator-vuestacks 是一个用于快速开发 Vue 项目的命令行工具，它可以自动生成一些基础的文件结构，包括组件、路由、状态管理等，让 Vue 开发更加高效和快捷。

    3 年前
  • npm 包 lycwed-cordova-plugin-admob-facebook 使用教程

    在移动应用开发中，广告可以帮助开发者获得额外收入并提高应用的知名度和曝光率。在前端开发中，我们通常使用 npm 包来集成第三方广告平台，其中 lycwed-cordova-plugin-admob-f...

    3 年前
  • npm 包 lycwed-cordova-plugin-admob-adcolony 的使用教程

    在前端开发过程中，经常需要使用广告插件来实现相关功能。而 lycwed-cordova-plugin-admob-adcolony 就是一个非常好用的 npm 包，它可以帮助使用者快速地在 Cordo...

    3 年前
  • npm 包 robots-txt-parser 使用教程

    介绍 npm 包 robots-txt-parser 是用于解析 robots.txt 文件的 Node.js 模块。robots.txt 文件是用于指定搜索引擎爬虫的访问权限和行为的文件，大部分搜索...

    3 年前
  • npm 包 saas-plat-graffiti-mongoose 使用教程

    前言 saas-plat-graffiti-mongoose 是一款常用于开发企业级应用的 MongoDB 数据库对象建模工具。它能够将 JavaScript 中的对象映射为 MongoDB 中的文档...

    3 年前
  • npm 包 bower-alternative-source-resolver 使用教程

    在前端开发中，使用包管理工具是非常常见的。brower 是一个包管理工具，它可以轻松地安装和管理前端库和框架。然而，bower 因为一些原因，已经被弃用了，现在我们需要使用其他代替工具。

    3 年前
  • npm 包 brewery-cli 使用教程

    作为前端开发人员，我们经常需要处理各种不同的任务，例如管理依赖、构建项目、上传文件等等。常常需要使用一些命令行工具来处理这些任务。npm 是前端开发人员的不二选择，它提供了很多方便快捷的命令行工具，其...

    3 年前
  • npm 包 sense-components-capabilities-api 使用教程

    介绍 Sense Components 是一套基于 React 构建的 UI 组件库，其中包含了许多常用的组件，例如按钮、表单、菜单等。而 sense-components-capabilities-...

    3 年前
  • npm 包 brsolab-tmp 使用教程

    前言 brsolab-tmp 是一个简单而实用的 npm 包，旨在提供一些常用的前端工具函数和组件。本文将介绍如何使用这个包，并提供一些实用的示例代码，以便读者更好地理解和应用它。

    3 年前
  • npm 包 cordova-qiniu 使用教程

    简介 在前端开发中，文件上传是一个非常重要的功能，而云储存服务七牛云是一个很好的选择。在使用七牛云进行文件上传时，可以使用 npm 包 cordova-qiniu，该包可以在 Cordova 环境下使...

    3 年前
  • npm 包 lycwed-cordova-plugin-admob-mobfox 使用教程

    什么是 lycwed-cordova-plugin-admob-mobfox？ lycwed-cordova-plugin-admob-mobfox 是一个能够集成广告插件的 npm 包，主要支持 C...

    3 年前
  • npm 包 pseudo-cheerio 使用教程

    前言 在前端开发中，我们经常需要从 HTML 中提取元素或元素属性。为了实现这一目的，我们通常使用 cheerio 这个流行的 npm 包。不过，在某些情况下，cheerio 的性能并不理想。

    3 年前
  • npm 包 node-raiblocks-rpc 使用教程

    Node-raiblocks-rpc 是一个用于和 RaiBlocks 节点交互的 Node.js 库，通过该库可以方便地与 RaiBlocks 节点进行通信并获取一些信息，例如账户余额、交易记录等。

    3 年前
  • npm 包 server-send 使用教程

    在前端开发中，通过向服务器请求数据来刷新页面是一种常见的方法。但是，这种方法存在着一些缺点，例如需要频繁的请求数据以及服务器响应时间慢等问题。为了解决这些问题，我们可以使用 server-send 技...

    3 年前
  • npm 包 swagger-client-async 使用教程

    什么是 swagger-client-async？ Swagger-client-async 是一个用于从 Swagger API 自动创建客户端库的 NPM 包。

    3 年前
  • npm 包 @jeremiergz/mongodzilla 使用教程

    简介 @jeremiergz/mongodzilla 是 Node.js 中一个方便的 MongoDB 数据库操作工具包。它提供了简单易用的 API，方便开发人员进行 MongoDB 数据库的增删改查...

    3 年前
  • npm 包 @mjmasn/core-util-is 使用教程

    前言 在前端开发中，我们经常需要对数据类型进行判断和转换。而 @mjmasn/core-util-is 就是一个 JS 工具库，提供了一系列方法可以进行判断数据类型以及实现深比较。

    3 年前

相关推荐

    暂无文章