背景

declare关键字是为了服务TypeScript的。TypeScript是什么在这里就不多介绍了，但是我们要知道ts文件是需要TypeScript编译器转换为js文件才可以执行，并且在编译阶段就会进行类型检查。但是在TypeScript中并不支持js可识别的所有类型，例如我们使用第三方库JQuery，我们通过一下方法获取一个id为‘foo’的标签元素。

$('#foo');

// or

jQuery('#foo');

然而在ts文件中，使用$语法，$底下就会爆出一条红线提示到：Cannot find name '$'

因此，需要declare来声明，告诉TypeScript编译器该标识符已存在，通过编译时的检查并在开发时提供类型提示。

定义

在 TypeScript 中，declare关键字告诉编译器存在一个对象（并且可以在代码中引用）。它向 TypeScript 编译器声明该对象。简而言之，它允许开发人员使用在其他地方声明的对象。

注：编译器不会将declare语句编译为 JavaScript。对比下面两段代码：

// declare声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。

// 该声明并不会生成真正的 JavaScript 代码，而只是告诉 TypeScript 编译器该变量存在。

declare var myGlobal: any;



// 给 myGlobal 赋值为 42。

myGlobal = 42; 

console.log(myGlobal); // 42

// 直接声明了一个名为 myGlobal 的全局变量，并指定其类型为 any。这会生成真正的 JavaScript 代码。

var myGlobal: any;



// 给 myGlobal 赋值为 42。

myGlobal = 42;

console.log(myGlobal); // 42

使用

• declare var 声明全局变量


• declare function 声明全局方法


• declare class 声明全局类


• declare enum 声明全局枚举类型


• declare namespace 声明（含有子属性的）全局对象


• declare global 扩展全局变量


• declare module 扩展模块

声明文件

通常，在使用第三方库或模块时，有两种方式引入声明文件：

• 全局声明：如果第三方库或模块是全局可访问的，你可以在整个项目的任何地方直接使用它们，而无需显式导入。此时，你只需要确保在 TypeScript 项目中正确引入了相应的声明文件。一般情况下，TypeScript 会自动查找并加载全局声明文件。如果没有自动加载，你可以使用 /// 的方式在具体的源文件中将声明文件引入。


• 模块导入：如果第三方库或模块是通过模块化方式提供的，你需要使用 import 语句将其导入到你的代码中，同时也需要确保相应的声明文件被正确引入。在这种情况下，你可以使用 import 或 require 来引入库，并且不需要显式地引入声明文件，因为 TypeScript 编译器会根据模块的导入语句自动查找和加载相应的声明文件。

有很多第三方库提供了声明文件，可以在packages.json文件中查看。types表示类型声明文件是哪一个。

可以使用 @types 统一管理第三方库的声明文件。@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：

npm install @types/jquery --save-dev

给前端以福利，给编程以复利。大家好，我是大家的林语冰。

00. 写在前面

毋庸置疑，JS 的历史包袱确实罄竹难书。用朱熹的话说，天不生 ES6，JS 万古如长夜。

就技术细节而言，ES6 之前，JS 保留了若干臭名昭著的反人类设计，包括但不限于：

• typeof null 的抽象泄露


• == 的无理要求


• undefined 不是关键词


• 其他雷区......

幸运的是，ES5 的“阉割模式”（strict mode）把一大坨 JS 的反人类设计都屏蔽了，后 ES6 时代的 JS 焕然一新。

所以，本期我们就从编程语言的宏观设计来思考，先不纠结 JS 极端情况的技术瑕疵，探讨一下 JS 作为地球上人气最高的编程语言，设计哲学上到底有何魅力？

免责声明：上述统计数据来源于 GitHub 社区，可能存在统计学偏差，仅供粉丝参考。

01. 标准化

编程语言人气排行榜屈居亚军的是 Python，那我们就用 JS 来打败 Python。

根据 MDN 电子书，JS 的核心语言是 ECMAScript，是一门由 ECMA TC39 委员会标准化的编程语言。并不是所有的编程语言都有标准化流程，JS 恰好是“天选之子”，后 ES6 的提案流程也相对稳定，虽然最近突然增加了 stage 2.7，但整体标准化无伤大雅。

值得一提的是，JS 的标准是向下兼容的，用户友好。JS 的大多数技术债务已经诉诸“阉割模式”禁用，而向下兼容则避免了近未来的 ESNext 出现主版本级别的破坏性更新。

举个栗子，ES2024 最新支持的数组分组提案，出于兼容性考虑，提案一度从 Array.prototype.group() 修改为 Object.groupBy()。

可以看到，JS 的向下兼容设计正是为了防止和某些遗留代码库产生命名冲突，降低迁移成本。

换而言之，JS 不会像 Python 2 升级 Python 3 那样，让用户承担语言迭代伴生的兼容性税，学习成本和心智负担相对较小。

02. 动态类型

编程语言人气排行榜屈居季军的是 TS，那我们就用 JS 来打败 TS。

JS 和 TS 都是 ECMAScript 的超集，TS 则是 JS 的超集。简而言之，TS ≈ JS + 静态类型系统。

JS 和 TS 区别在于动态类型 vs 静态类型，不能说孰优孰劣，只能说各有千秋。我的个人心证是，静态类型对于工程化生态而言不可或缺，比如 IDE 或 Linting，但对于编程应用则不一定，因为没有静态类型，JS 也能开发 Web App。

可以看到，因为 TS 是 JS 的超集，所以虽然没有显式的类型注解，上述代码也可作为 TS 代码，只不过 TS 和 JS 类型检查的粒度和时机并不一致。

一个争论点在于，静态类型的编译时检查有利于服务大型项目，但其实在大型项目中，一般会诉诸单元测试保障代码质量和回归测试。严格而言，静态类型之于大型项目的充要条件并不成立。

事实上，剥离静态类型注解的源码，恰恰体现了编程的本质和逻辑，这也是后来的静态类型语言偏爱半自动化的智能类型系统，因为有的类型注解可能是画蛇添足，而诉诸智能的类型推论可以解放程序猿的生产力。

03. 面向对象

编程语言人气排行榜第四名是 Java，那我们就用 JS 来打败 Java。

作为被误解最深的语言，前 ES6 的 JS 有一个普遍的误区：JS 不是面向对象语言，原因在于 ES5 没有 class。

这种“思想钢印”哪里不科学呢？不科学的地方在于，面向对象编程是面向对象，而不是 面向类。换而言之，类不是面向对象编程的充要条件。

作为经典的面向对象语言，Java 不同于 C艹，不支持多继承。如果说多继承的 C艹 是“面向对象完备”的，那么能且仅能支持单继承的 Java，其面向对象也一定有不完备的地方，需要诉诸其他机制来弥补。

JS 的面向对象是不同于经典类式继承的原型机制，为什么无类、原型筑基的 JS 也能实现多继承的 C艹 的“面向对象完备”呢？搞懂这个问题，才能深入理解“对象”的本质。

可以看到，JS 虽然没有类，但也通过神秘机制具备面向对象的三大特征。如果说 JS 不懂类，那么经典面向对象语言可能不懂面向对象编程，只懂“面向类编程”。

JS 虽然全称 JavaScript，但其实和 Java 一龙一猪，原型筑基的 JS 没有类也问题不大。某种意义上，类可以视为 JS 实现面向对象的语法糖。很多人知道封装、继承和多态的面向对象特性，但不知道面向对象的定义和思想，所以才会把类和“面向对象完备”等同起来，认为 JS 不是面向对象的语言。

04. 异步编程

编程语言人气排行榜第五名是 C#，那我们就用 JS 来打败 C#。

一般认为，JS 是一门单线程语言，有且仅有一个主线程。JS 有一个基于事件循环的并发模型，这个模型与 C# 语言等模型一龙一猪。

在 JS 中，当一个函数执行时，只有在它执行完毕后，JS 才会去执行任何其他的代码。换而言之，函数执行不会被抢占，而是“运行至完成”（除了 ES6 的生成器函数）。这与 C 语言不同，在 C 语言中，如果函数在线程中运行，它可能在任何位置被终止，然后在另一个线程中运行其他代码。

单线程的优势在于，大部分情况下，JS 不需要考虑多线程某些让人头大的复杂处理。因为我只会 JS，所以无法详细说明多线程的痛点，比如竞态、死锁、线程间通信（消息、信道、队列）、Actor 模型等。

但 JS 的单线程确实启发了其他支持多线程的语言，比如阮一峰大大的博客提到，Python 的 asyncio 模块只存在一个线程，跟 JS 一样。

在异步编程方面，JS 的并发模型其实算是奇葩，因为主流的编程语言都支持多线程模型，所以学习资料可以跨语言互相借鉴，C# 关于多线程的文档就有 10 页，而单线程的 JS 就像非主流的孤勇者，很多异步的理论都用不上，所以使用起来较为简单。

05. 高潮总结

JS 自诞生以来就是一种混合范式的“多面手语言”，这是 JS 二十年来依然元气满满的根本原因。

举个栗子，你可能已经见识过“三位一体”的神奇函数了：

可以看到，在 ES6 之前，JS 中的函数其实身兼数职，正式由于 JS 是天生支持混合范式导致的。

前 JS 时代的先驱语言部分是单范式语言，比如纯粹的命令式过程语言 C 语言无法直接支持面向对象编程，而 C艹 11、Java 8 等经典面向对象语言则渐进支持函数式编程等。

后 JS 时代的现代编程语言大都直接拥抱混合范式设计，比如 TypeScript 和 Rust 等。作为混合范式语言，JS 是一种原型筑基、动态弱类型的脚本语言，同时支持面向对象编程、函数式编程、异步编程等编程范式或编程风格。

粉丝请注意，你可能偶尔会看到“JS 是一门解释型语言”的说法，其实后 ES6 时代的 JS 已经不再是纯粹的解释型语言了，也可能是 JIT（即时编译）语言，这取决于宿主环境中 JS 引擎或运行时的具体实现。

值得一提的是，混合范式语言的优势在于博采众家之长，有助于塑造攻城狮的开放式编程思维和心智模型；缺陷在于不同于单范式语言，混合范式语言可能支持了某种编程范式，但没有完全支持。（PS：编程范式完备性的判定边界是模糊的，所以偶尔也解读为风格或思维。）

因此，虽然 JS 不像 PHP 一样是地球上最好的语言，但 JS 作为地表人气最高的语言，背后是有深层原因的。

参考文献

前言

圣杯和双飞翼布局作为面试常考的题目之一，相信大家肯定都会有着自己的一套知识储备，但是，你真的了解这两种经典布局吗？本文将介绍这两种经典布局产生的来龙去脉，以及实现这两种布局的一些方式，希望大家能够喜欢。

为什么需要圣杯和双飞翼布局

大家思考一个问题，这样一种布局，你该怎么处理呢？

常规情况下，我们的布局思路应该这样写，从上到下，从左到右：

<div>header</div>

<div>

    <div>left</div>

    <div>main</div>

    <div>right</div>

</div>

<div>footer</div>

这样的三栏布局也没有什么问题，但是我们要知道一个网站的主要内容就是中间的部分，比如像掘金：

那么对于用户来说，他们当然是希望最中间的部分首先加载出来的，能看到最重要的内容，但是因为浏览器加载dom的机制是按顺序加载的，浏览器从HTML文档的开头开始，逐步解析并构建文档对象模型，所以，我们想让main首先加载出来的话，那就将它前置，然后通过一些CSS的样式，将其继续展示出上面的三栏布局的样式：

<div>header</div>

<div>

    <div>main</div>

    <div>left</div>

    <div>right</div>

</div>

<div>footer</div>

这就是所谓的圣杯布局，最早是Matthew Levine 在2006年1月30日在In Search of the Holy Grail 这篇文章中提出来的；

那么完整的效果、实现代码如下：

<style>

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: pink;

  }

  .container {

    padding: 0 100px 0 100px;

    overflow: hidden;

  }

  .col {

    position: relative;

    float: left;

    height: 400px;

  }

  .left {

    background-color: green;

    width: 100px;

    margin-left: -100%;

    left: -100px;

  }

  .main {

    width: 100%;

    background-color: blue;

  }

  .right {

    width: 100px;

    background-color: green;

    margin-left: -100px;

    right: -100px;

  }

</style>



<div class="header">header</div>

<div class="container">

  <div class="main col">main</div>

  <div class="left col">left</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

如上述代码所示，，使用了相对定位、浮动和负值margin,将left和right装到main的两侧，所以顾名：圣杯；

但是呢，圣杯是有问题的，在某些特殊的场景下，比如说，left和right盒子的宽度过宽的情况下，圣杯就碎掉了，比如将上述代码的left和right盒子的宽度改为以500px为基准：

<style>

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: pink;

  }

  .container {

    padding: 0 500px 0 500px;

    overflow: hidden;

  }

  .col {

    position: relative;

    float: left;

    height: 400px;

  }

  .left {

    background-color: green;

    width: 500px;

    margin-left: -100%;

    left: -500px;

  }

  .main {

    width: 100%;

    background-color: blue;

  }

  .right {

    width: 500px;

    background-color: green;

    margin-left: -500px;

    right: -500px;

  }

</style>



<div class="header">header</div>

<div class="container">

  <div class="main col">main</div>

  <div class="left col">left</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

正常情况下，布局还是依然正常，只是两侧宽了而已：

但是我们将整个窗口缩小，圣杯就碎掉了：

原因是因为 padding: 0 500px 0 500px;，当整个窗口的最大宽度已经小于左右两边的padding共1000px,left和right就被挤下去了；

于是针对这种情况，淘宝UED的玉伯大大提出来了双飞翼布局，效果和圣杯布局一样，只是他将其比作一只鸟，左翅膀、中间、右翅膀；

相比于圣杯布局，双飞翼布局在原有的main盒子再加了一层div:

<div>header</div>

<div>

    <div><div>main</div></div>

    <div>left</div>

    <div>right</div>

</div>

<div>footer</div>

实际的效果和代码如下，哪怕再怎么缩，都不会被挤下去：

<style>

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: pink;

  }

  .container {

    padding: 0;

    overflow: hidden;

  }

  .col {

    float: left;

    height: 400px;

  }

  .left {

    background-color: green;

    width: 500px;

    margin-left: -100%;

  }

  .main {

    width: 100%;

    background-color: blue;

  }

  .main-in {

    margin: 0 500px 0 500px;

  }

  .right {

    width: 500px;

    background-color: green;

    margin-left: -500px;

  }

</style>

<div class="header">header</div>

<div class="container">

  <div class="main col">

    <div class="main-in">main</div>

  </div>

  <div class="left col">left</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

圣杯布局实现方式补充

上面介绍了一种圣杯布局的实现方式，这里再介绍一种用绝对定位的，这种方法其实也能避免上述说的当左右两侧的盒子过于宽时，圣杯被挤破的情况：

<style>

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: pink;

  }

  .container {

    position: relative;

    padding: 0 100px;

  }

  .col {

    height: 400px;

  }

  .left {

    background-color: green;

    width: 100px;

    position: absolute;

    left: 0;

    top: 0;

  }

  .main {

    width: 100%;

    background-color: blue;

  }

  .right {

    width: 100px;

    background-color: green;

    position: absolute;

    right: 0;

    top: 0;

  }

</style>



<div class="header">header</div>

<div class="container">

  <div class="main col">main</div>

  <div class="left col">left</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

双飞翼布局实现方式补充

也是使用绝对定位的：

<style>

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: pink;

  }

  .container {

    position: relative;

  }

  .col {

    height: 400px;

  }

  .left {

    background-color: green;

    width: 500px;

    position: absolute;

    top: 0;

    left: 0;

  }

  .main {

    width: calc(100% - 1000px);

    background-color: blue;

    margin-left: 500px;

  }

  .main-in {

    /* margin: 0 500px 0 500px; */

  }

  .right {

    width: 500px;

    background-color: green;

    position: absolute;

    top: 0;

    right: 0;

  }

</style>

<div class="header">header</div>

<div class="container">

  <div class="main col">

    <div class="main-in">main</div>

  </div>

  <div class="left col">left</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

其它普通的三列布局的实现

flex布局实现

<style>

  * {

    padding: 0;

    margin: 0;

  }

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: blue;

  }

  .container {

    display: flex;

  }

  .left {

    width: 100px;

    height: 300px;

    background-color: pink;

  }

  .main {

    flex: 1;

    width: 100%;

    height: 300px;

    background-color: green;

  }



  .right {

    width: 100px;

    height: 300px;

    background-color: pink;

  }

</style>



<div class="header">header</div>

<div class="container">

  <div class="left col">left</div>

  <div class="main col">main</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

绝对定位实现

<style>

  * {

    padding: 0;

    margin: 0;

  }

  .header,

  .footer {

    width: 100%;

    height: 200px;

    background-color: blue;

  }

  .container {

    position: relative;

    padding: 0 100px;

  }

  .left {

    width: 100px;

    height: 300px;

    background-color: pink;

    position: absolute;

    top: 0;

    left: 0;

  }

  .main {

    width: 100%;

    height: 300px;

    background-color: green;

  }



  .right {

    width: 100px;

    height: 300px;

    background-color: pink;

    position: absolute;

    top: 0;

    right: 0;

  }

</style>



<div class="header">header</div>

<div class="container">

  <div class="left col">left</div>

  <div class="main col">main</div>

  <div class="right col">right</div>

</div>

<div class="footer">footer</div>

总结

现在真正了解到圣杯布局、双飞翼布局和普通三列布局的思想了吗？虽然它们三者最终的效果可能一样，但是实际的思路，优化也都不一样，希望能对你有所帮助！！！！感谢支持

故事背景："0"和"1"布尔判断

这几天开发，遇到一个问题：根据后端返回的isCritical判断页面是否展示【关键标签】

很难受的是，后端的isCritical的枚举值是字符串

”0“： 非关键

”1“ ：关键

这意味着前端得自己转换一下，于是我写出了这样的代码

// html

<van-icon v-if="getCriticalStatus(it.isCritical)" color="#E68600"/>



// js

const getCriticalStatus = (critical: string) => {

    if (critical.value === "1") return true;

    return false;

}

我以为我这样写很简单了，没想到同事看到后，说我这样写麻烦了，于是给我改了一下代码

// html

<van-icon v-if="+it.isCritical" color="#E68600"/>

我大惊失色脱水缩合，这就行了？看来，我还是小看"+"运算符了！

"+"的常见使用场景

前端对"+"连字符一定不陌生，它的算术运算符功能和字符串连接功能，我们用脚趾头也能敲出来。

算术运算符

在 JavaScript 中，+ 是最常见的算术运算符之一，可以用来执行加法运算。

let a = 5;

let b = 10;

let sum = a + b; 

// sum的值为15

字符串连接符

+ 还可以用来连接字符串。

let firstName = "石";

let lastName = "小石";

let fullName = firstName + " " + lastName; // fullName的值为"石小石"

如果是数字和字符连接，它会把数字转成字符

const a = 1

const b = "2"

const c = a + b; // c的值为字符串"12"

"+"的高级使用场景

除了上述的基本使用场景，其实它还有一些冷门但十分使用的高级使用场景。

URL编码中的空格

在 URL 编码中，+ 字符可以表示空格，尤其是在查询字符串中。

http://shixiaoshi.com/search?query=hello+world

上面的代码中，hello+world 表示查询 hello world，其中的 + 会被解码为一个空格。

但要注意的是，现代 URL 编码规范中推荐使用 %20 表示空格，而不是 +。

一元正号运算符

+ 的高级用法，再下觉得最牛逼的地方就是可以作为一元运算符使用！

+ 作为一元运算符时，可以将一个值转换为数字（如果可能的话）。

let str = "123";

let num = +str; 

// num的值为123，类型为number

这一用法在处理表单输入时特别有用，因为表单输入通常是字符串类型。

let inputValue = "42";

let numericValue = +inputValue; // 将字符串转换为数字42

那么回到文章开头的问题，我们看看下面的代码为什么可以生效

// html

<van-icon v-if="getCriticalStatus(it.isCritical)" color="#E68600"/>



// js

const getCriticalStatus = (critical: string) => {

    if (critical.value === "1") return true;

    return false;

}

// html   优化后的代码

<van-icon v-if="+it.isCritical" color="#E68600"/>

由于it.isCritical的值是字符"0"或"1"，通过"+it.isCritical"转换后，其值是数字0或1，而恰好0可以当false使用，1可以当true使用！因此，上述代码可以生效！

JavaScript 中的类型转换规则会将某些值隐式转换为布尔值：

• 假值 ：在转换为布尔值时被视为 false 的值，包括：false、0 （数字零）、-0 （负零）、"" （空字符串）、null、undefined、NaN （非数字）


• 真值 ：除了上述假值外，所有其他值在转换为布尔值时都被视为 true。

一元正号运算符的原理

通过上文，我们知道：当使用 + 操作符时，JavaScript 会尝试把目标值转换为数字，它遵循以下规则：。

转换规则

数字类型：

如果操作数是数字类型，一元正号运算符不会改变其值。
例如：+5 还是 5。

// 数字类型

console.log(+5); // 5（数字）

字符串类型：

如果字符串能够被解析为有效的数字，则返回相应的数字。
如果字符串不能被解析为有效的数字（如含有非数字字符），则返回 NaN（Not-a-Number）。
例如：+"123" 返回 123，+"abc" 返回 NaN。

// 字符串类型

console.log(+"42"); // 42

console.log(+"42abc"); // NaN

布尔类型：

true 会被转换为 1。
false 会被转换为 0。

// 布尔类型

console.log(+true); // 1

console.log(+false); // 0

null：

null 会被转换为 0。

// null 

console.log(+null); // 0

undefined：

undefined 会被转换为 NaN。

//  undefined

console.log(+undefined); // NaN

对象类型：

对象首先会通过内部的 ToPrimitive 方法被转换为一个原始值，然后再进行数字转换。通常通过调用对象的 valueOf 或 toString 方法来实现，优先调用 valueOf。

// 对象类型

console.log(+{}); // NaN

console.log(+[]); // 0

console.log(+[10]); // 10

console.log(+["10", "20"]); // NaN

底层原理

不重要，简单说说：

在 JS引擎内部，执行一元正号运算符时，实际调用了 ToNumber 抽象操作，这个操作试图将任意类型的值转换为数字。ToNumber 操作依据 ECMAScript 规范中的规则，将不同类型的值转换为数字。

总结

一元正号运算符 + 是一个简便的方法，用于将非数字类型转换为数字。

如果你们后端返回字符串0和1，你需要转换成布尔值，使用"+"简直不要太爽

// isCritical 是字符串"0"或"1"

<van-icon v-if="+isCritical" color="#E68600"/>

或者处理表单输入时用

let inputValue = "42";

let value = +inputValue; // 将字符串转换为数字42

项目中的.d.ts和declare

最近开发项目，发现公司代码里都有一些.d.ts后缀的文件

还有一些奇奇怪怪的declare代码

秉持着虚心学习的态度，我向同事请教了这些知识点，发现这些东西居然蛮重要的。于是，我根据自己的理解，把这些知识简单总结一下。

类型声明文件.d.ts

为什么需要 .d.ts 文件？

如果我们在ts项目中使用第三方库时，如果这个库内置类型声明文件.d.ts，我们在写代码时可以获得对应的代码补全、接口提示等功能。

比如，我们在index.ts中使用aixos时：

当我们引入axios时，ts会检索aixos的package.json文件，并通过其types属性查找类型声明文件，查找到index.d.ts这个文件后，就会根据其内部配置进行语法提示。

但是如果某个库没有内置类型声明文件时，我们使用这个库，不会获得Ts的语法提示，甚至会有类型报错警告

像这种没有内置类型声明文件的，我们就可以自己创建一个xx.d.ts的文件来自己声明，ts会自动读取到这个文件里面的内容的。比如，我们在index.ts中使用"vue-drag"，会提示缺少声明文件。

由于这个库没有@types/xxxx声明包，因此，我们可以在项目内自定义一个vueDrag.d.ts声明文件。

// vueDrag.d.ts

declare module 'vue-drag'

这个时候，就不会报错了,没什么警告了。

第三方库的默认类型声明文件

当我们引入第三方库时，ts会自动检索aixos的package.json文件，并通过其types属性查找类型声明文件，查找到index.d.ts这个文件后，就会根据其内部配置进行语法提示。比如，我们刚才说的axios

• "typings"与"types"具有相同的意义，也可以使用它。


• 主声明文件名是index.d.ts并且位置在包的根目录里（与index.js并列），你就不需要使用"types"属性指定了。

第三方库的@types/xxxx类型声明文件

如express这类框架，它们的开发时Ts还没有流行，自然没有使用Ts进行开发，也自然不会有ts的类型声明文件。如果你想引入它们时也获得Ts的语法提示，就需要引入它们对应的声明文件npm包了。

使用声明文件包，不用重构原来的代码就可以在引入这些库时获得Ts的语法提示

比如，我们安装express对应的声明文件包后，就可以获得相应的语法提示了。

npm i --save-dev @types/express

@types/express包内的声明文件

.d.ts声明文件

通过上述的几个示例，我们可以知道.d.ts文件的作用和@types/xxxx包一致，@type/xxx需要下载使用，而.d.ts是我们自己创建在项目内的。

.d.ts文件除了可以声明模块，也可以用来声明变量。

例如，我们有一个简单的 JavaScript 函数，用于计算两个数字的总和：

// math.js

const sum = (a, b) => a + b

export { sum }

TypeScript 没有关于函数的任何信息，包括名称、参数类型。为了在 TypeScript 文件中使用该函数，我们在 d.ts 文件中提供其定义：

// math.d.ts

declare function sum(a: number, b: number): number

现在，我们可以在 TypeScript 中使用该函数，而不会出现任何编译错误。

.ts 是标准的 TypeScript 文件。其内容将被编译为 JavaScript。

*.d.ts 是允许在 TypeScript 中使用现有 JavaScript 代码的类型定义文件，其不会编译为 JavaScript。

shims-vue.d.ts

shims-vue.d.ts 文件的主要作用是声明 Vue 文件的模块类型，使得 TypeScript 能够正确地处理 .vue 文件，并且不再报错。通常这个文件会放在项目的根目录或 src 目录中。

shims-vue.d.ts 文件的内容一般长这样：

// shims-vue.d.ts



declare module '*.vue' {

  import { DefineComponent } from 'vue';

  const component: DefineComponent<{}, {}, any>;

  export default component;

}

• declare module '*.vue' : 这行代码声明了一个模块，匹配所有以 .vue 结尾的文件。* 是通配符，表示任意文件名。


• import { DefineComponent } from 'vue'; : 引入 Vue 的 DefineComponent 类型。这是 Vue 3 中定义组件的类型，它具有良好的类型推断和检查功能。


• const component: DefineComponent<{}, {}, any>; : 定义一个常量 component，它的类型是 DefineComponent，并且泛型参数设置为 {} 表示没有 props 和 methods 的基本 Vue 组件类型。any 用来宽泛地表示组件的任意状态。


• export default component; : 将这个组件类型默认导出。这样，当你在 TypeScript 文件中导入 .vue 文件时，TypeScript 就知道导入的内容是一个 Vue 组件。

declare

.d.ts 文件中的顶级声明必须以 “declare” 或 “export” 修饰符开头。

通过declare声明的类型或者变量或者模块，在include包含的文件范围内，都可以直接引用而不用去import或者import type相应的变量或者类型。

• declare声明一个类型

declare type Asd {

    name: string;

}

• declare声明一个模块

declare module '*.css';

declare module '*.less';

declare module '*.png';

.d.ts文件顶级声明declare最好不要跟export同级使用，不然在其他ts引用这个.d.ts的内容的时候，就需要手动import导入了

在.d.ts文件里如果顶级声明不用export的话，declare和直接写type、interface效果是一样的，在其他地方都可以直接引用

declare type Ass = {

    a: string;

}

type Bss = {

    b: string;

};

Decimal 是什么

想必大家在用js 处理 数字的 加减乘除的时候，或许都有遇到过 精度不够 的问题，还有那些经典的面试题 0.2+0.1 !== 0.3，
至于原因，那就是 js 计算底层用的是 IEEE 754 ，精度上有限制，
那么Decimal.js 就是帮助我们解决 js中的精度失准的问题。

原理

• 它的原理就是将数字用字符串表示，字符串在计算机中可以说是无限的。


• 并使用基于字符串的算术运算，以避免浮点数运算中的精度丢失。它使用了一种叫做十进制浮点数算术（Decimal Floating Point Arithmetic）的算法来进行精确计算。


• 具体来说，decimal.js库将数字表示为一个字符串，其中包含整数部分、小数部分和一些其他的元数据。它提供了一系列的方法和运算符，用于执行精确的加减乘除、取模、幂运算等操作。

精度丢失用例

const a = 31181.82

const b = 50090.91

console.log(a+b) //81272.73000000001

Decimal 的引入 与 加减乘除

• 如何引入

npm install --save decimal.js  // 安装

import Decimal from "decimal.js"  // 具体文件中引入

• 加

let a = 1

let b = 6 

// a 与 b 可以是 任何类型，Decimal 内部会自己处理兼容

// 下面两种都可以 可以带 new 也不可以不带 new（推荐带new）

let res = new Decimal(a).add(new Decimal(b)) 

let res = Decimal(a).add(Decimal(b))

• 减

let a = "4"

let b = "8"

// a 与 b 可以是 任何类型，Decimal 内部会自己处理兼容

// 下面两种都可以 可以带 new 也不可以不带 new

let res = new Decimal(a).sub(new Decimal(b)) 

let res = Decimal(a).sub(Decimal(b))

• 乘

let a = 1

let b = 6 

// a 与 b 可以是 任何类型，Decimal 内部会自己处理兼容

// 下面两种都可以 可以带 new 也不可以不带 new

let res = new Decimal(a).mul(new Decimal(b)) 

let res = Decimal(a).mul(Decimal(b))

• 除

let a = 1

let b = 6 

// a 与 b 可以是 任何类型，Decimal 内部会自己处理兼容

// 下面两种都可以 可以带 new 也不可以不带 new

let res = new Decimal(a).div(new Decimal(b)) 

let res = Decimal(a).div(Decimal(b))

注意

上面的结果是 一个 Decimal 对象，你可以转换成 Number 或则 String

let res = Decimal(a).div(Decimal(b)).toNumber()  // 结果转换成 Number

let res = Decimal(a).div(Decimal(b)).toString()  // 结果转换成 String

关于保存几位小数相关

//查看有几位小数 (注意不计算 小数点 最后 末尾 的 0)

y = new Decimal(987000.000)

y.sd()                                   // '3' 有效位数

y.sd(true)                               // '6' 总共位数



// 保留 多少个位数 （小数位 会补0）

x = 45.6

x.toPrecision(5)                         // '45.600'



// 保留 多少位有效位数（小数位 不会补0，是计算的有效位数）

x = new Decimal(9876.5)

x.toSignificantDigits(6)                 // '9876.5' 不会补0 只是针对有效位数



// 保留几位小数 , 跟 js 中的 number 一样

toFixed

x = 3.456

// 向下取整

x.toFixed(2, Decimal.ROUND_DOWN)  // '3.45' (舍入模式 向上0 向下1 四舍五入 4，7)

// 向上取整

Decimal.ROUND_UP 



//四舍五入

ROUND_HALF_UP //(主要)



// 使用例子

let num2 = 0.2

let num3 = 0.1

let res = new Decimal(num2).add(new Decimal(num3)).toFixed(2, Decimal.ROUND_HALF_UP)

console.log(res); //返回值是字符串类型

超过 javascript 允许的数字

如果使用超过 javascript 允许的数字的值，建议传递字符串而不是数字，以避免潜在的精度损失。

new Decimal(1.0000000000000001); // '1'

new Decimal(88259496234518.57); // '88259496234518.56'

new Decimal(99999999999999999999); // '100000000000000000000'



new Decimal(2e308); // 'Infinity'

new Decimal(1e-324); // '0'



new Decimal(0.7 + 0.1); // '0.7999999999999999'

可读性

与 JavaScript 数字一样，字符串可以包含下划线作为分隔符以提高可读性。

x = new Decimal("2_147_483_647");

其它进制的数字

如果包含适当的前缀，则也接受二进制、十六进制或八进制表示法的字符串值。

x = new Decimal("0xff.f"); // '255.9375'

y = new Decimal("0b10101100"); // '172'

z = x.plus(y); // '427.9375'



z.toBinary(); // '0b110101011.1111'

z.toBinary(13); // '0b1.101010111111p+8'



x = new Decimal(

  "0b1.1111111111111111111111111111111111111111111111111111p+1023"

);

// '1.7976931348623157081e+308'

最后：希望本篇文章能帮到您！

视差滚动是一种在网页设计和视频游戏中常见的视觉效果技术，它通过在不同速度上移动页面或屏幕上的多层图像，创造出深度感和动感。
这种效果通过前景、中景和背景以不同的速度移动来实现，使得近处的对象看起来移动得更快，而远处的对象移动得较慢。

在官网中适当的使用视差效果，可以增加视觉吸引力，提高用户的参与度，从而提升网站和品牌的形象。本文通过JavaScript、CSS多种方式并在React框架下进行了视差效果的实现，供你参考指正。

实现方式

1、background-attachment

通过配置该 CSS 属性值为fixed可以达到背景图像的位置相对于视口固定，其他元素正常滚动的效果。但该方法的视觉表现单一，没有纵深，缺少动感。

.parallax-box {

  width: 100%;

  height: 100vh;

  background-image: url("https://picsum.photos/800");

  background-size: cover;

  background-attachment: fixed;



  display: flex;

  justify-content: center;

  align-items: center;

}

点击访问完整在线代码

2、Transform 3D

在 CSS 中使用 3D 变换效果，通过将元素划分至不同的纵深层级，在滚动时相对视口不同距离的元素，滚动所产生的位移在视觉上就会呈现越近的元素滚动速度越快，相反越远的元素滚动速度就越慢。

为方便理解，你可以想象正开车行驶在公路上，汽车向前移动，你转头看向窗外，近处的树木一闪而过，远方的群山和风景慢慢的渐行渐远，逐渐的在视野中消失，而天边的太阳却只会在很长的一段距离细微的移动。

点击访问完整在线代码

.parallax {

  perspective: 1px; /* 设置透视效果，为3D变换创造深度感 */

  overflow-x: hidden;

  overflow-y: auto;

  height: 100vh;

}



.parallax__group {

  transform-style: preserve-3d; /* 保留子元素3D变换效果 */

  position: relative;

  height: 100vh;

}



.parallax__layer {

  position: absolute;

  inset: 0;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* 背景层样式，设置为最远的层 */

.parallax__layer--back {

  transform: translateZ(-2px) scale(3);

  z-index: 1;

}



/* 中间层样式，设置为中等距离的层 */

.parallax__layer--base {

  transform: translateZ(-1px) scale(2);

  z-index: 2;

}



/* 前景层样式，设置为最近的层 */

.parallax__layer--front {

  transform: translateZ(0px);

  z-index: 3;

}

实现原理

通过设置 perspective 属性，为整个容器创建一个 3D 空间。

使用 transform-style: preserve-3d 保持子元素的 3D 变换效果。

将内容分为多个层（背景、中间、前景），使用 translateZ() 将它们放置在 3D 空间的不同深度。

对于较远的层（如背景层），使用 scale() 进行放大，以补偿由于距离产生的视觉缩小效果。

当用户滚动页面时，由于各层位于不同的 Z 轴位置，它们会以不同的速度移动，从而产生视差效果。

3、ReactScrollParallax

想得到更炫酷的滚动视差效果，纯 CSS 的实现方式就会有些吃力。

如下是在 React 中实现示例，通过监听滚动事件，封装统一的视差组件，来达到多样的动画效果。

点击访问完整在线代码

const Parallax = ({ children, effects = [], speed = 1, style = {} }) => {

  // 状态hooks：用于存储动画效果的当前值

  const [transform, setTransform] = useState("");



  useEffect(() => {

    if (!Array.isArray(effects) || effects.length === 0) {

      console.warn("ParallaxElement: effects should be a non-empty array");

      return;

    }



    const handleScroll = () => {

      // 计算滚动进度

      const scrollProgress =

        (window.scrollY /

          (document.documentElement.scrollHeight - window.innerHeight)) *

        speed;



      let transformString = "";



      // 处理每个效果

      effects.forEach((effect) => {

        const { property, startValue, endValue, unit = "" } = effect;

        const value =

          startValue +

          (endValue - startValue) * Math.min(Math.max(scrollProgress, 0), 1);



        switch (property) {

          case "translateX":

          case "translateY":

            transformString += `${property}(${value}${unit}) `;

            break;

          case "scale":

            transformString += `scale(${value}) `;

            break;

          case "rotate":

            transformString += `rotate(${value}${unit}) `;

            break;

          // 更多的动画效果...

          default:

            console.warn(`Unsupported effect property: ${property}`);

        }

      });



      // 更新状态

      setTransform(transformString);

    };



    window.addEventListener("scroll", handleScroll);

    // 初始化位置

    handleScroll();



    return () => {

      window.removeEventListener("scroll", handleScroll);

    };

  }, [effects, speed]);



  // 渲染带有计算样式的子元素

  return <div style={{ ...style, transform }}>{children}</div>;

};

在此基础上你可以添加缓动函数使动画效果更加平滑；以及使用requestAnimationFrame获得更高的动画性能。

requestAnimationFrame 带来的性能提升

同步浏览器渲染周期：requestAnimationFrame 会在浏览器下一次重绘之前调用指定的回调函数。这确保了动画更新与浏览器的渲染周期同步，从而产生更流畑的动画效果。

提高性能：与使用 setInterval 或 setTimeout 相比，requestAnimationFrame 可以更高效地管理动画。它只在浏览器准备好进行下一次重绘时才会执行，避免了不必要的计算和重绘。

优化电池使用：在不可见的标签页或最小化的窗口中，requestAnimationFrame 会自动暂停，这可以节省 CPU 周期和电池寿命。

适应显示器刷新率：requestAnimationFrame 会自动适应显示器的刷新率。这意味着在 60Hz、120Hz 或其他刷新率的显示器上，动画都能保持流畑。

避免丢帧：由于与浏览器的渲染周期同步，使用 requestAnimationFrame 可以减少丢帧现象，特别是在高负荷情况下。

更精确的时间控制：requestAnimationFrame 提供了一个时间戳参数，允许更精确地控制动画的时间。

4、组件库方案

在当前成熟的前端生态中，想要获得精彩的视差动画效果，你可以通过现有的开源组件库来高效的完成开发。

以下是一些你可以尝试的主流组件库：

• rellax (Lightweight, vanilla javascript parallax library)


• react-scroll-parallax


• framer-motion


• ...

引用参考

MDN - background-attachment

MDN - transform-style

Pure CSS Parallax Websites

How to create parallax scrolling with CSS

视差滚动实践

原文地址

为什么vue:deep、/deep/、>>>样式能穿透到子组件

在scoped标记的style中，只要涉及三方组件，那deep符号会经常被使用，用来修改外部组件的样式。

小试牛刀

不使用deep

要想修改三方组件样式，只能添加到scoped之外，弊端是污染了全局样式，后续可能出现样式冲突。

<style lang="less">

.container {

    .el-button {

        background: #777; 

    }

}

使用 /deep/ deprecated

 .container1 {

    /deep/ .el-button {

        background: #000; 

    }

}

使用 >>> deprecated

.container2 >>> .el-button {

    background: #222; 

}

当在vue3使用/deep/或者>>>、::v-deep，console面板会打印警告信息：

the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

由于/deep/或者>>>在less或者scss中存在兼容问题，所以不推荐使用了。

使用:deep

.container3 {

    :deep(.el-button) {

        background: #444; 

    }

}

那么问题来了，如果我按以下的方式嵌套deep，能生效吗？

.container4 {

    :deep(.el-button) {

        :deep(.el-icon) {

            color: #f00;

        }

    }

}

源码解析

/deep/或>>>会被编译为什么

编译后的代码为：

.no-deep .container1[data-v-f5dea59b] .el-button { background: #000; } 

源代码片段：

if (

  n.type === 'combinator' &&

  (n.value === '>>>' || n.value === '/deep/')

) {

  n.value = ' '

  n.spaces.before = n.spaces.after = ''

  warn(

    `the >>> and /deep/ combinators have been deprecated. ` +

      `Use :deep() instead.`,

  )

  return false

}

当vue编译样式时，先将样式解析为AST对象，例如deep/ .el-button会被解析为Selector对象，/deep/ .el-button解析后生成的Selector包含的字段：

{ type: 'combinator'， value: '/deep/' } 

然后将n.value由/deep/替换为空 。所以转换出来的结果，.el-button直接变为.container下的子样式。

:deep会被编译为什么？

编译后的代码：

.no-deep .container3[data-v-f5dea59b] .el-button { background: #444; }

源代码片段：

// .foo :v-deep(.bar) -> .foo[xxxxxxx] .bar

      let last: selectorParser.Selector['nodes'][0] = n

      n.nodes[0].each(ss => {

        selector.insertAfter(last, ss)

        last = ss

      })

      // insert a space combinator before if it doesn't already have one

      const prev = selector.at(selector.index(n) - 1)

if (!prev || !isSpaceCombinator(prev)) {

selector.insertAfter(

  n,

  selectorParser.combinator({

    value: ' ',

  }),

)

}

selector.removeChild(n)

还是以.container4 :deep(.el-button)为例，当解析到:deep符号式，selector快照为

parent为.container4 :deep(.el-button)，当前selector的type正好为伪类标识pseudo，nodes节点包含一个.el-button。

经过递归遍历，生成的selector结构为.container4 :deep(.el-button).el-button，

最后一行代码selector.removeChild(n)会将:deep(.el-button)移出，所以输出的最终样式为.container4 .el-button。

如果样式为:deep(.el-button) { :deep(.el-icon) { color: #f00 } }，当遍历.el-icon时找不到ancestor，所以直接将:deep(.el-icon)作为其icon时找不到ancestor,其结果为:

.no-deep .container4[data-v-f5dea59b] .el-button :deep(.el-icon) { color: #f00; }

因此，deep是不支持嵌套的。

结尾

插个广告，麻烦各位大佬为小弟开源项目标个⭐️，点点关注：

8年前端总结和感想

本文是我前端工作 8 年的一些总结和感想

主要记录下个人点滴、前端知识点、场景应用、未来的憧憬以及个人规划，供自己以后查漏补缺，也欢迎同道朋友交流学习。

自我介绍

我是一名工作在非知名公司的 8 年前端，双非普通本科，自动化专业（非计算机）。目前也在努力的提升自己，积极找工作状态。虽然工作已经 8 年了，但没待过超 10 人的前端团队，更没有开发过千万级、亿级流量的应用的经历，也是一种遗憾。

16 年才工作那会儿使用原生 JS 和 JQ 比较多，经常写 CSS 动画，主要做企业建站，自学了 PHP 和 ReactNative，还学过 krpano 的使用；17 年到 19 年，主要使用 react、 React Native做 H5 和 跨端开发，也维护过老 NG2.x 项目；19年到22年主要使用 vue、react 做hybrid APP及小程序，自学了electron、node、MongoDB；22 年至今主要从事 B 端的开发，C端也有部分，也主要是 react 和 vue 相关技术栈；

前端应用场景

前端是直面浏览器的，也可以说是直面用户的，我们的应用场景远广泛于后端，用到的 UI 组件库、插件、基础框架、基础语言也非常繁杂，所以在面试和自我学习提升的时候需要准备的东西非常多，有种学不动的感觉。

常见的应用场景就是 PC 浏览器，需要我们掌握一些兼容不同版本和不同浏览器的知识点，一般采取渐进增强或者优雅降级去处理；当然现在很多公司已经不做IE的兼容了，复杂度降低很多；同时大部分新项目都会使用 postcss 去 autoprefixer，给 css 加兼容的前缀。其他的就是做后台的表单为主了，用的基本上都是 antd design 或 element ui。当然复杂点的要涉及到网页编辑器、Low Code、No Code等。

另一个主要场景就是手机浏览器和 APP 了，H5 WebAPP 会遇到 Android、IOS的一些样式和行为需要兼容、列表和图片懒加载问题，还有调用原生的 SDK 进行地图、OCR、拍照、扫一扫等功能进行开发；为了更好的体验，还会选择 RN、flutter 进行跨端开发；复杂的处理场景一般涉及原生端，例如聊天室、直播等。

另一个场景就是小程序，其实还是写H5，主要是使用微信或者支付宝等相关 SDK 去实现，看官网就行了，文档也比较全。

还有一些是做 H5 小游戏，要求数学逻辑思维和算法更好点，初级一点的用 canvas+css3 去做，好一点的用游戏引擎去做，一般是 egret、 Laya、 createjs、 threejs、 cocos。

还有一些场景是做TV端的，有的是基于PC浏览器的，有些是套壳APP，一般使用 AntV、 echarts做图表数据展示，3D一般用 threejs去做。

还有一些做桌面应用的，一般来说桌面应用大多基于 C，但一些简单应用前端可以使用 electron 去进行桌面端开发，一般也用于大屏可视化，做数据展示的，当然我们熟悉的 vscode 也基于 electron 开发。

还有一些是做 AR、 VR、 3D全景图的，一般使用 WebGL3D引擎：threejs、 babylon.js、 playcanvas等，还可以用 css3d-engine、 krpano、 pano2vr去做。

还有一些场景是做 web3 的 DAPP（去中心化应用程序），大部分是做区块链和数字藏品的，推荐的技术是 Solidity、 web3.js、 Ethers.js。

前端网络

我们前端不管是开发 PC、 H5、小程序、 HyBrid App 还是其他应用，始终离不开是浏览器和 web-view，与浏览器交互就要了解基础的 HTTP、网络安全、 nginx方面的知识。

浏览器

浏览器的发展简史和市场份额竞争有空可以自行了解，首先我们要了解计算机架构：

• 底层是机器硬件结构：简单的来说就是电脑主机+各种 IO 设备；复杂的来说有用于输入的鼠标键盘，用于输出的显示器、打印等设备，用于控制计算机的控制器和 CPU（核心大脑），用于存储的硬盘、内存，用于计算的CPU和GPU；


• 中层是操作系统：常见的就是 Windows、 MAC OS、 Linux、 CentOS，手机就是安卓和 IOS（当然还有华为的鸿蒙）；可以了解内存分配、进程和线程管理等方面知识。


• 上层就是我们最熟悉的应用程序：有系统自带的核心应用程序、浏览器、各个公司和开发者开发的各种应用。

前端开发必要了解的就是chrome浏览器，可以说大部分开发基于此浏览器去做的。需要了解 进程和线程 概念、了解 chrome 多进程架构（浏览器主进程、GPU进程、网络进程、渲染进程、插件进程）。

其中最主要的是要了解主进程，包含多个线程：GUI渲染线程、JS引擎线程（V8引擎）、定时触发器线程、事件线程、异步HTTP请求线程。其中 V8 引擎又是核心，需要了解其现有架构：

了解 JS 编译成机器可以识别的机器码的过程：简单的说就是把 JS 通过 Lexer 词法分析器分解成一系列词法 tokens，再通过 Parser 语法分析为语法树 AST，再通过 Bytecode Generator 把语法树转成二进制代码 Bytecode，二进制代码再通过实时编译 JST 编译成机器能识别的汇编代码 MachineCode 去执行。

代码的执行必然会占用大量的内存，那如何自动的把不需要使用的变量回收就叫作 GC 垃圾回收，有空可以了解其算法和回收机制。

HTTP

对于Http，我们前端首先需要了解其网络协议分层： OSI七层协议、 TCP/IP四层协议 和 五层协议，这有助于我们了解应用层和传输层及网络层的工作流程；同时我们也要了解应用层的核心 http1.0、 http1.1、 http2.0 及 https 的区别；还要了解传输层的 TCP、 UDP、 webSocket。

• 在前后端交互方面必须了解 GET 和 POST 的请求方式，以及浏览器返回状态 200、 3xx、 4xx、 5xx的区别；还有前后端通信传输的 request header 头、响应报文体 response body，通信的 session 和 cookie。


• 网络安全方面需要了解 https，了解非对称算法 rsa 和对称算法 des，登录认证的 JWT（JSON Web Token）；同时也需要了解怎么防范 XSS、 CSRF、 SQL注入、 URL跳转漏洞、 点击劫持 和 OS命令注入攻击。

Nginx

我们的网页都是存储在 web 服务器上的，公司一般都会进行 nginx 的配置，可以对资源进行 gzip 压缩，redirect 重定向，解决 CROS 跨域问题，配置 history 路由拦截。技术方面，我们还要了解其安装、常用命令、反向代理、正向代理和负载均衡。

前端三剑客

前端简单的说就是在写 html、 css 和 js 的，一般来说 js 我们会更多关注，其实 html 和 css 也大有用处。

HTML

html 的历史可以自行了解，我们需要更关注 文档声明、各种 标签元素、 块级元素及非块级元素、 语义化、 src与href的区别、 WebStorage和 HTML5的新特性。复杂的页面和功能会更依赖于我们的 canvas。

css

css 方面主要了解布局相关 盒子模型、 position、 伪类和伪元素、 css选择器优先级、 各种 水平垂直居中方法、 清除浮动、 CSS3新特性、 CSS动画、 响应式布局相关的 rem、 flex、 @media。当然也有部分公司非常重视用户的交互体验和 UI 效果，那会更依赖我们 CSS3 的使用。

JS

js 在现代开发过程中确实是最重要的，我们更关心其底层原理、使用的方法、异步的处理及 ES6 的使用。

• 在底层方面我们需要了解其 作用域及作用域链、 闭包、 this绑定、 原型和原型链、 继承和类、属性描述符 defineProperty 和事件循环 Event Loop。
  
  

  
  

  可以详看我写的javascript随笔

  
  

  
  


• 在使用方面我们需要了解 值和类型 的判断、内置类型的 null、 undefined、 boolean、 number、 string、 object 和 symbol，其中对象类型是个复杂类型，数组、 函数、 Date、 RegExp等都是一个对象；数组的各种 API 是我们开发中最常用的，了解 Dom操作 的API也是必要的。


• ES6 方面要了解 let、const声明、 块作用域、 解构赋值、 箭头函数、 class、 promise、 async await、 Set、 WeakSet、 Map、 WeakMap、 proxy 和 Reflect。
  
  

  
  

  可以详看我写的(ES6+)随笔

  
  

  
  


• TypeScript 在前端的使用越来越广泛，如果要搞 NodeJS 基本上是标配了，而且也是大厂的标配，还是有必要学习下的。要了解 TypeScript 的安装配置、基本语法、Type、泛型<T>、Class、Interface、Enum、命名空间 和 模块。
  
  

  
  

  可以详看我写的typescript随笔

  
  

  
  

前端框架

我们在开发过程中直接操作 dom 已经不多了，有的公司可能还要部分维护 JQ，但大多都在使用 React、 Vue、 Angular这三个基础前端框架，很多其他跨平台框架及 UI 组件库都基于此，目前来说国内 React 和 Vue 是绝对的主流，我本人就更擅长React。

可以详看我写的react随笔 和 vue随笔

React

开发 react，也就是在写 all in js，或者说是 JSX，那就必须了解其底层 JSX 是如何转化成虚拟节点 VDom 的。在转换 jsx 转换成 VDom，VDom在转换成真实 Dom，react 的底层做了很多优化，其中大家熟悉的就是 Fiber、 diff、 生命周期 以及 事件绑定。

那我们写 react 都是在写组件化的东西， 组件通信的各种方式也是需要了解的；还要了解 PureComponent、 memo、 forwardRef等组件类的方法；了解 createElement、 cloneElement、 createContext等工具类的方法；了解 useState、 useEffect、 useMemo、 useCallback、 useRef等hooks的使用；还有了解 高阶组件HOC 及自定义 hooks。

了解 react16、 react17、 react18做了哪些优化。

Vue

vue 方面，我们需要了解 MVVM 原理、 template的解析、数据的 双向绑定、vue2 和 vue3 的响应式原理、其数据更新的 diff 算法；使用方面要了解其生命周期、组件通信的各种方式和 vue3 的新特性。

前端工程化

上面写到了前端框架，在使用框架开发的过程中，我们必不可少的在整个开发过程向后端看齐，工程化的思想也深入前端。代码提交时可以使用git的钩子hooks进行流水线的自动化拉取，然后使用 webpack、 rollup、 gulp以及 vite 进行代码编译打包，最后使用 jenkins、 AWS、 阿里云效等平台进行自动化部署，完成整个不同环境的打包部署流程。

可以详看我写的webpack随笔 和 使用rollup搭建工具库并上传npm

webpack

在代码编译打包这块儿， webpack是最重要的，也是更复杂的，所以我们有必要多了解它。

在基础配置方面，我们要了解 mode、 entry、 output、 loader 和 plugin，其中 loader 和 plugin 是比较复杂的，webpack 默认只支持 js，那意味着要使用 es6 就要用 babel-loader，css 方面要配置 css-loader、 style-loader、 less-loader、 sass-loader等，图片文件等资源还要配置 file-loader；

plugin 方面要配置 antd 的相关配置、清空打包目录的 clean-webpack-plugin、多线程打包的 HappyPack、分包的 splitChunks 等等配置。

在不同环境配置方面要基于 cross-env 配置 devServer 和 sourcemap。

在构建优化方面要配置按需加载、 hash、 cache、 noParse、 gzip压缩、 tree-shaking 和 splitChunks等。

幸运的是，现在很多脚手架都自动的帮你配置了很多，并且支持你选择什么模版去配置。

环境部署

环境部署方面，第一家公司我用的软件 FileZilla 进行手动上传 FTP 服务器，虽然也没出过啥错，但不智能，纯依靠人工，如果项目多，时间匆忙，很容易部署错环境，而且还要手动备份数据。后面学了点终端命令，使用 SSH 远程上传文件，其实还没有软件上传来的直接，也容易出错。后面换了公司，也用上了 CI/CD 持续集成，其本质就是平台帮你自动的执行配置好的命令，有 git 拉取代码的命令、npm run build的打包命令，最后 SSH 远程存到服务器的目录文件，并重启 nginx 的 web 服务器。

CI/CD 可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。

后端服务

为了更好的完成整个应用，了解后端技术也是必要的，我们可以从 nodejs、MongoDB、MySQL 等入手。如果有余力，了解 java、c#、c++ 也可以帮助我们更好的开发安卓和 IOS 应用。前后端都通了话，不管对于我们工作、面试、接活儿或者做独立开发者都是很必要的。

node

node 这方面，我们了解常用模块和 Event Loop 是必要的，框架可以选择 express、 koa、 egg，还有我最近刚学的NestJS也非常不错。

形而上学

了解完上面的文章，基本上你就了解了整个前端大体的开发流程、所需的知识点、环境的部署、线上网络安全。但如果需要进阶且不局限于前端和后端，我们需要了解数据结构、 设计模式、 算法 和 英语。

数据结构

常见的数据结构有8种： 数组、 栈、 队列、 链表、 树、 散列表、 堆 和 图。

可以详看我写的算法随笔-数据结构(栈)

可以详看我写的算法随笔-数据结构(队列)

设计模式

设计模式方面我们需要了解：

• 六大原则： 单一职责原则、 开放封闭原则、 里氏替换原则、 依赖倒置原则、 接口隔离原则 和 迪米特原则（最少知道原则）


• 创建型设计模式： 单例模式、 原型模式、 工厂模式、 抽象工厂模式 和 建造者模式


• 结构型设计模式： 适配器模式、 装饰器模式、 代理模式、 外观模式、 桥接模式、 组合模式 和 享元模式


• 行为型设计模式： 观察者模式、 迭代器模式、 策略模式、 模板方法模式、 职责链模式、 命令模式、 备忘录模式、 状态模式、 访问者模式、 中介者模式 和 解释器模式

算法

算法方面我们需要了解：

• 基础概念： 时间复杂度 和 空间复杂度


• 排序方法：初级排序的 选择排序、 插入排序 和 冒泡排序，高级排序的 快速排序、 归并排序、 堆排序


• 搜索： 深度优先搜索 和 广度优先搜索


• 其他： 递归、 分治、 回溯、 动态规划 和 贪心算法

可以详看我写的算法随笔-基础知识

英语

学生时代，觉得英语离我们挺远，进社会就用不到了。现在发现学好英语非常有用，我们可以入职福利待遇比较好的外企、可以更好的看懂文档、甚至起个文件名和变量名都好的多。最近我也在用多邻国学英语，目标是能进行简单的商务交流和国外旅游，还能在未来辅导下孩子英语作业。

前端未来

目前，初级前端确实饱和了，各个公司对前端已经不像我入职第一家公司那样简单就可以找到工作的了，尤其是在这个各种卷的环境里，我们不得不多学习更多前端方面的知识。对于初学者，我建议更多的了解计算机基础、js原理、框架的底层；对于已经工作一俩年想提升的，不妨多学点跨端、跨平台技术，还有后端的一些技术；对于工作多年想让未来路子更宽的，不得不内卷的学习更多的应用场景所需要的知识。

关于AI，我觉得并不是会代替我们的工具，反而缩小了我们和资深前端的距离。我们可以借助AI翻译国外的一些技术文档，学习更新的技术；可以帮我们进行代码纠错；还可以帮助我们实现复杂的算法和逻辑；善用 AI，让它成为我们的利器；

感想和个人规划

前端很复杂，并不是像很多后端所说的那么简单，处理的复杂度和应对多样的客户群都是比较大的挑战。资深的前端能很快的完成任务需求开发、并保证代码质量，并搭建更好的基础架构，但就业行情的不景气让我一度很迷茫，我们大龄程序员的出路在哪里，经验就不值钱了嘛？

对于未来，我会更多的学习英语、学习后端，向独立开发者转型。

谨以此文，献给未来的自己和同道中人！

大家好，我是多喝热水。

最近开发公司项目的时候遇到一个哭笑不得的问题，知道真相的我差点破防！

还原现场

周一开周会的时候正常评审需求，在演示的过程中发生了一点小插曲，我们的聚合搜索功能它不能正常使用了，搜到的内容还是首次加载的数据，如下：

看到这种情况，我下意识的以为是后端返回的数据的问题，所以结束会议后我就着手排查了，如下：

结果发现后端的数据是没问题的，这我就很奇怪了，其他的 tab 都能正常展示数据，为什么就只有综合出现了问题？

开始排查

因为这个无限滚动组件是我封装的，所以我猜测会不会是这个组件出了什么问题？

但经过排查我发现，这个组件接收到的数据是没问题的。

那就很奇怪了，我传递的参数是正确的，后端返回的数据也是没问题的，凭什么你不能正常渲染？

直到我看到了这一行代码，我沉默了：

woc，你小子在代码里下毒！

看到这里我基本上可以确定就是这个 index 搞的鬼，在我尝试把它修改成 item.id 后，搜索功能就能正常使用了，如下：

问题复盘

为什么用 id 就正常了？

这里涉及到 React 底层 diff 算法的优化，有经验的小伙伴应该知道，React 源码中判断两个节点是否是同一个节点就是通过这个 key 属性来判断的，key 相同的话会直接复用旧的节点，如下：

这也就解释了为什么切换 tab 后列表中始终都是旧数据，因为我们使用了 index 作为 key，而 index 它是会重复的，新 index 和旧 index 对比，两者相等，React 就直接复用了旧的节点！

但 id 就不一样了，id 我们可以确保它就是唯一的，不会发生重复！

哎，排查问题半小时，解决问题只花 3 秒钟，我 tm.....

这个故事告诉我们：

一定不要在循环节点的时候使用 index 作为 key！

一定不要在循环节点的时候使用 index 作为 key！

一定不要在循环节点的时候使用 index 作为 key！

养成好习惯，特别是这种数据会动态变化的场景！！！

一、 背景

页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。

二、相关技术

前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：

• dom-to-image: github.com/tsayen/dom-…


• html2canvas: github.com/niklasvh/ht…

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

三、 dom-to-image

dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

（一）使用方式

首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom转svg)


• toPng (dom转png)


• toJpeg (dom转jpg)


• toBlob (dom转二进制格式)


• toPixelData (dom转原始像素值)

如需要生成一张png的页面截图，实现代码如下：

import domtoimage from "domtoimage"



const node = document.getElementById('node');

domtoimage.toPng(node,options).then((dataUrl) => {

    const img = new Image();

    img.src = dataUrl;

    document.body.appendChild(img);

})

toPng方法可传入两个参数node和options。

node为要生成截图的dom节点；options为支持的属性配置，具体如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源码代码不是很多，总共不到千行，下面就拿toPng方法做一下简单的源码解析，分析一下其实现原理，简单流程如下：

整体实现过程用到了几个函数：

• toPng（调用draw，实现canvas=>png ）


• Draw（调用toSvg，实现dom=>canvas）


• toSvg（调用cloneNode和makeSvgDataUri，实现dom=>svg）


• cloneNode（克隆处理dom和css）


• makeSvgDataUri（实现dom=>svg data:url）


• toPng

toPng函数比较简单，通过调用draw方法获取转换后的canvas，利用toDataURL转化为图片并返回。

function toPng(node, options) {

  return draw(node, options || {})

    .then((canvas) => canvas.toDataURL());

}

• draw

draw函数首先调用toSvg方法获得dom转化后的svg，然后将获取的url形式的svg处理成图片，并新建canvas节点，然后借助drawImage()方法将生成的图片放在canvas画布上。

function draw(domNode, options) {

  return toSvg(domNode, options)

  // 拿到的svg是image data URL, 进一步创建svg图片

    .then(util.makeImage)

    .then(util.delay(100))

    .then((image) => {

      // 创建canvas，在画布上绘制图像并返回

      const canvas = newCanvas(domNode);

      canvas.getContext("2d").drawImage(image, 0, 0);

      return canvas;

    });

  // 新建canvas节点，设置一些样式的options参数

  function newCanvas(domNode) {

    const canvas = document.createElement("canvas");

    canvas.width = options.width || util.width(domNode);

    canvas.height = options.height || util.height(domNode);

    if (options.bgcolor) {

      const ctx = canvas.getContext("2d");

      ctx.fillStyle = options.bgcolor;

      ctx.fillRect(0, 0, canvas.width, canvas.height);

    }

    return canvas;

  }

}

• toSvg


• toSvg函数实现从dom到svg的处理，大概步骤如下：


• 递归去克隆dom节点（调用cloneNode函数）


• 处理字体，获取所有样式，找到所有的@font-face和内联资源，解析并下载对应的资源，将资源转为dataUrl给src使用。把上面处理完的css rules放入中，并把标签加入到clone的节点中去。
  
• 处理图片，将img标签的src的url和css中backbround中的url，转为dataUrl使用。


• 获取dom节点转化的dataUrl数据（调用makeSvgDataUri函数）

function toSvg(node, options) {

  options = options || {};

  // 处理imagePlaceholder、cacheBust值

  copyOptions(options);

  return Promise.resolve(node)

    .then((node) =>

      // 递归克隆dom节点

      cloneNode(node, options.filter, true))

  // 把字体相关的csstext放入style

    .then(embedFonts)

  // clone处理图片，将图片链接转换为dataUrl

    .then(inlineImages)

  // 添加options里的style放入style

    .then(applyOptions)

    .then((clone) =>

      // node节点转化成svg

      makeSvgDataUri(clone,

        options.width || util.width(node),

        options.height || util.height(node)));

  // 处理一些options的样式

  function applyOptions(clone) {

    ...

    return clone;

  }

}

• cloneNode

cloneNode函数主要处理dom节点，内容比较多，简单总结实现如下：

• 递归clone原始的dom节点，其中, 其中如果有canvas将转为image对象。


• 处理节点的样式，通过getComputedStyle方法获取节点元素的所有CSS属性的值，并将这些样式属性插入新建的style标签上面, 同时要处理“:before，:after”这些伪元素的样式, 最后处理输入内容和svg。

function cloneNode(node, filter, root) {

  if (!root && filter && !filter(node)) return Promise.resolve();

  return Promise.resolve(node)

    .then(makeNodeCopy)

    .then((clone) => cloneChildren(node, clone, filter))

    .then((clone) => processClone(node, clone));

  function makeNodeCopy(node) {

  // 将canvas转为image对象

    if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());

    return node.cloneNode(false);

  }

  // 递归clone子节点

  function cloneChildren(original, clone, filter) {

    const children = original.childNodes;

    if (children.length === 0) return Promise.resolve(clone);

    return cloneChildrenInOrder(clone, util.asArray(children), filter)

      .then(() => clone);

    function cloneChildrenInOrder(parent, children, filter) {

      let done = Promise.resolve();

      children.forEach((child) => {

        done = done

          .then(() => cloneNode(child, filter))

          .then((childClone) => {

            if (childClone) parent.appendChild(childClone);

          });

      });

      return done;

    }

  }

  function processClone(original, clone) {

    if (!(clone instanceof Element)) return clone;

    return Promise.resolve()

      .then(cloneStyle)

      .then(clonePseudoElements)

      .then(copyUserInput)

      .then(fixSvg)

      .then(() => clone);

    // 克隆节点上的样式。

    function cloneStyle() {

       ...

    }

    // 提取伪类样式，放到css

    function clonePseudoElements() {

       ...

    }

    // 处理Input、TextArea标签

    function copyUserInput() {

       ...

    }

    // 处理svg

    function fixSvg() {

       ...

    }

  }

}

• makeSvgDataUri

首先，我们需要了解两个特性：

• SVG有一个元素，这个元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助标签，我们可以直接在SVG内部嵌入XHTML元素，举个例子：

<svg xmlns="http://www.w3.org/2000/svg">

<foreignObject width="120" height="50">

<body xmlns="http://www.w3.org/1999/xhtml">

<p>文字。</p>

</body>

</foreignObject>

</svg>

可以看到标签里面有一个设置了xmlns=“http://www.w3.org/1999/xhtml”…标签，此时标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

• XMLSerializer对象能够把一个XML文档或Node对象转化或“序列化”为未解析的XML标记的一个字符串。

基于以上特性，我们再来看一下makeSvgDataUri函数，该方法实现node节点转化为svg，就用到刚刚提到的两个重要特性。

首先将dom节点通过

XMLSerializer().serializeToString() 序列化为字符串，然后在

标签 中嵌入转换好的字符串，foreignObject 能够在 svg

内部嵌入XHTML，再将svg处理为dataUrl数据返回，具体实现如下：

function makeSvgDataUri(node, width, height) {

  return Promise.resolve(node)

    .then((node) => {

      // 将dom转换为字符串

      node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

      return new XMLSerializer().serializeToString(node);

    })

    .then(util.escapeXhtml)

    .then((xhtml) => `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>`)

  // 转化为svg

    .then((foreignObject) =>

    // 不指定xmlns命名空间是不会渲染的

      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${

        foreignObject}</svg>`)

  // 转化为data:url

    .then((svg) => `data:image/svg+xml;charset=utf-8,${svg}`);

}

四、 html2canvas

html2canvas库主要使用的是Canvas实现方式，主要过程是手动将dom重新绘制成canvas，因此，它只能正确渲染可以理解的属性，有许多CSS属性无法正确渲染。

支持的CSS属性的完整列表：

html2canvas.hertzen.com/features/

浏览器兼容性：

Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

官方文档地址：

html2canvas.hertzen.com/documentati…

（一）使用方式

// dom即是需要绘制的节点, option为一些可配置的选项

import html2canvas from 'html2canvas'

  html2canvas(dom, option).then(canvas=>{

  canvas.toDataURL()

})

常用的option配置：

全部配置文档：

html2canvas.hertzen.com/configurati…

（二）原理分析

html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

其中重点就在于将dom重新绘制成canvas的过程，该过程整体的思路是：遍历目标节点和目标节点的子节点，遍历过程中记录所有节点的结构、内容和样式，然后计算节点本身的层级关系，最后根据不同的优先级绘制到canvas画布中。

由于html2canvas的源码量比较大，可能无法像dom-to-image一样详细的分析，但还是可以大致了解一下整体的流程，首先可以看一下源码中src文件夹中的代码结构，如下图：

简单解析一下：

• index：入口文件，将dom节点渲染到一个canvas中，并返回。


• core：工具函数的封装，包括对缓存的处理函数、Context方法封装、日志模块等。


• css：对节点样式的处理，解析各种css属性和特性，进行处理。


• dom：遍历dom节点的方法，以及对各种类型dom的处理。


• render：基于clone的节点生成canvas的处理方法。

基于以上这些核心文件，我们来简单了解一下html2canvas的解析过程, 大致的流程如下:

• 构建配置项

在这一步会结合传入的options和一些defaultOptions，生成用于渲染的配置数据renderOptions。在过程中会对配置项进行分类，比如resourceOptions（资源跨域相关）、contextOptions（缓存、日志相关）、windowOptions（窗口宽高、滚动配置）、cloneOptions（对指定dom的配置）、renderOptions（render结果的相关配置，包括生成图片的各种属性）等，然后分别将各类配置项传到下接下来的步骤中。

• clone目标节点并获取样式和内容

在这一步中，会将目标节点到指定的dom解析方法中，这个过程会clone目标节点和其子节点，获取到节点的内容信息和样式信息，其中clone dom的解析方法也是比较复杂的，这里不做详细展开。获取到目标节点后，需要把克隆出来的目标节点的dom装载到一个iframe里，进行一次渲染，然后就可以获取到经过浏览器视图真实呈现的节点样式。

• 解析目标节点

目标节点的样式和内容都获取到了之后，就需要把它所承载的数据信息转化为Canvas可以使用的数据类型。在对目标节点的解析方法中，递归整个DOM树，并取得每一层节点的数据，对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容，而对于内容就包含图片、文字、视频等。在整个解析过程中，对目标节点的所有属性进行解析构造，转化成为指定的数据格式，基础数据格式可见以下代码:

class ElementContainer {

  // 所有节点上的样式经过转换计算之后的信息

  readonly styles: CSSParsedDeclaration;

  // 节点的文本节点信息, 包括文本内容和其他属性

  readonly textNodes: TextContainer[] = [];

  // 当前节点的子节点

  readonly elements: ElementContainer[] = [];

  // 当前节点的位置信息（宽/高、横/纵坐标）

  bounds: Bounds;

  flags = 0;

  ...

}

具体到不同类型的元素如图片、IFrame、SVG、input等还会extends ElementContainer拥有自己的特定数据结构，在此不详细贴出。

• 构建内部渲染器

把目标节点处理成特定的数据结构之后，就需要结合Canvas调用渲染方法了，Canvas绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层，那么这个规则是什么样的呢？这里就涉及到CSS布局相关的一些知识。

默认情况下，CSS是流式布局的，元素与元素之间不会重叠。不过有些情况下，这种流式布局会被打破，比如使用了浮动(float)和定位(position)。因此需要需要识别出哪些脱离了正常文档流的元素，并记住它们的层叠信息，以便正确地渲染它们。

那些脱离正常文档流的元素会形成一个层叠上下文。元素在浏览器中渲染时，根据W3C的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的规则，具体规则如下：

在了解了元素的渲染需要遵循这个标准后，Canvas绘制节点的时候，需要生成指定的层叠数据，就需要先计算出整个目标节点里子节点渲染时所展现的不同层级，构造出所有节点对应的层叠上下文在内部所表现出来的数据结构，具体数据结构如下:

// 当前元素

element: ElementPaint;

// z-index为负, 形成层叠上下文

negativeZIndex: StackingContext[];

// z-index为0、auto、transform或opacity, 形成层叠上下文

zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];

// 定位和z-index形成的层叠上下文

positiveZIndex: StackingContext[];

// 没有定位和float形成的层叠上下文

nonPositionedFloats: StackingContext[];

// 没有定位和内联形成的层叠上下文

nonPositionedInlineLevel: StackingContext[];

// 内联节点

inlineLevel: ElementPaint[];

// 不是内联的节点

nonInlineLevel: ElementPaint[];

基于以上数据结构，将元素子节点分类，添加到指定的数组中，解析层叠信息的方式和解析节点信息的方式类似，都是递归整棵树，收集树的每一层的信息，形成一颗包含层叠信息的层叠树。

• 绘制数据

基于上面两步构造出的数据，就可以开始调用内部的绘制方法，进行数据处理和绘制了。使用节点的层叠数据，依据浏览器渲染层叠数据的规则，将DOM元素一层一层渲染到canvas中，其中核心具体源码如下：

async renderStackContent(stack: StackingContext): Promise<void> {

  if (contains(stack.element.container.flags, FLAGS.DEBUG_RENDER)) {

  debugger;

  }

  // 1. the background and borders of the element forming the stacking context.

  await this.renderNodeBackgroundAndBorders(stack.element);

  // 2. the child stacking contexts with negative stack levels (most negative first).

  for (const child of stack.negativeZIndex) {

  await this.renderStack(child);

  }

  // 3. For all its in-flow, non-positioned, block-level descendants in tree order:

  await this.renderNodeContent(stack.element);

  for (const child of stack.nonInlineLevel) {

  await this.renderNode(child);

  }

  // 4. All non-positioned floating descendants, in tree order. For each one of these,

  // treat the element as if it created a new stacking context, but any positioned descendants and descendants

  // which actually create a new stacking context should be considered part of the parent stacking context,

  // not this new one.

  for (const child of stack.nonPositionedFloats) {

  await this.renderStack(child);

  }

  // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  for (const child of stack.nonPositionedInlineLevel) {

  await this.renderStack(child);

  }

  for (const child of stack.inlineLevel) {

  await this.renderNode(child);

  }

  // 6. All positioned, opacity or transform descendants, in tree order that fall int0 the following categories:

  // All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  // For those with 'z-index: auto', treat the element as if it created a new stacking context,

  // but any positioned descendants and descendants which actually create a new stacking context should be

  // considered part of the parent stacking context, not this new one. For those with 'z-index: 0',

  // treat the stacking context generated atomically.

  //

  // All opacity descendants with opacity less than 1

  //

  // All transform descendants with transform other than none

  for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {

  await this.renderStack(child);

  }

  // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index

  // order (smallest first) then tree order.

  for (const child of stack.positiveZIndex) {

  await this.renderStack(child);

  }

}

在renderStackContent方法中，首先对元素本身调用renderNodeContent和renderNodeBackgroundAndBorders进行渲染处理。

然后处理各个分类的子元素，如果子元素形成了层叠上下文，就调用renderStack方法，这个方法内部继续调用了renderStackContent，这就形成了对于层叠上下文整个树的递归。

如果子元素是正常元素没有形成层叠上下文，就直接调用renderNode，renderNode包括两部分内容，渲染节点内容和渲染节点边框背景色。

async renderNode(paint: ElementPaint): Promise<void> {

  if (paint.container.styles.isVisible()) {

    // 渲染节点的边框和背景色

    await this.renderNodeBackgroundAndBorders(paint);

    // 渲染节点内容

    await this.renderNodeContent(paint);

  }

}

其中renderNodeContent方法是渲染一个元素节点里面的内容，其可能是正常元素、文字、图片、SVG、Canvas、input、iframe，对于不同的内容也会有不同的处理。

以上过程，就是html2canvas的整体内部流程，在了解了大致原理之后，我们再来看一个更为详细的源码流程图，对上述流程进行一个简单的总结。

五、 常见问题总结

在使用html2canvas的过程中，会有一些常见的问题和坑，总结如下:

（一）截图不全

要解决这个问题，只需要在截图之前将页面滚动到顶部即可：

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

（二）图片跨域

插件在请求图片的时候会有图片跨域的情况，这是因为，如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了，canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，详情可参考：developer.mozilla.org/en-US/docs/…

解决方案：在img标签上设置crossorigin，属性值为anonymous，可以开启CROS请求。当然，这种方式的前提还是服务端的响应头Access-Control-Allow-Origin已经被设置过允许跨域。如果图片本身服务端不支持跨域，可以使用canvas统一转成base64格式，方法如下。

function getUrlBase64_pro( len,url ) {

  //图片转成base64

  var canvas = document.createElement("canvas"); //创建canvas DOM元素

  var ctx = canvas.getContext("2d");

  return new Promise((reslove, reject) => {

  var img = new Image();

  img.crossOrigin = "Anonymous";

  img.onload = function() {

  canvas.height = len;

  canvas.width = len;

  ctx.drawImage(img, 0, 0, len, len);

  var dataURL = canvas.toDataURL("image/");

  canvas = null;

  reslove(dataURL);

  };

  img.onerror = function(err){

  reject(err)

  }

  img.src = url;

  });

}

（三）截图与当前页面有区别

方式一：如果要从渲染中排除某些elements，可以向这些元素添加data-html2canvas-ignore属性，html2cnavas会将它们从渲染中排除，例如，如果不想截图iframe的部分，可以如下：

html2canvas(ele,{

useCORS: true,

ignoreElements: (element: any) => {

  if (element.tagName.toLowerCase() === 'iframe') {

  return element;

  }

  return false;

  },

})

方式二：可以将需要转化成图片的部分放在一个节点内，再把整个节点，透明度设置为0， 其他部分层级设置高一些，即可实现截图指定区域。

六、 小结

本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。

参考资料：

1.dom-to-image原理

2.html2image原理简述

3.浏览器端网页截图方案详解

4.html2canvas

5.html2canvas实现浏览器截图的原理（包含源码分析的通用方法）

1.背景

一开始接到任务需要打印html，之前用到了vue-print-nb-jeecg来处理Vue2一个打印的问题，现在是遇到需求要在Vue3项目里面去打印十几页的打印和下载为pdf，难点和坑就在于我用的库vue3-print-nb来做分页打印预览，下载pdf后面介绍

2.预览打印实现

    <div id="printMe" style="background:red;">

        <p>葫芦娃，葫芦娃</p>

        <p>一根藤上七朵花 </p>

        <p>小小树藤是我家 啦啦啦啦 </p>

        <p>叮当当咚咚当当　浇不大</p>

        <p> 叮当当咚咚当当 是我家</p>

        <p> 啦啦啦啦</p>

        <p>...</p>

    </div>



    <button v-print="'#printMe'">Print local range</button>

因为官方提供的方案都是DOM加载完成后然后直接打印，但是我的需求是需要点击打印的时候根据id渲染不同的组件然后渲染DOM，后面仔细看官方文档，有个beforeOpenCallback方法在打印预览之前有个钩子，但是这个钩子没办法确定我接口加载完毕，所以我的思路就是用户先点击我写的点击按钮事件，等异步渲染完毕之后，我再同步触发真正的打印预览按钮，这样就变相解决了我的需求。

坑

3.掉头发之下载pdf

下载pdf这种需求才是我每次去理发店不敢让tony把我头发打薄的原因，我看了很多技术文章，结合个人业务情况，采取的方案是html2canvas把html转成canvas然后转成图片然后通过jsPDF截取图片分页最后下载到本地。本人秉承着不生产水，只做大自然的搬运工的匠人精神，迅速而又果断的从社区来到社区去，然后找到了适配当前业务的逻辑代码(实践出真知)。

import html2canvas from 'html2canvas'

import jsPDF, { RGBAData } from 'jspdf'



/** a4纸的尺寸[595.28,841.89], 单位毫米 */

const [PAGE_WIDTH, PAGE_HEIGHT] = [595.28, 841.89]



const PAPER_CONFIG = {

  /** 竖向 */

  portrait: {

    height: PAGE_HEIGHT,

    width: PAGE_WIDTH,

    contentWidth: 560

  },

  /** 横向 */

  landscape: {

    height: PAGE_WIDTH,

    width: PAGE_HEIGHT,

    contentWidth: 800

  }

}



// 将元素转化为canvas元素

// 通过 放大 提高清晰度

// width为内容宽度

async function toCanvas(element: HTMLElement, width: number) {

  if (!element) return { width, height: 0 }



  // canvas元素

  const canvas = await html2canvas(element, {

    // allowTaint: true, // 允许渲染跨域图片

    scale: window.devicePixelRatio * 2, // 增加清晰度

    useCORS: true // 允许跨域

  })



  // 获取canvas转化后的宽高

  const { width: canvasWidth, height: canvasHeight } = canvas



  // html页面生成的canvas在pdf中的高度

  const height = (width / canvasWidth) * canvasHeight



  // 转化成图片Data

  const canvasData = canvas.toDataURL('image/jpeg', 1.0)



  return { width, height, data: canvasData }

}



/**

 * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)

 * @param param0

 * @returns

 */

export async function outputPDF({

  /** pdf内容的dom元素 */

  element,



  /** 页脚dom元素 */

  footer,



  /** 页眉dom元素 */

  header,



  /** pdf文件名 */

  filename,



  /** a4值的方向: portrait or landscape */

  orientation = 'portrait' as 'portrait' | 'landscape'

}) {

  if (!(element instanceof HTMLElement)) {

    return

  }



  if (!['portrait', 'landscape'].includes(orientation)) {

    return Promise.reject(

      new Error(`Invalid Parameters: the parameter {orientation} is assigned wrong value, you can only assign it with {portrait} or {landscape}`)

    )

  }

  const [A4_WIDTH, A4_HEIGHT] = [PAPER_CONFIG[orientation].width, PAPER_CONFIG[orientation].height]



  /** 一页pdf的内容宽度, 左右预设留白 */

  const { contentWidth } = PAPER_CONFIG[orientation]



  // eslint-disable-next-line new-cap

  const pdf = new jsPDF({

    unit: 'pt',

    format: 'a4',

    orientation

  })



  // 一页的高度， 转换宽度为一页元素的宽度

  const { width, height, data } = await toCanvas(element, contentWidth)



  // 添加

  function addImage(

    _x: number,

    _y: number,

    pdfInstance: jsPDF,

    base_data: string | HTMLImageElement | HTMLCanvasElement | Uint8Array | RGBAData,

    _width: number,

    _height: number

  ) {

    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height)

  }



  // 增加空白遮挡

  function addBlank(x: number, y: number, _width: number, _height: number) {

    pdf.setFillColor(255, 255, 255)

    pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F')

  }



  // 页脚元素 经过转换后在PDF页面的高度

  const { height: tFooterHeight, data: headerData } = footer ? await toCanvas(footer, contentWidth) : { height: 0, data: undefined }



  // 页眉元素 经过转换后在PDF的高度

  const { height: tHeaderHeight, data: footerData } = header ? await toCanvas(header, contentWidth) : { height: 0, data: undefined }



  // 添加页脚

  async function addHeader(headerElement: HTMLElement) {

    headerData && pdf.addImage(headerData, 'JPEG', 0, 0, contentWidth, tHeaderHeight)

  }



  // 添加页眉

  async function addFooter(pageNum: number, now: number, footerElement: HTMLElement) {

    if (footerData) {

      pdf.addImage(footerData, 'JPEG', 0, A4_HEIGHT - tFooterHeight, contentWidth, tFooterHeight)

    }

  }



  // 距离PDF左边的距离，/ 2 表示居中

  const baseX = (A4_WIDTH - contentWidth) / 2 // 预留空间给左边

  // 距离PDF 页眉和页脚的间距， 留白留空

  const baseY = 15



  // 除去页头、页眉、还有内容与两者之间的间距后 每页内容的实际高度

  const originalPageHeight = A4_HEIGHT - tFooterHeight - tHeaderHeight - 2 * baseY



  // 元素在网页页面的宽度

  const elementWidth = element.offsetWidth



  // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度  转化为 距离Canvas顶部的高度

  const rate = contentWidth / elementWidth



  // 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离

  const pages = [rate * getElementTop(element)]



  // 获取该元素到页面顶部的高度(注意滑动scroll会影响高度)

  function getElementTop(contentElement) {

    if (contentElement.getBoundingClientRect) {

      const rect = contentElement.getBoundingClientRect() || {}

      const topDistance = rect.top



      return topDistance

    }

  }



  // 遍历正常的元素节点

  function traversingNodes(nodes) {

    for (const element of nodes) {

      const one = element



      /** */

      /** 注意： 可以根据业务需求，判断其他场景的分页，本代码只判断表格的分页场景 */

      /** */



      // table的每一行元素也是深度终点

      const isTableRow = one.classList && one.classList.contains('ant4-table-row')



      // 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断

      const { offsetHeight } = one

      // 计算出最终高度

      const offsetTop = getElementTop(one)



      // dom转换后距离顶部的高度

      // 转换成canvas高度

      const top = rate * offsetTop

      const rateOffsetHeight = rate * offsetHeight



      // 对于深度终点元素进行处理

      if (isTableRow) {

        // dom高度转换成生成pdf的实际高度

        // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box

        updateTablePos(rateOffsetHeight, top)

      }

      // 对于普通元素，则判断是否高度超过分页值，并且深入

      else {

        // 执行位置更新操作

        updateNormalElPos(top)

        // 遍历子节点

        traversingNodes(one.childNodes)

      }

      updatePos()

    }

  }



  // 普通元素更新位置的方法

  // 普通元素只需要考虑到是否到达了分页点，即当前距离顶部高度 - 上一个分页点的高度 大于 正常一页的高度，则需要载入分页点

  function updateNormalElPos(top) {

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

  }



  // 可能跨页元素位置更新的方法

  // 需要考虑分页元素，则需要考虑两种情况

  // 1. 普通达顶情况，如上

  // 2. 当前距离顶部高度加上元素自身高度 大于 整页高度，则需要载入一个分页点

  function updateTablePos(eHeight: number, top: number) {

    // 如果高度已经超过当前页，则证明可以分页了

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

    // 若 距离当前页顶部的高度 加上元素自身的高度 大于 一页内容的高度, 则证明元素跨页，将当前高度作为分页位置

    else if (

      top + eHeight - (pages.length > 0 ? pages[pages.length - 1] : 0) > originalPageHeight &&

      top !== (pages.length > 0 ? pages[pages.length - 1] : 0)

    ) {

      pages.push(top)

    }

  }



  // 深度遍历节点的方法

  traversingNodes(element.childNodes)



  function updatePos() {

    while (pages[pages.length - 1] + originalPageHeight < height) {

      pages.push(pages[pages.length - 1] + originalPageHeight)

    }

  }



  // 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，

  // 所��要把它修正，让其值是以真实的打印元素顶部节点为准

  const newPages = pages.map(item => item - pages[0])



  // 根据分页位置 开始分页

  for (let i = 0; i < newPages.length; ++i) {

    // 根据分页位置新增图片

    addImage(baseX, baseY + tHeaderHeight - newPages[i], pdf, data!, width, height)

    // 将 内容 与 页眉之间留空留白的部分进行遮白处理

    addBlank(0, tHeaderHeight, A4_WIDTH, baseY)

    // 将 内容 与 页脚之间留空留白的部分进行遮白处理

    addBlank(0, A4_HEIGHT - baseY - tFooterHeight, A4_WIDTH, baseY)

    // 对于除最后一页外，对 内容 的多余部分进行遮白处理

    if (i < newPages.length - 1) {

      // 获取当前页面需要的内容部分高度

      const imageHeight = newPages[i + 1] - newPages[i]

      // 对多余的内容部分进行遮白

      addBlank(0, baseY + imageHeight + tHeaderHeight, A4_WIDTH, A4_HEIGHT - imageHeight)

    }



    // 添加页眉

    if (header) {

      await addHeader(header)

    }



    // 添加页脚

    if (footer) {

      await addFooter(newPages.length, i + 1, footer)

    }



    // 若不是最后一页，则分页

    if (i !== newPages.length - 1) {

      // 增加分页

      pdf.addPage()

    }

  }

  return pdf.save(filename)

}