用户3493817625623
获得徽章 1
#青训营笔记创作活动#
2月9日 打卡day30
1.||的短路运算
let c = a || b
2.三元运算符
n >= 2 ? add(n - 1) : result;
3.switch case
4.对象配置/策略模式
let type = 'A'
let tactics = {
'A': 1,
'B': 1,
'C': 2,
'D': 3,
default: 0
}
console.log(tactics[type]) //1
2月9日 打卡day30
1.||的短路运算
let c = a || b
2.三元运算符
n >= 2 ? add(n - 1) : result;
3.switch case
4.对象配置/策略模式
let type = 'A'
let tactics = {
'A': 1,
'B': 1,
'C': 2,
'D': 3,
default: 0
}
console.log(tactics[type]) //1
展开
评论
点赞
#青训营笔记创作活动#
2月8日 打卡day29
1.Pinia的核心功能：
store：状态仓库
state：状态，和 vuex 保持一致
getters：类似组件的计算属性，和 vuex 中的 getters 的保持一致
actions：和 vuex 中的 actions 保持一致，可以处理逻辑并修改 state
2.Pinia的使用
- 创建
创建一个pinia 插件实例供 Vue 注册和使用。
- 注册
app 实例调用 use 方法来注册插件
- 创建用户store
使用 defineStore 方法创建 store，store 的命名遵循 useXXX 的形式。创建时需要指定一个唯一的 id
- 组件中使用 Pinia
导入后，先实例化 store；实例化 store 之后，可以直接使用它的 state、getters 和 actions
2月8日 打卡day29
1.Pinia的核心功能：
store：状态仓库
state：状态，和 vuex 保持一致
getters：类似组件的计算属性，和 vuex 中的 getters 的保持一致
actions：和 vuex 中的 actions 保持一致，可以处理逻辑并修改 state
2.Pinia的使用
- 创建
创建一个pinia 插件实例供 Vue 注册和使用。
- 注册
app 实例调用 use 方法来注册插件
- 创建用户store
使用 defineStore 方法创建 store，store 的命名遵循 useXXX 的形式。创建时需要指定一个唯一的 id
- 组件中使用 Pinia
导入后，先实例化 store；实例化 store 之后，可以直接使用它的 state、getters 和 actions
展开
评论
点赞
#青训营笔记创作活动#
2月7号 打卡day28
使用第三方库来实现文档预览功能，并封装成preview组件
1.docx-preview：
github.com安装：
npm i docx-preview
2.使用：创建容器标签，引入并创建渲染函数
3.pdf预览需要安装PDFJS插件，通过文件流解析写道cavas上实现预览效果；安装：
npm i docx-preview
2月7号 打卡day28
使用第三方库来实现文档预览功能，并封装成preview组件
1.docx-preview：
github.com安装：npm i docx-preview
2.使用：创建容器标签，引入并创建渲染函数
3.pdf预览需要安装PDFJS插件，通过文件流解析写道cavas上实现预览效果；安装：
npm i docx-preview
展开
评论
点赞
#青训营笔记创作活动#
2月6号 打卡day27
1.AST（抽象语法树）：
源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2.手写编译器：三个部分：Parsing(解析过程)，Transformation（转化过程），Code Generation（代码生成）
3.真实场应用景:使用Babel修改函数名等；
2月6号 打卡day27
1.AST（抽象语法树）：
源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。AST是源代码的抽象语法结构的树状表现形式，简单点就是一个深度嵌套对象，这个对象能够描述我们书写代码的所有信息
2.手写编译器：三个部分：Parsing(解析过程)，Transformation（转化过程），Code Generation（代码生成）
3.真实场应用景:使用Babel修改函数名等；
展开
评论
点赞
#青训营笔记创作活动#
2月5号 打卡day26
qiankun 的三大沙箱：
1.SanpshotSandbox：快照沙箱：
把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。
2.LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容
3.ProxySandbox：也即一个页面中只能同时展示一个微应用，而且无论是 set 还是 get 依然是直接操作 window 对象。
qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
2月5号 打卡day26
qiankun 的三大沙箱：
1.SanpshotSandbox：快照沙箱：
把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。
2.LegacySandbox：通过监听对 window 的修改来直接记录 Diff 内容
3.ProxySandbox：也即一个页面中只能同时展示一个微应用，而且无论是 set 还是 get 依然是直接操作 window 对象。
qiankun 会把要执行的 JS 包裹在立即执行函数中，通过绑定上下文和传参的方式来改变 this 和 window 的值，让它们指向 window.proxy 沙箱对象，最后再用 eval 来执行这个函数。
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day25
package.json 的配置主要分为7大类：
1.描述配置
2.文件配置
3.脚本配置
4.依赖配置
5.发布配置
6.系统配置
7.第三方配置
2月4日 打卡day25
package.json 的配置主要分为7大类：
1.描述配置
2.文件配置
3.脚本配置
4.依赖配置
5.发布配置
6.系统配置
7.第三方配置
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡day24
1. Tapable 的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常 Webpack Plugin 开发中更得心应手，解决相关问题更加顺畅。
2.Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
3. Tapable 中各种类型 Hook 的基本用法和运行机制
2月3日 打卡day24
1. Tapable 的源码其实并没有多少代码量，学习它的原理首当其冲的一定是可以让你在日常 Webpack Plugin 开发中更得心应手，解决相关问题更加顺畅。
2.Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等
3. Tapable 中各种类型 Hook 的基本用法和运行机制
展开
评论
点赞
#青训营笔记创作活动#
2月2号 打卡day23
对象允许我们轻松地将多个数据块组合在一起，而Map是ES6之后推出的新的语言补充；
1.Object 只允许键值为字符串和 symbols；Map 支持任何数据类型的键
2.Map 默认是一个可迭代的对象。这说明可以用 for ... of 轻松地迭代一个 Map
3.Map 为各种常见任务提供了专门的API:例如size，get，clear
4."Map 比 Object 快"
2月2号 打卡day23
对象允许我们轻松地将多个数据块组合在一起，而Map是ES6之后推出的新的语言补充；
1.Object 只允许键值为字符串和 symbols；Map 支持任何数据类型的键
2.Map 默认是一个可迭代的对象。这说明可以用 for ... of 轻松地迭代一个 Map
3.Map 为各种常见任务提供了专门的API:例如size，get，clear
4."Map 比 Object 快"
展开
评论
点赞
#青训营笔记创作活动#
2月1号 打卡day22
1.了解MPA和SPA的取舍，对比；
2.Islands 架构：传统的 SSR 应用中，可交互的组件相对于静态组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构。
3.Islands 实现原理
4.Islands架构的适用性
2月1号 打卡day22
1.了解MPA和SPA的取舍，对比；
2.Islands 架构：传统的 SSR 应用中，可交互的组件相对于静态组件就犹如整个页面中的孤岛(Island)，因此这种模式叫做 Islands 架构。
3.Islands 实现原理
4.Islands架构的适用性
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡day21
docker的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
docker的几个组成部分：
docker client: 即 docker 命令行工具
docker host: 宿主机，docker daemon 的运行环境服务器
docker daemon: docker 的守护进程，docker client 通过命令行与 docker daemon 交互
image: 镜像，可以理解为一个容器的模板，通过一个镜像可以创建多个容器
container: 最小型的一个操作系统环境，可以对各种服务以及应用容器化，是镜像的运行实例
registry: 镜像仓库，存储大量镜像，可以从镜像仓库拉取和推送镜像
1月31日 打卡day21
docker的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。
docker的几个组成部分：
docker client: 即 docker 命令行工具
docker host: 宿主机，docker daemon 的运行环境服务器
docker daemon: docker 的守护进程，docker client 通过命令行与 docker daemon 交互
image: 镜像，可以理解为一个容器的模板，通过一个镜像可以创建多个容器
container: 最小型的一个操作系统环境，可以对各种服务以及应用容器化，是镜像的运行实例
registry: 镜像仓库，存储大量镜像，可以从镜像仓库拉取和推送镜像
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡day20
开发可视化数据大屏如何做自适应是一个难题，通常有三种解决方案：
1.vm vh ： 按照设计稿的尺寸，将px按比例计算转为vw和vh
2.scale：通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
3.rem + vm vh：获得 rem 的基准值；动态的计算html根元素的font-size；图表中通过 vm vh 动态计算字体、间距、位移等
1月29日 打卡day20
开发可视化数据大屏如何做自适应是一个难题，通常有三种解决方案：
1.vm vh ： 按照设计稿的尺寸，将px按比例计算转为vw和vh
2.scale：通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
3.rem + vm vh：获得 rem 的基准值；动态的计算html根元素的font-size；图表中通过 vm vh 动态计算字体、间距、位移等
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡day19
低代码也是比较热门的一个路领域，腾讯云推出了微搭，阿里云推出了易搭。
原文推荐了20个开源的低代码框架：
Appsmith
LowCodeEngine
Amis
tmagic-editor
dooring-electron-lowcode
vite-vue3-lowcode
shida
quark-h5
gods-pen
luban-h5
剩余的可见原文。
1月28日 打卡day19
低代码也是比较热门的一个路领域，腾讯云推出了微搭，阿里云推出了易搭。
原文推荐了20个开源的低代码框架：
Appsmith
LowCodeEngine
Amis
tmagic-editor
dooring-electron-lowcode
vite-vue3-lowcode
shida
quark-h5
gods-pen
luban-h5
剩余的可见原文。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡day18
有些树状结构需要进行“添加，删除，修改”，可以尝试使用扁平树状结构。
添加：在Map新增一条子项数据，直接放在数据结构末尾即可，然后我们再给对应的父节点的childrenIds中push这个子项的id即可
修改：在Map形式我们拿到想修改的id后就可以直接修改
删除：在Map形式中我们直接delete对应id的项即可，
整个结构扁平化后的解构很清晰，可以轻易的对数据进行处理，极大的提高性能，减去需要遍历的性能消耗；
1月27日 打卡day18
有些树状结构需要进行“添加，删除，修改”，可以尝试使用扁平树状结构。
添加：在Map新增一条子项数据，直接放在数据结构末尾即可，然后我们再给对应的父节点的childrenIds中push这个子项的id即可
修改：在Map形式我们拿到想修改的id后就可以直接修改
删除：在Map形式中我们直接delete对应id的项即可，
整个结构扁平化后的解构很清晰，可以轻易的对数据进行处理，极大的提高性能，减去需要遍历的性能消耗；
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡day17
填充数据：
1.保证卡片是3的倍数。
2.填充卡片类型
点击交互：
1.是否可以点击
2.点击卡片
1月26日 打卡day17
填充数据：
1.保证卡片是3的倍数。
2.填充卡片类型
点击交互：
1.是否可以点击
2.点击卡片
展开
评论
点赞
#青训营笔记创作活动#
1月25日 打卡day16
pnpm是近几年非常出色的包管理器，由 npm/yarn 衍生而来，而解决了 npm/yarn 内部潜在的 bug，他的优越性主要体现在包安装速度极快；磁盘空间利用非常高效。pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件；不会重复安装同一个包；支持 monorepo
1月25日 打卡day16
pnpm是近几年非常出色的包管理器，由 npm/yarn 衍生而来，而解决了 npm/yarn 内部潜在的 bug，他的优越性主要体现在包安装速度极快；磁盘空间利用非常高效。pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件；不会重复安装同一个包；支持 monorepo
展开
评论
点赞