获得徽章 1
- #青训营笔记创作活动# 2月18日 打卡 day22
学习内容：Tapable源码
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。源码不长，不过自己理解还是有限，结合大佬的文章案例可以看个大概，总结得很细致，值得多读展开评论点赞 - #青训营笔记创作活动# 2月17日 打卡 day21
学习内容：前端实现人脸检测
之前看过python做计算机视觉的例子，这次学了js的例子，引入tensorflow的人脸模型，可以识别人脸远近，张嘴闭嘴，左右眨眼，摇头等。前端可以实现的功能越来越多了，结合人工智能，感觉还能发掘出好多新玩法🤯展开评论点赞 - #青训营笔记创作活动# 2月16日 打卡 day20
学习内容：如何写出漂亮代码
其实技巧前后端通用，大佬给出很多实用的小方法，要记住的话最好还是一个一个试一遍，更重要的是技巧背后体现的思维方法，做什么都是类似的，比如避免重复造轮子，不滥用设计模式，结构能简化就简化，不要嵌套走天下，类和方法单一职责，尽量不混用……展开评论点赞 - #青训营笔记创作活动# 2月15日 打卡 day19
学习内容：又一个屏幕适配方案
和上一个差不多，这次介绍的是两种：方案一不用固定宽高比，最好使用rem，即基于根元素的字体大小；方案二固定宽高比，使用scale，并可设置沿x/y轴缩放。评论点赞 - #青训营笔记创作活动# 2月14日 打卡 day18
学习内容：调试ant design源码
antd的3个入口—— es 目录对应 esm 入口，lib 目录对应 commonjs 入口，dist 目录对应 UMD 入口。git clone --depth=1 --single-branch git@github.com:ant-design/ant-design.git 下载源码，执行 npm run dist 生成 UMD 形式的代码。把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。展开评论点赞 - #青训营笔记创作活动# 2月13日 打卡 day17
学习内容：可视化大屏如何实现自适应
介绍了三个方案：
方案一以16:9为基础，布局基本不变，中间图明显缩放。将px转化为vw和vh单位，使用sass:math，把px转化为vw和vh函数再做后续处理。
方案二是整体缩放，但是这样整张图的比例是固定的，上下或左右两边可能留白。好处是构图不会太变形，看着不别扭。
方案三使用font size of the root element+vh vw方法，构图比例不变，依旧可能会留白，只是实现的途径不一样。
综合对比，没有万用型方案，最好根据显示的元素和位置构图做设计，等比缩放，留白，或改变位置和大小都比较常见。
展开评论点赞 - 2月12日 打卡 day16
学习内容：docker使用指南
开头举的例子很有意思，一下子就能理解用docker做项目的逻辑，大佬
。说了docker的三个核心概念：镜像，容器，仓库。新项目需要使用重复内容的时候不用重新写，直接用docker搭建很省事，有些苦工夫没必要吃，写代码是第一部，自己应该培养高效管理的意识。 #青训营笔记创作活动# 展开评论点赞 - #青训营笔记创作活动# 2月11日 打卡 day15
学习内容：好玩的404页面
画背景-加灯杆-灯罩-灯泡；针对灯杆添加摇晃动画，使用cubic-bezier方法；给div加边框线，可模拟出追光效果。 将文字颜色和背景色设为一样，通过灯光的透明度，模拟文字被照亮，制造探照灯效果。
展开评论点赞 - #青训营笔记创作活动# 2月10日 打卡 day14
怎么把树状结构拍扁？
原本的父子嵌套没有专门的根节点，只是一层层往上，直到第一层级。拍扁后，将树状结构对象化，item成为根节点，每个item设置parentId和childrenIds。简化后，修改只要针对特定的id项，可减少不必要的遍历，降低性能损耗。展开评论点赞