姜颖
学生
获得徽章 1
打卡字节前端青训营day2:
前提:
有一个国外的代理，日本、新加坡、印度都可以，我们是在阿里云临时买了一台印度的服务器搭的梯子，大概花了60块钱（如果有现成的梯子这步可省略）。
国外的手机号，或者使用接码平台接收验证码。我们用的是一个接码平台：
sms-activate.org 不用翻墙可以直接访问
前提:
有一个国外的代理，日本、新加坡、印度都可以，我们是在阿里云临时买了一台印度的服务器搭的梯子，大概花了60块钱（如果有现成的梯子这步可省略）。
国外的手机号，或者使用接码平台接收验证码。我们用的是一个接码平台：
sms-activate.org 不用翻墙可以直接访问
展开
评论
点赞
#青训营笔记创作活动#
2月15日 打卡day29今日学习：
package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。 package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。
今天主要学习了一些常见配置，我把它们分为了 7 大类：
描述配置、文件配置、脚本配置、依赖配置、发布配置、系统配置、第三方配置。
2月15日 打卡day29今日学习：
package.json 配置完全解读
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。 package.json 里面有许许多多的配置，与项目息息相关，了解它们有助于了解项目，提效开发，规范代码。
今天主要学习了一些常见配置，我把它们分为了 7 大类：
描述配置、文件配置、脚本配置、依赖配置、发布配置、系统配置、第三方配置。
展开
评论
点赞
#青训营笔记创作活动#
2月14日 打卡day28今日学习：
【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码？
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
在这九个 Hook 中所注册的事件可以分为同步、异步两种执行方式，正如名称表述的那样：同步表示注册的事件函数会同步进行执行异步表示注册的事件函数会异步进行执行
对同步钩子来说， tap 方法是唯一注册事件的方法，通过 call 方法触发同步钩子的执行。对异步钩子来说，可以通过 tap、tapAsync、tapPromise三种方式来注册，通过对应的 callAsync、promise 这两种方式来触发注册的函数。同时异步钩子中还可以分为两类：异步串行钩子( AsyncSeries )：可以被串联（连续按照顺序调用）执行的异步钩子函数。异步并行钩子( AsyncParallel )：可以被并联（并发调用）执行的异步钩子函数。
2月14日 打卡day28今日学习：
【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码？
Tapable是一个类似于 Node.js 中的 EventEmitter 的库，但它更专注于自定义事件的触发和处理。通过 Tapable 我们可以注册自定义事件，然后在适当的时机去执行自定义事件。
在这九个 Hook 中所注册的事件可以分为同步、异步两种执行方式，正如名称表述的那样：同步表示注册的事件函数会同步进行执行异步表示注册的事件函数会异步进行执行
对同步钩子来说， tap 方法是唯一注册事件的方法，通过 call 方法触发同步钩子的执行。对异步钩子来说，可以通过 tap、tapAsync、tapPromise三种方式来注册，通过对应的 callAsync、promise 这两种方式来触发注册的函数。同时异步钩子中还可以分为两类：异步串行钩子( AsyncSeries )：可以被串联（连续按照顺序调用）执行的异步钩子函数。异步并行钩子( AsyncParallel )：可以被并联（并发调用）执行的异步钩子函数。
展开
评论
点赞
#青训营笔记创作活动#
2月13日 打卡day27今日学习：
在 JavaScript 中，什么时候使用 Map 或胜过 Object
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
与 Object 相比，Map 为各种常见任务提供了专门的API: Map.prototype.has 检查一个给定的项是否存在，与必须在对象上使用Object.prototype.hasOwnProperty/Object.hasOwn 相比，不那么尴尬了。 Map.prototype.get 返回与提供的键相关的值。有的可能会觉得这比对象上的点符号或括号符号更笨重。不过，它提供了一个干净的用户数据和内置方法之间的分离。 Map.prototype.size 返回 Map 中的项的个数，与获取对象大小的操作相比，这明显好太多了。此外，它的速度也更快。 Map.prototype.clear 可以删除 Map 中的所有项，它比 delete 操作符快得多。
2月13日 打卡day27今日学习：
在 JavaScript 中，什么时候使用 Map 或胜过 Object
Map 比 Object 快，除非有小的整数、数组索引的键，而且它更节省内存。如果你需要一个频繁更新的 hash map，请使用 Map；如果你想一个固定的键值集合（即记录），请使用Object，并注意原型继承带来的陷阱。
与 Object 相比，Map 为各种常见任务提供了专门的API: Map.prototype.has 检查一个给定的项是否存在，与必须在对象上使用Object.prototype.hasOwnProperty/Object.hasOwn 相比，不那么尴尬了。 Map.prototype.get 返回与提供的键相关的值。有的可能会觉得这比对象上的点符号或括号符号更笨重。不过，它提供了一个干净的用户数据和内置方法之间的分离。 Map.prototype.size 返回 Map 中的项的个数，与获取对象大小的操作相比，这明显好太多了。此外，它的速度也更快。 Map.prototype.clear 可以删除 Map 中的所有项，它比 delete 操作符快得多。
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡day26
今日学习：
Islands 架构原理和实践
Islands 架构模型早在 2019 年就被提出来了，并在 2021 年被 Preact 作者Json Miller 在 Islnads Architecture 一文中得到推广。这个模型主要用于 SSR (也包括 SSG) 应用，我们知道，在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。
2月12日 打卡day26
今日学习：
Islands 架构原理和实践
Islands 架构模型早在 2019 年就被提出来了，并在 2021 年被 Preact 作者Json Miller 在 Islnads Architecture 一文中得到推广。这个模型主要用于 SSR (也包括 SSG) 应用，我们知道，在传统的 SSR 应用中，服务端会给浏览器响应完整的 HTML 内容，并在 HTML 中注入一段完整的 JS 脚本用于完成事件的绑定，也就是完成 hydration (注水) 的过程。当注水的过程完成之后，页面也才能真正地能够进行交互。
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡day25今日学习：
写给前端的 docker 使用指南
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令如何进入 docker 容器中进行调试使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开如何得知启动 nginx 容器的 IP 端口了解 docker 原理，如何模拟 docker 隔离环境及限制资源 Dockerfile、Image、Container 有何区别 Dockerfile 中 CMD 与 RUN 有何区别
2月11日 打卡day25今日学习：
写给前端的 docker 使用指南
了解 docker 常见操作，如构建镜像、运行容器、进入容器执行命令如何进入 docker 容器中进行调试使用 docker 启动 nginx 容器，并在本地浏览器某端口可直接打开如何得知启动 nginx 容器的 IP 端口了解 docker 原理，如何模拟 docker 隔离环境及限制资源 Dockerfile、Image、Container 有何区别 Dockerfile 中 CMD 与 RUN 有何区别
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡day24今日学习：
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适配根据 ui 稿绘制图表，调细节
3 种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。如果想简单，客户能同意留白，选用 scale 即可如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案至于 rem，个人觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
2月10日 打卡day24今日学习：
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：大屏之关键-前期的自适应适配根据 ui 稿绘制图表，调细节
3 种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。如果想简单，客户能同意留白，选用 scale 即可如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案至于 rem，个人觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
展开
评论
点赞
#青训营笔记创作活动#
2月9日 打卡day23
今日学习：
推荐20个开源的前端低代码项目
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
2月9日 打卡day23
今日学习：
推荐20个开源的前端低代码项目
近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。
展开
评论
点赞