获得徽章 10
- #青训营笔记创作活动#
2023/01/17 Day4
学习内容：抓包知识及抓包工具whistle
【1】什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以对网络信息进行许多操作。
【2】HTTP/HTTPS 抓包原理
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。
对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。
对于 HTTPS 抓包，很重要的一步是浏览器的根证书校验……因此只能把中间人的根证书，导入到客户端的操作系统，以此完成建立加密通信时对中间人证书的验证。
【3】抓包工具 whistle
Whistle 是基于 Node 实现的跨平台抓包免费调试工具，其主要特点：完全跨平台、功能强大、操作简单。展开赞过
评论1 - #青训营笔记创作活动#
2023/01/16 打卡Day3
内容：模仿《羊了个羊》设计《狗了个狗》
主要部分：（1）规划存放block块的区域 （2）规划收集盒区域
思路：
（1）生成指定个数得Block块，(一组7个Block，三组为起点，因为三个相同的Block才会消失，（后续的生成也必须围绕3的倍数来生成对应的组)，存放到Block盒中。
（2）覆盖逻辑，Block的渲染从第一个开始，到最后一个结束。也就是按照数组的顺序，那么层级关系也就很明显了，优先渲染的Block会被下一次渲染的Block覆盖掉（重叠的话会被覆盖,如果两个Block离得很远，就不会被覆盖）我们就判断当前Block的后面的所有元素 是否有和我重叠的,如果有就被遮挡，否则不遮挡。
（3）当点击上方的Block块时，根据x,y定位 移动到对应的收集盒的位置
（4）当点击Block块，如果发现在收集盒已经存在相同的Block时，那么就将当前点击的Block插入到相同的Block位置，后面的Block依次向后移动一个Block的宽度
（5）当出现三个一起的Block时，触发清除，删除Dom上的Block块的实例Dom，并将收集盒中空余的位置后面的元素诺到前面（比如中间的三个删除了，那么就需要把后面的挪到这里来，因为这里已经空了
（6）当收集盒中元素已经满了且无法清除时，表示游戏结束
（7）当收集盒和Block盒都为空时，表示游戏胜利展开评论点赞 - #青训营笔记创作活动#
2023/01/15 Day2
学习内容：纯JS手写一个拖拽效果
思路：
鼠标的三个事件分别是 mousedown，mousemove，mouseup 。
当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态。
接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。
在监听事件的 event 对象中，有几个参数是比较重要的：
clientX，clientY 标识的鼠标当前横坐标和纵坐标，
offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标。
在 mouseup 鼠标抬起时判断是否在目标区域中，如果是，则用鼠标获取到的 当前的偏移量 - 初始坐标 得到元素实际在目标区域中的位置。
（代码略）展开评论点赞 - #青训营笔记创作活动# #第五届青训营阅读打卡#
2023/1/14 Day1
【JavaScript 必须学会的11 个工具方法】
1.计算距离下次生日还有多少天
·借助moment实现
·获取到今年的生日： moment().format('YYYY-') + '12-19'
·获取下次生日的时间：moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
2.回到顶部
const timeTop = setInterval(() => {
document.documentElement.scrollTop = scrollTopH.value -= 50
if (scrollTopH.value <= 0) {
clearInterval(timeTop) }}, 10) }
3.复制文本：clipboardData 在页面上将需要的东西复制到剪贴板上；通过创建 dom 元素，去把要复制的内容拿到；拷贝当前内容到剪贴板；删除 el 节点；
4.防抖/节流
5.过滤特殊字符
·首先设置一个模式
·主要通过 replace ，pattern 规则 去把字符替换成空 最后拼接在 resultStr
·当循环结束的时候返回最后结果 resultStr
6.常用正则判断
·校验2-9位文字 ：^[\u4e00-\u9fa5]{2,9}$
·校验手机号：^1[3,4,5,6,7,8,9]\d{9}$
·校验6到18位大小写字母数字下划线组成的密码：^[a-zA-Z0-9_]{6,18}$
7.初始化数组：Array(6).fill()
8.将 RGB 转换为十六进制：'#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
9.检测是否是一个函数："function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";
10.检测是否为一个安全数组： Array.isArray(array) ? array : []
11.检测对象是否为一个安全对象：首先要去判断当前对象是否为有效对象
展开赞过 11 - #第五届青训营阅读打卡#
2023/1/14 Day1
【JavaScript 必须学会的11 个工具方法】
1.计算距离下次生日还有多少天
·借助moment实现
·获取到今年的生日： moment().format('YYYY-') + '12-19'
·获取下次生日的时间：moment(birthdayTime).add(1, 'y').format('YYYY-MM-DD')
2.回到顶部
const timeTop = setInterval(() => {
document.documentElement.scrollTop = scrollTopH.value -= 50
if (scrollTopH.value <= 0) {
clearInterval(timeTop) }}, 10) }
3.复制文本：clipboardData 在页面上将需要的东西复制到剪贴板上；通过创建 dom 元素，去把要复制的内容拿到；拷贝当前内容到剪贴板；删除 el 节点；
4.防抖/节流
5.过滤特殊字符
·首先设置一个模式
·主要通过 replace ，pattern 规则 去把字符替换成空 最后拼接在 resultStr
·当循环结束的时候返回最后结果 resultStr
6.常用正则判断
·校验2-9位文字 ：^[\u4e00-\u9fa5]{2,9}$
·校验手机号：^1[3,4,5,6,7,8,9]\d{9}$
·校验6到18位大小写字母数字下划线组成的密码：^[a-zA-Z0-9_]{6,18}$
7.初始化数组：Array(6).fill()
8.将 RGB 转换为十六进制：'#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
9.检测是否是一个函数："function" && typeof obj.nodeType !== "number" && typeof obj.item !== "function";
10.检测是否为一个安全数组： Array.isArray(array) ? array : []
11.检测对象是否为一个安全对象：首先要去判断当前对象是否为有效对象展开评论点赞