Kissshot
获得徽章 1
- #青训营笔记创作活动#
2月6日 打卡day24
今日学习如何不使用第三方库来实现【前端引导页】
前导页，也就是引导页，引导页就是网站首页出现之前的一个页面，是引导浏览者进入正式的网站的一个页面
引导页核心功能其实就两点：高亮部分 + 引导部分
让引导部分 跟着 高亮部分 移动，并且添加一些简单的动画或过渡效果，也分为 蒙层引导 和 无蒙层引导
本文主要介绍的是蒙版引导
展开评论点赞 - #青训营笔记创作活动#
2月5日 打卡day23
今日学习了解了 Pinia
pinia是一个Vue状态管理工具，相比vuex，pinia去除了vuex中对于同步函数Mutations和异步函数Actions的区分。直接在Actions中便能够使用同步和异步方法。其次，pinia对于typescript的支持性更好，只有1kb，简化了很多方法的写法。但由于vuex比较完善，因此,pinia适合小型项目，vuex适合大型项目。
下面通过一个用户登录的案例，简单学习 Pinia 的使用
展开评论点赞 - #青训营笔记创作活动#
2月4日 打卡day22
今日学习了如何通过三方库来实现文档预览功能，并将其封装成preview组件
实现的插件：
docx的实现需要使用docx-preview插件
pdf的预览需要使用PDFJS插件, 通过将文件流解析写到canvas上实现预览效果
其他需要注意的地方：
因为将多种文件渲染放在一个文件中，所以处理函数需要做映射处理，执行对应格式的文件渲染。如果出现了不支持的文件，需要增加一个提示处理，告知用户
展开评论点赞 - #青训营笔记创作活动#
2月3日 打卡day21
今日学习了AST以及AST的一些应用
AST，即抽象语法树（Abstract Syntax Tree）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，广泛应用于代码语法检查、代码风格检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景。
本文从AST的设计理念出发，逐步引申出编译器的工作原理，还手写了一个简易编译器，值得借鉴学习展开评论点赞 - #青训营笔记创作活动#
2月2日 打卡day20
今天学习了package.json文件
package.json 里面有许许多多的配置，可以大致分为7类：
• 描述配置（name、version…）
• 文件配置（files、type…）
• 脚本配置（scripts、config）
• 依赖配置（dependencies、…）
• 发布配置（private、…）
• 系统配置（engines、os、…）
• 第三方配置（unpkg、browserslist、…）
这些配置与项目息息相关，了解它们有助于了解项目，提效开发，规范代码
展开评论点赞 - #青训营笔记创作活动#
2月1日 打卡day19
今天了解了docker相关的一些知识
Docker 是一个开源的应用容器引擎，实际上就相当于一个封闭的沙盒或者是集装箱，它可以把不同的应用全都放在它的集装箱里面，并且以后有需要的时候，可以直接把集装箱搬到其他平台或者服务器上，实现容器虚拟化技术，随用随搬
通俗点说，使用Docker，只需要配置一次Docker容器上面的应用，就可以跨平台，跨服务器，实现应用程序跨平台间的无缝衔接
文中介绍了docker的安装与使用，附有实例，值得学习
展开评论点赞 - #青训营笔记创作活动#
1月31日 打卡day18
今天了解了MPA 和 SPA
MPA 和 SPA 是构建前端页面常见的两种方式，理解 MPA 和 SPA 的区别和不同场景的取舍是理解 Islands 架构的关键。
MPA 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面
SPA 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互
总而言之，MPA 有更好的首屏性能，SPA 在后续页面的访问中有更好的性能和体验，但 SPA 也带来了更高的工程复杂度、略差的首屏性能和 SEO。这样就需要在不同的场景中做一些取舍。
展开评论点赞 - #青训营笔记创作活动#
1月30日 打卡day17
今天学习了一些大屏数据适配方案(vw vh、rem、scale)，这些方案在实际应用中的选择应该视具体情况而定
• 如果想简单且客户能同意留白，选用 scale 即可
• 如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案
• 而 rem，可以认为是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
最后介绍了三种方案的具体实现，值得学习借鉴
展开评论点赞 - #青训营笔记创作活动#
1月29日 打卡day16
今天学习了构造高性能的扁平树状结构
平时见到的树状结构一般是这样：每层数组中的item都会有一个children，里面嵌套一个数组，
然后每个子item也还会有各自的children，就这样一直嵌套下去。
而拍扁后的树状结构其实是一个对象，每个item都平铺在第一层，每一个item都有各自的parentId与childrenIds。
扁平化后的一些收益：
• 结构清晰，数据处理简单
• 大数据量的情况下，有较好的性能
• 以前各种在数组对象出现的弊端都消失了。
展开评论点赞 - #青训营笔记创作活动#
1月28日 打卡day15
今天学习了clamp函数的一些应用场景，如：
流体的尺寸和定位、装饰性元素、进度条、动态分割器、动态圆角边框、组件或网格的间距
clamp() 函数的作用是把一个值限制在一个上限和下限之间，它接收三个参数：最小值、首选值、最大值。
当首选值比最小值要小时，则使用最小值。
当首选值介于最小值和最大值之间时，用首选值。
当首选值比最大值要大时，则使用最大值。
展开评论点赞