npm 包 tsl-system-core 使用教程

简介

tsl-system-core 是一个基于 TypeScript 的前端开发常用工具集合，包括但不限于常用类型、数组、对象、日期、时间、字符串等等工具函数。同时它支持 Tree Shaking，在项目中只引入需要的部分即可轻松减少项目体积。

安装

如果您使用的是 npm：

npm install tsl-system-core --save

如果您使用的是 yarn：

yarn add tsl-system-core

使用

1. 引入

在项目中引入 tsl-system-core，方法如下：

import * as TslSystemCore from 'tsl-system-core';

或者按需引入，方法如下：

import { isArray, isString } from 'tsl-system-core';

2. 常用函数

isArray

用于判断一个对象是否为数组，如果是返回 true，否则返回 false。

const arr = [1, 2, 3];
const notArr = '123';

console.log(isArray(arr)); // true
console.log(isArray(notArr)); // false

isString

用于判断一个对象是否为字符串，如果是返回 true，否则返回 false。

const str = 'Hello World';
const notStr = 123;

console.log(isString(str)); // true
console.log(isString(notStr)); // false

formatDate

用于将 Date 对象格式化成固定格式的字符串，并返回该字符串。

const date = new Date();

console.log(formatDate(date, 'yyyy-MM-dd')); // '2021-12-31'
console.log(formatDate(date, 'yyyy年MM月dd日')); // '2021年12月31日'

parseDate

用于将字符串解析成 Date 对象，并返回该对象。

const dateStr = '2021-12-31';

console.log(parseDate(dateStr)); // Fri Dec 31 2021 00:00:00 GMT+0800 (中国标准时间)

formatBytes

用于将字节数格式化成易读的文件大小格式，并返回格式化后的字符串。

const size = 1024 * 1024;

console.log(formatBytes(size)); // '1 MB'

debounce

用于防抖，将一个函数返回一个新的函数，新函数在连续调用时，只会执行一次，并在调用结束后延时特定的时间。

function handleInput() {
  console.log('input');
}

const debouncedHandler = debounce(handleInput, 500);

document.getElementById('input').addEventListener('input', debouncedHandler);

throttle

用于节流，将一个函数返回一个新的函数，新函数在连续调用时，只会每隔特定的时间执行一次。

function handleInput() {
  console.log('input');
}

const throttledHandler = throttle(handleInput, 500);

document.getElementById('input').addEventListener('input', throttledHandler);

总结

tsl-system-core 是一个实用的前端工具库，拥有丰富的工具函数，可以提高前端开发的效率，同时也支持 Tree Shaking，可以轻松减小项目体积。在项目中使用 tsl-system-core，可以让项目更加清晰和高效。

参考

• tsl-system-core 在 GitHub 上的仓库

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