程序小猿2
学生
|
天津理工大学
平平无奇的大学生，喜欢编程......
获得徽章 0
- #青训营笔记创作活动#
12月31日 打卡day24
今日学习
vm vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦scale1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单2.一次处理后不需要在各个图表中再去单独适配1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。rem + vm vh1.获得 rem 的基准值2.动态的计算html根元素的font-size3.图表中通过 vm vh 动态计算字体、间距、位移等1.布局的自适应代码量少，适配简单1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况2.图表需要单个做字体、间距、位移的适配展开评论点赞 - #青训营笔记创作活动#
12月30日 打卡day23
今日学习
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
1、Appsmith 2、LowCodeEngine 3、Amis 4、tmagic-editor 5、dooring-electron-lowcode
6、vite-vue3-lowcode 7、shida 8、quark-h5 9、gods-pen 10、luban-h5 11、mometa
12、h5-factory 13、steedos-platform 14、lz-h5-edit 15、tefact 16、fast-poster 17、openDataV
18、mall-cook 19、form-generator 20、vjdesign展开评论点赞 - #青训营笔记创作活动#
12月29日 打卡day22
今日学习
我们平时见到的树状结构一般都是这样的，每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。
我们可以发现将整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。展开评论点赞 - #青训营笔记创作活动#
12月28日 打卡day21
今日学习
虽然 pnpm 内部做了非常多复杂的设计，但实际上对于用户来说是无感知的，使用起来非常友好。并且，现在作者现在还一直在维护，目前 npm 上周下载量已经有 10w +，经历了大规模用户的考验，稳定性也能有所保障。
因此，综合来看，pnpm 是一个相比 npm/yarn 更优的方案，期待未来 pnpm 能有更多的落地。展开评论点赞 - #青训营笔记创作活动#
12月26日 打卡day20
今日学习
道具的实现：暂存道具 随机道具 撤销道具
动效的实现：从排堆进入 pendding 区域 从 pendding 区域进入暂存区 使用随机道具时候的动画 集齐 3 个卡片时候的消除动画展开评论点赞 - #青训营笔记创作活动#
12月25日 打卡day19
今日学习
曾经我只会一个console.log，但是我充满了自信，觉得一个打印输出就能解决所有问题。后来，在阅读vue源码的旅途里，我感受到了迷茫，无所适从，觉得每一处都需要打印输出，才能解决我的困惑，所以我觉得我需要新的帮手了，最终我凭借着debugger杀出重围。再后来，在为公司提供基础框架和组件库的同时，各种类型的问题纷纷而至，页面渲染问题，网络问题，代码编译问题，依赖包问题，脚手架问题，越来越力不从心。有句话说的好，当你觉得力所不逮时，你需要继续学习了。后来我拥有了打印输出、普通断点、条件断点、DOM断点、VS code 断点等调式方式，稍微有些不那么彷徨。展开评论点赞 - #青训营笔记创作活动#
12月24日 打卡day18
今日学习
Clamp(), Max(), 和 Min() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。展开评论点赞 - #青训营笔记创作活动#
12月23日 打卡day17
今日学习
:hover配合transition延时、transitionend监听可以实现鼠标经过延时触发效果
:active配合transition延时、transitionend监听可以实现长按触发效果
CSS 动画设置infinite后配合animationiteration监听可以实现周期性触发效果
可以直接通过:hover来控制台动画的暂停和播放
当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active）有类似功能的都可以朝这个方向去思考，是不是可以实现地更加优雅？
展开评论点赞 - #青训营笔记创作活动#
12月22日 打卡day16
今日学习
引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。
取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
取2帧 [10,152]占[0,17]的比例,判断递增，取第一帧和最后最后一帧的距离，根据阈值判断张嘴。
根据左眼[159, 144] 右眼[385, 374]的距离，判断连续4帧小于阈值，即可判断眨眼了。
根据左脸[195, 93] 右脸[195, 323]的相差距离，取4帧数据，根据距离和正负数，来判断向左转和向右转。展开评论点赞 - #青训营笔记创作活动#
12月21日 打卡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。
把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
用 antd 组件写业务逻辑之余，对什么组件感兴趣，可以顺便去看看它的源码，它不香么？展开评论点赞