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

什么是 gm-tools

gm-tools 是一个适用于前端项目的 npm 包，它集成了一些常用的前端工具，包括日期格式化、图片压缩与裁剪、URL 参数处理等。它可以省去我们自己去写这些函数的时间，有效提高了开发效率。

如何安装 gm-tools

安装 gm-tools 非常简单，只要在命令行中输入以下命令即可：

npm install gm-tools

gm-tools 的使用方法

日期格式化

gm-tools 中提供了一个格式化日期的方法：

import { dateFormat } from 'gm-tools';

console.log(dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'));

其中第一个参数为 Date 类型的对象，第二个参数为日期格式字符串。Date 对象可以使用 new Date() 来创建，日期格式串中支持的占位符包括年份（yyyy）、月份（MM）、日（dd）、小时（hh）、分钟（mm）以及秒钟（ss）。

图片压缩与裁剪

gm-tools 提供了图片的压缩以及裁剪功能。

图片压缩

import { compressImage } from 'gm-tools';

const compressedImageBlob = await compressImage(file, 0.8); // 第一个参数为 File 类型的文件对象，第二个参数为压缩比例，取值范围为 0 - 1

该方法将返回经过压缩后的 Blob 类型对象，可以将该对象转换成 URL 地址进行加载或者上传至服务器。

图片裁剪

import { cropImage } from 'gm-tools';

const url = 'https://example.com/image.jpg';
const croppedImageBlob = await cropImage(url, { x: 0, y: 0, width: 200, height: 200 }); // 第一个参数为图片 URL 地址，第二个参数是一个对象，包含裁剪区域的左上角坐标以及宽高

该方法将返回经过裁剪后的 Blob 类型对象，可以将该对象转换成 URL 地址进行加载或者上传至服务器。

URL 参数处理

在前端开发中，我们常常需要对 URL 中的参数进行处理。gm-tools 中提供了一个较为方便的处理方法。

import { getQueryParams, setQueryParams } from 'gm-tools';

const url = 'https://example.com?param1=value1&param2=value2';
const params = getQueryParams(url); // 将返回一个对象，包含 URL 中的各个参数及其对应的值

const newURL = setQueryParams(url, { param2: 'new_value', param3: 'value3' }); // 第一个参数为原始 URL 地址，第二个参数为一个对象，包含需要修改或新增的参数

getQueryParams 方法将返回一个对象，该对象包含 URL 中的各个参数以及它们对应的值。setQueryParams 方法可以修改 URL 中的某些参数，以新的 URL 地址形式返回。

总结

gm-tools 是一款非常实用的前端工具包，可以为开发者提高开发效率。除了上述介绍的几种使用方法，它还提供了其他的一些工具方法，可以满足日常开发的大部分需求。希望本文能够对读者有所帮助。

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