前言
前端开发人员在进行开发过程中，经常会用到各种各样的包，这些包大多存在于 npm 包管理器上，方便开发人员调用。而对于一些公共资源，我们亦可以选择将其存放在 CDN 上，以提高页面的加载速度和性能表现。@use-cdn/common 就是一个基于 CDN 加载的常用资源依赖库，通过调用该库，可大幅度提高页面加载速度和性能。
安装
使用该包前，需要先在项目中安装该包。您可以使用以下命令进行安装：
npm i @use-cdn/common -S
使用方法
引入资源
通过以下代码，您可以在项目中引入我们的公共资源：
import { ui, utils } from '@use-cdn/common'我们的公共资源主要包括两个部分：
- UI 库：ui
- 工具库：utils
在需要使用任意一个资源之前，您均需要先进行引入。
使用 UI 库
@use-cdn/common 提供了一系列常用的 UI 组件，我们来一一介绍一下。
Button
Button 是一个常用的按钮组件，支持各种主题风格。
-- -------------------- ---- -------
------ - -- - ---- -----------------
----- ------ - --- -----------
----- -----
-------- ----------
------ -------
-------- -- -- -
-- -------------
-
--
------------------------------Button 组件支持以下参数：
text：按钮文本bgColor：按钮背景色color：按钮文本颜色onClick：点击事件回调函数
Modal
Modal 是一个常用的弹窗组件，支持带有遮罩或不带有遮罩。
-- -------------------- ---- -------
------ - -- - ---- -----------------
----- ----- - --- ----------
------ -------
------ --------
-- -------------------------------
-------------- ------
-- ---------
--------------- -----
-------- -
-
----- -----
-------- -------
------ -------
-------- -- -- -
-- -----------------
-
--
-
----- -----
-------- ----------
------ -------
-------- -- -- -
-- -----------------
-
--
--
-- ----
-------- -
-----
----
------
-
--
------------Modal 组件支持以下参数：
title：弹窗标题width：弹窗宽度maskCloseable：点击遮罩是否能够关闭弹窗，true：关闭，false：不能关闭buttonsVisible：是否展示底部按钮组buttons：底部按钮组，text：按钮文本，bgColor：按钮背景色，color：按钮文本颜色，onClick：按钮点击事件回调函数content：弹窗内容
使用 Utils 库
@use-cdn/common 的 Utils 库主要提供了一些常用的工具函数，我们来一一介绍一下。
debounce
debounce 函数主要用于函数防抖，防止函数在短时间内连续触发，限制函数调用的频率。
import { utils } from '@use-cdn/common'
const fn = () => {
console.log('debounce')
}
const debouncedFn = utils.debounce(fn, 1000)
window.addEventListener('scroll', debouncedFn)debounce 函数支持以下参数：
fn：需要进行防抖操作的函数wait：等待时间
throttle
throttle 函数主要用于函数节流，保证函数在指定时间内不被连续调用，限制函数调用的频率。
import { utils } from '@use-cdn/common'
const fn = () => {
console.log('throttle')
}
const throttledFn = utils.throttle(fn, 1000)
window.addEventListener('scroll', throttledFn)throttle 函数支持以下参数：
fn：需要进行节流操作的函数wait：等待时间
示例代码
-- -------------------- ---- -------
------ - --- ----- - ---- -----------------
----- ------ - --- -----------
----- -----
-------- ----------
------ -------
-------- -- -- -
------------------- ---------
-
--
------------------------------
----- ----- - --- ----------
------ -------
------ --------
-------------- ------
--------------- -----
-------- -
-
----- -----
-------- -------
------ -------
-------- -- -- -
------------------- ---------
-------------
-
--
-
----- -----
-------- ----------
------ -------
-------- -- -- -
-------------------- ---------
-------------
-
--
--
-------- -
-----
----
------
-
--
------------
----- -- - -- -- -
-----------------------
-
----- ----------- - ------------------ -----
--------------------------------- ------------
----- ----- - -- -- -
-----------------------
-
----- ----------- - --------------------- -----
--------------------------------- ------------总结
@use-cdn/common 是一个基于 CDN 加载的常用资源依赖库，通过该库，我们可以轻松地引入常用的 UI 组件和工具函数。使用该库，不仅可以大幅提高页面的加载速度和性能表现，还能够提高开发效率，开发人员可快速将该库应用到实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e04