山西网站建设推荐电子商务和网站开发 职务

山西网站建设推荐,电子商务和网站开发 职务,餐饮管理系统源码,亚星网站代理前端开发必看#xff1a;自定义事件与localStorage监听实战指南#xff08;附调试技 前端开发必看#xff1a;自定义事件与localStorage监听实战指南#xff08;附调试技巧#xff09;引言——当点击不再是唯一的“click”什么是自定义事件——从“原生”到“私家定制”1.…前端开发必看自定义事件与localStorage监听实战指南附调试技前端开发必看自定义事件与localStorage监听实战指南附调试技巧引言——当点击不再是唯一的“click”什么是自定义事件——从“原生”到“私家定制”1. 最朴素的 Event 对象2. CustomEvent 的三板斧3. 兼容性小甜点自定义事件的典型应用场景——不写“发布订阅”四个字但处处都是它1. 表单验证完成通知——把“验证”与“业务”解耦2. 组件间“暗号”通信——爷孙组件传参不走 props3. 微前端消息桥接——子应用之间“隔墙传纸条”localStorage 事件监听机制揭秘——“存储”也能“开口”1. storage 事件的触发条件2. 作用域限制——iframe 的“小圈子”跨标签页同步状态的正确姿势——购物车、登录态一个不落1. 登录态同步——踢人下线即时感知2. 购物车实时更新——避免用户“这个标签页买完了那个标签页还在”3. 避开“同值覆盖”陷阱自定义事件 vs storage 事件——谁才是通信之王踩坑实录——为什么我的 storage 事件没触发1. 同源策略拦路2. 赋值未变不触发3. iframe 嵌套干扰4. 页面首次加载不触发5. 大小超限静默失败高级技巧——封装可复用的事件总线让调试更轻松——Chrome DevTools 中的事件追踪技巧1. Elements 面板监听自定义事件2. Application 面板观察 localStorage 变化3. Performance 面板分析事件延迟实战重构——把电商项目从“面条代码”到“事件驱动”1. 旧代码——紧耦合噩梦2. 新架构——事件驱动清爽到飞起结语——把事件写进代码把优雅留给自己前端开发必看自定义事件与localStorage监听实战指南附调试技巧作者某不愿意透露姓名的「事件驱动狂热分子」警告阅读本文后你可能会对addEventListener产生依赖症并忍不住给所有代码都加上事件派发。请自备咖啡和 debugger概不负责。引言——当点击不再是唯一的“click”如果你还停留在“前端事件 鼠标点击 键盘回车”的阶段那么恭喜你今天这篇文章就是来刷新三观的。现代前端早已不是“用户戳一下页面抖一下”的原始社会了用户在一台设备上登录另一个标签页秒变“已登录”购物车在一个标签页里被清空隔壁标签页的商品图标瞬间熄灭微前端子应用 A 发布了一条“主题切换”消息子应用 B、C、D 集体换装而它们仨压根不知道对方是谁。这一切魔法背后全靠两条看似平平无奇的机制自定义事件CustomEvent——让任何 JS 对象都能“开口说话”storage事件——让localStorage摇身一变成为跨标签广播员。下面我们先把理论塞进冰箱端上代码热菜边吃边聊。什么是自定义事件——从“原生”到“私家定制”1. 最朴素的 Event 对象浏览器自带的click、input本质上都是Event的实例。它们由浏览器亲自派发我们只需监听// 浏览器帮你派发的“原生”事件document.querySelector(#btn).addEventListener(click,e{console.log(浏览器喊你点击了,e.target);});但如果你想自己“造”一个事件比如“表单验证通过”、“微前端子应用加载完成”原生事件就帮不上忙了。这时候轮到CustomEvent出场。2. CustomEvent 的三板斧创建、派发、监听——三步走比把大象关进冰箱还简单// 1️⃣ 创建给事件起个名字再塞点自定义数据constevtnewCustomEvent(vip:formValidated,{detail:{user:阿橘,pass:true,timestamp:Date.now()},bubbles:true,// 允许冒泡cancelable:true// 允许 e.preventDefault()});// 2️⃣ 派发任意 DOM 节点都能当广播员document.dispatchEvent(evt);// 3️⃣ 监听任何地方都能当接收器document.addEventListener(vip:formValidated,e{const{user,pass}e.detail;console.log(收到通知用户“${user}”验证${pass?通过:挂科});});3. 兼容性小甜点CustomEvent在 IE11 及以下需要 polyfill但 2025 年了如果你的用户还在用 IE建议直接把产品经理打包寄给微软// 安全起见可随手写个兜底if(typeofwindow.CustomEvent!function){window.CustomEventfunction(type,opts{}){constedocument.createEvent(CustomEvent);e.initCustomEvent(type,opts.bubbles,opts.cancelable,opts.detail);returne;};}自定义事件的典型应用场景——不写“发布订阅”四个字但处处都是它1. 表单验证完成通知——把“验证”与“业务”解耦!-- 假设这是一个登录框 --formidloginForminputnameuserrequiredinputnamepwdrequiredbutton登录/button/form// validator.js 只负责验证functionvalidate(form){constokform.checkValidity();// 验证完不直接操作 UI而是抛事件form.dispatchEvent(newCustomEvent(vali:done,{detail:{ok,msg:ok?校验通过:字段不完整}}));}document.querySelector(#loginForm).addEventListener(submit,e{e.preventDefault();validate(e.target);});// ui.js 只负责 UI 反馈document.addEventListener(vali:done,e{const{ok,msg}e.detail;document.querySelector(.tip).textContentmsg;if(ok)document.body.classList.add(shake);// 成功动画});好处验证逻辑与 UI 逻辑彻底分手谁也别嫌弃谁。2. 组件间“暗号”通信——爷孙组件传参不走 props// 爷组件classGrandFatherextendsHTMLElement{connectedCallback(){this.addEventListener(kid:wantToy,e{console.log(孙子要玩具,e.detail.toyName);this.giveToy(e.detail.toyName);});}giveToy(name){/* 省略 */}}// 孙组件classGrandSonextendsHTMLElement{onWantToy(){// 一路冒泡到爷爷那里无需中间商this.dispatchEvent(newCustomEvent(kid:wantToy,{detail:{toyName:奥特曼},bubbles:true}));}}3. 微前端消息桥接——子应用之间“隔墙传纸条”微前端里子应用彼此隔离但共享window。我们可以把window当“邮局”// 子应用 A 发布主题变更window.dispatchEvent(newCustomEvent(micro:theme,{detail:{color:#ff69b4}}));// 子应用 B 订阅并换装window.addEventListener(micro:theme,e{document.documentElement.style.setProperty(--theme,e.detail.color);});无需引入全局状态库也不用把主框架改得面目全非事件一抛一接世界都和谐了。localStorage 事件监听机制揭秘——“存储”也能“开口”1. storage 事件的触发条件只有当前页面的 localStorage 被其他同源标签页修改时才会触发window的storage事件。注意关键词同源协议 域名 端口其他标签页自己改自己不会触发真正“变值”新值 ! 旧值// A 标签页localStorage.setItem(cart,JSON.stringify([{id:1,name:键盘}]));// B 标签页 监听window.addEventListener(storage,e{console.log(键,e.key);console.log(旧值,e.oldValue);console.log(新值,e.newValue);console.log(触发 URL,e.url);});2. 作用域限制——iframe 的“小圈子”如果页面里嵌了一个 iframe且 iframe 的源和父页面相同那么父页面改localStorageiframe 可以收到storage事件iframe 改localStorage父页面也能收到。但如果两者不同源就算 iframe 把localStorage敲烂了父页面也聋了。跨标签页同步状态的正确姿势——购物车、登录态一个不落1. 登录态同步——踢人下线即时感知// 登录成功后functionloginSuccess(token){localStorage.setItem(token,token);}// 任意标签页监听被“顶号”window.addEventListener(storage,e{if(e.keytoken!e.newValue){// 有人把 token 清了可能是退出登录location.href/login;}});2. 购物车实时更新——避免用户“这个标签页买完了那个标签页还在”// 添加商品时functionaddCart(good){constcartJSON.parse(localStorage.getItem(cart)||[]);cart.push(good);localStorage.setItem(cart,JSON.stringify(cart));}// 其他标签页同步刷新小红点window.addEventListener(storage,e{if(e.keycart){constcartJSON.parse(e.newValue||[]);renderBubble(cart.length);}});3. 避开“同值覆盖”陷阱// 错误示范值没变事件不会触发localStorage.setItem(num,1);localStorage.setItem(num,1);// 无效派发// 技巧手动制造差异consttoggleJSON.parse(localStorage.getItem(toggle)||true);localStorage.setItem(toggle,JSON.stringify(!toggle));自定义事件 vs storage 事件——谁才是通信之王维度CustomEventstorage 事件通信范围当前页面内可冒泡到 window同源其他标签页数据类型任意 JS 对象detail 里塞满只能是字符串大小约 5 MB 上限性能开销纯内存无 IO有磁盘写入频繁操作注意节流调试难度需要自己在 DevTools 里打断点可在 Application 面板直接看变化是否需要真正改值否是且必须变值一句话总结页面内多组件“叽叽喳喳”——用 CustomEvent跨标签页“隔空投送”——用 storage。踩坑实录——为什么我的 storage 事件没触发1. 同源策略拦路把项目跑在http://localhost:3000和http://localhost:8080两个端口上结果抱怨收不到事件这是“跨源”不是“跨标签”。2. 赋值未变不触发前面提过浏览器只在你“真改”了值才通知。调试时localStorage.setItem(test, 123)连按两次第二次当然没动静。3. iframe 嵌套干扰父页面和 iframe 同源但你在 iframe 里改值却跑到父页面的 DevTools 里打断点结果啥也看不到。请确认监听代码在哪一层。4. 页面首次加载不触发storage事件只会在其它标签页改动时派发。你在当前页面改值还想监听只能自己手动抛自定义事件辅助。5. 大小超限静默失败localStorage容量满后setItem会抛QuotaExceededError但如果你在try/catch里吞了异常就会误以为“设了值却没触发事件”。高级技巧——封装可复用的事件总线手写一个“带命名空间、中间件、自动清理”的轻量总线告别满屏addEventListener// eventBus.jsclassEventBus{constructor(){this._cachenewMap();// 存储事件this._mws[];// 中间件队列}// 注册中间件use(fn){if(typeoffn!function)thrownewTypeError(Middleware must be function);this._mws.push(fn);returnthis;}// 订阅on(name,handler,opts{}){if(!this._cache.has(name))this._cache.set(name,[]);constobj{handler,once:!!opts.once,ctx:opts.ctx||null};this._cache.get(name).push(obj);// 返回取消函数方便 React/Vue 组件卸载时调用return()this.off(name,handler);}// 一次性订阅once(name,handler,ctx){returnthis.on(name,handler,{once:true,ctx});}// 取消订阅off(name,handler){if(!this._cache.has(name))return;if(!handler){this._cache.delete(name);return;}constlistthis._cache.get(name);constidxlist.findIndex(ii.handlerhandler);if(idx-1)list.splice(idx,1);}// 发布asyncemit(name,...args){if(!this._cache.has(name))return;constlistthis._cache.get(name);// 复制一份避免 once 删除导致的索引错位constcopylist.slice();for(const{handler,once,ctx}ofcopy){try{// 中间件洋葱模型constcomposedthis._mws.reduceRight((next,mw)()mw(ctx,args,next),()handler.apply(ctx,args));awaitcomposed();}catch(e){console.error([EventBus] 中间件异常,e);}if(once)this.off(name,handler);}}// 清空clear(){this._cache.clear();}}// 挂载到全局window.$busnewEventBus();// 使用示例// 1. 中间件打印日志$bus.use(async(ctx,args,next){console.time(event-cost);awaitnext();console.timeEnd(event-cost);});// 2. 订阅constun$bus.on(user:login,data{console.log(用户登录,data);});// 3. 发布$bus.emit(user:login,{id:10086,name:阿橘});// 4. 自动取消un();// 组件卸载时调用有了它你可以在任何框架里优雅通信还能加日志、权限、埋点完全不用碰 DOM。让调试更轻松——Chrome DevTools 中的事件追踪技巧1. Elements 面板监听自定义事件打开 DevTools → Elements → 选中document或任意节点右侧 Event Listeners 面板 → 点击→ 输入事件名如vip:formValidated触发事件断点自动停住调用栈一目了然。2. Application 面板观察 localStorage 变化Application → Local Storage → 选中域名修改或新增字段面板实时高亮变动配合storage事件断点可同时观察“值”与“事件”两条线。3. Performance 面板分析事件延迟打开 Performance → 录制操作页面触发大量自定义事件停止录制查看Event (Dispatch)的耗时定位卡顿元凶。实战重构——把电商项目从“面条代码”到“事件驱动”1. 旧代码——紧耦合噩梦// cart.jsfunctionaddToCart(id){$.post(/api/cart,{id},res{if(res.ok){// 直接操作 DOM$(.bubble).text(res.total);// 直接刷新推荐refreshRecommend(res.list);// 直接更新价格条$(.bar).text(res.sum);}});}问题网络、DOM、业务、推荐逻辑全揉一团单元测试要写一堆 mock DOM新人接手先哭半小时。2. 新架构——事件驱动清爽到飞起// cartService.js 只负责与后端通信$bus.on(cart:add,async({id}){constresawaitfetch(/api/cart,{method:POST,body:JSON.stringify({id})}).then(rr.json());if(res.ok){// 只抛事件不碰 DOM$bus.emit(cart:updated,{list:res.list,total:res.total,sum:res.sum});// 同时写 localStorage让其他标签页同步localStorage.setItem(cart,JSON.stringify(res.list));}});// bubbleUI.js 只负责小红点$bus.on(cart:updated,({total}){document.querySelector(.bubble).textContenttotal;});// recommendUI.js 只负责推荐$bus.on(cart:updated,({list}){refreshRecommend(list);});// priceBarUI.js 只负责价格条$bus.on(cart:updated,({sum}){document.querySelector(.bar).textContentsum;});// crossTab.js 只负责跨标签同步window.addEventListener(storage,e{if(e.keycart){constlistJSON.parse(e.newValue||[]);$bus.emit(cart:updated,{list,total:list.length,sum:calcSum(list)});}});重构后各模块只认事件不认 DOM单元测试直接emit事件即可断言新人只需看事件名就能快速定位逻辑。结语——把事件写进代码把优雅留给自己自定义事件和storage事件就像前端世界的“对讲机”和“广播电台”在当前页面让模块们用 CustomEvent 窃窃私语跨标签页让localStorage充当喇叭一嗓子全网皆知。掌握它们你就不再需要“全局变量 轮询”这种原始工具也能优雅地解决耦合、通信、同步等老大难。下次产品经欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进