孤独而灿烂的神
立志做人参的萝卜🥕
获得徽章 1
- #青训营笔记创作活动#
2月1日 打卡day18
今日学习css函数小技巧
定位进度条
首先，我们设定一个最小值为 0%
首选值是 --loading CSS变量的当前值
最大值代表当前的加载量减去进度条件的宽度展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day17
今日学习css灵性用法
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
展开评论点赞 - #青训营笔记创作活动#
1月30日 阅读打卡day16
今日学习前端的人脸检测
Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件（足够使用了）。展开评论点赞 - #青训营笔记创作活动#
1月29日 打卡day15
今日学习高级调试用法
antd 的编译工具链在 @ant-design/tools 这个包里从antd/node_modules/@antd-design/tools/lib/getWebpackConfig.js 就可以找到 webpack 的配置：
展开评论点赞 - #青训营笔记创作活动#
1月28日 打卡day14
今日学习开发图片编辑器
要点： 因为框架用的vue，主要解决如何把fabric的实例对象共享给各个功能组件，区分出是未选中、单选、多选状态，然后将选中、取消选中事件暴露给各个功能组件，子组件根据状态进行独立的功能开发。
我的方法是在入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
展开评论点赞 - #青训营笔记创作活动#
1月27日 打卡dagy13
今日学习节流
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。
举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比如只允许每300ms提交一次，这时候我想大部分同学都会到网上直接拷贝一段throttle函数，或者直接引用lodash工具库
展开赞过 评论1 - 1月26日 打卡day12
今日学习实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
#青训营笔记创作活动#展开评论点赞 - #青训营笔记创作活动#
1月25日 打卡day11
今日学习rem是指相对于根元素的字体大小的单位，在日常开发过程中我们通常把根元素（html/body）的字体设置为10px,方便于我们计算（此时子元素的1rem就相当于10px）。
适用场景
不固定宽高比的Web应用，适用于绝大部分业务场景展开评论点赞 - #青训营笔记创作活动#
1月24日 打卡day10
今日学习css惊艳用法
或许，你认为 CSS 只能用来控制网页的结构与样式，但它的功能和应用却超乎你的想象。从逼真的图像到特效动画，优秀的开发者利用它已创造了无数种可能。展开评论点赞 - #青训营笔记创作活动#
1月23日 打卡day9
今日学习高级操作图片压缩
流程：输入「文件夹名称-tinyImg」，接着工具会找到当前项目下所有的tinyImg，接着选择一或多个tinyImg，紧接着，工具会找出tinyImg下所有的png、jpe?g和svga，最后选择压缩模式「全量」或「自定义」，选择需要压缩的图片。展开评论点赞