前端UI组件【免费下载链接】noty⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.项目地址https://gitcode.com/gh_mirrors/no/noty点击查看免费下载本篇技术指南以仓库 docs/README.md 为主线系统讲解 Noty 3.x 这款零依赖Dependency-freeJavaScript 通知库的完整能力从安装引入、类型/布局/主题体系、逐项配置参数、API 与回调到命名队列、自定义模板、动画接入以及基于 Service Worker 的 Web Push 推送方案。读完本文你可以直接用 Noty 替代原生 alert 对话框构建带进度条、声音、队列控制与页面可见性管理的现代 Web 通知系统并落地一套完整的浏览器推送订阅链路。说明当前镜像仓库的元信息已将本项目标记为 DEPRECATED上游不再积极维护但库本身仍可正常安装与使用仓库内代码、构建产物与文档均可直接参考本文所有内容均以仓库实际文件为事实依据。项目定位与核心特性Noty 的自我定位是“A Dependency-free notification library”即一款**不依赖任何第三方框架尤其是 jQuery**的轻量通知库。与浏览器原生alert()相比它提供了一套可定制、可排队、可动画化的替代方案用于展示 alert / success / error / warning / information / confirmation 等各类消息。仓库根目录的 package.json 显示其版本为3.2.0-beta主入口为lib/noty.js同时附带 TypeScript 类型声明index.d.ts。docs/README.md 中列出的核心特性如下本文后续各节将逐条展开Dependency-freev3 起完全不再依赖 jQuery见 docs/installation.md 的提示。UMD 模块格式同时支持浏览器全局变量、CommonJSrequire与 ES Moduleimport。Web Push 通知内建Noty.Push配合 Service Worker 实现浏览器推送订阅。命名队列系统Named queue system可为不同场景设置独立队列与可见数量上限。11 种布局、5 类通知样式、5 主题实际仓库提供 9 套主题。自定义容器Custom container支持内联通知inline notifications。确认通知Confirm notifications通过Noty.button组合按钮实现。TTL 超时选项与进度条timeout控制自动关闭progressBar显示倒计时进度。动画支持内置 CSS 动画并可接入 animate.css、bounce.js、mo.js、velocity 等第三方库。两种关闭方式点击关闭click与关闭按钮button。API 与回调Callbacks完整的实例方法、静态方法与生命周期回调。自定义模板Custom templating通过onTemplate回调重写 DOM 结构。页面可见性控制利用 Page Visibility API 在页面失焦/聚焦时管理超时、声音与标题计数。安装与引入根据 docs/installation.md最朴素的用法是直接引入构建产物 lib/noty.css 与 lib/noty.jslink hreflib/noty.css relstylesheet script srclib/noty.js typetext/javascript/script也可以通过主流包管理器安装# Bower $ bower install noty # NPM $ npm install noty # Yarn $ yarn add noty # Composer (PHP) $ composer require needim/notyLaravel 集成在resources/assets/sass/app.scss中引入 SCSS 源码在resources/assets/js/bootstrap.js中挂载为全局对象import ~noty/src/noty.scss; import ~noty/src/themes/mint.scss;window.Noty require(noty);之后执行yarn dev或npm run dev即可。ES6 import 与 Requireimport Noty from noty; new Noty({ text: Some notification text }).show(); const Noty require(noty); new Noty({ text: Some notification text }).show();RequireJS定义路径时需注意模块名Noty首字母 N 必须大写requirejs.config({ paths: { Noty: libs/noty.min, ... }, ... });快速开始最小可用示例只需一个text参数然后调用.show()new Noty({ text: Some notification text }).show();new Noty(options)返回实例对象show()负责渲染与入列。从源码 src/index.js 可以看到构造函数会把用户选项与 src/api.js 中导出的Defaults默认值深度合并并预注册全部生命周期回调的监听器。类型Types与布局Layouts根据 docs/types.mdNoty 支持 5 类通知样式与 11 种屏幕布局Typesalert、success、warning、error、infoinformationLayoutstop、topLeft、topCenter、topRight、center、centerLeft、centerRight、bottom、bottomLeft、bottomCenter、bottomRightnew Noty({ type: success, layout: topRight, text: Some notification text }).show();type与layout会被转换为对应 DOM 类名noty_type__${type}、noty_layout__${layout}见 src/api.js 中build()的类名拼接逻辑。自定义容器内联通知当页面需要在特定元素内展示通知而非悬浮于屏幕角落时设置container即可此时布局参数会被忽略new Noty({ text : Some notification text, container: .custom-container }).show();主题系统根据 docs/themes.md仓库内置 9 套主题默认主题为mint主题说明mint默认主题sunset、relax、nest独立视觉风格metroui、semanticui模拟 Metro UI / Semantic UI 风格light浅色简约风格bootstrap-v3、bootstrap-v4对齐 Bootstrap 风格new Noty({ theme: themeName, text: Some notification text }).show();主题的 SCSS 源码位于 src/themes/含mint.scss、sunset.scss、relax.scss等编译后的独立 CSS 文件位于 lib/themes/mint.css、bootstrap-v4.css等。若只用单一主题可仅引入对应 CSS 以减小体积引入全部主题则统一使用 lib/noty.css。配置选项详解本节完整整理 docs/options.md 中的全部配置项。这些默认值在源码 src/api.js 的Defaults对象中均有对应实现选项默认值说明type: stringalertalert、success、error、warning、info生成类名noty_type__${type}layout: stringtopRight11 种布局之一生成类名noty_layout__${layout}theme: stringmintrelax、mint、metroui等 9 套主题生成类名noty_theme__${theme}text: string通知文本可包含 HTML切勿直接传入未经处理的用户输入防止 XSStimeout: boolean/intfalse自动关闭延迟毫秒如1000、3000设为false表示常驻sticky通知progressBar: booleantrue当timeout不为 false 时显示倒计时进度条closeWith: [...string][click]click点击通知关闭或button显示 × 关闭按钮可同时启用animation.open: string/null/functionnoty_effects_open字符串视为 CSS 类名null表示无动画函数则直接执行v3.0.1可直接用 animate.css 类名animation.close: string/null/functionnoty_effects_close同上控制关闭动画v3.0.1sounds.sources: [...string][]v3.1.0-beta音频源数组如some.wav浏览器是否支持取决于其 audio 能力sounds.volume: int1v3.1.0-beta音量0-1 之间如0.5sounds.conditions: [...string][]v3.1.0-beta播放条件docVisible、docHidden可单选或组合docTitle.conditions: [...string][]v3.1.0-beta修改页面标题计数的条件docVisible、docHiddenmodal: booleanfalsev3.1.0-beta模态行为比 v2 更稳定id: string/booleanfalse供querySelector使用的自定义 id为 false 时自动生成force: booleanfalseDOM 插入方式false 使用 appendtrue 使用 prependqueue: stringglobal命名队列名队列机制详见 docs/api.mdkiller: boolean/stringfalse为true时关闭所有可见通知后展示自身为字符串队列名时只关闭该队列的可见通知container: boolean/stringfalse自定义容器选择器如.my-custom-container设置后 layout 失效buttons: [...Noty.button][]Noty.button数组用于构建确认对话框详见 docs/confirm.mdcallbacks.beforeShow() {}回调详见 docs/api.mdcallbacks.onShow() {}回调详见 docs/api.mdcallbacks.afterShow() {}回调详见 docs/api.mdcallbacks.onClose() {}回调详见 docs/api.mdcallbacks.afterClose() {}回调详见 docs/api.mdcallbacks.onHover() {}回调详见 docs/api.mdcallbacks.onClick() {}回调仅在closeWith [click]时生效详见 docs/api.mdcallbacks.onTemplate() {}主要用于 DOM 结构改写自定义模板详见 docs/api.mdvisibilityControl: booleanfalse为true时使用 Page Visibility API 管理超时确保用户不会错过通知这些配置与源码逐一对应例如sounds、titleCount、modal、visibilityControl均定义在 src/api.js 的默认值中show()内会根据closeWith、timeout、progressBar等选项为 DOM 追加noty_close_with_click、noty_has_timeout、noty_has_progressbar等类名见 src/index.js。覆盖默认选项通过Noty.overrideDefaults()可以全局覆盖默认值避免每个实例重复传参源码实现见 src/index.jsNoty.overrideDefaults({ layout : topRight, theme : mint, closeWith: [click, button], animation: { open : animated fadeInRight, close: animated fadeOutRight } });API 方法与静态方法根据 docs/api.mdNoty 提供实例级与静态级两套 API对应源码 src/index.js 中的实例方法与静态方法。实例方法var n new Noty({text: Hi!}); console.log(n); // 返回 NOTY 实例对象 n.show(); // 显示 n.close(); // 关闭 n.setText(Hi again!); // 更新文本注意模板需保留 .noty_body 类 n.setType(error); // 更新类型 n.setTheme(newTheme); // 更新主题 n.setTimeout(4500); // false 表示清除超时整数表示重置计时器为给定毫秒数 n.stop(); // 清除超时 n.resume(); // 重新启动超时注意setText()、setType()、setTheme()默认不会改写Noty 的options。如需同步覆盖选项值需传入第二个参数true。静态方法Noty.closeAll(); // 关闭所有通知 Noty.closeAll(myCustomQueueName); // 只关闭指定队列中的通知 Noty.setMaxVisible(10); // 设置 global 队列的最大可见数 Noty.setMaxVisible(10, myCustomQueueName); // 设置自定义队列的最大可见数所有队列的默认maxVisible均为5源码 src/api.js 中DefaultMaxVisible 5。从源码看Noty 还额外暴露了以下静态成员见 src/index.jsNoty.clearQueue(queueName global)清空指定队列中的待显示通知Noty.Queues只读访问全部队列状态Noty.PageHidden只读访问当前页面是否隐藏Noty.overrideDefaults(obj)覆盖全局默认选项Noty.setMaxVisible(amount, queueName)设置队列可见上限Noty.button(innerHtml, classes, cb, attributes)创建按钮对象Noty.Push(workerPath)创建推送实例Noty.version()返回库版本号。回调Callbacks与自定义模板标准回调写法new Noty({ callbacks: { beforeShow: function() {}, onShow: function() {}, afterShow: function() {}, onClose: function() {}, afterClose: function() {}, onHover: function() {}, onTemplate: function() { this.barDom.innerHTML div classmy-custom-template noty_body this.options.text /div; // 注意.noty_body 类是 setText() 正常工作的前提 } } }).show();链式回调写法on()必须在show()之前调用否则无效new Noty({ text: ... }) .on(onShow, function() { /* ... */ }) .on(afterShow, function() { /* ... */ }) .show();回调的底层实现位于 src/index.js构造函数内置listeners表将callbacks选项中的 8 个回调逐个注册show()/close()流程中通过API.fire(this, eventName)依次触发见 src/index.js 与 src/index.js。自定义模板Custom templating利用onTemplate回调在渲染阶段完全重写通知条内部 DOM官方建议也可以结合任意模板库使用。回调触发时机见 src/api.js 的build()先构建noty_body、按钮区与进度条的基础结构再调用fire(ref, onTemplate)允许外部改写。确认对话框Confirm Notifications确认通知的本质是给通知条挂载按钮。根据 docs/confirm.mdNoty.button(text, classNames, cb, attributes)的签名如下text: string —— 按钮文本classNames: string —— 按钮样式类名cb: function —— 点击回调attributes: object可选—— 附加到按钮的 DOM 属性var n new Noty({ text: Do you want to continue? input idexample typetext, buttons: [ Noty.button(YES, btn btn-success, function () { console.log(button 1 clicked); }, {id: button1, data-status: ok}), Noty.button(NO, btn btn-error, function () { console.log(button 2 clicked); n.close(); }) ] }); n.show();关于按钮样式Noty 不负责按钮外观需要传入带样式的 class 名如 Bootstrap 的btn btn-success否则按钮将不带任何视觉样式。从源码看按钮 DOM 由 src/api.js 的buildButtons()组装进.noty_buttons容器点击事件绑定在 src/index.js事件回调中先stopPropagation阻止冒泡再执行buttons[key].cb(this)回调参数为 Noty 实例因此上例中n.close()可关闭自身。按钮对象类型定义在 src/button.js静态工厂方法Noty.button位于 src/index.js。动画CSS 类名与第三方库根据 docs/animations.md动画通过animation.open/animation.close配置支持三种形态CSS 类名string、无动画null、自定义函数function。CSS 类名方式可直接使用 animate.css 类名demo 目录下也内置了 animate.cssnew Noty({ text: NOTY - a dependency-free notification library!, animation: { open: animated bounceInRight, // Animate.css 类名 close: animated bounceOutRight } }).show();自定义 CSS 动画示例Noty 内置默认动画noty_effects_open/noty_effects_close的定义方式.noty_effects_open { opacity: 0; transform: translate(50%); animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .noty_effects_close { animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } keyframes noty_anim_in { 100% { transform: translate(0); opacity: 1; } } keyframes noty_anim_out { 100% { transform: translate(50%); opacity: 0; } }函数方式JS 动画官方提示 JavaScript 动画已废弃但可通过第三方动画库自行实现。函数形式接收一个promise参数必须在动画完成时 resolve源码 src/index.js 正是用 Promise 串接show动画与后续openFlow流程。以 bounce.js 为例new Noty({ text: NOTY - animating with Bounce.js!, animation: { open: function (promise) { var n this; new Bounce() .translate({ from : {x: 450, y: 0}, to: {x: 0, y: 0}, easing : bounce, duration : 1000, bounces : 4, stiffness: 3 }) .scale({ from : {x: 1.2, y: 1}, to: {x: 1, y: 1}, easing : bounce, duration : 1000, delay : 100, bounces : 4, stiffness: 1 }) .applyTo(n.barDom, { onComplete: function () { promise(function(resolve) { resolve(); }) } }); }, close: function (promise) { var n this; new Bounce() .translate({ from : {x: 0, y: 0}, to: {x: 450, y: 0}, easing : bounce, duration : 500, bounces : 4, stiffness: 1 }) .applyTo(n.barDom, { onComplete: function () { promise(function(resolve) { resolve(); }) } }); } } }).show();mo.js 与 velocity 的完整接入示例含mojs.Timeline、mojs.Html、mojs.Burst组合动画以及 velocity 两段式complete回调同样收录在 docs/animations.md 中用法一致均在动画完成时promise(function(resolve){ resolve(); })。demo 目录还提供了 bounce.js 供本地测试。命名队列、进度条与页面可见性控制命名队列是 Noty 的特色之一。queue选项可指定队列名每个队列拥有独立的maxVisible默认 5与待显示队列。从源码 src/api.js 可见仓库默认维护一个global队列{maxVisible: 5, queue: []}。show()时src/index.js会调用getQueueCounts()判断当前队列可见数是否已满或页面是否隐藏若是则addToQueue()入队当页面重新可见或通知关闭后queueRender()src/api.js会取出队首并调用show()继续渲染。killer选项在show()最前端执行Noty.closeAll()全队列或指定队列为“抢占式通知”提供支持。进度条当timeout与progressBar同时启用时通知条会带上noty_has_progressbar类.noty_progressbar元素随时间流逝展示剩余时间进度条 DOM 在 src/api.js 的build()中创建。页面可见性控制v3.1.0-beta 起设置visibilityControl: true后Noty 会利用 Page Visibility API 暂停/恢复超时计时避免用户切走标签页后错过通知。同时支持两类关联能力soundsconditions配置docVisible或docHidden页面可见时播放提示音、页面隐藏时提前播放声音提醒用户对应 src/index.js 与 src/index.js 的Utils.createAudioElements调用titleCountconditions配置后页面隐藏期间新通知到达会在document.title前缀累加计数(N)页面回到可见状态时自动清除实现见 src/api.js 的docTitle模块。页面可见性总开关在模块加载时即已初始化src/index.js 调用Utils.visibilityChangeFlow()。Web Push 通知Service Worker 订阅与后端发送从 v3.1.0-beta 起Noty 通过Noty.Push封装了 Web Push 能力。完整方案包括浏览器端订阅与后端发送两部分详见 docs/push.md。准备工作在 Firebase Developer Console 创建项目进入Project settings→Cloud Messaging标签页记下Server Key与Sender ID复制仓库根目录的 manifest.json.template 为manifest.json并用你的 Sender ID 替换占位符。模板内容如下{ name: NOTY, short_name: NOTY, start_url: ./demo/push.html, display: standalone, gcm_sender_id: -your-sender-id }复制 service-worker.js.template 为service-worker.js同样放到站点根目录在页面中链接 manifestlink relmanifest href../manifest.json。仓库内还提供了可直接运行的示例 demo/push.html 与 demo/sendpush.js可对照学习。创建 Push 实例并注册事件const NotyPush Noty.Push(/service-worker.js) .on(onPermissionGranted, function () { console.log(Perm: granted) }) .on(onPermissionDenied, function () { console.log(Perm: denied) }) .on(onSubscriptionSuccess, function (subData) { console.log(Subscription:, subData) // 必须把 subData 持久化保存后续后端发送时要用 }) .on(onSubscriptionCancel, function (subData) { console.log(Subscription: canceled) }) .on(onWorkerSuccess, function () { console.log(Worker: installed) }) .on(onWorkerError, function (err) { console.log(Worker: failed, err) }) .on(onWorkerNotSupported, function (err) { console.log(Worker: not supported, err) })然后请求用户授权NotyPush.requestSubscription()浏览器会弹出权限询问用户允许后Noty 自动注册 Service Worker 并完成pushManager.subscribe({ userVisibleOnly: true })。事件实现位于 src/push.jsrequestSubscription()src/push.js先通过getPermissionStatus()判断当前授权状态再走window.Notification.requestPermission流程授权成功后注册 Worker 并订阅订阅数据subData包含endpoint、p256dh、auth三个字段p256dh/auth为btoa编码后的密钥见 src/push.js。必须在onSubscriptionSuccess回调中保存subData供后端使用。后端发送Node.js 示例安装web-push库后编写发送脚本const webpush require(web-push) const vapidKeys webpush.generateVAPIDKeys() webpush.setGCMAPIKey(YOUR-SERVER-KEY-FROM-FIREBASE-CONSOLE) webpush.setVapidDetails( mailto:youremail.com, vapidKeys.publicKey, vapidKeys.privateKey ) // 填入之前保存的订阅信息 const pushSubscription { endpoint: , keys: { auth: , p256dh: } } // image 与 actions 均为可选 webpush.sendNotification(pushSubscription, JSON.stringify({ title: Noty title, body: Noty body, icon: https://your-icon0-url.png, image: https://your-image-url.png, url: http://ned.im/noty/?refwebPushTest, actions: [ {action: actionYes, title: Yes, icon: https://your-icon1-url.png}, {action: actionNo, title: No, icon: https://your-icon2-url.png} ] }))运行node sendPushExample.js即可推送。Chrome 下的实际效果参考仓库截图检查权限与 Worker 状态NotyPush.getPermissionStatus() granted NotyPush.getPermissionStatus() default NotyPush.getPermissionStatus() denied // 某些场景下需要确认 Service Worker 是否已激活 NotyPush.isSWRegistered() truegetPermissionStatus()在 src/push.js 中兼容了Notification.permission、webkitNotifications、mozNotification与旧版 Chrome 的msIsSiteMode等实现isSWRegistered()src/push.js则检查navigator.serviceWorker.controller.state activated当用户已授权但 Worker 未注册/失效时可据此再次引导订阅。源码结构与二次开发指引从仓库结构看Noty 3.x 的源码组织清晰src/index.js —— Noty 主类构造、show/close 流程、实例与静态 APIsrc/api.js —— 内部 API 层默认值、队列管理、DOM 构建、模态与文档标题控制src/button.js —— 按钮对象src/push.js —— Web Push 封装src/utils.js —— 工具函数类名、事件、音频元素、动画事件等src/noty.scss 与 src/themes/ —— 基础样式与各主题 SCSSlib/ —— 编译产物noty.js、noty.min.js、noty.css及themes/下的独立主题 CSStest/unit/ —— QUnit 单元测试init.test.js与 PhantomJS 驱动脚本phantom.jsindex.d.ts —— TypeScript 类型声明供 TS 项目直接使用。package.json提供的常用脚本npm run build编译主题并产出 lib 产物、npm run devwatch 模式开发、npm test格式检查 lint QUnit 测试、npm run serve-docs本地启动 docsify 文档站点。延伸阅读docs/installation.md完整的安装与模块引入方式docs/options.md全部配置选项与默认值docs/api.md实例/静态 API、回调与自定义模板docs/types.md类型与布局速查docs/themes.md主题列表与预览docs/animations.mdCSS 动画与 bounce.js / mo.js / velocity 完整示例docs/confirm.md确认对话框与Noty.buttondocs/push.mdWeb Push 端到端流程docs/browsers.md浏览器支持情况说明赞分享前端UI组件【免费下载链接】noty⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.项目地址https://gitcode.com/gh_mirrors/no/noty点击查看免费下载相关推荐网页说没就没Wayback Machine浏览器扩展给网络内容上道终身保险含四大浏览器安装教程网页说没就没Wayback Machine浏览器扩展给网络内容上道终身保险含四大浏览器安装教程 上个月我帮一位开店的朋友整理宣传素材。他翻出一张三年前的前端浏览器控制如何用神奇弹幕打造智能直播间5大核心功能详解如何用神奇弹幕打造智能直播间5大核心功能详解 神奇弹幕是一款专为B站直播设计的全功能自动化助手它能将弹幕姬、答谢姬、点歌姬、回复姬和工作流系统完美整合让主直播如何使用Omi框架实现PWA推送通知Service Worker与Web Push终极指南如何使用Omi框架实现PWA推送通知Service Worker与Web Push终极指南 Omi框架是一个强大的Web Components框架它可以帮助前端Web框架UI组件上一篇终极指南如何使用KillWxapkg从加密文件还原完整微信小程序项目下一篇5分钟搭建跨平台数据采集系统MediaCrawler终极实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/7 9:30:17 · 阅读 1.2k Noty 3.x 全功能实战指南：零依赖通知、确认对话框与 Web Push 推送
前端UI组件【免费下载链接】noty⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.项目地址https://gitcode.com/gh_mirrors/no/noty点击查看免费下载本篇技术指南以仓库 docs/README.md 为主线系统讲解 Noty 3.x 这款零依赖Dependency-freeJavaScript 通知库的完整能力从安装引入、类型/布局/主题体系、逐项配置参数、API 与回调到命名队列、自定义模板、动画接入以及基于 Service Worker 的 Web Push 推送方案。读完本文你可以直接用 Noty 替代原生 alert 对话框构建带进度条、声音、队列控制与页面可见性管理的现代 Web 通知系统并落地一套完整的浏览器推送订阅链路。说明当前镜像仓库的元信息已将本项目标记为 DEPRECATED上游不再积极维护但库本身仍可正常安装与使用仓库内代码、构建产物与文档均可直接参考本文所有内容均以仓库实际文件为事实依据。项目定位与核心特性Noty 的自我定位是“A Dependency-free notification library”即一款**不依赖任何第三方框架尤其是 jQuery**的轻量通知库。与浏览器原生alert()相比它提供了一套可定制、可排队、可动画化的替代方案用于展示 alert / success / error / warning / information / confirmation 等各类消息。仓库根目录的 package.json 显示其版本为3.2.0-beta主入口为lib/noty.js同时附带 TypeScript 类型声明index.d.ts。docs/README.md 中列出的核心特性如下本文后续各节将逐条展开Dependency-freev3 起完全不再依赖 jQuery见 docs/installation.md 的提示。UMD 模块格式同时支持浏览器全局变量、CommonJSrequire与 ES Moduleimport。Web Push 通知内建Noty.Push配合 Service Worker 实现浏览器推送订阅。命名队列系统Named queue system可为不同场景设置独立队列与可见数量上限。11 种布局、5 类通知样式、5 主题实际仓库提供 9 套主题。自定义容器Custom container支持内联通知inline notifications。确认通知Confirm notifications通过Noty.button组合按钮实现。TTL 超时选项与进度条timeout控制自动关闭progressBar显示倒计时进度。动画支持内置 CSS 动画并可接入 animate.css、bounce.js、mo.js、velocity 等第三方库。两种关闭方式点击关闭click与关闭按钮button。API 与回调Callbacks完整的实例方法、静态方法与生命周期回调。自定义模板Custom templating通过onTemplate回调重写 DOM 结构。页面可见性控制利用 Page Visibility API 在页面失焦/聚焦时管理超时、声音与标题计数。安装与引入根据 docs/installation.md最朴素的用法是直接引入构建产物 lib/noty.css 与 lib/noty.jslink hreflib/noty.css relstylesheet script srclib/noty.js typetext/javascript/script也可以通过主流包管理器安装# Bower $ bower install noty # NPM $ npm install noty # Yarn $ yarn add noty # Composer (PHP) $ composer require needim/notyLaravel 集成在resources/assets/sass/app.scss中引入 SCSS 源码在resources/assets/js/bootstrap.js中挂载为全局对象import ~noty/src/noty.scss; import ~noty/src/themes/mint.scss;window.Noty require(noty);之后执行yarn dev或npm run dev即可。ES6 import 与 Requireimport Noty from noty; new Noty({ text: Some notification text }).show(); const Noty require(noty); new Noty({ text: Some notification text }).show();RequireJS定义路径时需注意模块名Noty首字母 N 必须大写requirejs.config({ paths: { Noty: libs/noty.min, ... }, ... });快速开始最小可用示例只需一个text参数然后调用.show()new Noty({ text: Some notification text }).show();new Noty(options)返回实例对象show()负责渲染与入列。从源码 src/index.js 可以看到构造函数会把用户选项与 src/api.js 中导出的Defaults默认值深度合并并预注册全部生命周期回调的监听器。类型Types与布局Layouts根据 docs/types.mdNoty 支持 5 类通知样式与 11 种屏幕布局Typesalert、success、warning、error、infoinformationLayoutstop、topLeft、topCenter、topRight、center、centerLeft、centerRight、bottom、bottomLeft、bottomCenter、bottomRightnew Noty({ type: success, layout: topRight, text: Some notification text }).show();type与layout会被转换为对应 DOM 类名noty_type__${type}、noty_layout__${layout}见 src/api.js 中build()的类名拼接逻辑。自定义容器内联通知当页面需要在特定元素内展示通知而非悬浮于屏幕角落时设置container即可此时布局参数会被忽略new Noty({ text : Some notification text, container: .custom-container }).show();主题系统根据 docs/themes.md仓库内置 9 套主题默认主题为mint主题说明mint默认主题sunset、relax、nest独立视觉风格metroui、semanticui模拟 Metro UI / Semantic UI 风格light浅色简约风格bootstrap-v3、bootstrap-v4对齐 Bootstrap 风格new Noty({ theme: themeName, text: Some notification text }).show();主题的 SCSS 源码位于 src/themes/含mint.scss、sunset.scss、relax.scss等编译后的独立 CSS 文件位于 lib/themes/mint.css、bootstrap-v4.css等。若只用单一主题可仅引入对应 CSS 以减小体积引入全部主题则统一使用 lib/noty.css。配置选项详解本节完整整理 docs/options.md 中的全部配置项。这些默认值在源码 src/api.js 的Defaults对象中均有对应实现选项默认值说明type: stringalertalert、success、error、warning、info生成类名noty_type__${type}layout: stringtopRight11 种布局之一生成类名noty_layout__${layout}theme: stringmintrelax、mint、metroui等 9 套主题生成类名noty_theme__${theme}text: string通知文本可包含 HTML切勿直接传入未经处理的用户输入防止 XSStimeout: boolean/intfalse自动关闭延迟毫秒如1000、3000设为false表示常驻sticky通知progressBar: booleantrue当timeout不为 false 时显示倒计时进度条closeWith: [...string][click]click点击通知关闭或button显示 × 关闭按钮可同时启用animation.open: string/null/functionnoty_effects_open字符串视为 CSS 类名null表示无动画函数则直接执行v3.0.1可直接用 animate.css 类名animation.close: string/null/functionnoty_effects_close同上控制关闭动画v3.0.1sounds.sources: [...string][]v3.1.0-beta音频源数组如some.wav浏览器是否支持取决于其 audio 能力sounds.volume: int1v3.1.0-beta音量0-1 之间如0.5sounds.conditions: [...string][]v3.1.0-beta播放条件docVisible、docHidden可单选或组合docTitle.conditions: [...string][]v3.1.0-beta修改页面标题计数的条件docVisible、docHiddenmodal: booleanfalsev3.1.0-beta模态行为比 v2 更稳定id: string/booleanfalse供querySelector使用的自定义 id为 false 时自动生成force: booleanfalseDOM 插入方式false 使用 appendtrue 使用 prependqueue: stringglobal命名队列名队列机制详见 docs/api.mdkiller: boolean/stringfalse为true时关闭所有可见通知后展示自身为字符串队列名时只关闭该队列的可见通知container: boolean/stringfalse自定义容器选择器如.my-custom-container设置后 layout 失效buttons: [...Noty.button][]Noty.button数组用于构建确认对话框详见 docs/confirm.mdcallbacks.beforeShow() {}回调详见 docs/api.mdcallbacks.onShow() {}回调详见 docs/api.mdcallbacks.afterShow() {}回调详见 docs/api.mdcallbacks.onClose() {}回调详见 docs/api.mdcallbacks.afterClose() {}回调详见 docs/api.mdcallbacks.onHover() {}回调详见 docs/api.mdcallbacks.onClick() {}回调仅在closeWith [click]时生效详见 docs/api.mdcallbacks.onTemplate() {}主要用于 DOM 结构改写自定义模板详见 docs/api.mdvisibilityControl: booleanfalse为true时使用 Page Visibility API 管理超时确保用户不会错过通知这些配置与源码逐一对应例如sounds、titleCount、modal、visibilityControl均定义在 src/api.js 的默认值中show()内会根据closeWith、timeout、progressBar等选项为 DOM 追加noty_close_with_click、noty_has_timeout、noty_has_progressbar等类名见 src/index.js。覆盖默认选项通过Noty.overrideDefaults()可以全局覆盖默认值避免每个实例重复传参源码实现见 src/index.jsNoty.overrideDefaults({ layout : topRight, theme : mint, closeWith: [click, button], animation: { open : animated fadeInRight, close: animated fadeOutRight } });API 方法与静态方法根据 docs/api.mdNoty 提供实例级与静态级两套 API对应源码 src/index.js 中的实例方法与静态方法。实例方法var n new Noty({text: Hi!}); console.log(n); // 返回 NOTY 实例对象 n.show(); // 显示 n.close(); // 关闭 n.setText(Hi again!); // 更新文本注意模板需保留 .noty_body 类 n.setType(error); // 更新类型 n.setTheme(newTheme); // 更新主题 n.setTimeout(4500); // false 表示清除超时整数表示重置计时器为给定毫秒数 n.stop(); // 清除超时 n.resume(); // 重新启动超时注意setText()、setType()、setTheme()默认不会改写Noty 的options。如需同步覆盖选项值需传入第二个参数true。静态方法Noty.closeAll(); // 关闭所有通知 Noty.closeAll(myCustomQueueName); // 只关闭指定队列中的通知 Noty.setMaxVisible(10); // 设置 global 队列的最大可见数 Noty.setMaxVisible(10, myCustomQueueName); // 设置自定义队列的最大可见数所有队列的默认maxVisible均为5源码 src/api.js 中DefaultMaxVisible 5。从源码看Noty 还额外暴露了以下静态成员见 src/index.jsNoty.clearQueue(queueName global)清空指定队列中的待显示通知Noty.Queues只读访问全部队列状态Noty.PageHidden只读访问当前页面是否隐藏Noty.overrideDefaults(obj)覆盖全局默认选项Noty.setMaxVisible(amount, queueName)设置队列可见上限Noty.button(innerHtml, classes, cb, attributes)创建按钮对象Noty.Push(workerPath)创建推送实例Noty.version()返回库版本号。回调Callbacks与自定义模板标准回调写法new Noty({ callbacks: { beforeShow: function() {}, onShow: function() {}, afterShow: function() {}, onClose: function() {}, afterClose: function() {}, onHover: function() {}, onTemplate: function() { this.barDom.innerHTML div classmy-custom-template noty_body this.options.text /div; // 注意.noty_body 类是 setText() 正常工作的前提 } } }).show();链式回调写法on()必须在show()之前调用否则无效new Noty({ text: ... }) .on(onShow, function() { /* ... */ }) .on(afterShow, function() { /* ... */ }) .show();回调的底层实现位于 src/index.js构造函数内置listeners表将callbacks选项中的 8 个回调逐个注册show()/close()流程中通过API.fire(this, eventName)依次触发见 src/index.js 与 src/index.js。自定义模板Custom templating利用onTemplate回调在渲染阶段完全重写通知条内部 DOM官方建议也可以结合任意模板库使用。回调触发时机见 src/api.js 的build()先构建noty_body、按钮区与进度条的基础结构再调用fire(ref, onTemplate)允许外部改写。确认对话框Confirm Notifications确认通知的本质是给通知条挂载按钮。根据 docs/confirm.mdNoty.button(text, classNames, cb, attributes)的签名如下text: string —— 按钮文本classNames: string —— 按钮样式类名cb: function —— 点击回调attributes: object可选—— 附加到按钮的 DOM 属性var n new Noty({ text: Do you want to continue? input idexample typetext, buttons: [ Noty.button(YES, btn btn-success, function () { console.log(button 1 clicked); }, {id: button1, data-status: ok}), Noty.button(NO, btn btn-error, function () { console.log(button 2 clicked); n.close(); }) ] }); n.show();关于按钮样式Noty 不负责按钮外观需要传入带样式的 class 名如 Bootstrap 的btn btn-success否则按钮将不带任何视觉样式。从源码看按钮 DOM 由 src/api.js 的buildButtons()组装进.noty_buttons容器点击事件绑定在 src/index.js事件回调中先stopPropagation阻止冒泡再执行buttons[key].cb(this)回调参数为 Noty 实例因此上例中n.close()可关闭自身。按钮对象类型定义在 src/button.js静态工厂方法Noty.button位于 src/index.js。动画CSS 类名与第三方库根据 docs/animations.md动画通过animation.open/animation.close配置支持三种形态CSS 类名string、无动画null、自定义函数function。CSS 类名方式可直接使用 animate.css 类名demo 目录下也内置了 animate.cssnew Noty({ text: NOTY - a dependency-free notification library!, animation: { open: animated bounceInRight, // Animate.css 类名 close: animated bounceOutRight } }).show();自定义 CSS 动画示例Noty 内置默认动画noty_effects_open/noty_effects_close的定义方式.noty_effects_open { opacity: 0; transform: translate(50%); animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .noty_effects_close { animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } keyframes noty_anim_in { 100% { transform: translate(0); opacity: 1; } } keyframes noty_anim_out { 100% { transform: translate(50%); opacity: 0; } }函数方式JS 动画官方提示 JavaScript 动画已废弃但可通过第三方动画库自行实现。函数形式接收一个promise参数必须在动画完成时 resolve源码 src/index.js 正是用 Promise 串接show动画与后续openFlow流程。以 bounce.js 为例new Noty({ text: NOTY - animating with Bounce.js!, animation: { open: function (promise) { var n this; new Bounce() .translate({ from : {x: 450, y: 0}, to: {x: 0, y: 0}, easing : bounce, duration : 1000, bounces : 4, stiffness: 3 }) .scale({ from : {x: 1.2, y: 1}, to: {x: 1, y: 1}, easing : bounce, duration : 1000, delay : 100, bounces : 4, stiffness: 1 }) .applyTo(n.barDom, { onComplete: function () { promise(function(resolve) { resolve(); }) } }); }, close: function (promise) { var n this; new Bounce() .translate({ from : {x: 0, y: 0}, to: {x: 450, y: 0}, easing : bounce, duration : 500, bounces : 4, stiffness: 1 }) .applyTo(n.barDom, { onComplete: function () { promise(function(resolve) { resolve(); }) } }); } } }).show();mo.js 与 velocity 的完整接入示例含mojs.Timeline、mojs.Html、mojs.Burst组合动画以及 velocity 两段式complete回调同样收录在 docs/animations.md 中用法一致均在动画完成时promise(function(resolve){ resolve(); })。demo 目录还提供了 bounce.js 供本地测试。命名队列、进度条与页面可见性控制命名队列是 Noty 的特色之一。queue选项可指定队列名每个队列拥有独立的maxVisible默认 5与待显示队列。从源码 src/api.js 可见仓库默认维护一个global队列{maxVisible: 5, queue: []}。show()时src/index.js会调用getQueueCounts()判断当前队列可见数是否已满或页面是否隐藏若是则addToQueue()入队当页面重新可见或通知关闭后queueRender()src/api.js会取出队首并调用show()继续渲染。killer选项在show()最前端执行Noty.closeAll()全队列或指定队列为“抢占式通知”提供支持。进度条当timeout与progressBar同时启用时通知条会带上noty_has_progressbar类.noty_progressbar元素随时间流逝展示剩余时间进度条 DOM 在 src/api.js 的build()中创建。页面可见性控制v3.1.0-beta 起设置visibilityControl: true后Noty 会利用 Page Visibility API 暂停/恢复超时计时避免用户切走标签页后错过通知。同时支持两类关联能力soundsconditions配置docVisible或docHidden页面可见时播放提示音、页面隐藏时提前播放声音提醒用户对应 src/index.js 与 src/index.js 的Utils.createAudioElements调用titleCountconditions配置后页面隐藏期间新通知到达会在document.title前缀累加计数(N)页面回到可见状态时自动清除实现见 src/api.js 的docTitle模块。页面可见性总开关在模块加载时即已初始化src/index.js 调用Utils.visibilityChangeFlow()。Web Push 通知Service Worker 订阅与后端发送从 v3.1.0-beta 起Noty 通过Noty.Push封装了 Web Push 能力。完整方案包括浏览器端订阅与后端发送两部分详见 docs/push.md。准备工作在 Firebase Developer Console 创建项目进入Project settings→Cloud Messaging标签页记下Server Key与Sender ID复制仓库根目录的 manifest.json.template 为manifest.json并用你的 Sender ID 替换占位符。模板内容如下{ name: NOTY, short_name: NOTY, start_url: ./demo/push.html, display: standalone, gcm_sender_id: -your-sender-id }复制 service-worker.js.template 为service-worker.js同样放到站点根目录在页面中链接 manifestlink relmanifest href../manifest.json。仓库内还提供了可直接运行的示例 demo/push.html 与 demo/sendpush.js可对照学习。创建 Push 实例并注册事件const NotyPush Noty.Push(/service-worker.js) .on(onPermissionGranted, function () { console.log(Perm: granted) }) .on(onPermissionDenied, function () { console.log(Perm: denied) }) .on(onSubscriptionSuccess, function (subData) { console.log(Subscription:, subData) // 必须把 subData 持久化保存后续后端发送时要用 }) .on(onSubscriptionCancel, function (subData) { console.log(Subscription: canceled) }) .on(onWorkerSuccess, function () { console.log(Worker: installed) }) .on(onWorkerError, function (err) { console.log(Worker: failed, err) }) .on(onWorkerNotSupported, function (err) { console.log(Worker: not supported, err) })然后请求用户授权NotyPush.requestSubscription()浏览器会弹出权限询问用户允许后Noty 自动注册 Service Worker 并完成pushManager.subscribe({ userVisibleOnly: true })。事件实现位于 src/push.jsrequestSubscription()src/push.js先通过getPermissionStatus()判断当前授权状态再走window.Notification.requestPermission流程授权成功后注册 Worker 并订阅订阅数据subData包含endpoint、p256dh、auth三个字段p256dh/auth为btoa编码后的密钥见 src/push.js。必须在onSubscriptionSuccess回调中保存subData供后端使用。后端发送Node.js 示例安装web-push库后编写发送脚本const webpush require(web-push) const vapidKeys webpush.generateVAPIDKeys() webpush.setGCMAPIKey(YOUR-SERVER-KEY-FROM-FIREBASE-CONSOLE) webpush.setVapidDetails( mailto:youremail.com, vapidKeys.publicKey, vapidKeys.privateKey ) // 填入之前保存的订阅信息 const pushSubscription { endpoint: , keys: { auth: , p256dh: } } // image 与 actions 均为可选 webpush.sendNotification(pushSubscription, JSON.stringify({ title: Noty title, body: Noty body, icon: https://your-icon0-url.png, image: https://your-image-url.png, url: http://ned.im/noty/?refwebPushTest, actions: [ {action: actionYes, title: Yes, icon: https://your-icon1-url.png}, {action: actionNo, title: No, icon: https://your-icon2-url.png} ] }))运行node sendPushExample.js即可推送。Chrome 下的实际效果参考仓库截图检查权限与 Worker 状态NotyPush.getPermissionStatus() granted NotyPush.getPermissionStatus() default NotyPush.getPermissionStatus() denied // 某些场景下需要确认 Service Worker 是否已激活 NotyPush.isSWRegistered() truegetPermissionStatus()在 src/push.js 中兼容了Notification.permission、webkitNotifications、mozNotification与旧版 Chrome 的msIsSiteMode等实现isSWRegistered()src/push.js则检查navigator.serviceWorker.controller.state activated当用户已授权但 Worker 未注册/失效时可据此再次引导订阅。源码结构与二次开发指引从仓库结构看Noty 3.x 的源码组织清晰src/index.js —— Noty 主类构造、show/close 流程、实例与静态 APIsrc/api.js —— 内部 API 层默认值、队列管理、DOM 构建、模态与文档标题控制src/button.js —— 按钮对象src/push.js —— Web Push 封装src/utils.js —— 工具函数类名、事件、音频元素、动画事件等src/noty.scss 与 src/themes/ —— 基础样式与各主题 SCSSlib/ —— 编译产物noty.js、noty.min.js、noty.css及themes/下的独立主题 CSStest/unit/ —— QUnit 单元测试init.test.js与 PhantomJS 驱动脚本phantom.jsindex.d.ts —— TypeScript 类型声明供 TS 项目直接使用。package.json提供的常用脚本npm run build编译主题并产出 lib 产物、npm run devwatch 模式开发、npm test格式检查 lint QUnit 测试、npm run serve-docs本地启动 docsify 文档站点。延伸阅读docs/installation.md完整的安装与模块引入方式docs/options.md全部配置选项与默认值docs/api.md实例/静态 API、回调与自定义模板docs/types.md类型与布局速查docs/themes.md主题列表与预览docs/animations.mdCSS 动画与 bounce.js / mo.js / velocity 完整示例docs/confirm.md确认对话框与Noty.buttondocs/push.mdWeb Push 端到端流程docs/browsers.md浏览器支持情况说明赞分享前端UI组件【免费下载链接】noty⛔️ DEPRECATED - Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.项目地址https://gitcode.com/gh_mirrors/no/noty点击查看免费下载相关推荐网页说没就没Wayback Machine浏览器扩展给网络内容上道终身保险含四大浏览器安装教程网页说没就没Wayback Machine浏览器扩展给网络内容上道终身保险含四大浏览器安装教程 上个月我帮一位开店的朋友整理宣传素材。他翻出一张三年前的前端浏览器控制如何用神奇弹幕打造智能直播间5大核心功能详解如何用神奇弹幕打造智能直播间5大核心功能详解 神奇弹幕是一款专为B站直播设计的全功能自动化助手它能将弹幕姬、答谢姬、点歌姬、回复姬和工作流系统完美整合让主直播如何使用Omi框架实现PWA推送通知Service Worker与Web Push终极指南如何使用Omi框架实现PWA推送通知Service Worker与Web Push终极指南 Omi框架是一个强大的Web Components框架它可以帮助前端Web框架UI组件上一篇终极指南如何使用KillWxapkg从加密文件还原完整微信小程序项目下一篇5分钟搭建跨平台数据采集系统MediaCrawler终极实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考