YolkPie

在写 CSS 的时候，我们有时会用到百分比。百分比是一种相对值，如果浏览器要将百分比正确展示到页面上，首先需要找到它的参照，之后根据其参照计算转化为一个绝对值（比如100px），然后在页面绘制出 100px 的长度。 CSS中的参照有很多，有包含块、自身、字体大小等。在区分 CSS 中百分比的参照类型之前，我们先来看下包含块是什么。 包含块包含块的定义 在 CSS中，一个元素的位置和尺寸的计算，都取决于一个矩形的边界，这个矩形被称作是包含块(containing block)。 一个框的包含块，指的是该框所存在的那个包含块，并不是它建造的包含块 包含块可用于自动值的计算/宽高的计算/浮动元素的定位/绝对元素的定位 包含块的判定 根元素：称为初始包含块（initial containing block），大小为可视区域大小 static/relative：最近的块级、单元格（table cell）或者行内块（inline-block）祖先元素的内容框 fixed：脱离文档流，包含块为可视窗口 absolute：包含块为最近的 ‘position’ 属性为 ‘absolute’、’re ...

前言在Web开发中，Scroll事件是一个很重要的事件。通过Scroll事件，我们可以通过一些方式获知视口在页面的位置。知道这个信息可以帮助我们判断很多东西，如用户即将浏览到页面底部，是不是该调用API加载一些新的内容等等。 在实际运用中，scroll事件常常带来很多迷惑。最近在开发某个需要监听滚动时间的项目时就遇到了一个问题，在react中的组件绑定scroll事件，事件处理函数似乎不会触发。这个问题好像困扰过很多人， 滚动事件失效能发现很多相关内容。比如说这一个问题，可以一个个去试他们给出的解决方案，总会发现几个有用的。但是作为开发者，知其然还要知其所以然。那么，本文就来探究一下这个scroll事件的背后到底有什么不为人知的东西。 JS事件模型大家都知道，JavaScript事件有两个阶段：（1）捕获阶段(Capture Phase)（2）冒泡阶段(Bubble Phase)。捕获阶段是事件从document到传递到目标元素的过程，而冒泡阶段是事件从目标元素传递到document的过程。 在平时，大家一般是监听事件的冒泡阶段，即elem.addEventListener(‘scro ...

前言搜索列表页是大家经常接触的页面，如果做好一个列表页其实是不容易的，因为细节的地方很多；最近做了很多列表搜索页面，关于页面有倒计时并且刷新状态的需求做了不少，总结出一点经验，与大家分享，希望能对大家有所帮助。 关于首屏渲染同步接口渲染页面 方案一：页面是接口同步请求，信息合并，渲染页面。即从A接口获取一个基本信息list,然后依赖A接口的数据，再请求B接口，B接口返回的数据和A接口的数据进行融合，渲染页面； 方案一逻辑： 12345678910111213141516171819202122//list是融合接口A和接口B之后的数据 const [list, setList] = useState<IGood[]>([]); getResFloor().then((resA) => { goodsUpdate(resA); }); }); //融合接口数据，设置list goodsUpdate(list).then((resB) => { let ...

BFC到底是什么东西BFC 全称：Block Formatting Context， 名为 “块级格式化上下文”。 W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。 简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性 怎样触发BFC这里简单列举几个触发BFC使用的CSS属性 overflow: hidden display: inline-block position: absolute position: fixed display: table-cell display: flex BFC的规则 BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列 BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠 计 ...

webGL（1）基础：关于CPU与GPU大家都知道在计算机中存在CPU和GPU，而我们这次要讲到的知识和GPU息息相关，所以需要简单了解一些相关知识。CPU与GPU都是用于处理数据的工具，但是却又大不相同，CPU需要很强的通用性来处理各种不同的数据类型，同时又要逻辑判断又会引入大量的分支跳转和中断的处理。这些都使得CPU的内部结构异常复杂。而GPU面对的则是类型高度统一的、相互无依赖的大规模数据和不需要被打断的纯净的计算环境。 简单来说，就是CPU用来处理各种复杂的运算，而GPU更适合处理简单但数量级较高的运算。 什么是webGL？WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染（部分计算GPU），这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。总结一下，WebGL的本质 —— JavaScript操作OpenGL接口。（笔者个人理解 ...

React中的样式策略主要有以下几种： 内联样式： 内联样式就是在JSX元素中，直接定义行内的样式； CSS样式表： 这也是我们最常用的样式策略，使用单独的样式表，使用CSS或者SCSS等来为元素设置样式； CSS模块： CSS模块是一个文件，默认情况下所有类名和动画名都在本地范围； styled-components：这是一个用于React和React Native的样式组件库，它允许我们早应用中使用组件级样式，这些样式就是使用CSS-in-JS的技术来编写的； JSS：JSS是一个CSS创作工具，它允许我们使用JavaScript以声明式、无冲突和可重复的方式来描述样式。 这么说可能有点抽象，下面就来看看这些样式策略分别是怎么使用的，以及它们的优缺点。 1. 内联样式React中的组件是由JSX元素组件的，虽然编写的不是常规的HTML，但是仍然是可以使用内联样式去定义样式的。与普通的HTML内联样式唯一的区别就是，JSX中的内联样式是一个对象，而不是一个字符串。 下面来看一个简单的例子： 12345678import React from "react"; ...

简介： flex布局（Flexible布局，弹性布局）是在小程序开发经常使用的布局方式 开启了flex布局的元素叫做flex container flex container里面的直接子元素叫做flex items（也就是开启了flex布局的盒子包裹的第一层子元素） 设置display的属性为flex或者inline-flex可以开启flex布局即成为flex container 属性值设置为flex和inline-flex的区别： 如果display对应的值是flex的话，那么flex container是以block-level的形式存在的，相当于是一个块级元素 如果display的值设置为inline-flex的话，那么flex container是以inline-level的形式存在的，相当于是一个行内块元素 这两个属性值差异的影响在设置了属性值的元素上面，它们在子元素上的效果都是一样的 如果一个元素的父元素开启了flex布局；那么其子元素的display属性对自身的影响将会失效，但是对其内容的影响依旧存在的； 举个例子：父元素设置了display: fl ...

骨架屏用途 作为spa中路由切换的 loading, 结合组件的生命周期和ajax请求返回的时机来使用.（ 作为loading 使用）。作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。 作为首屏渲染的优化 实现思路 定义一个抽象组件，在抽象组件的render函数里获取插槽 深度循环遍历插槽，将每个元素都添加上gm-skeleton的类名 将vnode textContent预暂后清空保证骨架屏出现时不会出现默认文字 返回slots 定义一个抽象组件什么是抽象组件? 在渲染时会被跳过，只做运行时的操作的组件 1234export default { name: 'YKSkeleton', abstract: true // 抽象组件的属性} 获取插槽并初始化操作骨架屏12345678910render(h) { const ...

如果要生成海报图片，要分两步才能完成： 绘制 canvas canvas 转换成图片 第一步：绘制 canvas如果要生成海报图片，第一步是根据设计稿，将要展示的内容绘制到 canvas 上。绘制 canvas 有两种不同的方式：直接绘制和使用html2canvas 进行转换。 直接绘制直接绘制就是使用 canvas 的方法将要展示的元素一个个绘制出来。如果要展示的元素相对来说比较简单也不经常变动，推荐使用这种方式，因为和使用html2canvas 相比，直接绘制不用依赖外部，项目可以小而精。下面是我在使用过程中遇到的问题： 尺寸转换问题 说到尺寸，首先我们要注意 canvas 元素上和 CSS 样式中的 width / height 属性的区别：canvas 元素上的属性是画布的宽高，而 CSS 样式中的宽高是 canvas 元素在页面上展示的大小。为什么区分这两个尺寸呢， 因为 canvas 是位图模式的，如果不做高清屏适配的话浏览器就会以多个像素点的宽度来渲染一个像素，图片就会很模糊，因此需要将 canvas 画布的宽高乘以 window.devicePixelRatio。 ...

你不知道的JSON.stringifyJSON.stringify是我们经常用到的的一个方法，它主要作用是将 JavaScript 值和对象转换为字符串。如： 12345JSON.stringify({ foo: "bar" });// => '{"foo":"bar"}'JSON.stringify(123);// => '123' 但是JS 的许多地方都有问题，这个函数也不例外。我们可能会想象一个叫做 “stringify “的函数总是返回一个字符串……但它并没有！例如，如果你尝试 stringify undefined，它返回 undefined ，而不是一个字符串。 12JSON.stringify(undefined);// => undefined 什么时候 JSON.stringify 不返回字符串?undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被 ...