找到
65
篇与
面壁人浮川
相关的结果
-
-
使用防抖节流犯的低级错误 场景是这样的 有一个v3拖拉组件组 当拖动时会回调一个方法 进行整体布局的计算最最初是这样写的methods: { drag_handleBackLayout(newLayout, height) { if (this.gridState.resizing) { throttle(() => { this.drag_changeBackGroundGridRows(height) }, 50)() } debounce(() => { this.saveDisabled = false if (!this.gridState.resizing) this.drag_changeBackGroundGridRows(height) }, 100)() }, }发现毛用没有 函数根本没有起到作用 :@(吐血倒地)然后尝试使用方案2 methods: { ... // 移动、拉伸卡片时重新计算背景网格数据 drag_handleBackLayout(newLayout, height) { // 执行防抖函数 this.drag_debounceForResize() // 执行节流函数 this.drag_debounceForComputed() } ... }开始时我采用了最笨但是管用的写法 data() { return { // 初始化节流函数 drag_debounceToComputed: this.drag_debounceForComputed(), // 初始化防抖函数 drag_debounceToResize: this.drag_debounceForResize() } }， methods: { // 防抖函数 drag_debounceForResize() { return throttle(this.drag_changeBackGroundGridRows, 50) }, // 节流函数 drag_debounceForComputed() { return debounce(() => { if (!resizing) this.drag_changeBackGroundGridRows(height) // 对比新旧数据是否相同 管理工作台保存按钮是否禁用 this.saveDisabled = this.template_compareLayoutData(newLayout, oldLayout) // 保存localStorage信息 并根据状态渲染背景网格 localStorage.setItem('personalComptsList', JSON.stringify(newLayout)) }, 5); }， drag_handleBackLayout(newLayout, height) { // 执行防抖函数 this.drag_debounceToResize(height) // 执行节流函数 this.drag_debounceToComputed() } }这种方式没问题使用闭包创建了属性 整个生命周期只会调用一次初始化后的这个节流函数 但是经过我时间加搜索 发现可以简化下逻辑 用更易懂的写法来编写然后尝试使用方案3methods:{ // 移动、拉伸卡片时重新计算背景网格数据 drag_handleBackLayout(newLayout, height) { this.drag_debounceForResize(height) // 执行节流函数 this.drag_debounceForComputed({ height, newLayout, resizing, oldLayout }) }, // 防抖函数 // 保证防抖节流函数在整个生命周期中返回同一个函数 // 注:使用匿名函数 并且无需使用bind绑定this methods声明的方法vue会自动编定到this上 // 使用箭头函数会找不到this 箭头函数是被创建时的上下文确认this 那this指向的是函数drag_handleBackLayout drag_debounceForResize: throttle(function (height) { this.drag_changeBackGroundGridRows(height) }, 50), // 节流函数 drag_debounceForComputed: debounce(function() { this.saveDisabled = this.template_compareLayoutData(newLayout, oldLayout) }, 5), }注:使用匿名函数 并且无需使用bind绑定this methods声明的方法vue会自动编定到this上使用箭头函数会找不到this 箭头函数是被创建时的上下文确认this 那this指向的是函数drag_handleBackLayout
-
-
ServiceWorker 缓存策略 项目中用到了ServiceWorker 在离线环境中能够加载出最新的文件缓存 避免直接大白瓶或显示404无法访问；在首次首页加载后，也将大部分资源缓存下来，增加后续网站渲染速度，增加用户体验 使用过程中遇到了一个坑 :@(内伤)const plugins = [ new GenerateSW({ cacheId: 'hwork-portal', swDest: 'service-worker.js', sourcemap: false, clientsClaim: true, skipWaiting: true, cleanupOutdatedCaches: true, // maximumFileSizeToCacheInBytes: 2621440, // 2.5Mb，默认值是 2097152(2Mb) runtimeCaching: [{ handler: 'CacheFirst', options: { cacheName: 'js' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (fileType === 'js') { return true } } } }, { handler: 'CacheFirst', options: { cacheName: 'css' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (fileType === 'css') { return true } } } }, { handler: 'StaleWhileRevalidate', options: { cacheName: 'images' }, urlPattern: () => { const pathname = url.pathname || '' if (pathname.includes('xxx')) { const file = pathname.split('?')[0] || '' const fileType = file.split('.')[1] || '' if (['webp', 'png', 'jpg'].includes(fileType)) { return true } } } }] }),上面是webpack中的部分plugins配置 由于项目使用的是微前端 所以最上级应用中配置了sw.js 加载二级应用时 发现了一个很奇怪的现象 js存在缓存的情况下是正常的 当有缓存时直接返回缓存值 但是css就很奇怪了 有缓存 但是sw还是又重新发起了一遍fetch请求 然后我就一通找啊找 :@(吐血倒地) :@(吐血倒地) 最后经过部门老大的提示 发现是二级应用打包的时候 base路径的三级域名并没有跟最上级应用一样 至于不同域名下js为啥能加载出来 目前没有找到原因 但是改过打包后 情况就正常了特此记录一下
-
