用户1005941955361
获得徽章 1
#青训营笔记创作活动#
2月13日 打卡Day32
今日学习
pdf的渲染数据this.fileData必须是一个ArrayBuffer格式的数据，如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()转换pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容，出现模糊的问题,所以进行缩放渲染是有必要的
2月13日 打卡Day32
今日学习
pdf的渲染数据this.fileData必须是一个ArrayBuffer格式的数据，如果请求的的数据是Blob格式必须要先使用Blob.arrayBuffer()转换pdf文件渲染后如果不能调整大小会因为源文件的大小和文件内容，出现模糊的问题,所以进行缩放渲染是有必要的
展开
评论
点赞
#青训营笔记创作活动#
2月12日 打卡Day31
今日学习
抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用
2月12日 打卡Day31
今日学习
抽象语法树（Abstract Syntax Tree，AST）是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。在代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等场景均有广泛的应用
展开
评论
点赞
#青训营笔记创作活动#
2月11日 打卡Day30
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱，而它们又可以分为单例和多例两种模式，网上也有很多文章对其进行介绍。
把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。
2月11日 打卡Day30
qiankun 有 SnapshotSandbox, LegacySandbox 和 ProxySandbox 这些沙箱，而它们又可以分为单例和多例两种模式，网上也有很多文章对其进行介绍。
把主应用的 window 对象做浅拷贝，将 window 的键值对存成一个 Hash Map。之后无论微应用对 window 做任何改动，当要在恢复环境时，把这个 Hash Map 又应用到 window 上就可以了。
展开
评论
点赞
#青训营笔记创作活动#
2月10日 打卡Day29
今日学习
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
2月10日 打卡Day29
今日学习
package.json 是前端每个项目都有的 json 文件，位于项目的根目录。许多脚手架在搭建项目时也会自动帮我们自动初始化好 package.json。要是项目的基本信息，包括名称，版本，描述，仓库，作者等，部分会展示在 npm 官网上。
展开
评论
点赞
#青训营笔记创作活动#
2月9日 打卡Day28
今日学习
Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等.
比到 Vue 和 React 框架中的生命周期函数，它们就是到了固定的时间节点就执行对应的生命周期，tapable 做的事情就和这个差不多，我们可以通过它先注册一系列的生命周期函数，然后在合适的时间点执行。
2月9日 打卡Day28
今日学习
Tapable 的内部以特别巧妙的方式实现了发布订阅模式，这之中会有非常多的知识点：比如懒编译或者叫动态编译，关于类与继承抽象类的面向对象思想以及 this 指向的升华等等.
比到 Vue 和 React 框架中的生命周期函数，它们就是到了固定的时间节点就执行对应的生命周期，tapable 做的事情就和这个差不多，我们可以通过它先注册一系列的生命周期函数，然后在合适的时间点执行。
展开
评论
点赞
#青训营笔记创作活动#
2月8日 打卡Day27
今日学习
Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
ES6之前，获得 hash map 的唯一方法是创建一个空对象：
我们需要一个额外的检查（例如hasOwnProperty）来确保一个给定的属性确实是用户提供的，而不是从原型继承的。
2月8日 打卡Day27
今日学习
Hash Map 中使用对象最明显的缺点是，对象只允许键是字符串和 symbol。任何其他类型的键都会通过 toString 方法被隐含地转换为字符串。
ES6之前，获得 hash map 的唯一方法是创建一个空对象：
我们需要一个额外的检查（例如hasOwnProperty）来确保一个给定的属性确实是用户提供的，而不是从原型继承的。
展开
评论
点赞
#青训营笔记创作活动#
2月7日 打卡Day26
今日学习
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
MPA 和 SPA 结合的方案也并不是完美无缺的，主要的问题在于这类方案仍然会下载全量的客户端 JS 及执行全量的组件 Hydrate 过程，造成页面的首屏 TTI 劣化。
2月7日 打卡Day26
今日学习
MPA(Multi-page application) 即多页应用，是从服务器加载多个 HTML 页面的应用程序。每个页面都彼此独立，有自己的 URL。当单击 a 标签链接导航到另一个页面时，浏览器将向服务器发送请求并加载新页面。例如，传统的模板技术如JSP、Python、Django、PHP、Laravel 等都是基于 MPA 的框架，包括目前比较火的 Astro 也是采用的 MPA 方案。
MPA 和 SPA 结合的方案也并不是完美无缺的，主要的问题在于这类方案仍然会下载全量的客户端 JS 及执行全量的组件 Hydrate 过程，造成页面的首屏 TTI 劣化。
展开
评论
点赞
#青训营笔记创作活动#
2月6日 打卡Day24
今日学习
想简单，客户能同意留白，选用 scale 即可
如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案
至于 rem，觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
2月6日 打卡Day24
今日学习
想简单，客户能同意留白，选用 scale 即可
如果需要兼容不同比例的大屏，并且想在不同比例中都有比较好的效果，图表占满屏幕，类似于移动端的响应式，可以采用 vm vh 的方案
至于 rem，觉得就是 scale 和 vm vh 的综合，最终的效果跟 scale 差不多
展开
评论
点赞
#青训营笔记创作活动#
2月5日 打卡Day23
今日学习
Appsmith 是一款开源低代码框架，主要用于构建管理面板、内部工具和仪表板等，允许拖放 UI 组件来构建页面，通过连接到任何 API、数据库或 GraphQL 源，并使用 JavaScript 语言编写逻辑，可以在短时间内创建内部应用程序。
Amis 是百度开源的一款前端低代码框架，通过 JSON 配置就能生成各种后台页面，包括数据获取、表单提交及验证等功能，同时，Amis内置 100+ 种 UI 组件，能够满足各种页面组件展现的需求，极大减少开发成本，
2月5日 打卡Day23
今日学习
Appsmith 是一款开源低代码框架，主要用于构建管理面板、内部工具和仪表板等，允许拖放 UI 组件来构建页面，通过连接到任何 API、数据库或 GraphQL 源，并使用 JavaScript 语言编写逻辑，可以在短时间内创建内部应用程序。
Amis 是百度开源的一款前端低代码框架，通过 JSON 配置就能生成各种后台页面，包括数据获取、表单提交及验证等功能，同时，Amis内置 100+ 种 UI 组件，能够满足各种页面组件展现的需求，极大减少开发成本，
展开
评论
点赞
#青训营笔记创作活动#
2月4日 打卡Day21
今日学习
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。pnpm 的包安装速度还是明显优于 yarn PnP的
支持 monorepo
npm/yarn install 原理
主要分为两个部分, 首先，执行 npm/yarn install之后，包如何到达项目 node_modules 当中。其次，node_modules 内部如何管理依赖。
2月4日 打卡Day21
今日学习
pnpm 本质上就是一个包管理器，这一点跟 npm/yarn 没有区别，但它作为杀手锏的两个优势在于:
包安装速度极快；
磁盘空间利用非常高效。pnpm 的包安装速度还是明显优于 yarn PnP的
支持 monorepo
npm/yarn install 原理
主要分为两个部分, 首先，执行 npm/yarn install之后，包如何到达项目 node_modules 当中。其次，node_modules 内部如何管理依赖。
展开
评论
点赞
#青训营笔记创作活动#
2月3日 打卡Day20
今日学习
有这种布局，模拟成二维数组应该如下表示，每个格子就是一个数字元素最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
时我们加入一个随机系数，保证每次生成的地图不同
Math.random() < 0.3 === true 的时候该位置才放置卡片
2月3日 打卡Day20
今日学习
有这种布局，模拟成二维数组应该如下表示，每个格子就是一个数字元素最基础的地图只关乎当前层，假设当前需要判定是否放置卡片的坐标为 [i, j]，那么下面四个位置就不能存在卡片，否则就会出现同层卡片重叠
时我们加入一个随机系数，保证每次生成的地图不同
Math.random() < 0.3 === true 的时候该位置才放置卡片
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡Day19
今日学习
console.log
假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法。
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
2月1日 打卡Day19
今日学习
console.log
假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法。
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
展开
评论
点赞
#青训营笔记创作活动#
2月1日 打卡Day18
今日学习
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
动态 border Radiu使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。
2月1日 打卡Day18
今日学习
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
动态 border Radiu使用CSS max()函数，根据视口宽度，将卡片的border-radius 从 0px 切换到 8px。
展开
评论
点赞
#青训营笔记创作活动#
1月31日 打卡Day17
今日学习
hover 延时触发，在使用mouseout时还需要考虑 dom 嵌套结构，因为这些事件在父级 -> 子级的过程中仍然会触发，总之，细节会非常多，很容易误触发。opacity已经使用过了，可以使用其他的，比如transform:translateZ(.1px)，也是可行的。然后添加监听transitionend方法
1月31日 打卡Day17
今日学习
hover 延时触发，在使用mouseout时还需要考虑 dom 嵌套结构，因为这些事件在父级 -> 子级的过程中仍然会触发，总之，细节会非常多，很容易误触发。opacity已经使用过了，可以使用其他的，比如transform:translateZ(.1px)，也是可行的。然后添加监听transitionend方法
展开
评论
点赞
#青训营笔记创作活动#
1月30日 打卡Day16
今日学习
tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
太难了大佬
1月30日 打卡Day16
今日学习
tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。取4帧 人脸占画面的比例，判断这组值是递增或递减，取第一帧和最后最后一帧的占比，根据阈值判断人脸的远近。
太难了大佬
展开
评论
点赞
#青训营笔记创作活动#
1月29日 打卡Day15
今日学习
用 create-react-app 创建一个 react 项目，安装 antd，在入口组件里引入样式和 Button 组件，定调试的 URL，然后启动调试。step into 进入函数内部
1月29日 打卡Day15
今日学习
用 create-react-app 创建一个 react 项目，安装 antd，在入口组件里引入样式和 Button 组件，定调试的 URL，然后启动调试。step into 进入函数内部
展开
评论
点赞
#青训营笔记创作活动#
1月28日 打卡Day14
今日学习
fabric，入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。 通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。
1月28日 打卡Day14
今日学习
fabric，入口文件中初始化实例，然后与mixins结合，在mixins中定义了选择类型（多选、单选、未选中）、选中元素类型、选中id等属性，以及选中、取消选中的事件，子组件通过引入mixins来开发对应功能；如子组件需要对fabric对象进行操作，则可以通过inject获得原始对象。
初始化比较简单，fabric.js创建对象，用EventEmitter创建事件发射器，可订阅单选、多选、取消选择事件。 通过vue的provide语法把fabric对象、EventEmitter对象向下传递，在mixins中保存选中的元素和选中状态。
展开
评论
点赞
#青训营笔记创作活动#
1月27日 打卡Day13
今日学习
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。从禁用到可点击，动画绑定在按钮，动画的缓动函数设置成了阶梯曲线
1月27日 打卡Day13
今日学习
函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。从禁用到可点击，动画绑定在按钮，动画的缓动函数设置成了阶梯曲线
展开
评论
点赞
#青训营笔记创作活动#
1月26日 打卡Day12
今日学习
沙箱：安全机制，为运行中的程序提供隔离环境。
with ：作用在于改变作用域，可以将某个对象添加到作用域链的顶部
With + Proxy 实现沙箱
天然的优质沙箱（iframe）
黑名单中添加'Image'字段，堵上漏洞
1月26日 打卡Day12
今日学习
沙箱：安全机制，为运行中的程序提供隔离环境。
with ：作用在于改变作用域，可以将某个对象添加到作用域链的顶部
With + Proxy 实现沙箱
天然的优质沙箱（iframe）
黑名单中添加'Image'字段，堵上漏洞
展开
评论
点赞