油饼食不食
重庆银行
获得徽章 5
- #青训营笔记创作活动#
2月22日 打卡day35
前端涉及的范围非常宽泛，包括开发、规范、测试、lint、构建、部署、监控、集成等。针对每一项，都有着众多的工具，如何构建一条高效稳定的工具链，就需要使用到前端工程化。前端工程化的定义是指在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验等进行规范化/标准化。从而实现前端的四个现代化：模块化/组件化/规范化/自动化。简而言之，前端工程化就是各种工具和技术，通过使用它们，提升开发效率。
学习前端工程化的意义：
让我们能够更加全面地全链路了解一个业务的整个生命周期，遇到困难也能在负责的流程中快速定位并解决问题。展开评论点赞 - #青训营笔记创作活动#
2月21日 打卡day34
CSS常用动画
淡入淡出：在动画设置中，只需要设置0%和100%，分别对应不同的opacity（透明度）和对于从不同方向淡入淡出会用到的transform：translateX/translateY
弹跳弹入弹出：弹跳就涉及到了transform的translateX/translateY上下弹跳和scale弹入弹出，在过程中，需要设置影响动画的值反复变小变大
旋转转入转出：旋转涉及到了transform的rotate，在转入转出的情况下，也需要设置好transform-origin及旋转的基点
翻转翻入翻出：翻转涉及到了transform的perpective和rotateX以及rotateY
震动摇动效果：整合rotate、scale以及translate来实现一些震动和摇晃效果，例如振铃效果展开评论点赞 - #青训营笔记创作活动#
2月20日 打卡day33
生成Typescript API注释文档(TSDoc）
目标：1）专为Typescript设计，同时尽可能和JSDoc保持一致；2）Markdom集成，文档注释可以为富文本；3）通用标签，例如@param和@return在所有工具中具有一致的行为；4）可拓展，可以有自定义标签来补充核心标签；4）互操作性，TSDoc保证不受支持的自定义标签不会干扰其他内容的解析；5）多包支持；6）开发表准；
需要注意的是，TSDoc只是一个格式标准，针对TS代码注释解析，需要TS代码注释解析器，@microsoft/tsdoc，但是它也只是一个注释语法解析引擎，但是对于具体的任务，需要使用第三方库-api-extractor，它可以实现提取API信息（为项目生成一个”文档模型“JSON文件），API报告（生成项目主要入口点的所有导出的报告），合并类型文件（将TypeScript声明汇总到单个.d.ts文件中），再将API信息提取成JSON之后，还需要根据JSON文件来生成具体的文档，api-documenter可以将api-extractor生成的JSON文件进一步生成markdown和yaml格式文档，在获取到markdown文档后，可以用工具将它生成站点。
以上的步骤略显繁琐，可以使用TypeDoc一步到位。展开评论点赞 - #青训营笔记创作活动#
2月19日 打卡day32
常用Git指令
Git分区：1）工作区：指在本地仓库中的全部代码区域；2）暂存区：指在本地仓库通过git add后的代码区域；3）本地仓库：指在本地仓库中的git commit后的代码区域；4）远程仓库：托管代码的服务器
git clone [url] 将存储库克隆到本地
git init 在目录中创建新的仓库
git remote add origin [gitUrl] 为本地仓库添加远程仓库地址
git branch -b [branchName] 切换分支 -b新建分支
git tag 用于创建、删除、查看标签
git add [file1] [file2]/[dir]/. 添加指定文件/指定目录/当前目录下的所有文件到暂存区
git commit -m 'xxx' 将暂存区的文件添加到本地仓库
git push [remoteName] [branchName] 将本地分支推送到远程仓库
git pull 从远程仓库拉去代码并合并到本地当前分支
git fetch /[remoteName] 从所有远程仓库/指定远程仓库拉去当前分支代码
git cherry-pick [commitId] 获取指定的commit
git merge [branchName] 将其他分支的内容合并到当前分支
git rebase master 分支变基
git reset HEAD^/HEAD^ [filename]/[commit] 回退所有内容/某文件到上一个版本/指定版本
git revert [commitId] 回滚某次提交
git stash 用于暂存文件
git reflog 记录了所有的commit操作记录，便于错误操作后找回
git rm [filename]/[dir] 从git仓库删除指定文件/目录
git log 查看git commit记录展开评论点赞 - #青训营笔记创作活动#
2月18日 打卡day31
css完全代替js的场景
颜色选择器
设置input标签的type为color就可以直接使用颜色选择器
打字特效
运用animation动画，给一个包含text的div设置固定的宽度以及右侧border，然后通过keyframes设置初始宽度为0，宽度不断变化
滑顶/触底效果
使用scroll-behavior: smooth;这一行代码，就可以实现顺滑地滑动
顺滑切图
在父元素中使用scroll-snap-type: x mandatory和在图片子元素中使用scroll-snap-align: start;展开评论点赞 - #青训营笔记创作活动#
2月16日 打卡day30
实现怎样的隔离，当写window.a = 1时，a需要挂载到这些XXXSandbox上。
SanpshotSandbox（快照沙箱），把主应用的window对象浅拷贝，将window的键值对存成一个Hash Map。之后无论微应用对window做任何改动，当要再恢复环境时，把这个Hash Map用应用到window上就可以了；LegacySandbox，SnapshotSandbox有一个问题，每次微应用unmount时都要都要对每个属性做一次Diff，而LegacySandbox则是通过监听对window的修改来直接记录Diff内容，如果时新增属性，那么存到addedMap里，如果是更新属性，那么把原来的键值存到prevMap，把新的键值存到newMap里；ProxySandbox，前面两种沙箱都是单例模式下使用的沙箱。也即一个页面中只能同时展示一个微应用，而且无论是set还是get依然是直接操作window对象，这样就造成了当微应用修改全局变量时依然会在原来的window上修改，当在同一个路由页面下展示多个微应用时，依然会有环境变量污染的问题，ProxySandbox把当前的window的一些原生属性（如document，location等）拷贝出来，单独放在一个对象fakeWindow，之后每个微应用分配一个fakeWindow，当微应用修改全局变量时，如果是原生属性，修改全局的window，如果不是原生属性，修改fakeWindow里的内容，当微应用获取全局变量时，如果是原生属性，则从window里拿，如果不是原生属性，则优先从fakeWindow里获取。结合以上的沙箱，qiankun会把要执行的JS包裹在立即执行函数中，通过绑定上下文和传参的方式改变this和window的值，让它们指向window.proxy沙箱对象，最后再用eval来执行函数。展开评论点赞 - #青训营笔记创作活动#
2月15日 打卡day29
在Vue中，为什么不能使用index作为key
以两个列表demo来进行对比，在第一个demo中，使用v-for方法创建每一项并将index作为每一项的id，在第二个demo中，同样使用v-for方法创建每一项，但是将每一项自带的id作为key，在使用reverse方法将每一项翻转的时候，因为Vue的diff算法是基于key来进行比较的，在第一个demo中，因为相同虚拟dom节点（id相同）的值发生了变化，所以会涉及到节点的销毁和重新创建，降低了复用性，而第二个demo中id和值的对应关系没有发生改变，所以只会修改节点的顺序，提高了复用性，更符合虚拟DOM的初衷（避免了节点的频繁创建和销毁）。在demo3中，通过splice方法，删除数组的第一项，但是会发现显示上是第三项被删除了，因为diff算法只会比较index，不会深入比较每一项的文本内容，导致第三项被错误地删除了。展开评论点赞 - #青训营笔记创作活动#
2月14日 打卡day28
第三方库的选择：
vue-tour；driver.js；shephered.js；intro.js
实现引导页功能：
引导页核心功能主要包括两个部分，一是高亮部分，二是引导部分，引导部分跟随高亮部分移动，并且添加一些简单的动画或过渡效果既可，可以分为蒙层引导和无蒙层引导。
技术组合一：cloneNode+position+transition
通过Ref API绑定guideModelRef（蒙版）和guideBoxRef（引导部分）的DOM，首先去除guideModelRef已经绑定的cloneNode节点，并检验是否为最后一步（是则直接返回），然后通过document.querySelector获取到目标节点的信息，通过目标节点的相关信息重新创建cloneNode并添加到guideModelRef中，在多个场景（页面尺寸变化、页面滚动、点击上一步/下一步按钮以及挂载生命周期）中调用以上方法。
技术组合二：z-index+position+transition
通过Ref API绑定guideModelRef（蒙版）和guideBoxRef（引导部分）的DOM，首先检验是否为最后一步（是则直接返回），然后修改preNode的index为0（不位于蒙版之上），然后通过document.querySelector获取到目标节点的信息并将它的z-index设置为1000，然后修改guideBoxRef绑定的DOM的相关内容，在多个场景（页面尺寸变化、页面滚动、点击上一步/下一步按钮以及挂载生命周期）中调用以上方法。展开评论点赞 - #青训营笔记创作活动#
2月13日 打卡day27
pinia是vuex的简化，只保留了store、state、getters、actions。同时，在开发的过程中，通常会使用mock数据，可以使用插件vite-plugin-mock，它同时提供了开发环境和生产环境下的数据mock服务（根据配置来判断是否开启各个环境）。store，状态仓库；state，状态；getters，类似组件的计算属性；actions，处理逻辑并修改state。store用于存储state，actions和getters，Pinia没有module的概念，而是一个拍平的store结构。在Vuex中要修改store中的状态，需要先dispatch action，再commit mutation，但是再pinia中，就不再需要dispatch了，也没有了mutation的概念，无论是同步逻辑，还是异步逻辑，都可以写在actions中，实例化store之后，就可以使用它的state、getters和actions。在创建pinia实例时，可以通过.use方法引入pinia-plugin-persistedstate插件，并在需要使用持久化存储的store中设置persist:true来完成持久化，默认情况下，持久化数据存储在localStorage中，key就是该store的id，存储的结构就是state的类型，但是这些都是可以进行自行配置的。展开评论点赞 - #青训营笔记创作活动#
2月12日 打卡day26
减少if-else的方法
短路运算，将if-else中判断中的值传给一个变量，可以使用｜｜逻辑，前一个值如果无法被判断为真，那么久获取到后一个值
三元运算符，通过判读确定传值
switch case，相较前两种方法只能进行一个if-else的判断，可以使用多重判断
对象配置/策略模式，对象的属性就是判断的条件展开评论点赞