孤独而灿烂的神
立志做人参的萝卜🥕
获得徽章 1
#青训营笔记创作活动#
2月21日打卡day39
就是那种文字根据不同的色块显示不同的颜色，我想着能不能做一个探照灯似的 404 页面呢。毕竟也可以根据不同的白色光照来改变文字颜色的。
颜色阴影部分都是一样的，不一样的地方就在于宽高和动画时长。
大家可以根据自己的想法去修改不同的宽高和时长哦
动画效果需要额外写一下的哦
2月21日打卡day39
就是那种文字根据不同的色块显示不同的颜色，我想着能不能做一个探照灯似的 404 页面呢。毕竟也可以根据不同的白色光照来改变文字颜色的。
颜色阴影部分都是一样的，不一样的地方就在于宽高和动画时长。 大家可以根据自己的想法去修改不同的宽高和时长哦 动画效果需要额外写一下的哦
展开
评论
点赞
#青训营笔记创作活动#
2月20日打卡day37
另外，我们必须知道，vue中key运用的地方------配合v-for使用。key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
2月20日打卡day37
另外，我们必须知道，vue中key运用的地方------配合v-for使用。key是vue中虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug。另外，key的唯一性可以被map数据结构充分利用，时间复杂度仅为o（1）。
展开
评论
点赞
#青训营笔记创作活动#
2月19日 打卡day35
先实例化一个 DisplacementFilter 类，把纹理错位图传入进去，然后把这个过滤器实例添加到 filters 数组里面，最后执行 ticker 在 step 方法里会连续不断的执行， 通过不停改变 x 轴坐标，来实现纹理偏移水体扭曲的效果。
2月19日 打卡day35
先实例化一个 DisplacementFilter 类，把纹理错位图传入进去，然后把这个过滤器实例添加到 filters 数组里面，最后执行 ticker 在 step 方法里会连续不断的执行， 通过不停改变 x 轴坐标，来实现纹理偏移水体扭曲的效果。
展开
评论
点赞
#青训营笔记创作活动#
2月18日 打卡day35
我们这里核心的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个渐变背景，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。
再利用动画，控制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了
2月18日 打卡day35
我们这里核心的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个渐变背景，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。
再利用动画，控制背景的 background-position，这样一个文字渐现再渐隐的文字动画就实现了
展开
评论
点赞
#青训营笔记创作活动#
2月17 打卡day34
主要思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
虽然思路看起来很简单，但是具体实现的过程还是有许多注意点的，接下来我就总结一下一些实现过程中的注意点和细节。
2月17 打卡day34
主要思路：生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。
虽然思路看起来很简单，但是具体实现的过程还是有许多注意点的，接下来我就总结一下一些实现过程中的注意点和细节。
展开
评论
点赞
#青训营笔记创作活动#
2月16 打卡day34
今日学习vue的小用法
这个例子，文本内容使用的是随机数，所以数据对不上不必太在意。另外，既然index的值不固定，不能作为key，那么扩展一下，可不可以使用随机数作为key呢？答案自然是不能够。因为key值无论是删除还是反转，根本就不能找到相同的key，diff算法就毫无意义了，压根没有复用性可言。
在这个demo3里，数据源放了list这个数据，可言尝试循环它，来对比index作为key的结果，将会更加明显哦。
2月16 打卡day34
今日学习vue的小用法
这个例子，文本内容使用的是随机数，所以数据对不上不必太在意。另外，既然index的值不固定，不能作为key，那么扩展一下，可不可以使用随机数作为key呢？答案自然是不能够。因为key值无论是删除还是反转，根本就不能找到相同的key，diff算法就毫无意义了，压根没有复用性可言。
在这个demo3里，数据源放了list这个数据，可言尝试循环它，来对比index作为key的结果，将会更加明显哦。
展开
评论
点赞
#青训营笔记创作活动#
2月15日 打卡day33
表格内容自适应屏幕宽高，溢出内容表格内部滚动（flex 布局）
表格搜索、重置、分页查询 Hooks 封装 （页面使用不会存在任何搜索、重置、分页查询逻辑）
表格数据操作 Hooks 封装 （单条数据删除、批量删除、重置密码、状态切换等操作）
表格数据多选 Hooks 封装 （支持现跨页勾选数据）
表格数据导入组件、导出 Hooks 封装
表格搜索区域使用 Grid 布局重构，支持自定义响应式配置
表格分页组件封装（Pagination）
表格数据刷新、列显隐、列排序、搜索区域显隐设置
表格数据打印功能（可勾选行数据、隐藏列打印）
表格配置支持多级 prop（示例 ==> prop: user.detail.name）
单元格内容格式化、tag 标签显示（有字典 enum 会根据字典 enum 自动格式化）
支持多级表头、表头内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
支持单元格内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
配合 TreeFilter、SelectFilter 组件使用更佳（项目中有使用示例）
2月15日 打卡day33
表格内容自适应屏幕宽高，溢出内容表格内部滚动（flex 布局）
表格搜索、重置、分页查询 Hooks 封装 （页面使用不会存在任何搜索、重置、分页查询逻辑）
表格数据操作 Hooks 封装 （单条数据删除、批量删除、重置密码、状态切换等操作）
表格数据多选 Hooks 封装 （支持现跨页勾选数据）
表格数据导入组件、导出 Hooks 封装
表格搜索区域使用 Grid 布局重构，支持自定义响应式配置
表格分页组件封装（Pagination）
表格数据刷新、列显隐、列排序、搜索区域显隐设置
表格数据打印功能（可勾选行数据、隐藏列打印）
表格配置支持多级 prop（示例 ==> prop: user.detail.name）
单元格内容格式化、tag 标签显示（有字典 enum 会根据字典 enum 自动格式化）
支持多级表头、表头内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
支持单元格内容自定义渲染（支持作用域插槽、tsx 语法、h 函数）
配合 TreeFilter、SelectFilter 组件使用更佳（项目中有使用示例）
展开
评论
点赞
#青训营笔记创作活动#
2月14日 打卡day31
今日学习图片预览功能实现
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
2月14日 打卡day31
今日学习图片预览功能实现
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
展开
评论
点赞
#青训营笔记创作活动#
2月13日打卡day30
今日学习沙盒
总结一下，qiankun 一共有 3 种沙箱：
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
要和这些沙箱结合起来使用，qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
2月13日打卡day30
今日学习沙盒
总结一下，qiankun 一共有 3 种沙箱：
SnapshotSandbox：记录 window 对象，每次 unmount 都要和微应用的环境进行 Diff
LegacySandbox：在微应用修改 window.xxx 时直接记录 Diff，将其用于环境恢复
ProxySandbox：为每个微应用分配一个 fakeWindow，当微应用操作 window 时，其实是在 fakeWindow 上操作
要和这些沙箱结合起来使用，qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day29
今日学习
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。
今天主要介绍一些常见配置，我把它们分为了 7 大类：
描述配置
文件配置
脚本配置
依赖配置
发布配置
系统配置
第三方配置
2月12日 打卡day29
今日学习
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。
package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。
今天主要介绍一些常见配置，我把它们分为了 7 大类：
描述配置
文件配置
脚本配置
依赖配置
发布配置
系统配置
第三方配置
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day28
今日学习
所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式。
而实现这一切的核心就是借助了 Tapable。
关于 Tapable 的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常 Webpack Plugin 开发中更得心应手，解决相关问题更加顺畅。
其次，Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等...
2月11日 打卡day28
今日学习
所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式。
而实现这一切的核心就是借助了 Tapable。
关于 Tapable 的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常 Webpack Plugin 开发中更得心应手，解决相关问题更加顺畅。
其次，Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等...
展开
评论
点赞