![[疑问]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_31.606e7a5.png)
涂涂图图
获得徽章 1
- #青训营笔记创作活动#
2月18日 打卡day22
今日学习：20个开源的前端低代码项目
低代码：基于可视化+模型驱动+云原生+多端体验技术 ==> 大幅度降本提效+全新的高生产力开发范式
1、Appsmith：主要用于构建管理面板、内部工具和仪表板等，在短时间内创建内部应用程序
2、LowCodeEngine：快速构建业务页面
3、Amis：通过JSON配置生成各种后台页面包括数据获取、表单提交及验证等功能
4、tmagic-editor：快速搭建可视化页面生产平台，非技术人员也可上手
5、dooring-electron-lowcode：可视化页面配置解决，react+typescript+nodejs+electron
6、vite-vue3-lowcode：Vite2.x + Vue3.x + TypeScript，H5低代码平台，支持数据导入导出与修改删除
7、shida：视频可视化搭建项目，快速生产短视频
8、quark-h5：Vue + Koa，渲染编辑器生成的JSON数据
9、gods-pen：码良，在线生成、管理、编辑h5页面，可用于营销场景下的页面制作
10、luban-h5：基于Vue2.0开发的支持拖拽方式来快速生成页面
11、mometa：面向研发、代码可视设计编辑平台，获得所见即所得的可视编辑开发体验
12、h5-factory：专题页面可视化编辑工具，一键生成html文件
13、steedos-platform：使用可视化工具进行模型设计, 页面设计, 流程设计, 报表设计
14、lz-h5-edit：支持拖拽、缩放、旋转、动画、撤销、重做、组合元素等方式来创建H5页面
15、tefact：星搭，使用图形化界面生成 网站、H5和表单，无需任何代码即可生成应用程序
16、fast-poster：Python+Vue开发的通用海报生成器
17、openDataV：Vue3 + vite + TypeScript，可视化开发大屏
18、mall-cook：vue，多页面可视化构建，支持生成 H5、小程序多端商城
19、form-generator：基于Element UI表单设计及代码生成器
20、vjdesign：定义支持的组件及组件属性展开评论点赞 - #青训营笔记创作活动#
2月17日 打卡day21
今日学习：构造高性能的树状结构——拍扁！
数组对象扁平化为Map形式
// 树形结构-数组对象形式
const treeData = [
{
title: "父节点",
key: "0-0",
children: [
{
title: "子节点",
key: "0-0-0",
children: [
{
title: "孙子节点1",
key: "0-0-0-0",
},
{
title: "孙子节点2",
key: "0-0-0-1",
},
]
}
]
}
]
// 树形结构-Map形式
const itemsMap = {
root: {
title: '根节点',
childrenIds: ['0-0-0'],
parentId: '',
},
'0-0-0': {
title: '子节点',
childrenIds: ['0-0-0-0', '0-0-0-1'],
parentId: 'root',
},
'0-0-0-0': {
title: '孙子节点1',
childrenIds: [],
parentId: '0-0-0',
},
'0-0-0-1': {
title: '孙子节点2',
childrenIds: [],
parentId: '0-0-0',
},
}
在Map形式中我们不需要递归循环遍历整棵树
- 增加：在Map中新增一条子项数据直接放在数据结构末尾，再给对应父节点的childrenIds数组中push子项的id
- 修改：拿到对应的id值可以直接修改
- 删除：直接delete对应的id项，然后从父节点中childrenIds数组中移除展开评论点赞 - #青训营笔记创作活动#
2月16日 打卡day20
今日学习：现代包管理器pnpm
pnpm本质上是一个包管理器，与npm/yarn相比，它的优势有：（1）包安装速度极快；（2）磁盘空间利用高效。另外，pnpm还支持monorepo，且安全性高。
安装：npm i -g pnpm
lock文件是为了保证install之后产生确定的node_modules结构。
npm/yarn存在扁平化算法和package非法访问的问题，影响性能和安全。
官方文档：
pnpm.js.org 展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day19
今日学习：浏览器调试技巧
1、console
console.log - 输出信息
console.warn - 输出警告信息
console.error - 输出错误信息
console.time+console.timeEnd - 计算代码段的执行时间，有助于性能调试和判断
console.assert - 第一个参数为false输出错误日志
console.dir - 输出DOM的相关事件和属性
console.table- 将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，
console.$i - 在 devtool 开发者工具直接按需使用npm包
2、breakpoint断点调试
直接断点：点击代码行
代码断点：debugger
条件断点：在对应行数点击右键，选择Add conditional breakpoint...，输入对应的逻辑判断
DOM断点：在Elements选择DOM元素，右键鼠标选择“Break on...”
Vscode断点：在终端面板选择调试终端Javascript Debug Terminal → 选择代码行，高亮小红点 → 运行代码进行调试 → 在Vscode控制台实现断点数据调试展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day18
今日学习：CSS函数
1.Clamp(最小值，首选值，最大值)
使用场景：流体尺寸和定位、装饰性元素、流体高度、loading bar、动态分隔器
2.Max()+Min()：动态border-radius、动态间距展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡day17
今日学习：使用CSS监听事件
1.hover延时触发：与js的mouseover和mouseout等相联系
button:hover{
/*设置一个无关紧要的样式*/
transition: 0s 1s opacity; /*延时 1s */
}
然后使用事件监听器监听transitionend方法
2.长按触发事件
与:hover延时触发逻辑一样，这个借助:active伪类
3.轮播和暂停
使用:hover+animation
.view {
animation: scroll 1s infinite; /*每1s动画，无限循环*/
}
.view:hover{
animation-play-state: paused; /*hover暂停*/
}
@keyframes scroll {
to {
transform: translateZ(.1px); /*无关紧要的样式*/
}
}
然后使用事件监听器监听animationiteration事件展开2点赞 - #青训营笔记创作活动#
2月12日 打卡day16
今日学习：前端实现人脸检测
引入TensorFlow的人脸特征点检测模型，预测点位，推断人脸近似面部几何
特征检测：根据需要取帧与帧之间的距离，根据阈值判断需求展开评论点赞 - #青训营笔记创作活动#
2月11日 打卡day15
今日学习：Antd源码调试
在 renderWithHooks 里调用函数组件的地方打个条件断点，在调用想调试的组件时断住；把 antd 代码下载下来，执行 npm run dist 就可以生成 UMD 形式的代码。把 devtool 设置成 cheap-module-source-map，然后开启 babel-loader 和 ts-loader 的 sourcemap。把产物覆盖 antd 的 dist 下的产物，再调试就可以直接调试 antd 组件的 tsx 源码了。
（没有太看懂，现在我的知识有限，后面有需要再来深入学习吧（恼![[衰]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
）） 展开评论点赞
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
pnpm.js.org![[衰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_34.cf5b4d5.png)
））