用户7878616260530杨易
获得徽章 3
- #青训营笔记创作活动#
2/25日，打卡:Day20
今日学习：今天跟着老师实现了最近简单的火到出圈「羊了个羊」小游戏，老师通过：游戏本体、地图模拟、地图生成、覆盖关系、填充数据、点击交互有等提供的实时代码里基本已经实现了大部分的游戏的基础框架，在基础框架搭建好的基础上再通过道具的实现、动效的实现、样式美化，一个火爆的游戏就诞生了展开评论1 - #青训营笔记创作活动#
2/24日，打卡:Day19
今日学习：今天跟着老师学习了前端应该掌握的浏览器调试技巧：console 是开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn，这几个是常用的，老师重点讲解了有助于调高开发效率的功能：比如：console.warn、nsole.error、console.time和console.timeEndconsole.assert、console.table、console.$i、console.dir、breakpoint展开评论1 - #青训营笔记创作活动#
2/23日，打卡:Day18
今日学习：今天老师讲解的主要是CSS 代码在用起来很繁琐的时候，可以用函数：CSS比较函数，老师介绍最喜欢和最常用的是 clamp()。在这节课中，老师通过一些实际案例详细讲解了如何使用这些比较函数。Clamp(), Max(), 和 Min() 函数展开评论1 - #青训营笔记创作活动#
2/22日，打卡:Day17
今日学习：本节课老师通过讲述借助 CSS 来控制定时器的方法，详细如下：一、hover 延时触发.二、长按触发事件.三、轮播和暂停。这些是老师总结出来的不需要定时器的几个替代方案，相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势:比如：hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果、active配合transition延时、transitionend监听可以实现长按触发效果 、CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果 、可以直接通过:hover来控制台动画的暂停和播放展开评论1 - #青训营笔记创作活动#
2/22日，打卡:Day17
今日学习：本节课老师通过讲述借助 CSS 来控制定时器的方法，详细如下：一、hover 延时触发.二、长按触发事件.三、轮播和暂停。这些是老师总结出来的不需要定时器的几个替代方案，相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势:比如：hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果、active配合transition延时、transitionend监听可以实现长按触发效果 、CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果 、可以直接通过:hover来控制台动画的暂停和播放展开评论1 - #青训营笔记创作活动#
2/21日，打卡:Day16
今日学习：今天跟着老师的案例一步步操作在前端实现活体人脸检测.我们经常能看到
在网页中使用的活体人脸检测，大部分的制作都是在前端录制一段视频，让后端调用第三方接口去判断，但今天老师讲解的是用纯前端方式来实现这个功能。案例从：创建人脸模型、人脸识别、特征检测（通过张嘴，眨眼和左右摇头实现。）展开评论1 - #青训营笔记创作活动#
2/20日，打卡:Day15
今日学习：antd 是 react 主流组件库，我们经常使用它但可能并没有调试过它的源码。
我们可以在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住，这样我们就可以 step into 到该组件定义的地方。
但是这样调试的并不是最初的源码，没有 jsx 和 ts 语法。
想调试最初的 tsx 源码需要用 sourcemap。
antd 有三种入口：es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。
把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。
想要 sourcemap 映射到 tsx 源码，需要把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。展开评论1 - #青训营笔记创作活动#
2/19日，打卡:Day14
今日学习：本节课老师主要讲解如何使用fabric.js 快速开发一个图片编辑器以及
使用fabric.js开发一个编辑器需要用到哪些知识点。老师通过具体的操作案例的架构设计
初始化、背景设置。fabric.js的功能很强大，可以很轻松的开发出一个简版的图片编辑器，自定义素材、模板、字体文件；还可以结合数据接口拼接模板生成图片，很轻松的实现定制模板 + 生成图片的功能，比如我的朋友借助我的功能 + 成语接口生成成语图片，在小红书上斩获了八千多的粉丝。
最后希望大家能够通过这个项目学习到fabric.js的基础用法，感兴趣的话可以一起维护这款小编辑器，欢迎star。展开评论1 - #青训营笔记创作活动#
2/18日，打卡:Day13
今日学习：避免函数过于频繁的执行除了JS 方式， CSS 也可以非常轻易的实现这样一个功能，无需任何框架库.通过本文主要学习到:CSS 实现思路分析以及CSS 动画的精准控制和实现的其他思路.通过 CSS 的思路实现了类似“节流”的功能，相比 JS 实现而言，实现更精简、使用更简单，没有框架限制，下面一起总结一下实现要点：
函数节流是一个非常常见的优化方式，可以有效避免函数过于频繁的执行
CSS 的实现思路和 JS 不同，重点在于在于找到和该场景相关联的属性
CSS 实现“节流”其实就是控制一个动画的精准控制，假设有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，这样就达到了“节流”的效果 ，还可以通过 transition 的回调函数动态设置按钮禁用态 ，这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的.展开评论1 - #青训营笔记创作活动#
2/16日，打卡:Day11
今日学习：
老师通过两个实际案例的讲解：基于rem的适配方案和基于scale的适配方案让我们了解这两个项目的概念，适用场景、项目案例操作等。让我们真正通过案例学习。从案例中学会实操，感谢青训营给予我们的学习平台。展开评论1