JosephGao
JosephGao
使用过Vue的大家，对于生命周期一定都很熟悉，在官方文档一开始，就给我们介绍了Vue的生命周期有哪些，是怎么样的顺序。这个难不倒大家。 但如果是问当组件嵌套时，父子组件的生命周期函数触发的顺序是什么样的？你是不是会有一丝丝不确定呢? 如果有的话，就让我们一起动动手来确认下这个简单的问题吧。 首先，一个Vue实例/组件的生命周期中的8个关键阶段： 1. `beforeCreate`：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. `created`：在实例创建完成后被立即调用。在这一步，实例已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。 3. `beforeMount`：在挂载开始之前被调用：相关的 `render` 函数首次被调用。 4. `mounted`：实例被挂载后调用，这时 `el` 被新创建的 `vm.$el` 替换了。 5. `beforeUpdate`：数据更新时调用，发生在虚拟DOM打补丁之前。 6. `updated`：虚拟...
内容摘要： 1. 什么是混杂模式、近标准模式和标准模式 2. 如何查看页面的渲染模式 3. 文档类型的种类 4. 标准类型下的怪异行为（很有意思哟） --- 在开始学习前端之前，你总会需要创建一个HTML。在HTML标签之前，还有一个你可能不会注意到的``标记。虽然它不显眼，但我们需要知道它为什么存在。 HTML文件中，**``是必须的，需要放到整个文档的顶部，格式为``**。它存在的意义在于**阻止浏览器在渲染文档时进入混杂模式(Quirks Mode)**。也就是说``这一文档类型可以确保浏览器**尽可能地**使用遵循规范的模式来渲染，而不是使用某些不符合规范的渲染模式。 ## 一、混杂模式和标准模式 很久很久以前，web页面主要运行在两类浏览器：网景的Navigator和微软的IE。后来W3C制定了web规范之后，为了保证现有页面可用，各大浏览器不能立马使用新规范。 于是，浏览器厂商们引入了两种模式来区别对待符合新标准的站点和旧的遗留站点：混杂模式（Quirks Mode）和标准模式（Standards Mode）。在过渡阶段还存在一种接近标准模式（Almost Standards Mode）。 * **混杂模式**，也成为**怪异模式**，会兼容Navigator 4和IE 5的非标准行为。 * **近标准模式**会兼容少数的混杂行为，可以理解为过渡模式。 * **标准模式**只兼容符合标准描述的行为。 请确保把...
## 背景介绍 在单页应用盛行的今天，很多人似乎已经把简单的切图不当做一种技术活了。对于切页面，写静态网站都快要嗤之以鼻了。其实并非如此，写静态页面是前端入门的基本工作，是基本功扎实的体现。而且在工作中，我们也少不了要开发一些静态的官网类网站。我们要做的是想一想如何更好的开发静态页面。 歪马最近因工作原因，需要对一个托管于内容管理系统的官网类网站进行迁移。既然要重新弄，那工程化自然少不了，webpack、css 预编译等全上了。这样才能向更好的开发体验靠齐。 由于是静态官网，在使用 webpack 的时候，需要指定多入口，并且为不同的入口指定不同的 template 模板。借助`html-webpack-plugin`可以为不同的入口指定模板，如下所示： ```JS // ... entrys.map(entryName => { htmlWebpackPlugins.push( new HtmlWebpackPlugin({ template: `${entryName}.html`, filename: `${entryName}.html`, chunks: ['vendor', 'common', entryName], }), ) })...
# CSS混合模式 在CSS中我们可以通过`background-blend-mode`和`mix-blend-mode`来应用混合模式这一强大的效果。这一效果仿佛能够让我们在浏览器中进行P图。 在详细介绍这两个属性之前，我们现在先了解一下它们都会用的值类型``。 ## 一、\ \是CSS的一种值类型。它用于描述**当元素重叠时颜色该如何展示**。可以用于`background-blend-mode`和`mix-blend-mode`这两个属性。 当应用了混合模式后，这一属性会根据特定的算法将重叠的前景（顶）色和背景（底）色生成一个新的颜色值。 \数据类型可以指定下面**16**个关键字，分别为：`normal`，`multiply`，`screen`，`overlay`，`darken`，`lighten`，`color-dodge`，`color-burn`，`hard-light`，`soft-light`，`difference `，`exclusion`，`hue`，`saturation`，`color`，`luminosity`。[示例demo](http://code.h5jun.com/roca)链接可点击跳转（[http://code.h5jun.com/roca](http://code.h5jun.com/roca)），可以分别选择不同的混合模式来应用效果。 1. `normal` 正常模式 这个比较简单也比较好理解。最终的颜色会忽略下面被覆盖的颜色，直接显示为上面的颜色。 2. `multiply` 正片叠底模式 最终的颜色是顶色和底色相乘。**黑色叠加后结果会变成黑色，白色叠加时不变**。 3. `screen` 屏幕模式 与正片叠底模式相反，合成图层的效果是显现两图层中较高的灰阶，而较低的灰阶则不显现（即浅色出现，深色不出现），产生一幅更加明亮的图像。**黑色叠加后颜色不变，白色叠加结果为白色**。 4. `overlay` 叠加模式 如果底色更深则最终结果为`multiply`的结果；如果底色更浅，则最终结果为`screen`的结果。 5. `darken` 变暗模式 此关键字会对前后景颜色值的RGB值（即RGB通道中的颜色亮度值）分别进行比较，取二者中低的值再组合成为混合后的颜色。...
# 最小栈和最小队列 相信栈和队列这两种数据结构大家一定都不陌生吧。这两种数据结构有个特殊形式：即最小栈和最小队列。 下面我们分别来介绍下这两个带有“特异功能”的数据结构。 ## 一、最小栈 ### 1. 什么是最小栈 实现一个栈，带有出栈（pop），入栈（push），取最小元素（getMin）三个方法。并且这三个方法的时间复杂度都是O（1）。 ### 2. 设计思路 #### 2.1 错误思路 看了上面对于最小栈的定义后，可能大部分人都能够快速想得到这样的思路： 创建一个栈，再额外声明一个变量，用于存储栈的最小值。将第一个入栈的元素赋值给最小值变量。之后在每次进行入栈操作时，判断最小值变量与新入栈元素的大小。如果新入栈元素小于最小值变量，则修改最小值变量的值为新入栈元素。 这样我们就实现了一个栈，并且还会有一个变量指向栈的最小值。 不过遗憾的是，这个思路是错误的。因为当我们进行出栈操作的时候，如果最小值出栈了，那所声明的最小值变量就没有意义了。 所以我们在最小值出栈的时候，需要有更换顶替当前最小值的次最小值。 #### 2.2 正确思路 上面说了，我们在最小值出栈时，需要有更换顶替当前最小值的值。我们可以通过两个栈来实现，第一个栈用于存放入栈的元素，第二个栈用于存放最小元素。 **具体思路如下：** 1. 创建两个栈分别为A和B，A用于存放入栈的元素，B用于存放最小值在A中的下标或索引。 2. 当第一个元素入A栈时，同时将其索引值推入B栈。...
## 前言 上一次，我写了一篇[《Data URL的简介与使用》](http://verymuch.site/2017/12/14/Data-URL%E7%AE%80%E4%BB%8B%E4%B8%8E%E4%BD%BF%E7%94%A8/)，该文章主要介绍了什么是Data URL，其优缺点及可以如何使用。其中有一个隐含在文中的重要概念，那就是Data URL是Base64编码的，且Base64编码的数据体积通常是原数据的体积4/3。 不知道大家会不会有这样的疑问： 1. 为什么图片转成Base64编码，就可以直接内联到HTML中显示呢？ 2. 为什么Base64编码后，体积会增大1/3呢？ 如果你对此也有疑问的话，就往下一看究竟吧。 ## 为什么Base64编码可以内联到HTML中？ 我们知道HTTP协议是文本协议，不同于常规的二进制协议那样直接进行二进制传输。Base64编码是**从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。** ## 什么是Base64编码 首先Base64是一种编码算法，为什么叫做Base64呢？其实原因也很简单，是因为该算法共包含64个字符。包括大小写拉丁字母各26个、数字10个、加号`+`和斜杠`/`，共64个字符。此外还有等号`=`用来作为后缀用途。 字符与索引的对应关系如下图所示。  但，为什么Base64编码算法只支持64个字符呢？ 首先，我们先回顾下ASCII码。ASCII码的范围是0-127，其中0-31和127是控制字符，共33个。其余95个，即32-126是可打印字符，包括数字、大小写字母、常用符号等。如下图所示，图片来源（[https://zh.wikipedia.org/wiki/ASCII](https://zh.wikipedia.org/wiki/ASCII)）。   早期的一些传输协议，例如邮件传输协议SMTP，只能传输可打印的ASCII字符。这样原本的8bit字节码（0-255）就会超出使用范围，从而到这无法传输。 这时，就产生了Base64编码，它利用**6bit字符来表达原本的8bit字符**。 ## Base64编码原理 上面我们知道了什么是Base64编码，知道了其包含的64个字符。它主要是通过6bit字符来表达原本的8bit字符。接下来我们一起学习下这一过程是如何进行的。 首先，6bit显然不够容纳8bit的数据。6和8的最小公倍数是24，所以我们用4个Base64字符刚好能够表示三个传统的8bit字符。如下所示，字符串`Man`的编码图解如下：...
过滤器效果可以在元素展示之前对元素的渲染进行处理。它是基于图片的效果，主要接受0或多个图片作为输入，然后指定特定的效果参数，最后生成一张图片作为输出。输出的图片会替代原始元素在DOM中渲染，或者被当做一个CSS图片值。 虽然过滤器效果一开始是为了SVG而设计的，但是在CSS中，我们也同样可以使用(通过`filter`属性)。 本文主要介绍的就是这一部分，CSS中的filter效果。后续我会再给大家介绍一下SVG中的filter效果。 ## CSS中的`filter`属性 在CSS中，我们可以通过`filter`属性使用过滤器效果。该属性可以应用在CSS中的任何元素上，除此之外，还可以应用在SVG中的容器元素（除``外）、图形类元素（如`circle`、`polyline`等）以及``元素上。 `filter`值的格式为：`filter: none | `。 其中`none`表示无过滤器效果。``等于`[ | ]+`。``是filter属性预设的效果函数，后面会详细介绍。``表示引用svg中的``元素。如`url(commonfilters.svg#filter)`。如果引用的内容不存在或者不是一个filter元素，则忽略该引用。这一部分的细节我们会在下一篇SVG filter中详细介绍。 当元素的`filter`不为`none`时，会创建一个堆叠上下文，这对元素的层叠会产生影响。如下所示，对图中图片一应用`drop-shadow`filter效果，其层级会覆盖在图片二的原图之上。  > 如果你对于CSS中元素的层级有什么疑问，可以参考我之前写的另一篇文章[《 CSS的“层”峦“叠”翠 》](https://github.com/75team/w3c/blob/master/articles/20190225_CSS%E7%9A%84%E2%80%9C%E5%B1%82%E2%80%9D%E5%B3%A6%E2%80%9C%E5%8F%A0%E2%80%9D%E7%BF%A0.md)。这篇文章会向你解释什么是层叠上下文，元素之间如何决定堆叠顺序。 ## 预设的filter效果函数 CSS中预设的filter效果函数包括：`blur()`、`brightness()`、`contrast()`、`drop-shadow()`、`grayscale()`、`hue-rotate()`、`invert()`、`opacity()`、`saturate()`、`sepia()`。 需要注意的是，对于这些效果函数，初始值和缺省值（指定了函数但未传值）并不都是一样的。如`grayscale()`、`sepia()`、`invert()`当参数缺省时，值为`1`，等价于100%的效果，而它们的初始值是`0`。更需要的注意的是，这几种特殊情况在不同浏览器中表现并不一样，所以在使用时大家不要偷懒写了函数却不传值。 ### `blur()`高斯模糊 `blur()`向元素应用高斯模糊。该函数语法格式为：`blur( ?...
大家可能不一定都用过CSS自定义属性（[ CSS Custom Properties ](https://www.w3.org/TR/2015/CR-css-variables-1-20151203/)），但是一定都用过预处理器中的变量。这也是CSS自定义属性有时候被称作CSS变量的原因。 但由于预处理器中变量的使用位置可以不局限在属性值，但是自定义属性只能作为属性值使用，所以其准确名称是CSS自定义属性，而不是CSS变量。 下面我们先从预处理器说起。 ## 一、预处理器中的变量 如果大家用过预处理器的话，一定会有这样的感触。设计师给的某个颜色值，只需要给其定义一个语义化的变量名，就可以在页面的任何（适当的）地方使用了，而不用记住或者复制粘贴这一色值。这样做的好处也是很明显，那就是当这一色值在多处使用需要修改时，直接修改变量的值即可。这就是预处理器中的变量的优势所在：**减少复制粘贴，易于修改**。 不过撇开优点不谈，预处理器的变量也有一些缺点和限制，如下： 1. **不能动态修改变量**：预处理器是在编译时进行变量的处理，编译后变量其实就不存在了。 2. **没有DOM结构，无法级联继承**。 3. **不能用JavaScript进行读写**。 看到这里大家都一定会想，既然预处理器变量有这些缺点，那是不是CSS的自定义属性就能做到这些呢？想知道的话，和我一起往下进行吧。 ## 二、如何定义自定义属性 ### 2.1 自定义属性名 CSS自定义属性的语法格式为`--*`，双横线加上具体的自定义属性名，属性名是一个合法的CSS[标识符](https://www.w3.org/TR/css-syntax-3/#identifier)即可。 自定义属性没有具体的CSS含义，其用途完全由作者和使用者决定。自定义属性可以**应用于任何元素，其可以被继承，并且支持级联，不支持动画**。 注意：与CSS属性不同，自定义属性是**大小写敏感的**。 > CSS不会被[`all`](https://developer.mozilla.org/en-US/docs/Web/CSS/all)属性重置，将来可能会定义一个重置所有变量的属性。 ### 2.2...
## 引言 CSS中有两个很常见的概念，伪类和伪元素。 伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。 伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。 最常规的区分伪类和伪元素的方法是：**实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的DOM节点。** 此外，伪类是使用单冒号`:`，伪元素使用是双冒号`::`。 伪元素可以分为排版伪元素、突出显示伪元素、树中伪元素三类。下面我们一起看看具体都有哪些吧。 > 本文主要介绍[CSS Pseudo-Elements Module Level 4](https://www.w3.org/TR/2019/WD-css-pseudo-4-20190225/#window-interface)涉及的伪元素，因为该标准仍处于草案阶段，所以会存在变动的可能。本文旨在带大家了解有哪些现在以及将来可用的伪类。有兴趣的可以持续跟进。 ## 第一类：排版伪元素 ### 1. `::first-line`伪元素 这个伪元素大家应该很熟悉，因为早在CSS2.1中就存在了。它表示所属源元素的第一格式化行。可以定义这一行的样式。 如下面的CSS和HTML代码，其对应的效果如图所示。 ```CSS p::first-line { text-transform: uppercase; } ``` ```HTML Lorem...
## 前言 提起，z-index大家脑海里可能会立刻浮现这样的知识点：“z-index的值大小控制元素在Z轴上显示的层级，z-index越大显示的层级越高（也就是在最上层，离观察者越近），没有指定的按照出现顺序堆叠，此外z-index不能跨父元素比较。 z-index的使用似乎就是这么简单，对吧？ 我们先看如下例1： ```HTML DIV#1，z-index为2 DIV#2，z-index为auto ``` HTML中有如下两个元素，DIV#1的z-index为`2`，DIV#2向右向上偏移。问：它们谁会显示在上面？  点击 CSS的“层”峦“叠”翠 - 示例1 - 用法导引 进行编辑 (@verymuch) on CodePen. 如上所示，z-index为2的元素并没有显示在第二个元素上面。这似乎很奇怪，那到底是为什么呢？ 如果你也对此存在困扰，那就和我一起往下看吧。笔者将逐步引导大家深入理解z-index的用法。 ## 一、没有使用z-index时，元素如何堆叠？ 首先，我们先了解下默认情况下，元素的堆叠，即在没有使用z-index时，元素是如何堆叠的。 如果没有给任何元素指定z-index，则元素按照如下顺序进行堆叠（由下到上，由远及近）。 1....