用户3276011718750
获得徽章 2
- #青训营笔记创作活动#
2月19日 打卡day19
1. 较为简单的调试：console
console通常是用于在浏览器控制台打印信息，是用于调试的强大工具之一。console对象可以从任何全局对象中访问，它被定义为Window.console，平常可以通过console来调用。平常用的最多的就是console.log()，但是它还有其他方法：
console.assert()—判断一个参数是否为真，false的话抛出异常并在控制台输出相应信息
console.clear()—清空控制台
console.count()—以参数为标识记录调用的次数，调用时在控制台打印标识以及调用次数
console.debug()—在控制台打印一条"debug"级别的信息
console.dir()—显示一个特定的JavaScript对象列表组成的可交互列表
console.dirxml()—打印XML/HTML元素表示的指定对象，否则显示JavaScript对象视图
console.error()—打印一条错误信息
console.group()—创建一个新的内联group，后续所有打印内容都会以子层级的形式展示
console.trace()—输出一个stack trace
console.warn()—打印一个警告信息
2.复杂的业务场景:断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
推荐:IDE 或是 vscode的Javascript Debug Terminal
展开评论点赞 - #青训营笔记创作活动#
2月18日 打卡day44
工作区：指在本地仓库中的全部代码区域；
暂存区：指在本地仓库中通过 git add 后的代码区域；
本地仓库：指在本地仓库中的 git commit 后的代码区域；
远程仓库：远程仓库指的托管代码的服务器。
建立github远程仓库(将本地仓库和远程仓库建立连接):
git init
git add .
git commit -m ‘first commit’
git remote add origin git@github.com:帐号名/仓库名.git
git pull origin master
git push origin master # -f 强推
git clone git@github.com:git帐号名/仓库名.git展开评论点赞 - #青训营笔记创作活动#
2月16日 打卡day36
首先什么是key:--->key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。
缺点一:使用index作为key，会导致diff中的优化失效（降低了复用性，违背了虚拟DOM的初衷）。原本可以复用的东西，不能被复用，徒然增加了性能开销，浪费性能
缺点二:使用index作为key时，在删除数据时，因为vue不会深入地区对比子组件的文本内容，所以会错误移除VDOM中的节点（index的值是不固定的）。展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day27
1.Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
2.如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day17
不需要定时器的几个替代方案。
CSS 在控制定时器的开启和暂停上更有优势，下面总结一下
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
展开评论点赞 - #第五届青训营阅读打卡#
2023年2月13日 打卡day29
vue3 + vite的实用技巧
1.几何画板的基本开发思路
首先 元素创建,编辑,拖拽,
然后是图层管理
导入导出
利用几何和代数学知识解决前端问题展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡 day12
通过CSS来实现点击事件的节流:
使用pointer-events,对点击事件进行限制;
然后通过animation来进行时间的限制
除此之外，还需要有触发时机，这里是点击行为，所以必然和伪类:active有关联。
通过设置动画,在点击按钮时改 animation:none即可
button{
animation: throttle 2s step-end forwards；
}
button:active{
animation: none;
}
@keyframes throttle {
from { pointer-events: none; }
to { pointer-events: all; }
}
展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡 day11
屏幕适配的两种方案
方案一:我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。
transform: scaleX(x); / 沿x轴方向缩放/
transform: scaleY(y); / 沿y轴方向缩放/
transform: scale(); / 同时沿x轴和y轴缩放/
方案二：使用rem展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡da12
如何才能🚫开发者操作dom 看见这个问题我有点懵逼![[微笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
。看完之后了解沙箱。
沙箱：SanBox就是把你的程序关起来，处于一个隔离的环境下，不对外界的其他程序造成影响。
问题解决： 用iframe来创建沙箱环境，设置黑名单（blacklist）把document XMLHttpRequest fetch WebSocket来🈲开发者操作DOM和接口
展开评论点赞 - #青训营笔记创作活动#
2 月 5日 打卡day9
在前端，我们静态页面中使用较多的就是图片，而且由于图片体积大，导致图片加载时间很长，我们就有了优化图片的技术-压缩
主要是五步：
1.查找：找出所有的图片资源；
2.分配：均分任务到每个进程；
3.上传：把原图上传到TinyPng；
4.下载：从TinyPng中下载压缩好的图片；
5.写入：用下载的图片覆盖本地图片；展开评论点赞
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
。看完之后了解沙箱。