atomix-fe

特性

安装

npm install atomix-fe
# 或
pnpm add atomix-fe
# 或
yarn add atomix-fe

使用方式

// 完整引入
import { capitalize, formatDate, debounce } from 'atomix-fe'
// 按模块引入(推荐,减少打包体积)
import { capitalize, camelCase } from 'atomix-fe/string'
import { formatDate, timeAgo } from 'atomix-fe/date'
import { debounce, throttle } from 'atomix-fe/browser'
import { addClass, createElement } from 'atomix-fe/dom'

功能列表

📝 string 字符串处理

🔍 type 类型判断

📦 array 数组操作

🗂️ object 对象操作

🔢 number 数字处理

📅 date 日期时间

🌐 browser 浏览器工具

🔗 url URL 工具

✅ validate 数据校验

📁 file 文件工具

🧮 math 数学计算

🎨 color 颜色处理

🔧 fp 函数式编程

⏳ promise Promise 工具

📡 event 事件总线

import { EventEmitter, eventBus } from 'atomix-fe/event'
// 创建实例
const emitter = new EventEmitter()
// 监听事件(返回取消订阅函数)
const unsubscribe = emitter.on('message', (data) => console.log(data))
// 触发事件
emitter.emit('message', 'Hello!')
// 取消订阅
unsubscribe()
// 或 emitter.off('message', handler)
// 全局事件总线
eventBus.emit('global-event', data)
eventBus.on('global-event', handler)

💾 storage 本地存储

import { localStore, sessionStore } from 'atomix-fe/storage'
// 存储(支持过期时间,单位秒)
localStore.set('token', 'xxx', 3600) // 1小时后过期
// 获取(自动反序列化)
const token = localStore.get<string>('token')
// 其他方法
localStore.has('token') // 检查是否存在
localStore.remove('token') // 删除
localStore.keys() // 获取所有 key
localStore.size() // 获取存储数量
localStore.clear() // 清空

🖱️ dom DOM 操作

import { $, $$, addClass, removeClass, createElement } from 'atomix-fe/dom'
// 选择器
const el = $('#my-element')
const els = $$('.item')
// 类名操作
addClass(el, 'active')
removeClass(el, 'active')
toggleClass(el, 'active')
hasClass(el, 'active') // → boolean
// 样式操作
setStyle(el, 'color', 'red')
setStyle(el, { color: 'red', fontSize: '16px' })
show(el) // 或 show(el, 'flex')
hide(el)
// 创建元素
const btn = createElement('button', {
 className: 'btn-primary',
 style: { padding: '0.5rem 1rem' },
 dataset: { id: '123' },
})
// DOM 操作
append(parent, child)
prepend(parent, child)
remove(el)
empty(parent)
// 文本和数据
setText(el, 'hello')
getText(el) // → 'hello'
setData(el, 'id', '1')
getData(el, 'id') // → '1'

开发

# 安装依赖
npm install
# 运行测试
npm test
# 构建
npm run build
# 运行 demo
cd demo && npm install && npm run dev

License