简介
npm 是 Node.js 的包管理器，提供了丰富的第三方模块以及工具库，方便了前端开发者的工作。public.min.js 是一个基于 jQuery 和 Bootstrap 的轻量级前端框架，提供了丰富的组件和工具类，具有易用性和可扩展性。
本文介绍如何使用 npm 安装 public.min.js，以及如何使用其中的组件和工具类。
安装
在命令行中输入以下命令：
npm install public.min.js
即可完成安装。public.min.js 的源代码和文档可以在 GitHub 上 获取。
使用
使用 public.min.js 前，需要在 HTML 文件中引入 jQuery 和 Bootstrap：
<!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 Bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
接着，可以在 JavaScript 文件中引入 public.min.js：
const public = require('public.min.js');或者在 HTML 文件中直接引入：
<!-- 引入 public.min.js --> <script src="./node_modules/public.min.js/dist/public.min.js"></script>
组件
1. Alert
Alert 组件用于显示提示信息，支持四种类型：成功、警告、错误和信息。使用方式如下：
const alert = new public.Alert({
type: 'success', // 类型：success, warning, danger, info
message: '操作成功！' // 消息内容
});同时，可以添加多个 Alert 组件：
const alert1 = new public.Alert({/**/});
const alert2 = new public.Alert({/**/});
const alert3 = new public.Alert({/**/});2. Modal
Modal 组件用于弹出对话框，提供了多种选项和回调函数，使用方式如下：
const modal = new public.Modal({
title: '操作确认', // 标题
message: '确认删除吗？', // 提示信息
cancelButton: true, // 是否显示取消按钮
callback: function() { // 点击确认时执行的回调函数
// 删除操作
}
});同时支持多种样式和大小：
-- -------------------- ---- ------- -- ---- ----- ------ - --- --------------------- -- ------ ----- ------ - --- -------------- ----- --------- ---- -- ------ --- -- ------ ----- ------ - --- -------------- ----- ----------- ---- -- ------ --- -- ---- ----- ------ - --- -------------- ----- ----- ---- -- ------ --- -- ---
3. Toast
Toast 组件用于显示短暂的提示信息，支持四种类型和多种选项，使用方式如下：
const toast = new public.Toast({
type: 'success', // 类型：success, warning, danger, info
message: '操作成功！', // 消息内容
delay: 3000, // 延迟消失的时间，单位：毫秒
position: 'topRight' // 位置：topLeft, topRight, bottomLeft, bottomRight
});同时支持其他选项，例如动画、自动隐藏等：
const toast = new public.Toast({
/**/,
animation: true, // 是否使用动画效果
autohide: true // 是否自动隐藏
});工具类
public.min.js 提供了多种工具类，例如日期处理、地图 API 等，这里以常用的表单验证为例。
1. Validator
Validator 工具类用于表单验证，支持多种规则和错误提示，使用方式如下：
-- -------------------- ---- -------
----- --------- - --- ------------------
----- ---------------- -- ------- --
------ - -- ----
--------- --------------------------------------
--------- -------------------------------------
--
--------- - -- ----
--------- -
--------- ---------
----------- ---------- - -----
----------- ---------- -- -----
--
--------- -
--------- --------
----------- --------- - -----
----------- --------- -- -----
-
-
---支持的验证规则如下：
| 规则 | 描述 |
|---|---|
| required | 必填 |
| 邮箱格式 | |
| mobile | 手机号格式 |
| min_length:x | 最小长度为 x |
| max_length:x | 最大长度为 x |
| range_length:x,y | 长度在 x 和 y 之间 |
| range:x,y | 值在 x 和 y 之间 |
| equal:fieldName | 与指定字段相等 |
| regex:pattern | 自定义正则表达式 |
示例代码
下面是一个完整的代码示例，展示了 public.min.js 的使用方式和效果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ----------
----- ---------------- -------------------------------------------------------------------------------
-------
------
---- ------------------
----------------- -------
---- ------------
---- --------------
--------- -------
------- ---------------- ---------- ----------------------------
------- ---------------- ---------- ----------------------------
------- -------------- ---------- ---------------------------
------- ------------- ---------- -------------------------
------
---- --------------
--------- -------
------- -------------- ---------- -----------------------------
------
---- --------------
--------- -------
------- -------------- ---------- ------------------------------
------
------
----
---- ------------
---- --------------
------------- --------
----- ----------------- -------------
---- ----------------- ------
------ ---------------------------
------ ----------- -------------------- ------------- ----------------
------
---- ----------------- ------
------ --------------------------
------ --------------- -------------------- ------------- ----------------
------
------- ------------- ---------- ------------------------
-------
------
---- --------------
------------ --------
-------- ----- ----------------------------
--------- ----- ---------------------------------
------
---- --------------
----------- --------
----------------
------ ----- --------------------------
------ ----- -------------------------
------
------
------
------- -----------------------------------------------------------
------- ---------------------------------------------------------------
--------
------------ -
-- -----
---------------------------------- -
----- ----- - --- --------------
----- ----------
-------- -------
---
---
---------------------------------- -
----- ----- - --- --------------
----- ----------
-------- ---------------
---
---
-------------------------------- -
----- ----- - --- --------------
----- ---------
-------- -----------
---
---
------------------------------- -
----- ----- - --- --------------
----- -------
-------- -----------
---
---
-- -----
-------------------------------- -
----- ----- - --- --------------
------ -------
-------- ---------
--------- ---------- -
-- ------
-
---
---
-- -----
-------------------------------- -
----- ----- - --- --------------
----- ----------
-------- --------
------ -----
--------- ----------
---
---
-- ---------
----- --------- - --- ------------------
----- ----------------
------ -
--------- --------------------------------------
--------- -------------------------------------
--
--------- -
--------- -
--------- ---------
----------- ---------- - -----
----------- ---------- -- -----
--
--------- -
--------- --------
----------- --------- - -----
----------- --------- -- -----
-
-
---
-- --------
----- ----------- - -------------------------- ------- --------------
----- ---------------- - ----------------------------- --------
------------------------------------
----------------------------------------------
-- -------
------------------------------------------ ---------------- -
---------------------------------
--------------------------------
---
---
---------
-------
-------总结
通过本教程，我们了解了如何使用 npm 安装和使用 public.min.js，以及如何使用其中的组件和工具类。
public.min.js 提供了众多的组件和工具类，能够大大提高开发效率，同时也能够加强前端开发者的技术储备。我们希望读者能够灵活运用 public.min.js，并在实践中不断探索与发现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244af5