Demons741
前端实习生
获得徽章 5
- #青训营笔记创作活动#
1月12日 打卡day28
今天学习了"为什么要读一读tapable源码”
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。展开评论点赞 - #青训营笔记创作活动#
Object1月6日 打卡day27
今天学习了在 JavaScript 中，什么时候使用 Map 或胜过 Object。
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。
如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱展开评论点赞 - #青训营笔记创作活动#
1月1日 打卡day26
今天学习了Islands架构原理和实践
MPA 和 SPA 是构建前端页面常见的两种方式，理解 MPA 和 SPA 的区别和不同场景的取舍是理解 Islands 架构的关键。
概念
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
SPA(Single-page application) 即单页应用，它只有一个不包含具体页面内容的 HTML，当浏览器拿到这份 HTML 之后，会请求页面所需的 JavaScript 代码，通过执行 JavaScript 代码完成 DOM 树的构建和 DOM 的事件绑定，从而让页面可以交互。如现在使用的大多数 Vue、React 中后台应用都是 SPA 应用。
展开评论点赞 - #青训营笔记创作活动#
12月31日 打卡day25
今天学习了docker的使用指南，docker 使应用部署更加轻量，可移植，可扩展，更好的环境隔离也更大程度地避免了生产环境与测试环境不一致的巨大尴尬。Docker 技术的三大核心概念，分别是：镜像 Image、容器 Container、仓库 Repository。展开评论点赞 - #青训营笔记创作活动#
12月30日 打卡day24
今天学习了数据大屏的适配方案
比较主流的方案为vm vh1
实现方式：按照设计稿的尺寸，将px按比例计算转为vw和vh
优点：
1.可以动态计算图表的宽高，字体等，灵活性较高
2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
缺点：
1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦展开评论点赞 - #青训营笔记创作活动#
12月29日 打卡day23
今天学习了20个开源的前端低代码项目
其中，印象比较深刻的是vite-vue3-lowcode。
vite-vue3-lowcode 是一款基于Vite2.x + Vue3.x + TypeScript技术框架的的H5 低代码平台。目前只是一个简单的模板，支持数据配置的导入和导出，配置的修改和删除操作，用到的技术有sandbox 中执行自定义逻辑、monaco-editor 自定义代码补全、vue3 createRenderer 自定义渲染器等。
展开评论点赞 - #青训营笔记创作活动#
12月28日 打卡day22
今天学习了如何建造高性能的树妆结构。
整个结构扁平化后收益特别多。
结构很清晰，我们可以很轻易的对数据进行处理。
特别是在特别大数据量的情况下，这种形式可以极大的提高性能，减去需要遍历的性能消耗。
以前各种在数组对象出现的弊端都消失了。展开评论点赞 - #青训营笔记创作活动#
12月27日 打卡day21
今天学习了一个包管理器-pnpm
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。展开评论点赞 - #青训营笔记创作活动#
12月26日 打卡day20
今天学习了用前端实现羊了个羊小游戏
点击交互
1. 是否可以点击
只有顶层可以被点击，我们之前已经判定过卡片是否被覆盖的逻辑，做对应处理即可。一个简单的方法是给被覆盖的卡片设置一个特殊 style
.covered-item {
pointer-event: none;
}
复制代码这样对应卡片上的任何事件都不会生效
展开评论点赞 - #青训营笔记创作活动#
12月25日 打卡 day19
今天学习了几个浏览器的调试技巧
console 是我们开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn等。
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。打断点的方式有两种：
1.直接断点
打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
2.代码断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。展开评论点赞