面壁人浮川 发布的文章 - 浮川的小窝
首页
休闲直播
4K壁纸
统计
更多
关于
留言
归档
搜 索
1
HelloWorld!
138 阅读
2
前端算法整理
129 阅读
3
关于服务器配置反代隐藏端口中遇到的问题
104 阅读
4
maptalks 一些基础api的再封装(待解耦改装纯方法类)
95 阅读
5
HTTPS原理和通信流程
94 阅读
生活
学习
随笔
吐槽
小秘密
小故事
登录
/
注册
搜 索
SnowLove
累计撰写
65
篇文章
累计收到
5
条评论
首页
栏目
生活
学习
随笔
吐槽
小秘密
小故事
页面
休闲直播
4K壁纸
统计
关于
留言
归档
用户登录
登录
注册
找到
65
篇与
面壁人浮川
相关的结果
2024-09-19
js中sort方法chrome和safari的不同
写业务时遇到的兼容问题 主要是谁平常用safari调试啊 :@(狂汗) :@(狂汗) 顺手点开发现布局有问题 赶紧的实验了下 如图这个以后真要注意了 幸亏没上正式的时候发现的 :@(脸红) :@(脸红)
2024年09月19日
1
0
0
2024-07-18
使用防抖节流犯的低级错误
场景是这样的 有一个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
2024年07月18日
19
0
0
2024-06-21
10年的巨人 今日在我这完结了 但是战争永不停歇
暂无简介
2024年06月21日
0
0
0
2024-03-14
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为啥能加载出来 目前没有找到原因 但是改过打包后 情况就正常了特此记录一下
2024年03月14日
23
0
0
2024-01-31
音乐波形图
暂无简介
2024年01月31日
56
0
0
1
2
...
13