npm 包 dh-jsf 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

dh-jsf（DingHua JavaScript Framework）是一个轻量级的前端 JavaScript 框架，它提供了一些常用的工具函数和组件，能够帮助我们更快更简便地开发前端项目。

该框架已经发布为 npm 包，所以我们只需要在项目中安装并引入 dh-jsf，就能开始愉快地开发了。

本文将详细介绍如何安装和使用 dh-jsf，并提供一些简单的示例代码。

安装

我们可以使用 npm（或 yarn）来安装 dh-jsf：

npm install dh-jsf

或

yarn add dh-jsf

引入

在项目中引入 dh-jsf 的方法有两种：

方式一（推荐）：直接引入

import dh from "dh-jsf";

// 使用 dh 工具函数或组件

方式二：按需引入

import { utils } from "dh-jsf";

// 使用 utils 工具函数

import { components } from "dh-jsf";

// 使用 components 组件

需要注意的是，按需引入时，需要根据自己的需求选择要引入的工具函数或组件。

工具函数

dh-jsf 提供了许多常用的工具函数，包括但不限于以下内容：

`utils.dateFormat(date, format)`

功能：将日期格式化为指定格式的字符串
参数：
- date （必填）：需格式化的日期对象
- format（必填）：格式化字符串，例如 yyyy-MM-dd HH:mm:ss
返回值：格式化后的字符串

import { utils } from "dh-jsf";

const date = new Date();
const str = utils.dateFormat(date, "yyyy-MM-dd HH:mm:ss");
console.log(str); // 输出如：2022-08-30 11:23:14

`utils.throttle(fn, delay)`

功能：节流，即 fn 最多每隔 delay 毫秒执行一次
参数：
- fn（必填）：执行的函数
- delay（必填）：间隔的时间
返回值：新函数，该函数是对原函数的包装

import { utils } from "dh-jsf";

function foo() {
  console.log("throttle test");
}

const newFn = utils.throttle(foo, 1000); // 最多每隔 1000 毫秒执行一次 foo 函数
window.addEventListener("scroll", newFn);

`utils.param(obj)`

功能：将对象转为 URL 查询参数的字符串形式
参数：
- obj（必填）：需转换的对象
返回值：转换后的字符串

import { utils } from "dh-jsf";

const params = { name: "test", age: 18 };
const str = utils.param(params);
console.log(str); // 输出如：name=test&age=18

`utils.parseParams(paramsStr)`

功能：将 URL 查询参数的字符串形式转为对象
参数：
- paramsStr（必填）：需转换的查询参数字符串
返回值：转换后的对象

import { utils } from "dh-jsf";

const paramsStr = "name=test&age=18";
const obj = utils.parseParams(paramsStr);
console.log(obj); // 输出如：{ name: "test", age: 18 }

`utils.addEvent(el, type, fn)`

功能：绑定事件
参数：
- el（必填）：需要绑定事件的元素
- type（必填）：事件类型，例如 click
- fn（必填）：事件处理函数
返回值：无

import { utils } from "dh-jsf";

const button = document.querySelector("#button");
utils.addEvent(button, "click", function () {
  console.log("button clicked");
});

`utils.removeEvent(el, type, fn)`

功能：解绑事件
参数：
- el（必填）：需要解绑事件的元素
- type（必填）：事件类型，例如 click
- fn（必填）：事件处理函数
返回值：无

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

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

`utils.addClass(el, className)`

功能：为元素设置类名
参数：
- el（必填）：需要设置类名的元素
- className（必填）：类名字符串
返回值：无

import { utils } from "dh-jsf";

const box = document.querySelector(".box");
utils.addClass(box, "active"); // 添加 .active 类名

`utils.removeClass(el, className)`

功能：为元素移除类名
参数：
- el（必填）：需要移除类名的元素
- className（必填）：类名字符串
返回值：无

import { utils } from "dh-jsf";

const box = document.querySelector(".box");
utils.removeClass(box, "active"); // 移除 .active 类名

`utils.hasClass(el, className)`

功能：判断元素是否包含指定类名
参数：
- el（必填）：需要判断的元素
- className（必填）：类名字符串
返回值：布尔值，true 表示包含，false 表示不包含

import { utils } from "dh-jsf";

const box = document.querySelector(".box");
console.log(utils.hasClass(box, "active")); // 判断 .box 是否包含 .active 类名

组件

dh-jsf 还提供了一些常用的组件，包括但不限于以下内容：

`components.Modal`

功能：弹窗组件
参数：
- options（可选）：配置对象，包括以下属性：
  - title：弹窗标题，默认为空字符串
  - content：弹窗内容，默认为空字符串
  - onOk：点击确定按钮的回调函数，默认为空函数
  - onCancel：点击取消按钮的回调函数，默认为空函数
返回值：Modal 实例（可以通过实例方法来控制弹窗的显示和隐藏）

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

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

`components.Toast`

功能：轻提示组件（类似于微信Toast）
参数：
- options（可选）：配置对象，包括以下属性：
  - text：提示文本，默认为"操作成功"
  - duration：提示持续时间（单位：毫秒），默认为 2000 毫秒
返回值：无

import { components } from "dh-jsf";

components.Toast.show("操作成功"); // 显示轻提示，默认持续 2000 毫秒
//components.Toast.hide(); // 隐藏轻提示

`components.Loading`

功能：加载中组件
参数：无
返回值：Loading 实例（可以通过实例方法来控制加载中的显示和隐藏）

import { components } from "dh-jsf";

const loading = new components.Loading();
loading.show(); // 显示加载中
//loading.hide(); // 隐藏加载中

说明

dh-jsf 是一个轻量级的前端 JavaScript 框架，其提供了一些常用的工具函数和组件，能够帮助我们更快更简便地开发前端项目。

感谢支持 dh-jsf 的各位开发者，也欢迎更多的开发者加入 dh-jsf 的开发行列。

如果您对 dh-jsf 有任何疑问或建议，请联系 dh-jsf 的作者：xxxxxx

参考资料

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