ota裤
获得徽章 1
#青训营笔记创作活动#
2月19日 打卡
今日学习
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
2月19日 打卡
今日学习
实现图片预览/查看的关键点在于 CSS3 中的 transform 变换，该属性应用于元素在2D或3D上的旋转，缩放，移动，倾斜等等变换，通过设置 translate(x,y) 即可偏移元素位置，设置scale即可缩放元素，当然你也可以只设置 matrix 来完成上述所有操作，这涉及到矩阵变换的知识，本文使用的均是CSS提供的语法糖进行变换操作。
PC上的点击、移动，H5的手势操作，都离不开DOM事件监听。例如鼠标移动事件对应 mousemove，移动端因为没有鼠标则对应 touchmove，而本文将介绍如何仅通过指针事件来进行多端统一的事件监听。在监听事件中我们可以通过 event 对象获取各种属性，例如常用的 offsetX、offsetY 相对偏移量，clientX、clientY 距离窗口的横坐标和纵坐标等。
展开
评论
点赞
#青训营笔记创作活动#
2月18日 打卡day26
今日学习
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
2月18日 打卡day26
今日学习
实现思路：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
展开
评论
点赞
#青训营笔记创作活动#
2月17日 打卡day25
今日学习
<input type="color" value="#FF99FF" />
自带颜色选择器
css实现打字效果，
一个动画负责文字width从0过渡，另一个动画负责对文字的边框transparent和显示
顺滑滚动js利用requestAnimationFrame和scrollTo递归执行
css利用html和body上的scroll-behavior:smooth
scroll-snap-type: x mandatory;
顺滑图片切换
2月17日 打卡day25
今日学习
<input type="color" value="#FF99FF" />
自带颜色选择器
css实现打字效果，
一个动画负责文字width从0过渡，另一个动画负责对文字的边框transparent和显示
顺滑滚动js利用requestAnimationFrame和scrollTo递归执行
css利用html和body上的scroll-behavior:smooth
scroll-snap-type: x mandatory;
顺滑图片切换
展开
评论
点赞
2月16日 打卡day24
今日学习
#青训营笔记创作活动#
Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等.
今日学习
#青训营笔记创作活动#
Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等.
展开
评论
点赞
#青训营笔记创作活动#
2月15日 打卡day23
今日学习
制定项目规范和代码风格,分支管理,提交审核,TDD测试驱动开发,使用GITHUB ACTION风格代码管理,发包到npmjs,monorepo风格代码管理
2月15日 打卡day23
今日学习
制定项目规范和代码风格,分支管理,提交审核,TDD测试驱动开发,使用GITHUB ACTION风格代码管理,发包到npmjs,monorepo风格代码管理
展开
评论
点赞
#青训营笔记创作活动#
2月13日 打卡day22
今日学习
高亮部分 通过控制 z-index 的值，让目标元素展示在蒙层之上
引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动
过渡动画 通过 transition 实现位置的平滑移动
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
。
2月13日 打卡day22
今日学习
高亮部分 通过控制 z-index 的值，让目标元素展示在蒙层之上
引导部分 通过 position: fixed 实现定位效果，并通过动态修改 left、top 属性实现引导弹窗跟随目标移动
过渡动画 通过 transition 实现位置的平滑移动
页面 位置/内容 发生变化时（如：resize、scroll 事件），需要重新计算位置信息
。
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day21
今日学习
docx预览,使用docx-preview库,创建一个容器标签,然后引入并创建渲染函数
PDF预览,使用pdfjs这个插件,通过文件流解析写到canvas上实现预览效果,创建canvas标签,渲染函数中要创建文件流
2月12日 打卡day21
今日学习
docx预览,使用docx-preview库,创建一个容器标签,然后引入并创建渲染函数
PDF预览,使用pdfjs这个插件,通过文件流解析写到canvas上实现预览效果,创建canvas标签,渲染函数中要创建文件流
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day20
今日学习
pinia，只有store,state,getters,actions
使用步骤 1.创建pinia 2,注册pinia 3.创建store 4.抽离需要管理的状态数据作为state,声明getters优化状态读取，声明actions处理业务逻辑 5.在需要的地方，导入和使用store
const useUserStore = defineStore('user', {
// 定义状态：一个函数，返回一个对象
state: () => ({
username: '',
token: ''
}),
// 定义 getters，等同于组件的计算属性
getters: {
// getter 函数接收 state 作为参数，推荐使用箭头函数
hello: state => '!' + state.username
},
// 定义 actions，有同步和异步两种类型
actions: {
// 异步 action，一般用来处理异步逻辑
async login(userData) {
const result = await axios.post('/api/user/login', userData)
const { data, code } = result.data
if (code === 0) {
// action 中修改状态
this.username = data.username
this.token = data.token
}
},
}
})
过去要修改 store 中的状态，需要先 dispatch action，再 commit mutation，真的很繁琐。
不再需要 dispatch 了，也没有 mutation 的概念了，可以当作普通函数那样使用就好了。无论是同步逻辑，还是异步逻辑，现在都可写在 actions 中了。在一个 action 函数中， this 就是当前 store 的实例，可以直接修改状态。
2月11日 打卡day20
今日学习
pinia，只有store,state,getters,actions
使用步骤 1.创建pinia 2,注册pinia 3.创建store 4.抽离需要管理的状态数据作为state,声明getters优化状态读取，声明actions处理业务逻辑 5.在需要的地方，导入和使用store
const useUserStore = defineStore('user', {
// 定义状态：一个函数，返回一个对象
state: () => ({
username: '',
token: ''
}),
// 定义 getters，等同于组件的计算属性
getters: {
// getter 函数接收 state 作为参数，推荐使用箭头函数
hello: state => '!' + state.username
},
// 定义 actions，有同步和异步两种类型
actions: {
// 异步 action，一般用来处理异步逻辑
async login(userData) {
const result = await axios.post('/api/user/login', userData)
const { data, code } = result.data
if (code === 0) {
// action 中修改状态
this.username = data.username
this.token = data.token
}
},
}
})
过去要修改 store 中的状态，需要先 dispatch action，再 commit mutation，真的很繁琐。
不再需要 dispatch 了，也没有 mutation 的概念了，可以当作普通函数那样使用就好了。无论是同步逻辑，还是异步逻辑，现在都可写在 actions 中了。在一个 action 函数中， this 就是当前 store 的实例，可以直接修改状态。
展开
评论
点赞
#青训营笔记创作活动#
2月8日 打卡day19
今日学习
qiankun三大沙箱：第一大：快照沙箱 把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。但是微应用卸载时要遍历整个哈希表一次。
第二大LegacySandbox，使用proxy监听环境的变化，LegacySandbox 的想法则是 通过监听对 window 的修改来直接记录 Diff 内容，因为只要对 window 属性进行设置，那么就会有两种情况：
如果是新增属性，那么存到 addedMap 里
如果是更新属性，那么把原来的键值存到 prevMap，把新的键值存到 newMap
（当然这里的变量名做了简化）
通过 addedMap, prevMap 和 newMap 这三个变量就能反推出微应用以及原来环境的变化，qiankun 也能以此作为恢复环境的依据。
proxySandbox，为一个微应用分配一个fakewindow,当微应用修改全局变量时：
如果是原生属性，则修改全局的 window
如果不是原生属性，则修改 fakeWindow 里的内容
const bindedFn = fn.bind(window.proxy);实现window.a等价于window.proxy.a，最后再用 eval 来执行这个函数。
2月8日 打卡day19
今日学习
qiankun三大沙箱：第一大：快照沙箱 把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。但是微应用卸载时要遍历整个哈希表一次。
第二大LegacySandbox，使用proxy监听环境的变化，LegacySandbox 的想法则是 通过监听对 window 的修改来直接记录 Diff 内容，因为只要对 window 属性进行设置，那么就会有两种情况：
如果是新增属性，那么存到 addedMap 里
如果是更新属性，那么把原来的键值存到 prevMap，把新的键值存到 newMap
（当然这里的变量名做了简化）
通过 addedMap, prevMap 和 newMap 这三个变量就能反推出微应用以及原来环境的变化，qiankun 也能以此作为恢复环境的依据。
proxySandbox，为一个微应用分配一个fakewindow,当微应用修改全局变量时：
如果是原生属性，则修改全局的 window
如果不是原生属性，则修改 fakeWindow 里的内容
const bindedFn = fn.bind(window.proxy);实现window.a等价于window.proxy.a，最后再用 eval 来执行这个函数。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡day18
今日学习
1.用或运算符
2.用三元运算符
3. switch(type){
case'A':
break
default:
xxxxx
}
4.
// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
// 我们可以根据用户类型来生成我们的折扣对象
let discounts = {
'普通会员': 0.9,
'年费会员': 0.85,
'超级会员': 0.8,
'default': 1
}
return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9
// 以绩效_部门的方式拼接键值存入
let strategies = new Map([
['A_D', 4 * 1.2],
['B_D', 3 * 1.2],
['C_D', 2 * 1.2],
['A_F', 4 * 0.9],
['B_F', 3 * 0.9],
['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => {
return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 输出：72000
2月6日 打卡day18
今日学习
1.用或运算符
2.用三元运算符
3. switch(type){
case'A':
break
default:
xxxxx
}
4.
// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
// 我们可以根据用户类型来生成我们的折扣对象
let discounts = {
'普通会员': 0.9,
'年费会员': 0.85,
'超级会员': 0.8,
'default': 1
}
return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9
// 以绩效_部门的方式拼接键值存入
let strategies = new Map([
['A_D', 4 * 1.2],
['B_D', 3 * 1.2],
['C_D', 2 * 1.2],
['A_F', 4 * 0.9],
['B_F', 3 * 0.9],
['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => {
return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 输出：72000
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡day17
今日学习
集群部署、隔离环境、灰度发布以及动态扩容缺一不可，而容器化则成为中间的必要桥梁。
docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。
由于 docker 轻便可移植的特点也极大促进了 CI/CD 的发展
拉取 Nginx 镜像
首先打开你的Docker，默认会启动。
控制台拉取 Nginx 镜像：
docker pull nginx
出现下面的信息说明拉取Nginx镜像成功
namespace
docker 使用 linux namespace 构建隔离的环境，它由以下 namespace 组成
pid: 隔离进程
net: 隔离网络
ipc: 隔离 IPC
mnt: 隔离文件系统挂载
uts: 隔离hostname
user: 隔离uid/gid
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
2月4日 打卡day17
今日学习
集群部署、隔离环境、灰度发布以及动态扩容缺一不可，而容器化则成为中间的必要桥梁。
docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。
由于 docker 轻便可移植的特点也极大促进了 CI/CD 的发展
拉取 Nginx 镜像
首先打开你的Docker，默认会启动。
控制台拉取 Nginx 镜像：
docker pull nginx
出现下面的信息说明拉取Nginx镜像成功
namespace
docker 使用 linux namespace 构建隔离的环境，它由以下 namespace 组成
pid: 隔离进程
net: 隔离网络
ipc: 隔离 IPC
mnt: 隔离文件系统挂载
uts: 隔离hostname
user: 隔离uid/gid
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令
如何进入 docker 容器中进行调试
使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开
如何得知启动 nginx 容器的 IP 端口
了解 docker 原理，如何模拟 docker 隔离环境及限制资源
Dockerfile、Image、Container 有何区别
Dockerfile 中 CMD 与 RUN 有何区别
展开
评论
点赞