西西早早
获得徽章 1
- #青训营笔记创作活动#
2023年2月6日 打卡day12
1.什么是抓包？抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以：
分析网络问题
业务分析
分析网络信息流通量
网络大数据金融风险控制
探测企图入侵网络的攻击
探测由内部和外部的用户滥用网络资源
探测网络入侵后的影响
监测链接互联网宽频流量
监测网络使用流量（包括内部用户，外部用户和系统）
监测互联网和用户电脑的安全状态
作为前端开发者，通常是抓取应用层的 HTTP/HTTPS 的包。
2.HTTP/HTTPS 抓包原理
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。一个中间人进程负责抓包，每次目标进程之间的会话都先与中间人进程通信，再进行转发。
对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。HTTP 是明文传输，容易受到中间人攻击，不安全。
HTTPS 语义仍然是 HTTP，只不过是在 HTTP 协议栈中 http 与 tcp 之间插入安全层 SSL/TSL。安全层采用对称加密的方式加密传输数据和非对称加密的方式来传输对称密钥，解决 http 数据没有加密、无法验证身份、数据容易纂改三个核心问题。
3.抓包工具whistle展开评论点赞 - #青训营笔记创作活动#
2023年2月3日 打卡day11
1.计算距离下次生日还有多少天
2.回到顶部
3.复制文本
4.防抖/节流
5.过滤特殊字符
6.常用正则判断
7.初始化数组
8.将RGB转化为十六进制
9.检测是否为一个函数
10.检测是否为一个安全数组
11.检测对象是否是一个安全对象展开评论点赞 - #青训营笔记创作活动#
2023年2月2日 打卡day10
什么是 Monorepo?
Monorepo 就是把多个项目放在一个仓库里面，相对立的是传统的 MultiRepo 模式，即每个项目对应一个单独的仓库来分散管理。
MultiRepo的缺点：
1.代码复用 因为不同的仓库工作区的割裂，导致复用代码的成本很高，开发调试的流程繁琐，甚至在基础库频繁改动的情况下让人感到很抓狂，体验很差。
2.版本管理 当项目多了之后，很容易出现依赖更新不及时的情况。
3.项目基建 由于在 MultiRepo 当中，各个项目的工作流是割裂的，因此每个项目需要单独配置开发环境、配置 CI 流程、配置部署发布流程等等，甚至每个项目都有自己单独的一套脚手架工具。这些项目里的很多基建的逻辑都是重复的，各个项目间存在构建、部署和发布的规范不能统一的情况，这样维护起来就更加麻烦了。
Monorepo的优点：
1.工作流的一致性 由于所有的项目放在一个仓库当中，复用起来非常方便，如果有依赖的代码变动，那么用到这个依赖的项目当中会立马感知到。并且所有的项目都是使用最新的代码，不会产生其它项目版本更新不及时的情况。
2.项目基建成本的降低 所有项目复用一套标准的工具和规范，无需切换开发环境，如果有新的项目接入，也可以直接复用已有的基建流程，比如 CI 流程、构建和发布流程。这样只需要很少的人来维护所有项目的基建，维护成本也大大减低。
3. 团队协作也更加容易 一方面大家都在一个仓库开发，能够方便地共享和复用代码，方便检索项目源码，另一方面，git commit 的历史记录也支持以功能为单位进行提交，之前对于某个功能的提交，需要改好几个仓库，提交多个 commit，现在只需要提交一次，简化了 commit 记录，方便协作。
展开评论点赞 - #青训营笔记创作活动#
2023年2月1日 打卡day9
Object:
1.为什么对象不符合 Hash Map 的使用情况:
在 Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。更重要的是，使用对象做 Hash Map 会造成混乱和安全隐患。
2.不必要的继承:
尽管 hashMap 是用一个空的对象字面量创建的，但它自动继承了 Object.prototype。由于原型继承，我们现在有两种类型的属性被混淆了：存在于对象本身的属性，即它自己的属性，以及存在于原型链的属性，即继承的属性。因此，我们需要一个额外的检查（例如hasOwnProperty）来确保一个给定的属性确实是用户提供的，而不是从原型继承的。由于属性解析机制在 JavaScrip t中的工作方式，在运行时对 Object.prototype 的任何改变都会在所有对象中引起连锁反应。这就为原型污染攻击打开了大门，这对大型的JavaScript 应用程序来说是一个严重的安全问题。
3.名称冲突:
当一个对象自己的属性与它的原型上的属性有名称冲突时，它就会打破预期，从而使程序崩溃。
4.次优的人机工程学:
Object 没有提供足够的人机工程学，不能作为 hash map 使用，许多常见的任务不能直观地执行。
Map:
1.Map 支持任何数据类型的键。更重要的是，Map 在用户定义的和内置的程序数据之间提供了一个干净的分离，代价是需要一个额外的 Map.prototype.get 来获取对应的项。Map 也提供了更好的人机工程学。与 Object 相比，Map 为各种常见任务提供了专门的API。
2.一般来说，当键为（非数字）字符串时，Map 在所有操作上都优于 Object。
总结：
1.Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
2.如果需要一个频繁更新的 hash map，使用 Map更合适；如果用一个固定的键值集合（即记录），使用Object更合适，并注意原型继承带来的陷阱。
展开评论点赞 - #青训营笔记创作活动#
2023年1月20日 打卡day8
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。可以应用在以下场景:
1.流体的尺寸和定位
当容器的宽度变小时，我们要缩小图片的尺寸，这样才不会变形。一般使用百分比单位来解决，如 width: 20%，但是这种方式没有给我们太多的控制。而clamp （）函数能够适用于有一个流体尺寸，要求有最小值和最大值的场景。
2.装饰性元素
有时候，我们需要在页面边角加一些修饰元素，该修饰元素需要具有响应式，使用clamp()函数比使用媒体查询更简洁
3.流体高度
有时候，我们页面的主区的高度需要根据视口大小而变化。这种场景，我们倾向于通过媒体查询或使用视口单位来改变这种情况，也可以混合使用固定值和视口单位。但需要注意在较大的视口上高度不能太过高，所以我们需要设置一个最大高度,使用CSS clamp()，我们可以只用一个CSS声明来设置最小、首选和最大高度。
4.Loading Bar
5.动态分割器 使用 clamp 而不需要媒体查询的解决方案
6.动态 border Radius
我们可能需要根据视口宽度来改变一个组件或一个网格的间距。有了CSS函数就只需要设置一次。展开评论点赞 - #青训营笔记创作活动#
2023年1月19日 打卡day7
1. position: sticky 场景：标题在滚动的时候，会一直贴着最顶上。
2. :empty 选择器 平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出 bug 了，而是确实没有数据。一般的做法是我们人为的判断当前数据返回列表的长度是否为 0，如果为 0 则显示一个 “暂无数据” 给用户，反之则隐藏该提示。通过 :empty 选中内容为空的容器，然后通过伪元素为空容器添加提示。
3. gap 适用于 Grid 布局、Flex 布局以及多列布局 避免计算得到一个除不尽的值
4. background-clip: text 可以做一个带背景的文字效果
5. user-select 网页和 APP 有个不同点是，网页上的字是可以通过光标选中的，而 APP 的不行 user-select 属性可以 禁用光标选中 ，让网页看着和移动端一样。
6. :invalid 伪类 表示任意内容未通过验证的 input 或其他 form 元素。有了 :invalid 属性后，我们就可以不用 JS 也能实现校验提示的效果了。
7. :focus-within 伪类 表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。 可以根据子元素的状态来改变父元素的样式
8. mix-blend-mode:difference 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference 表示差值。展开评论点赞 - #青训营笔记创作活动#
2023年01月18日 打卡day6
1.在实现颜色选择器时，用CSS代替复杂的JS代码
2.用纯 CSS 就能实现“打字效果”
3.通常采用JS实现滚动条立即触顶/触底效果，而CSS 一行代码就可解决了：html, body { scroll-behavior:smooth;
}
4. CSS scroll-snap-type: x mandatory; 可以顺滑切图。当滑动横向滚动条到一定位置时，会自动为你切图，这样显得流畅展开评论点赞 - #青训营笔记创作活动#
2023年1月17日 打卡day5
用HTML5 的拖拽放置 (Drag 和 Drop) 来实现元素拖拽，它的样式太过简陋，无法实现更高级的用户体验。因此采用原生 JS 实现一个富有动感的自定义拖拽效果，受益颇多。评论点赞 - #青训营笔记创作活动#
2023年1月16日 打卡day4
替换if else 的方法：
1.短路运算 逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。
2.三元运算符
3.switch case代码简洁，适合多重判断
4.对象配置/策略模式 对象配置看起来跟 策略模式 差不多，都是根据不同得参数使用不同得数据/算法/函数。
策略模式就是将一系列算法封装起来，并使它们相互之间可以替换。被封装起来的算法具有独立性，外部不可改变其特性。展开评论点赞 - #青训营笔记创作活动#
2023年1月15日 打卡day3
console.log在控制台输出内容。
console.dir对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
console.warn 在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.time和console.timeEnd这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。
console.error在控制台输出错误信息，用于代码错误和异常的提示
console.assert第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的
console.table可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的。
console.$i让我们可以在 devtool 开发者工具直接使用npm包，当然这个按需功能，需要扩展程序Console Importer作为辅助工具以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
断点：直接断点 代码断点 条件断点 DOM断点 VS code断点展开评论点赞