NPM包sdu-common使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

sdu-common 是一个由山东大学开发的前端工具库，包含了一系列辅助开发的工具函数和UI组件。此库的目的是为了方便前端开发人员快速开发高质量的应用程序。

安装和使用

首先，您需要在您的项目中安装 sdu-common。可以使用以下命令来安装：
```
npm install sdu-common --save
```
安装完成后，您可以通过以下代码来引入 sdu-common：
```
import common from 'sdu-common';
```
或者，您也可以按照下面的方式来引入特定的模块：
```
import { dateFormat } from 'sdu-common/time';
```
在这个例子中，我们只引入了 time 模块中的 dateFormat 函数。

注意：在使用 sdu-common 中的某个模块时，您需要在引入时指定该模块的路径。
在使用 sdu-common 的任何函数或组件之前，您需要通过执行以下代码来初始化：
```
common.init();
```
这将初始化所有 sdu-common 内部需要的配置和依赖项。

功能和使用详解

sdu-common 包含了许多工具函数和UI组件，以下是其中一些的详细使用说明：

时间相关

dateFormat(date, format)

该函数用于将 Date 类型的日期格式化为指定的格式。其中，date 为 Date 类型的日期，format 为格式化字符串。

import { dateFormat } from 'sdu-common/time';

const date = new Date();
const formattedDate = dateFormat(date, 'yyyy年MM月dd日');
console.log(formattedDate);
// 输出：2022年10月10日

getRemainTime(endTime, serverTime)

该函数用于计算倒计时剩余时间。其中，endTime 和 serverTime 分别为倒计时终止时间和当前服务器时间。返回值为剩余时间的对象。

import { getRemainTime } from 'sdu-common/time';

const endTime = '2022-10-20 12:00:00';
const serverTime = '2022-10-10 12:00:00';
const remainingTime = getRemainTime(endTime, serverTime);
console.log(remainingTime);
// 输出：{ days: 9, hours: 0, minutes: 0, seconds: 0 }

字符串相关

trim(str)

该函数用于去除字符串两端的空格。

import { trim } from 'sdu-common/string';

const str = '   Hello World!   ';
const trimmedStr = trim(str);
console.log(trimmedStr);
// 输出：Hello World!

encodeHTML(html)

该函数用于将字符串中的HTML特殊字符进行转义，防止XSS攻击。

import { encodeHTML } from 'sdu-common/string';

const html = '<script>alert(1);</script>';
const encodedHTML = encodeHTML(html);
console.log(encodedHTML);
// 输出：&lt;script&gt;alert(1);&lt;/script&gt;

数组相关

unique(arr)

该函数用于将数组中的重复元素去除。

import { unique } from 'sdu-common/array';

const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = unique(arr);
console.log(uniqueArr);
// 输出：[1, 2, 3, 4, 5]

shuffle(arr)

该函数用于将数组中的元素随机打乱顺序。

import { shuffle } from 'sdu-common/array';

const arr = [1, 2, 3, 4, 5];
const shuffledArr = shuffle(arr);
console.log(shuffledArr);
// 输出：[3, 1, 5, 4, 2]

UI组件

Modal

sdu-common 中提供了一个 Modal 组件，用于展示弹出框。Modal 组件支持自定义标题、内容和按钮，可以根据需求进行扩展。

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

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

在这个例子中，我们创建了一个带有标题、内容和确认取消按钮的弹出框，并在用户点击确认或取消按钮时分别输出了消息。您可以根据需要进行修改。

结论

sdu-common 是一个非常有用的前端工具库，可以帮助前端开发人员快速开发高质量的应用程序。本文介绍了 sdu-common 的安装、使用和不同模块的详细说明。希望这篇文章能够帮助到您，并为您的开发工作带来便利。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055fc281e8991b448dd1c3