
前端
大猫会长
这个作者很懒,什么都没留下…
展开
-
cookie的samesite释义
更多详情。原创 2023-05-11 21:01:01 · 110 阅读 · 1 评论 -
svg中path贝塞尔曲线和圆弧图文详解
svg中path贝塞尔曲线和圆弧图文详解_svg 贝塞尔曲线_晴空闲雲的博客-优快云博客原创 2023-03-06 15:38:20 · 270 阅读 · 0 评论 -
glob语法
glob 在正则出现之前就有了,主要用于匹配文件路径,例如大名鼎鼎的就使用了 glob 规则来匹配、查找并处理各种后缀的文件。在前端工程化的过程中,不可避免地会用 Node.js 来读取文件,例如想找到src目录下所有js和jsx文件,代码应该怎么写呢?有没有感觉很强大呢?更重要的是 glob 语法在命令行就支持,不需要安装任何依赖,例如老板让你创建a1.js到a9.jsb1.js到b9.js这 18 个测试文件的话,怎么操作??[]**{}()原创 2023-02-26 19:31:16 · 829 阅读 · 0 评论 -
vue3+pinia持久化存储
pinia-plugin-persistedstateGitHub - prazdevs/pinia-plugin-persistedstate: 🍍 Configurable persistence and rehydration of Pinia stores.原创 2023-01-23 20:18:28 · 153 阅读 · 0 评论 -
whistle监听方法
系统代理也设置完毕后,在浏览器打开http://192.168.4.238:8899,即可进行抓包。支持载入本地js,也可以在左侧values里编写js,文件名为上面jsPrepend中大括号的名称。安装whistle后,原创 2022-12-02 16:49:08 · 539 阅读 · 0 评论 -
useLayoutEffect与useEffect区别
前会同步执行useLayoutEffect,所以useLayoutEffect里设置的state才是用户直接会看到的实际内容(无视render里state的默认值)useLayoutEffect与useEffect都是在render后执行,并且先同步执行useLayoutEffect,后异步执行useEffect。在render的内容呈现在用户。原创 2022-11-15 16:14:26 · 338 阅读 · 0 评论 -
replace正则括号顺序
正则括号从左往右,并由外向内。replace不破坏原字符串。以return值为最终结果。原创 2022-11-15 13:54:59 · 275 阅读 · 0 评论 -
为什么模块循环依赖不会死循环?CommonJS和ES Module的处理不同?
回到开头的三个问题,答案在文中不难找到:CommonJS和ES Module都对循环引入做了处理,不会进入死循环,但方式不同:CommonJS借助模块缓存,遇到require函数会先检查是否有缓存,已经有的则不会进入执行,在模块缓存中还记录着导出的变量的拷贝值;ES Module借助模块地图,已经进入过的模块标注为获取中,遇到import语句会去检查这个地图,已经标注为获取中的则不会进入,地图中的每一个节点是一个模块记录,上面有导出变量的内存地址,导入时会做一个连接——即指向同一块内存。原创 2022-11-14 16:08:19 · 245 阅读 · 0 评论 -
Symbol用处2则
这段代码对调用者而言非常不友好,因为代码中使用了魔术字符串(Magic string,指的是在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值),导致调用 getValue 函数时需要查看函数代码才能找到参数 key 的可选值。基于以上特性,Symbol 属性类型比较适合用于两类场景中:常量值和对象属性。(2)避免对象属性覆盖。(1)避免常量值重复。原创 2022-10-12 13:35:05 · 441 阅读 · 0 评论 -
new运算符和点运算符优先级的八股面试题
主要是最后一题的解释。原创 2022-10-11 16:17:24 · 185 阅读 · 0 评论 -
slice,splice,substr,substring区别
一个参数,删除某些值。2个参数 ,删除某些值。原创 2022-09-27 14:59:08 · 264 阅读 · 0 评论 -
mouseover/out/enter/leave
mouseover,与之重叠的部分都会触发mouseover,鼠标从子到父和鼠标从父到子都会触发.事件触发顺序是子到父.鼠标默认放在孙级,用键盘快捷键刷新网页,会触发孙到父的所有事件。mouseout离开区域后,与之重叠的部分都会触发mouseout,鼠标从子到父和鼠标从父到子都会触发,事件触发顺序是子到父.鼠标默认放在孙级,用键盘快捷键刷新网页,不会触发事件。mouseenter只会触发自身的进入区域事件,不会冒泡到父级,鼠标是仅父到子,事件触发顺序是仅子元素触发.鼠标在孙级,用键盘快捷键刷新网页,原创 2022-09-26 13:26:15 · 298 阅读 · 0 评论 -
减少重复的请求,once-init,包装promise
对promise请求进行包装,使得同一时间只请求一次。函数初始化,重复调用,初始化将不会再次执行。第一次调用对象的时候会执行。原创 2022-09-19 15:12:24 · 207 阅读 · 0 评论 -
transpileDependencies与babel编译顺序释义
如果transpileDependencies为true或为正则,接着再看package.json里的browserslist是否处在低级浏览器范围,如果处在低级浏览器范围内,那么会把node_modules里用得到的高级语法进行babel编译。如果transpileDependencies为false,则会把node_modules里用到的高级语法原封不动的打包,会造成在低级浏览器访问报错的情况。babel.config.js配置如下,此配置同样适用于vue-cli999。原创 2022-09-07 21:42:59 · 20001 阅读 · 0 评论 -
vue-cli编译node_modules里的语法
此时在vue.config.js文件里配置transpileDependencies:true或用数组的形式正则匹配即可解决问题.transpileDependencies为true可能是自动判断node_modules里有需要的就转换。vue-cli打包转换语法时,node_modules里的依赖默认是不会编译。原创 2022-09-07 16:24:22 · 2117 阅读 · 0 评论 -
如果不想全局安装vue-cli,可以如下操作
最后可以把同层非hello-world文件夹都删除。如果不想全局安装vue-cli,可以如下操作。原创 2022-09-06 22:16:34 · 612 阅读 · 0 评论 -
案例+图解带你一文读懂SVG
...原创 2022-09-02 16:03:36 · 2147 阅读 · 0 评论 -
我们是如何解决偶发性的 502 错误的
...原创 2022-08-05 16:15:38 · 5459 阅读 · 0 评论 -
取消网络请求及同一组件重复请求
因网络原因放弃前一个请求原创 2022-08-05 13:42:54 · 899 阅读 · 0 评论 -
font-variant-numeric让数字等宽
...原创 2022-07-27 15:18:37 · 2586 阅读 · 0 评论 -
async题目
async题目原创 2022-07-08 16:21:36 · 97 阅读 · 0 评论 -
遍历对象方法总结
遍历对象方法总结原创 2022-05-28 18:47:22 · 113 阅读 · 0 评论 -
js 移动端(触摸屏)与PC事件合并写法
var isTouch = ("ontouchstart" in window) ? true : false; var touchStartEvt = isTouch ? "touchstart" : "mousedown"; var touchMoveEvt = isTouch ? "touchmove" : "mousemove"; var touchEndEvt = isTouch ? "touchend" : "mouseup"; var transiti...原创 2022-05-17 14:55:33 · 243 阅读 · 0 评论 -
background-size各值释义
background-size:60%;即:容器宽度的60%(如果只设置第一个值,那么第二个值会自动转换为 “auto”) background-size:60% 80% 强行把背景图宽高拉伸为容器的60%和80%,无视比例.这里的60%和80%指容器的宽和高为准,不是背景图自身的宽高 contain 背景图宽高都小于容器,背景图较大一边抵达边界就停止拉伸 contain 背景图任意一条边大于容器,超出容器的那条边缩小至边界即刻停止11111111 contain 背景图两边都超...原创 2022-05-04 21:14:56 · 606 阅读 · 0 评论 -
tailwindCSS的使用tips
另外如上图的.bceng,用了多个apply时,别忘了结尾的分号必须要加原创 2022-04-23 21:55:12 · 285 阅读 · 0 评论 -
tailwindCSS使用方法
tailwind.config.js文件内的配置,该文件与node_modules同级module.exports = { content: ["./src/**/*.{html,js,vue}","./src/*.{html,js,vue}"], theme: { extend: {}, }, plugins: [],}可以在package.json中新增命令"tw":"npx tailwindcss -i ./src/css/normal.css -o ./s原创 2022-04-17 19:17:13 · 4199 阅读 · 0 评论 -
bigNumberTransform负数的修正
Ⅰ用了别人写的bigNumberTransform 方法,发现负数无效,解决办法是修改if判断如 if (value < 1000 && value>-1000) { newValue[0] = value + '' newValue[1] = '' }Ⅱ另外如果希望4位数的不要显示“5千” ,而要显示5000,那就修改if (num <= 4) { // 千 newValue[0]=value.toFixed(2.原创 2022-04-04 19:44:14 · 167 阅读 · 0 评论 -
虚拟DOM释义
Virtual DOM - 掘金原创 2022-03-02 15:04:40 · 132 阅读 · 0 评论 -
js判断用户是否点击后退按钮进入的页面
比如A页面里有一个立即支付按钮,点击后唤醒微信支付,接着用户输入支付密码,支付成功后跳转到产品页,此时用户点击浏览器的后退按钮,又会回到A页面,可用下方代码替用户刷新一次,以除后患 if(window.performance.navigation.type==2){ window.location.reload() }详细解释performance.navigation.type(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况): 0:网页通过.原创 2022-02-16 10:56:53 · 1135 阅读 · 0 评论 -
vue3使用小程序的wx-open-launch-weapp
理论是vue3需要显示配置需要被忽略的标签,但实际测试下来,就算注释之,也可以正常使用.忽略标签方法说明全局 API | Vue.jsconst vueIns = Vue.createApp({})vueIns.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp')在.vue文件中,按下方格式编写,关键点就是vue3要用v-is<wx-open-lau...原创 2022-02-11 13:55:24 · 2312 阅读 · 0 评论 -
chrome扩展开发,v3后的变化
manifest.json完整格式https://developer.chrome.com/docs/extensions/mv3/manifest/原创 2022-02-09 16:08:26 · 1113 阅读 · 0 评论 -
:nth-of-type理解
遇到nth-of-type,就要先按标签分类,比如对p,span,div进行分类,然后再开始数数原创 2022-02-05 21:45:13 · 654 阅读 · 0 评论 -
iPhone分辨率大全 (iPhone 13、iPhone 13 Pro Max... )
原创 2022-01-06 14:21:39 · 3086 阅读 · 0 评论 -
React Hook 中 createContext & useContext 跨组件透传上下文与性能优化
原文链接React Hook 中 createContext & useContext 跨组件透传上下文与性能优化 - Postbird - 猫既吾命 本文是在:https://juejin.im/post/5ceb36dd51882530be7b1585 的基础上进行的实践,非常建议阅读原文一、React.createContextAPI 文...http://www.ptbird.cn/react-createContex-useContext.html#menu_index_5一、Re原创 2021-10-21 16:39:59 · 924 阅读 · 1 评论 -
esm导出套路
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = typeof globalThis !== 'undefined' ? gl.原创 2021-07-09 15:27:35 · 634 阅读 · 0 评论 -
合并移动及PC端的事件绑定
var isTouch = 'ontouchstart' in window, eStart = isTouch ? 'touchstart' : 'mousedown', eMove = isTouch ? 'touchmove' : 'mousemove', eEnd = isTouch ? 'touchend' : 'mouseup', eCancel = isTouch ? 'touchcancel' : 'mouseup',原创 2021-06-16 14:41:13 · 153 阅读 · 0 评论 -
个人中心画大弧度
height: 20px;//注意高度不能太高background: #99f;-webkit-clip-path: inset(0px 0px 0px 0px round 0px 0px 50% 50%);原创 2021-06-10 14:57:13 · 565 阅读 · 0 评论 -
移动端调试eruda
<scriptsrc="//cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();</script>原创 2021-04-19 14:42:00 · 258 阅读 · 0 评论 -
prototype一直到null
原创 2021-02-09 14:31:29 · 193 阅读 · 0 评论 -
浏览器强缓存和协议缓存
1. 前言浏览器缓存是浏览器将用户请求过的静态资源( html、css、js ),存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载了,不需要再去服务端请求了。但也不是说缓存没有缺点,如果处理不当,可能会导致服务端代码更新了,但是用户却还是老页面。所以前端们要针对项目中各个资源的实际情况,做出合理的缓存策略。缓存的优点: 减少了冗余的数据传输,节省网费 减少服务器的负担,提升网站性能 加快了客户端加载网页的速度 2. 缓存流程这里先介绍一下浏览器缓存原创 2021-02-03 15:39:54 · 232 阅读 · 0 评论