@i.un/libs

一个实用的 TypeScript 函数库，提供跨平台的工具函数和实用程序。

📦 安装

npm install @i.un/libs
# 或
yarn add @i.un/libs
# 或
pnpm add @i.un/libs

🚀 快速开始

import { debounce, createElement, cloneDeep } from '@i.un/libs';

// 防抖函数
const debouncedFn = debounce(() => {
  console.log('防抖执行');
}, 300);

// 创建DOM元素
const button = createElement({
  tag: 'button',
  children: '点击我',
  attrs: { id: 'myButton' },
  styles: { color: 'red' }
});

// 深度克隆
const cloned = cloneDeep({ name: 'test', items: [1, 2, 3] });

📚 功能模块

🔧 通用工具 (Common)

防抖和节流

• debounce(func, wait) - 防抖函数
• delayExecution(callback, delay, ...args) - 延迟执行函数

对象操作

• cloneDeep(obj) - 深度克隆对象
• createDefaultObject(defaultValue) - 创建带默认值的代理对象
• isCloneable(obj) - 检查对象是否可克隆
• isPrimitive(value) - 检查值是否为原始类型

缓存和性能

• cacheWrapper(func, setting) - 为异步函数添加缓存功能
• singleExecutionWrapper(func) - 单次执行包装器
• generateStableUniqueKey(args) - 生成稳定的唯一键

存储

• MemoryStore - 内存存储类

🌐 浏览器工具 (Browser)

DOM 操作

• createElement(options) - 创建DOM元素
• createSvg(params) - 创建SVG元素
• createSvgFromUrl(url) - 从URL加载SVG

滚动控制

• scrollToBottom(dom) - 滚动到底部
• scrollToBottomIfNeeded(dom) - 智能滚动到底部

拖拽功能

• draggable - 拖拽相关功能

存储

• WebStore - 浏览器存储封装

🖥️ Node.js 工具 (Node)

• node - Node.js 环境相关工具

🔌 Chrome 扩展工具 (Chrome)

• ChromeStore - Chrome 扩展存储
• identity - Chrome 身份验证相关

📖 详细文档

防抖函数

import { debounce } from '@i.un/libs';

const debouncedSearch = debounce((query: string) => {
  console.log('搜索:', query);
}, 300);

// 快速连续调用只会执行最后一次
debouncedSearch('a');
debouncedSearch('ab');
debouncedSearch('abc'); // 只有这次会执行

DOM 元素创建

import { createElement } from '@i.un/libs';

// 创建简单元素
const div = createElement({
  tag: 'div',
  children: 'Hello World',
  styles: { color: 'blue', fontSize: '16px' }
});

// 创建复杂嵌套元素
const card = createElement({
  tag: 'div',
  attrs: { class: 'card' },
  children: [
    {
      tag: 'h2',
      children: '标题',
      styles: { margin: 0 }
    },
    {
      tag: 'p',
      children: '内容描述',
      styles: { color: '#666' }
    }
  ]
});

SVG 创建

import { createSvg, createSvgFromUrl } from '@i.un/libs';

// 从字符串创建SVG
const svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
`;
const svgElement = createSvg(svgString);

// 从VNode创建SVG
const vnode = {
  type: 'svg',
  props: { width: '100', height: '100' },
  children: [{
    type: 'circle',
    props: { cx: '50', cy: '50', r: '40', fill: 'red' },
    children: null
  }]
};
const svgFromVNode = createSvg(vnode);

// 从URL加载SVG
const svgFromUrl = await createSvgFromUrl('https://example.com/icon.svg');

缓存包装器

import { cacheWrapper } from '@i.un/libs';

// 包装异步函数添加缓存
const fetchUserData = cacheWrapper(async (userId: string) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.json();
}, {
  timeout: 10000,
  timeoutResult: { error: '请求超时' },
  identifier: 'userData'
});

// 第一次调用会执行请求
const user1 = await fetchUserData('123');

// 第二次调用会返回缓存结果
const user2 = await fetchUserData('123'); // 从缓存返回

深度克隆

import { cloneDeep } from '@i.un/libs';

const original = {
  name: 'test',
  items: [1, 2, { nested: true }],
  date: new Date()
};

const cloned = cloneDeep(original);
cloned.items.push(4); // 不会影响原对象

滚动控制

import { scrollToBottom, scrollToBottomIfNeeded } from '@i.un/libs';

const chatContainer = document.getElementById('chat');

// 强制滚动到底部
scrollToBottom(chatContainer);

// 智能滚动（只在用户未手动滚动时自动滚动）
scrollToBottomIfNeeded(chatContainer);

🧪 测试

npm test

📝 开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 生成文档
npm run doc

📄 许可证

ISC

👨‍💻 作者

zhyswan

🔗 相关链接

• GitHub Repository
• NPM Package