获得徽章 12
- #青训营笔记创作活动#
2023/01/26 Day13
学习内容：Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
ProTable 功能：
表格内容自适应屏幕宽高，溢出内容表格内部滚动（flex 布局）
表格搜索、重置、分页查询 Hooks 封装 （页面使用不会存在任何搜索、重置、分页查询逻辑）
表格数据操作 Hooks 封装 （单条数据删除、批量删除、重置密码、状态切换等操作）
表格数据多选 Hooks 封装 （支持现跨页勾选数据）
表格数据导入组件、导出 Hooks 封装
表格搜索区域使用 Grid 布局重构，支持自定义响应式配置
表格分页组件封装（Pagination）
表格数据刷新、列显隐、列排序、搜索区域显隐设置
表格数据打印功能（可勾选行数据、隐藏列打印）
表格配置支持多级 prop（示例 ==> prop: user.detail.name）
单元格内容格式化、tag 标签显示（有字典 enum 会根据字典 enum 自动格式化）
支持多级表头、表头内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
支持单元格内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
配合 TreeFilter、SelectFilter 组件使用更佳（项目中有使用示例）展开评论1 - #青训营笔记创作活动#
2023/01/25 Day12
学习内容：一个登录案例包学会 Pinia
Pinia 号称下一代的 Vuex。相比于 Vuex,Pinia确实有了很大进步，最明显的就是删减了复杂的概念，简化了数据流转的过程，现在只剩下了 store、state、getters、actions 这四个核心概念。
接下来使用一个用户登录的案例，来学习 Pinia 的使用。
需要用到：
·vite：创建和管理 vue 项目
·pinia：状态管理
·axios：网络请求
·vite-plugin-mock：提供登录的 mock 接口
·pinia-plugin-persistedstate：状态持久化插件
总结：Pinia 的使用相比 Vuex ，API 更加简单，数据的流转也更加清晰。展开评论1 - #青训营笔记创作活动#
2023/01/24 Day11
学习内容：【404】你访问的页面需要关灯后查看！
这个页面是一个探照灯似的404页面 主要是用到了层级+背景控制。
1.首先用四个div来写动画背景（动画效果需要额外写一下的哦）
2.画灯杆（电线）
在处理动画的时候，使用了一个 cubic-bezier 方法，它是用来定义贝塞尔曲线的（动画效果就是将灯杆旋转不同的角度）
3.画灯罩：灯罩是通过不同的 border-radius 的效果画出来的
4.画灯泡：灯泡也是比较简单的样式，一个半圆加一部分阴影即可
5.一束追光效果：追光就是通过一个边框线画出来的，给边框的宽度和背景透明色就可以看出追光的效果了。
6.添加文字
文字通过定位居中之后，刚好显示在灯光动画效果范围之内，文字颜色和背景色一致之后，通过灯光的透明度效果就可以实现文字显隐了。展开评论1 - #青训营笔记创作活动#
2023/01/21 Day8
学习内容：package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
package.json 的一些常见配置：
描述配置
主要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
文件配置
包括项目所包含的文件，以及入口等信息。
脚本配置
指定项目的一些内置脚本命令，这些命令可以通过 npm run 来执行
依赖配置
运行依赖，也就是项目生产环境下需要用到的依赖。比如 react，vue，状态管理库以及组件库等。
使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。
发布配置
主要是和项目发布相关的配置。
系统配置
和项目关联的系统配置，比如 node 版本或操作系统兼容性之类。这些要求只会起到提示警告的作用，即使用户的环境不符合要求，也不影响安装依赖包。
第三方配置
一些第三方库或应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库。
展开评论1 - #青训营笔记创作活动#
2023/01/20 Day7
学习内容：在vue中，为什么不能用index作为key？
Q:key的作用是什么？
A:key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
简单来说，key是唯一标识，为了让diff算法更准确的找到需要被对比的两个节点。
Q:什么是虚拟DOM？
A:虚拟DOM结构就是一个对象而已，其中描述了每一层容器的特征。在beroreCreated执行的时候，DOM树并没有生成。
虚拟DOM存在的意义就是，减少真实DOM结构的操作，对于浏览器来说，减少开销，提高性能。
Q:什么是diff算法?
A:只要数据源发生变化，就一定会触发watcher观察者函数（Object。defineProperty（））的回调函数，去驱动视图更新，(加_是为了表明这是vue自带的方法).
当点击按钮change以后，list反转变为：list:[3,2,1]，diff算法会根据DOM树，从上到下，从左到右判断值是否更新。问题是，为什么diff就知道谁跟谁去进行比对呢？这就是key的作用了，key是唯一标识符，diff算法会根据key去比对。
Q:为什么不能用index作为key？
[具体见样例]展开评论1 - #青训营笔记创作活动#
2023/01/18 Day5
学习内容：前端应该掌握的浏览器调试技巧
【不简单的console】
1.console.log：除了简单的输出外，还有一个小技巧，假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法，可以更直观的查看变量对应。
2.console.warn：在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
3.console.error：在控制台输出错误信息，用于代码错误和异常的提示
4.console.time和console.timeEnd
5.console.assert：第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
6.console.dir：有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
7.console.table：可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格
8.console.$i：这个功能是让我们可以在 devtool 开发者工具直接使用npm包，当然这个按需功能，需要扩展程序Console Importer作为辅助工具
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
9.breakpoint展开22 - #青训营笔记创作活动#
2023/01/17 Day4
学习内容：抓包知识及抓包工具whistle
【1】什么是抓包？
抓包就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，通过抓包可以对网络信息进行许多操作。
【2】HTTP/HTTPS 抓包原理
HTTP/HTTPS 是应用层使用的通信协议，常见的应用层体系结构是客户端-服务器体系。
对于 HTTP 抓包，无需做过多的处理，只需要让中间人负责转发客户端和服务端的数据包。
对于 HTTPS 抓包，很重要的一步是浏览器的根证书校验……因此只能把中间人的根证书，导入到客户端的操作系统，以此完成建立加密通信时对中间人证书的验证。
【3】抓包工具 whistle
Whistle 是基于 Node 实现的跨平台抓包免费调试工具，其主要特点：完全跨平台、功能强大、操作简单。展开评论1 - #青训营笔记创作活动# #第五届青训营阅读打卡#
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