前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载Metro UI CSS 是一个面向高性能响应式 Web 应用的前端框架。为了让开发者以类似 React Hooks 的方式管理状态与副作用框架在全局命名空间Hooks中提供了 16 个即取即用的实用函数涵盖状态管理、函数式组合、DOM 事件、防抖节流、Cookie 与媒体查询等常见场景。阅读本文后你将掌握每个 hook 的签名、参数、返回值与典型用法并通过框架组件源码看到这些 hooks 在生产代码中的真实调用方式。Hooks命名空间基于olton/hooks包实现。在 source/hooks/index.js 中框架仅用两行代码完成挂载import * as Hooks from olton/hooks; globalThis.Hooks Hooks;因此在引入框架后你可以在任何脚本中直接使用Hooks.useState(...)、Hooks.useDebounce(...)等函数。该项目当前依赖的版本为olton/hooks: ^0.13.1见 package.json源码入口位于 source/hooks/README.md 对应的完整 API 文档。Hooks 命名空间总览Hooks命名空间共收录 15 个函数其中useToggle在文档中被单独列出共 16 个条目。按用途可分为四类状态与副作用useState状态变量、useToggle布尔开关、useMemo记忆化函数式组合useCompose从右向左组合、usePipe从左向右管道、useCurry柯里化、useDebounce防抖、useThrottle节流DOM 与浏览器 APIuseClickOutside外部点击、useEvent事件/变更监听、useId唯一 ID、useInterval定时器、useMediaQuery媒体查询、useCookieCookie 管理数据结构useQueue队列状态管理useState 与 useToggleuseState()useState用于创建状态变量及其修改函数签名与 React 的useState相似但额外支持onChange回调。参数如下initialValue状态的初始值。onChange可选状态变化时触发的回调接收(newValue, oldValue)两个参数。返回值是一个[value, setter]元组value是可转为原始值的对象因此count、String(count)均可用setter既支持直接赋值也支持函数式更新const onStateChange (newValue: number, oldValue: number) { console.log(State changed from ${oldValue} to ${newValue}); }; const [count, setCount] useState(0, onStateChange); console.log(count); // Logs: 0 setCount(5); // Logs: State changed from 0 to 5 setCount(prev prev 1); // Logs: State changed from 5 to 6 console.log(count); // Logs: 6 console.log(String(count)); // Logs: 6useToggle()useToggle返回一个开关对象用于管理布尔状态。返回值包含三个方法get()获取当前值toggle()翻转当前值set(value)显式设置。支持传入初始值默认false// Basic usage const toggle useToggle(); console.log(toggle.get()); // false toggle.toggle(); // true toggle.set(false); // false// Initialize with a custom starting value const toggle useToggle(true); console.log(toggle.get()); // true toggle.toggle(); // false toggle.set(true); // true函数式组合useCompose / usePipe / useCurryuseCompose()useCompose将多个函数从右向左组合即f(g(h(x))) compose(f, g, h)(x)——最右侧的函数先执行结果依次向左传递。不传任何函数时返回恒等函数identityconst add (x: number) x 1; const multiply (x: number) x * 2; const subtract (x: number) x - 3; // f(g(h(x))) subtract(multiply(add(x))) const composedMath useCompose(subtract, multiply, add); const result composedMath(5); // ((5 1) * 2) - 3 9 console.log(result); // Output: 9const trim (str: string) str.trim(); const toUpperCase (str: string) str.toUpperCase(); const exclaim (str: string) str !; const composedString useCompose(exclaim, toUpperCase, trim); const message composedString( hello world ); console.log(message); // Output: HELLO WORLD!// Example 3: No-op (when no functions are provided) const identity useCompose(); console.log(identity(42)); // Output: 42usePipe()与useCompose相反usePipe从左向右执行管道——前一个函数的输出作为后一个函数的输入。该工具针对0、1、2及更多个函数做了分级优化不传函数返回恒等函数传入一个函数直接返回该函数传入两个函数优化为二函数管道传入两个以上按顺序依次串联。// Piping two functions: adding 1 and doubling the result const addOne (x: number) x 1; const double (x: number) x * 2; const piped usePipe(addOne, double); console.log(piped(2)); // Output: 6// Using a function pipeline with strings const toUpperCase (str: string) str.toUpperCase(); const appendExclamation (str: string) ${str}!; const piped usePipe(toUpperCase, appendExclamation); console.log(piped(hello)); // Output: HELLO!// With no functions passed const piped usePipe(); console.log(piped(unchanged)); // Output: unchanged// Chaining multiple functions const increment (x: number) x 1; const square (x: number) x * x; const half (x: number) x / 2; const piped usePipe(increment, square, half); console.log(piped(2)); // Output: 4.5useCurry()useCurry将多元函数转换为可逐步接收参数的柯里化形式f(x, y, z) f(x)(y)(z)。不传参数时返回一个空操作调用结果为undefined// Example 1: Basic currying const add (x: number, y: number) x y; const curriedAdd useCurry(add); console.log(curriedAdd(2)(3)); // Output: 5// Example 2: String concatenation const concat (a: string, b: string, c: string) a b c; const curriedConcat useCurry(concat); console.log(curriedConcat(Hello)( )(World!)); // Output: Hello World!// Example 3: No-op (when no arguments are provided) const noop useCurry(); console.log(noop()); // Output: undefineduseMemo()useMemo记忆化函数执行结果可传入maxSize限制缓存条目数并暴露clearCache()方法清空缓存const add (a: number, b: number): number a b; const memoizedAdd useMemo(add, { maxSize: 3 }); // Memoized function calls console.log(memoizedAdd(1, 2)); // 3, computed console.log(memoizedAdd(1, 2)); // 3, from cache // Clear the cache memoizedAdd.clearCache(); console.log(memoizedAdd(1, 2)); // 3, computed again after cache clear性能控制useDebounce 与 useThrottleuseDebounce()useDebounce(fn, wait, options)将函数延迟到wait毫秒后执行适合输入联想、滚动监听等高频触发场景。支持以下行为原文档明确的约束immediate: true时函数在超时周期的前缘leading edge立即执行返回的函数带有cancel()方法可取消尚未执行的调用wait为负数时函数不会执行第一个参数不是函数时函数不会执行。// Example 1: Basic debouncing const log (message: string) console.log(message); const debouncedLog useDebounce(log, 1000); debouncedLog(Hello); // Will log Hello after 1 second// Example 2: Immediate const immediateLog useDebounce(log, 1000, { immediate: true }); immediateLog(Immediate Hello); // Will log Immediate Hello immediately// Example 3: Canceling const cancelableLog useDebounce(log, 1000); cancelableLog(Cancel me); // Will log Cancel me after 1 second cancelableLog.cancel(); // Cancels the debounced function// Example 4: No-op (when no arguments are provided) const noop useDebounce(); console.log(noop()); // Output: undefined在框架源码中useDebounce被大量用于输入阈值控制与滚动监听。例如 source/components/color-selector/color-selector.js 中onColorValuesChange Hooks.useDebounce(onColorValuesChange, o.inputThreshold)将颜色值变更回调按inputThreshold毫秒防抖source/components/list/list.js 中searchItem Hooks.useDebounce(searchItem, o.searchThreshold)控制列表搜索触发频率source/components/remote-dataset/remote-dataset.js 与 source/components/remote-table/remote-table.js 同样用它防抖远程数据检索source/components/marquee/marquee.js 用其防抖窗口 resize 事件。useThrottle()useThrottle(fn, wait, options)将函数限制为每wait毫秒至多执行一次可通过leading/trailing选项控制在前缘或后缘执行并支持cancel()取消挂起的尾部调用// Throttle a function that logs a message const throttledLog useThrottle((message) console.log(message), 1000, { leading: true }); throttledLog(Hello); // Logs Hello immediately throttledLog(World); // Ignored, as its within the 1000ms wait period setTimeout(() { throttledLog(Goodbye); // Logs Goodbye after 1000ms }, 1500);// Cancel pending execution const throttledFn useThrottle(() console.log(Executed), 2000); throttledFn(); throttledFn.cancel(); // Prevents the execution of the trailing callDOM 与浏览器 APIuseClickOutside / useEvent / useIduseClickOutside()useClickOutside(target, callback)检测目标元素外部的点击传入目标element与callback当点击发生在元素外部时执行回调。返回值解构出attach()与detach()两个方法用于手动挂载/移除监听const myDiv document.getElementById(my-div); const handleOutsideClick () { console.log(Clicked outside the div!); }; const { attach, detach } useClickOutside(myDiv, handleOutsideClick); // Attach the click listener attach(); // Later, if you need to remove the listener detach();useEvent()useEvent用于为 DOM 元素挂载事件与变更监听参数包含事件类型event、目标target与回调effect。它支持五类内置事件以EVENTS枚举定义load元素加载完成viewport元素进入或离开视口attribute元素的属性发生变化children元素的子节点发生变化data元素的数据发生变化。export enum EVENTS { LOAD load, VIEWPORT viewport, ATTRIBUTE attribute, CHILDREN children, DATA data, }useEvent({ event: EVENTS.LOAD, target: #myElement, effect: (el) console.log(Element loaded:, el), });从源码结构看target既支持 CSS 选择器字符串也支持元素引用。在组件实现中source/components/counter/counter.js 使用了Hooks.useEvent(...)说明该 hook 可嵌入组件生命周期用于监听元素变化。useId()useId为指定 key 生成全局唯一 IDID 内部存储以保证相同 key 复用同一 ID除非设置forceNew。参数说明key字符串、Symbol 或 HTMLElement用于生成 IDoptions可选配置对象包含prefixID 前缀字符串divider分隔符字符串forceNew布尔值为true时强制生成新 ID即使该 key 已存在 ID。// Generate an ID for a string key const id1 useId(my-key); console.log(id1); // Outputs: id-my_key-0 (depends on current counter)// Generate an ID with customization options const id2 useId(customElement, { prefix: custom, divider: -, forceNew: true }); // Outputs: custom-customElement-0 (depends on current counter) console.log(id2);// Reuse an existing ID for the same key const id1 useId(my-key); const id3 useId(my-key); console.log(id3 id1); // true// Generate IDs for different key types const id4 useId(symbolKey); const id5 useId(domElement); console.log(id4); // Example: id-symbol-1 console.log(id5); // Example: id-div-2useId是框架内部使用最频繁的 hook——几乎每个组件在初始化时都通过它为自身生成id。例如 source/components/accordion/accordion.js 使用Hooks.useId(accordion)生成面板容器 ID再分别生成标题与内容 ID 以建立 ARIA 关联source/components/select/select.js 为下拉容器与焦点触发器生成 IDsource/components/package-manager/package-manager.js 为 npm/pnpm/yarn/bun 四个标签页生成各自 ID。值得留意的是source/common-js/utilities.js 中保留的旧版 ID 生成工具已被标记为 Deprecated并注明改用Hooks.useId()可见它是当前框架 ID 生成的统一入口。定时与浏览器能力useInterval / useMediaQuery / useCookieuseInterval()useInterval(callback, delay)创建并管理一个定时器返回{ start, stop }const { start, stop } useInterval(() { console.log(Interval triggered); }, 1000); start(); // Starts the interval stop(); // Stops the intervaluseMediaQuery()useMediaQuery(query)监听指定媒体查询的变化返回布尔值表示当前是否匹配// Check if the viewport width is 600px or less const isSmallScreen useMediaQuery((max-width: 600px)); console.log(isSmallScreen); // true or false depending on the screen size// Check for a dark mode preference const prefersDarkMode useMediaQuery((prefers-color-scheme: dark)); console.log(prefersDarkMode); // true if user prefers dark modeuseCookie()useCookie(name)返回针对指定 Cookie 名的操作函数集合get()按名称读取 Cookie 值不存在时返回nullset(value, options)设置新值options可包含path、max-age、expires、secure等标准 Cookie 属性delete()通过设置负的max-age删除 Cookie。// Retrieving a Cookie const { get } useCookie(user-token); const token get(); console.log(token); // Prints the cookie value if exists, otherwise null// Setting a Cookie const { set } useCookie(user-token); set(abc123, { path: /, expires: new Date(Date.now() 3600 * 1000) }); // Expires in 1 hour// Deleting a Cookie const { delete: deleteCookie } useCookie(user-token); deleteCookie(); console.log(document.cookie); // The user-token cookie is now deleted使用时注意set()的options参数接受所有标准 Cookie 属性name作为 Cookie 的键值通过 hook 返回的函数统一管理。数据结构useQueueuseQueueT()提供一个泛型队列返回对象包含六个方法enqueue(item: T): number入队返回队列新长度dequeue(): T | undefined出队并返回队首元素空队列返回undefinedpeek(): T | null查看队首元素但不移除空队列返回nullsize(): number返回队列长度isEmpty(): boolean判断队列是否为空clear(): void清空队列。// Create a new queue const { enqueue, dequeue, peek, size, isEmpty, clear } useQueuenumber(); // Add items to the queue enqueue(1); // Queue: [1], returns 1 enqueue(2); // Queue: [1, 2], returns 2 // Check the first item console.log(peek()); // Output: 1 // Remove the first item console.log(dequeue()); // Output: 1, Queue: [2] // Check the size of the queue console.log(size()); // Output: 1 // Check if the queue is empty console.log(isEmpty()); // Output: false // Clear the queue clear(); // Queue: [] console.log(isEmpty()); // Output: true在框架组件中的真实应用从源码调用点可以确认Hooks命名空间并非孤立工具集而是深度嵌入组件实现。除上文提到的useId、useDebounce、useEvent外还可以看到以下模式组件 ID 统一生成accordion、app-bar、button-group、calendar、countdown、cube、draggable、hint、input、keypad、master、navview、popover、rating、resizable、sidenav、slider 等组件均在初始化时调用Hooks.useId(this.elem)或element.attr(id, Hooks.useId(...))对应源码分布于 source/components 各组件目录例如 source/components/input/input.js。输入防抖source/components/select/select.js 用useDebounce包裹异步过滤函数color-selector、list、remote-dataset、remote-table、datepicker、marquee 等组件同样依赖它控制高频回调。DOM 监听counter 等组件通过Hooks.useEvent监听元素变化。此外DESCRIPTION.md 中明确将 hooks 定位为为非 React 应用提供 React 式 hooks 功能状态管理与副作用并展示了Hooks.useState与Hooks.useEffect的配合用法可见整个命名空间的设计目标是让普通 JavaScript 代码也能获得声明式的状态与副作用管理体验。使用前提与注意事项全局可用只要框架脚本被加载Hooks即挂载在globalThis上见 source/hooks/index.js无需额外引入。版本一致性当前依赖olton/hooks^0.13.1见 package.jsonAPI 行为以该版本与 source/hooks/README.md 文档为准。边界行为useDebounce在wait为负或首参非函数时不执行useCompose/usePipe/useCurry在无参调用时分别退化为恒等函数或空操作useQueue的dequeue/peek对空队列分别返回undefined/null——这些行为均已在原文档中明确可放心依赖。ID 复用语义useId默认对同一 key 复用已生成的 ID需要唯一新 ID 时务必传入{ forceNew: true }否则可能出现多个元素共享 ID 的情况。赞分享前端UI组件【免费下载链接】Metro-UI-CSSA progressive front-end framework for creating high-performance responsive reactive web applications!项目地址https://gitcode.com/gh_mirrors/me/Metro-UI-CSS点击查看免费下载相关推荐Kata Containers Hooks 处理机制全解析OCI Hooks 与 Guest Hooks 的执行时机、命名空间与源码实现Kata Containers Hooks 处理机制全解析OCI Hooks 与 Guest Hooks 的执行时机、命名空间与源码实现 导读 本文基于 do云原生容器运行时Metro UI CSS Storage 组件实战指南封装 localStorage 与 sessionStorage 的命名空间存储方案Metro UI CSS Storage 组件实战指南封装 localStorage 与 sessionStorage 的命名空间存储方案 导读 Metro前端UI组件GitHub_Trending/ui/ui代码复用自定义Hooks与工具函数GitHub_Trending/ui/ui代码复用自定义Hooks与工具函数 痛点组件开发中的重复逻辑困境 在现代前端开发中你是否经常遇到这样的场景多个前端UI组件设计系统上一篇终极免费方案Ohook如何让Microsoft 365完整功能永久可用下一篇终极免费音乐解锁工具如何一键解密QQ音乐、网易云音乐加密文件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考