获得徽章 8
5月7日 打卡day37
原生js写一个图片预览
实现原理 css3中的transform变换
dom事件监听，鼠标移动mousemove，
蒙层
缩放
5月6日 打卡day36
为什么vue中，为什么不能用index作为key
key在v-for中作为虚拟dom标记的唯一标识，通过这个key，diff算法能更加准确和快捷。不使用key的情况下，因为vue的就地更新会选择复用节点，之前的状态被保存，可能会产生一系列的bug
5月5日 打卡day35
不用第三方库实现前端引导页功能
第三方库的选择
vue-tour
driver.js
shepherd.js
intro.js
实现引导页功能
高亮部分与引导部分
引导部分跟着高亮部分移动
高亮部分使用el.cloneNode(true)复制到目标节点
引导部分通过定位实现
过渡动画通过transition实现位置的平滑移动
当位置/内容变化时，需要重新计算位置信息
缺点：目标节点需要深度复制
不能实现边引导边操作
zindex+position+transition
5月4日 打卡day34
提升代码可读性，减少if-else的几个小技巧
使用||运算符来代替if-else
三元运算符替代if-else
switch替代if-else
对象配置
5月3日 打卡day33
一个登录案例学会pinia
安装mockjs
编写mock-server
安装pinia
创建用户store
state、getter、actions
组件中使用pinia，先实例化
持久化直接调用localstorage和sessionstorage或使用插件
5月2日 打卡day32
前端实现docx、pdf格式文件在线预览
docx使用docz-preview插件
pdf使用pdfjs
多格式文件渲染函数映射
不支持的文件提示处理
5月1日 打卡day31
抽象语法树及其广泛应用
形如
{
name:'',
type:'',
children:[
{
name:'',
type:'',
chidren:[]
}
]
编译过程
解析：词法分析，语法分析
转化
生成代码
4月30日 打卡day30
qiankun的原理-js是怎么做沙箱隔离的
snapshotsandbox快照沙箱
legacysandbox通过监听window来直接记录diff内容
proxysandbox
主应用与子应用之间隔离
4月29日 打卡day29
package.json配置解读
简单分为七种
描述配置
文件配置
依赖配置
发布配置
第三方配置
version版本号
repository项目仓库
description项目描述
keywords技术关键字
homepage项目主页
bugs项目bug反馈地址
files指定发布的文件
type模块类型
main入口
browser web端入口
exports条件导出
workspace工作区配置
scripts脚本配置
dependencies运行依赖
devDependencies开发依赖
peerdependencies同伴依赖
optionaldependencies可选依赖
4月28日 打卡day28
为什么建议一定要读一读 Tqpable 源码？
webpack的可插拔架构借助了 Tapable
Tapable内部以特别巧妙的方式实现了发布订阅模式
其中有动态编译类继承和this指向升华等知识点
Tapable类似Nodejs中的 EventEmitter的库 但它更专注于自定义事件的触发和处理
4月26日 打卡day27
什么时候使用Map胜过Object
为什么对象不符合hashmap的使用情况
hashmap中使用对象最明显的缺点是，对象只允许键是字符串和symbol
不必要的继承
名称冲突
clear
检查属性是否存在
4月25日 打卡day26
island架构原理和实践
mpa和spa和构建前端页面常见的两种方式
mpa即多页应用
spa即单页应用
mpa首屏加载性能好，spa后续加载性能好
mpaseo友好，spa不友好
spa状态管理方便
4月24日 打卡day25
前端docker
doxker启动vue项目
新建dockerfile
拉取nginx镜像
在根目录创建nginx配置文件
touch default.conf
在dockerdile中写入
FROM nginx
COPY dist /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
构建镜像
运行容器
4月23日 打卡day24
数据大屏适配方案
方案一：vw vh
屏幕变化后，图标自动使用
字体、间距、位移等尺寸自适应
scale
按照设计稿比例进行缩放
rem+vw vh
动态计算出页面的fontsize从而改变rem的大小
4月22日 打卡day23
20个开源的前端低代码项目
Appsmith
LowCodeEngine
Amis
tmagic-editor
dooring-electron-lowcode
vite-vue3-lowcode
shida
quark-h5
gods-pen
luban-h5
mometa
h5-factory
steedos-platform
lz-h5-edit
tefact
fast-poster
openDataV
mall-cook
form-generator
vjdesign
4月21日 打卡day22
构造高性能树状结构
扁平状树状结构，将嵌套树状结构拍扁
数组对象有专门的父节点，map形式没有
数组对象想添加子节点需要找到父节点，map形式直接添加
4月20日 打卡day21
关于现代包管理器的思考
什么是pnpm
包安装速度极快
磁盘空间利用非常高效
支持monorepo
安全性高
4月19 打卡day20
纯前端实现羊了个羊
地图模拟
单层：二维数组
多层：多维数组
地图生成
用i和j遍历
覆盖关系
填充数据
点击交互
4月18日 打卡day19
前端应掌握的浏览器调试技巧
console.log借助es6解构语法简洁表达
console.warn 控制台输出警告信息
console.error 控制台输出错误信息
console.time和console.timeEnd性能调试和判断
console.dir打印映射
console.table打印成表格
console.$i 直接使用npm包
debugger代码断点
4月17日 打卡day18
css函数
clamp函数 把值限制在一个上限和一个下限之间，它接收三个参数，最小值，首选值，最大值
clac函数 计算
var函数 使用cas变量
max函数 取最大值
min函授 取最小值
