获得徽章 10
- #青训营笔记创作活动#
2023/01/27 Day14
学习内容：推荐16个前端必备的实用工具与网站
1. GitHub Desktop
2. 图片在线压缩：
tinypng.com 大于5M可以用 squoosh.app
3. 在线代码编辑：codepen.io codesandbox.io 另外 掘金的也挺好用的
4. JSON格式化：www.json.cn
5. 代码生成图片：carbon.now.sh
6. 表情符号：www.emojiall.com
7. 矢量图标-iconfont：www.iconfont.cn
8. css3动画：www.webhek.com
9. 封面模板-canva：www.canva.cn
10.高清图片-UnSplash：unsplash.com
11. 在线画图：boardmix.cn
12. 快速部署建站：surge.sh
13. 在线性能评测：pagespeed.web.dev
14. 多平台测试：responsively.app
15. Chrome扩展组件：chrome.zzzmh.cn
16. 在线简历：www.500d.me 展开评论点赞 - #青训营笔记创作活动#
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/23 Day10
学习内容：在 JavaScript 中，什么时候使用 Map 或胜过 Object?
object的缺点：对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。更重要的是，使用对象做 Hash Map 会造成混乱和安全隐患。
与 Object 相比，Map 为各种常见任务提供了专门的API:
·Map.prototype.has 检查一个给定的项是否存在，与必须在对象上使用
·Map.prototype.get 返回与提供的键相关的值
·Map.prototype.size 返回 Map 中的项的个数
·Map.prototype.clear 可以删除 Map 中的所有项
总结：
·Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
·如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
展开评论点赞 - #青训营笔记创作活动#
2023/01/22 Day9
学习内容：超强的苹果官网滚动文字特效实现
一、使用 background-clip 实现
·background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
·添加 background-clip:text，可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
·将文字设为透明 color: transparent
·因此，对于上述效果，我们只需要实现一个从透明到渐变色到透明的渐变背景即可，随着鼠标的滚动移动背景的 background-position 即可
·再利用动画，控制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了
二、使用 mix-blend-mode 实现
（略）展开评论点赞 - #青训营笔记创作活动#
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/19 Day6
学习内容：前端的docker使用指南
Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
具体安装步骤略。
docker 底层使用了一些 linux 内核的特性，大概有 namespace，cgroups 和 ufs。
docker 使用 linux namespace 构建隔离的环境，它由以下 namespace 组成
pid: 隔离进程
net: 隔离网络
ipc: 隔离 IPC
mnt: 隔离文件系统挂载
uts: 隔离hostname
user: 隔离uid/gid
docker run 创建容器
docker stop 停止容器
docker rm 删除容器
--rm：当停止容器时自动清楚容器
-it：可交互式、赋予 tty 的方式
--name：为容器指定名称
-p host-port:container-port：宿主机与容器端口映射，方便容器对外提供服务
nginx:alpine：基于该基础镜像创建容器
docker ps 列出所有容器
docker port 查看容器端口映射
docker stats 查看容器资源占用
docker compose version 查看版本号
docker compose up 启动容器
展开评论点赞 - #青训营笔记创作活动#
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
tinypng.com