油饼食不食
重庆银行
获得徽章 5
- #青训营笔记创作活动#
2月11日 打卡day25
docx文件使用docx-preview插件，通过ref绑定一个div，引入docx-preview插件的renderAsync方法并配置一些参数。pdf文件使用插件pdfjs-dist，pdf的渲染数据必须是一个ArrayBuffer格式的数据，如果请求的数据是Blob格式必须要使用Blob.arrayBuffer()进行转换，并用canvas进行进行pdf文件的存储和展示。pdf的放大和缩小，pdf的缩放是为了避免源文件的大小和内容出现模糊的问题，初次之外，因为可能传入多种文件，还需要进行多格式的文件渲染函数映射以及不支持的文件提示处理展开评论点赞 - #青训营笔记创作活动#
2月10日 打卡day24
脚本配置
scripts（指定项目的一些内置脚本命令，可以通过npm run来执行，例如npm run build），config（设置scripts里的脚本在执行时的参数，例如port为3000，执行脚本时，可以通过process.env.npm_package_config_port）
依赖配置
dependencies（运行依赖，生产环境下需要用到的依赖，npm install xxx/npm install xxx --save），devDependencies（开发依赖，项目开发环境需要用到而运行时不需要的依赖，使用npm install xxx -D或者npm install xxx --save-dev），peerDependencies（同伴依赖，通常用来表示另一个包的依赖和兼容性关系，例如安装A，A的正常使用依赖B@2.x版本，那么B@2.x就应该被列在A的peerDependencies中），optionalDependencies（可选依赖，不会阻塞主功能的使用，安装或者引入失败也无妨，使用npm install xxx -O或者npm install xxx --save-optional），peerDependenciesMeta（使用peerDependenciesMeta将其指定为可选的），bundleDependencies（打包依赖，它的值是一个数组，在发布包时，数组里面列的依赖被一起打包，主要是用于使用npm registry里的包或者一个被修改过的第三方包，打包依赖会比普通依赖更好用），overrides（重写项目依赖的依赖，以及依赖树下某个依赖的版本号）展开评论点赞 - #青训营笔记创作活动#
2月9日 打卡day23
最佳实践：
React中，对Hook的调用要么在一个大驼峰法命名的函数（函数组件）内部，要么在另一个useSomething函数（视作自定义Hook）中
遵循一定的顺序创建类组件和函数组件
在useEffect中直接定义一个async/await的异步函数，这样返回的就是一个值而非函数，因为effects在组件销毁之前会清除创建的资源，所以它需要获取到一个cleanup函数，而使用异步函数会在回调中返回Promise而不是cleanup函数，因此，会报错。解决方法是要么把异步函数包裹在传入的函数中并在它中间调用异步函数，要么包裹一个立即执行函数
和useEffect相比，useLayoutEffect是在渲染函数执行后，屏幕重绘前同步执行的，相较于useEffect在屏幕渲染完成后异步执行的方式，会导致页面阻塞，所以尽可能使用标准的useEffect以避免阻塞视觉更新，但是useLayoutEffect在可以在页面发生频繁重绘时防止闪烁
使用useContext避免值的嵌套传递，例子，在父组件页面文件中使用const appContext = React.createContext()定义变量，在函数组件return方法中，把变量.Provider当作标签包裹子组件同时通过value这个属性传递值，同时在需要使用变量的孙子组件中，使用useContext接收appContext并获取值
使用useMemo和useCallback对函数和函数的返回值进行缓存
在useState中使用惰性初始化函数来避免在组件渲染的时候函数重复执行展开评论点赞 - #青训营笔记创作活动#
2月8日 打卡day22
按照执行方式，分为同步和异步两种执行方式，对于同步钩子，tap是唯一注册事件的方法，通过call方法触发同步钩子的执行，对于异步钩子，可以通过tap、tapAsync、tapPromise三种方式来注册，通过对应的callAsync、promise这两种方式来触发注册的函数，异步钩子又可以分为异步串行钩子和异步并行钩子
按照执行机制，可以分为四种，①Basic Hook（基本类型的钩子），执行每一个注册的事件函数，并不关心每个被调用的事件函数返回值如何 ②Waterfall Hook（瀑布类型的钩子），如果前一个事件函数的结果 result !== undefined，则result会作为后一个事件函数的第一个参数，如果result === undefined，则执行call时传递的参数③Bail Hook（保险类型钩子），执行每一个事件函数，遇到第一个结果result !== undefined则返回，不再继续执行，也就是说只要其中一个有结果，后面就不执行了④Loop Hook（循环钩子），不断地循环执行事件函数，直到所有函数结果都是result === undefined，只是其中一个事件函数返回undefined，只要其他仍然不为undefined，仍然可以继续执行。展开评论点赞 - #青训营笔记创作活动#
2月7日 打卡day21
Map的优势，它支持任何数据类型的键，此外，它在用户定义的和内置的程序数据之间提供一个干净的分离，代价是需要额外的Map.prototype.get来获取对应的项。还可以使用for...of...来进行迭代。使用Map.prototype.has检查一个给定的项是否存在，使用Map.prototype.get返回与提供的键相同的值，Map.prototype.size返回Map中项的个数，Map.prototype.clear删除Map中的所有项。
对比增删改查速度后得出的结论，Map比Object快，除非有小的整数、数组索引的键，而且它更节省内存。如果你需要一个频繁更新的hash map，请使用Map；如果想要一个固定的键值集合，请使用Object，但是需要注意原型继承带来的陷阱。展开评论点赞 - #青训营笔记创作活动#
2月6日 打卡day20
Docker三大核心概念：
Image（镜像），可以理解为一个容器的模板，运行在Docker Host（宿主机），通过一个镜像可以创建多个容器
Container（容器），最小型的一个操作系统，同样存在于宿主机中，可以对各种服务以应用容器化，是镜像的运行实例
Repository（仓库），也叫镜像仓库，存储着大量的镜像，可以从镜像仓库拉取和推送镜像
本文以使用Docker构建并启动一个Vue项目为例，详细地演示了Docker从新建项目、构建镜像到运行项目、发布镜像的全过程。同时，也对Docker的底层原理做了简介，它使用linux namespace构建隔离的环境，由以下namespace组成，1）pid（隔离进程）2）net（隔离网络）3）ipc（隔离IPC）4）mnt（隔离文件系统挂载）5）uts（隔离hostname）6）user（隔离uid/gid）。同时也包含一个操作镜像和容器的高阶操作。展开评论点赞 - #青训营笔记创作活动#
2月5日 打卡day19
1）vm/vh（按照设计稿的尺寸，将px按比例转为vw和vh），它的优点是可以动态计算图表的宽高，字体等，灵活性较高且如果屏幕与ui稿比例不一致，也不会出现白边情况，但是每个每个图标都要单独做字体、间距、位移的适配，比较麻烦。2）scale（通过scale属性，根据屏幕大小，对图表进行整体的等比缩放），和vm/vh的适配方法相比，它的有点就在于一次适配后不需要再对每个表做单独的适配，但是存在当屏幕尺寸与ui设计稿不一致的情况下，会出现白边情况且缩放比例过大时，字体会糊和事件热点偏移3）rem+vm/vh（获取rem基准值，动态计算html根元素的font-size，通过vw和vh动态计算字体、间距和位移），它的适配代码量也少，依然存在周围白边的情况且每个图标也需要单独适配
在实际的应用开发中，如果想简单且对于留白可以接受，选用scale即可，如果需要兼容不同比例的大屏，且想在不同比例都有较好的效果，类似于移动端的响应式，可以采用vm vh的方案。展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day18
①console.log，添加中括号，可以在控制台中输出对象中属性形式；②console.warm和console.error，输出警告信息和错误信息；③console.time和console.timeEnd，配合使用来计算代码段的执行时间；④console.assert，在控制台输出错误日志；⑤console.dir，输出DOM节点对应的JS对象映射；⑤console.table，将数组或者类数组的对象打印成表格
breakpoint（断点）
①直接断点和代码断点，效果相同，代码断点就是在需要打断点的地方前加debugger；②条件断点，相较于直接断点多了条件判断，只有符合条件逻辑的才会进入断点；③DOM断点，分为子树修改断点、属性修改断点和节点移除断点展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day17
clamp()函数
把一个值限定在一个上限和下限之间，当这个值超过最小值和最大值时，在最大值和最小值之间选择一个值使用。接收三个参数：最小值、首选值、最大值。
例子：
1）宽度 width: clamp(70px, 80px + 15%, 180px)
2）位置 使用媒体查询的方法：@media (max-width:600px) { .decorative--1 { left: -8rem; }};使用clamp()函数：.decorative--1 { left: clamp(-8rem, -10.909rem + 14.55vw, 0rem}}
3) 页面主区高度 使用媒体查询的方法：@media(min-width:800px){.hero{min-height: 500px;}}；使用clamp()函数: .hero{min-height: clamp(250px, 50vmax, 500px) 50vmax表示视口最大尺寸的50%
4) 进度条 在使用clamp()函数的同时还会使用CSS变量
.loading-thumb {
--loading: 0%;
--loading-thumb-width: 40px;
position: absolute;
top: 40px;
left: clamp(0%, var(--loading), var(--loading)-var(--loading-thumb-width));
width: var(--loading-thumb-width));
height: 16px;
}
设置--loading为进度的当前加载量，初始值为0%，最大值始终为当前加载量减去进度条件的宽度，在其他CSS块中也可以通过var(--loading)获取到这个CSS变量的值多少展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day16
低代码项目主要是通过工业化模板、拖放式组件和可视化配置快速构建多端应用，其主要目的是在一些业务场景下实现提效降本。首先是比较全面的一类，Appsmith，LowCodeEngine，Amis，tmagic-editor，tefact，OpenDataV，主要是通过json数据实现页面的信息配置，shida则是一个视频可视化搭建项目，通过拖拽快速生成视频，mometa并不是传统的低代码平台，它是面向研发的、代码可视化编辑工具，提供可视化编辑体验，dooring-electron-lowcode，vite-vue3-lowcode，gods-pen，quark-h5，luban-h5，h5-factory，lz-h5-edit，mall-cook主要用于快速生成h5页面，fast-poster快速生成海报，form-generator是基于Element UI的表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目，vjdesign自定义组件及组件的属性，并对组件属性和数据关系以及表单的交互行为进行配置实现展开评论点赞