在前端开发中，我们经常需要使用一些通用的功能或者组件。随着 Vue、React 等框架的普及，组件化已经成为前端开发的趋势。而 npm 包正是我们获取这些通用功能或者组件的重要渠道之一。今天我们来介绍一款名为 @noblocknoparty/shared 的 npm 包，它提供了一些常用的工具方法和 Vue 组件。
安装
在使用 @noblocknoparty/shared 之前，我们需要在项目中安装这个 npm 包。可以通过以下命令进行安装：
npm i @noblocknoparty/shared
或者你可以使用 yarn 进行安装：
yarn add @noblocknoparty/shared
工具方法
1. debounce 防抖
debounce 防抖是指在一段时间内，如果事件被连续触发多次，则只执行最后一次触发的事件。这个功能可以用于优化搜索框等交互场景。
-- -------------------- ---- ------- ------ - -------- - ---- ------------------------ -------- -------- - -- --- - -- ---------------------------------- ----- -------------- - ---------------- ---- -- - ------ ------------ -------------- ------------------------------- ---------------
2. throttle 节流
throttle 节流是指在一段时间内，事件只能被触发一次。这个功能可以用于限制某些操作的执行频率，比如浏览器滚动事件。
-- -------------------- ---- ------- ------ - -------- - ---- ------------------------ -------- ----- - -- --- - -- ---------------------------------- ----- ----------- - ------------- ---- -- - ------ ------------ ----------- --------------------------------- ------------
3. isPlainObject 判断是否是普通对象
isPlainObject 是一个用于判断是否是普通对象的工具方法。
import { isPlainObject } from '@noblocknoparty/shared'
console.log(isPlainObject({})) // true
console.log(isPlainObject(new Object())) // true
console.log(isPlainObject(Object.create(null))) // true
console.log(isPlainObject([])) // false
console.log(isPlainObject(function(){})) // false
console.log(isPlainObject(null)) // false4. isEmpty 判断是否是空对象
isEmpty 是一个用于判断是否是空对象的工具方法。
import { isEmpty } from '@noblocknoparty/shared'
console.log(isEmpty({})) // true
console.log(isEmpty(new Object())) // true
console.log(isEmpty(Object.create(null))) // true
console.log(isEmpty([])) // true
console.log(isEmpty({ a: 1 })) // false
console.log(isEmpty(new Date())) // falseVue 组件
@noblocknoparty/shared 还提供了四个通用的 Vue 组件。
1. Toast 组件
Toast 组件可以用于在页面上弹出消息提示框。
-- -------------------- ---- -------
----------
------- ---------------------------------
------ ----------------- -----------------------------
-----------
--------
------ - ----- - ---- ------------------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- -----
-
--
-------- -
----------- -
------------ - ----
-
-
-
---------2. Modal 组件
Modal 组件可以用于在页面上弹出模态框。
-- -------------------- ---- -------
----------
------- ---------------------------------
------ ------------------ ---------------------- -------------------------
------------
--------
-----------
--------
------ - ----- - ---- ------------------------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- -----
-
--
-------- -
----------- -
------------ - ----
--
-------------- -
------------ - -----
--
--------------- -
-- ---
-
-
-
---------3. Loading 组件
Loading 组件可以用于在页面上显示加载动画。
-- -------------------- ---- -------
----------
------- ----------------------------------
-------- ---------------------------
-----------
--------
------ - ------- - ---- ------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
-------- -----
-
--
-------- -
------------- -
------------ - ----
------------- -- -
------------ - -----
-- -----
-
-
-
---------4. Message 组件
Message 组件可以用于在页面上弹出消息提示框。
-- -------------------- ---- -------
----------
------- -----------------------------------
-------- ------------------ -----------------------------
-----------
--------
------ - ------- - ---- ------------------------
------ ------- -
----------- -
-------
--
------ -
------ -
-------- -----
-
--
-------- -
------------- -
------------ - ----
------------- -- -
------------ - -----
-- -----
-
-
-
---------总结
在本文中，我们介绍了一个名为 @noblocknoparty/shared 的 npm 包。这个包提供了一些常用的工具方法和 Vue 组件，可以让我们更轻松地完成一些常见的开发任务。我们通过实际的示例代码进行了演示，相信大家已经掌握了这些工具方法和组件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5951ab1864dac66ee1