什么是函数式编程？

函数式编程是一种思维方式，函数式编程与命令式编程最大的不同其实在于：

函数式编程关心数据的映射，命令式编程关心解决问题的步骤。函数式编程的初衷来, 也就是: 希望可以允许程序员用计算来表示程序, 用计算的组合来表达程序的组合, 而非函数式编程则习惯于用命令来表示程序, 用命令的顺序执行来表达程序的组合。

好记性不如烂笔头,有时间将JS函数式编程,在JS方面毕竟有限，如果真要学习好函数式编程，建议学习下Haskell，本文就是将关于JS方面知识点尽可能总结全面。

• 柯里化
• 偏应用
• 组合与管道
• 函子
• Monad

1. 柯里化

• 什么是柯里化呢？

柯里化是把一个多参数函数转化为一个嵌套的一元函数的过程。下面我们用介绍柯里化时候很多文章都会使用的例子，加法例子(bad smile)。

// 原始版本
const add = (x,y) => x + y;

// ES6 柯里化版本
const addCurried = x => y => x + y;

你没有看错，就是这么简单，柯里化就是将之前传入的多参数变为传入单参数，解释下，柯里化版本，其实当传入一个参数addCurried(1)时，实际会返回一个函数 y=>1+y,实际上是将add函数转化为含有嵌套的一元函数的addCurried函数。如果要调用柯里化版本，应该使用addCurried(1)(2)方式进行调用 会达到和add(1,2)一样的效果,n 个连续箭头组成的函数实际上就是柯里化了 n - 1次，前 n - 1 次调用，其实是提前将参数传递进去，并没有调用最内层函数体，最后一次调用才会调用最内层函数体，并返回最内层函数体的返回值。

看到这里感觉是不是很熟悉，没错，React 中间件。

以上是通过ES6箭头函数实现的，下面我们构建curryFn来实现这个过程。

此函数应该比较容易理解，比较函数参数以及参数列表的长度，递归调用合并参数，当参数都为3，不满足，调用fn.apply(null, args)。

例子: 使用以上的curryFn 数组元素平方函数式写法。

const curryFn = (fn) => {
    if(typeof fn !== 'function'){
        throw Error ('Not Function');
    }
    return function curriedFn(...args){
        if(args.length < fn.length){
            return function(){
                return curriedFn.apply(null, args.concat(
                    [].slice.call(arguments)
                ))
            }
        }
        return fn.apply(null, args);
    }
}
const map = (fn, arr) => arr.map(fn);
const square = (x) => x * x;
const squareFn = curryFn(map)(square)([1,2,3])

从上例子可以观察出curryFn函数应用参数顺序是从左到右。如果想从右到左，下面一会会介绍。

2. 偏应用

上面柯里化我们介绍了我们对于传入多个参数变量的情况，如何处理参数关系，实际开发中存在一种情况，写一个方法，有些参数是固定不变的，即我们需要部分更改参数，不同于柯里化得全部应用参数。

const partial = function (fn, ...partialArgs) {
    let args = partialArgs;
    return function(...fullArguments) {
        let arg = 0;
        for (let i = 0; i < args.length && arg < fullArguments.length; i++) {
            if (args[i] === null) {
                args[i] = fullArguments[arg++];
            }
        }
        return fn.apply(null, args)
    }
}
partial(JSON.stringify,null,null,2)({foo: 'bar', bar: 'foo'})

应用起来 2 这个参数是不变的，相当于常量。简单解释下这个函数，args指向 [null, null, 2], fullArguments指向 [{foo:'bar', bar:'foo'}] ，当i==0时候 ，这样 args[0] ==fullArguments[0],所以args就为[{foo:'bar', bar:'foo'},null,2],然后调用，fn.apply(null, args)。

3. 组合与管道

组合

组合与管道的概念来源于Unix，它提倡的概念大概就是每个程序的输出应该是另一个未知程序的输入。我们应该实现的是不应该创建新函数就可以通过compose一些纯函数解决问题。

• 双函数情况

const compose = (a, b) => c => a(b(c))

我们来应用下：

const toNumber = (num) => Number(num);

const toRound = (num)=> Math.round(num);

// 使用compose

number = compose(toRound,toNumber)('4.67'); // 5

• 多函数情况

我们重写上面例子测试:

const compose = (...fns) => (value) => fns.reverse().reduce((acc, fn) => fn(acc), value)；

const toNumber = (num) => Number(num);

const toRound = (num)=> Math.round(num);

const toString = (num) => num.toString();

number = compose(toString,toRound,toNumber)('4.67'); // 字符串 '5'

从上面多参数以及双参数情况，我们可以得出compose的数据流是从右到左的。那有没有一种数据流是从左到右的，答案是有的就是下面我们要介绍的管道。

管道

管道我们一般称为pipe函数，与compose函数相同，只不过是修改了数据流流向而已。

const pipe = (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value);

const toNumber = (num) => Number(num);

const toRound = (num)=> Math.round(num);

const toString = (num) => num.toString();

number = compose(toString,toRound,toNumber)('4.67'); // 数字 5

4. 函子

函子（Functor）即用一种纯函数的方式帮我们处理异常错误，它是一个普通对象，并且实现了map函数，在遍历每个对象值得时候生成一个新对象。我们来看几个实用些的函子。

• MayBe 函子

• // MayBe 函数定义
  const MayBe = function (val) {
    this.value = val;
  }
  MayBe.of = function (val) {
    return new MayBe(val);
  }
  // MayBe map 函数定义
  MayBe.prototype.isNothing = function () {
    return (this.value === null || this.value === underfind)
  }
  MayBe.prototype.map = function (fn) {
    return this.isNothing() ? MayBe.of(null) : MayBe.of(fn(this.value));
  }

  
  

MayBe并不关心参数是否为null或者underfind,因为它已经被MayBe函子抽象出来了，代码不会因为null或者underfind崩溃，可以看出，通过函子我们不需要关系那些特殊情况下的判断，程序也不会以为的崩溃。

另外一点是，当都多个map链式调用时，如果第一个map参数是null或者underfind，并不会影响到第二个map正常运行，也就是说，任何map的链式调用都会调用到。

MayBe.of('abc').map((x)=>x.toUpperCase()) // MayBe { value: 'ABC' }

// 参数为null
MayBe.of(null).map((x)=>x.toUpperCase()) // MayBe { value: null }

// 链式调用中第一个参数为null
MayBe.of('abc').map(()=>null).map((x)=> 'start' + x) // MayBe { value: null }

• Either函子

Either函子主要解决的是MayBe函子在执行失败时不能判断哪一只分支出问题而出现的，主要解决的分支扩展的问题。

我们实现一下Either函子：

const Nothing = function (val) {
    this.value = val;
}
Nothing.of = function (val) {
    return new Nothing(val);
}
Nothing.prototype.map = function (f) {
    return this;
}
const Some = function(val){
    this.value = val;
}
Some.of = function(val) {
    this.value = val;
}
Some.prototype.map = function(fn) {
    return Some.of(fn(this.value))
}
const Either = {
    Some: Some,
    Nothing: Nothing
}

实现包含两个函数，Nothing函数只返回函数自身，Some则会执行map部分,在实际应用中，可以将错误处理使用Nothing，需要执行使用Some，这样就可以分辨出分支出现的问题。

5. Monad

Monad应该是这几个中最难理解的概念了，因为本人也没有学过Haskell，所以也可能对Monad理解不是很准确，所以犹豫要不要写出来，打算学习Haskell，好吧，先记录下自己理解，永远不做无病呻吟，有自己感触与理解才会记录，学过之后再次补充。

Monad就是一种设计模式，表示将一个运算过程，通过函数拆解成互相连接的多个步骤。你只要提供下一步运算所需的函数，整个运算就会自动进行下去。那么构成Monad 组成条件有哪些呢？

• 类型构造器，因为Monad实际处理的是数据类型，而不是值，必须有一个类型构造器，这个类型构造器的作用就是如何从指定类型构造新的一元类型，比如Maybe<number>，定义Maybe<number>了基础类型的类型number，我们月可以把这种类型构造器理解为封装了一个值，这个值既可以是用数据结构进行封装，也可以使用函数，通过返回值表达封装的值，一般也说Monad是一个“未计算的值”、“包含在上下文（context）中的值”。
• 提升函数。这个提升函数一般指的是return或者unit，说白了，提升函数就是将一个值封装进了Monad这个数据结构中，签名为 return :: a -> M a 。将unit基础类型的值包装到monad中的函数。对于Maybe monad，它将2类型number的值包装到类型的值Maybe(2)Maybe<number>。
• 绑定函数bind。绑定函数就像一个管道，它解封一个Monad，将里面的值传到第二个参数表示的函数，生成另一个Monad。形式化定义为（ma 为类型为的 Monad 实例，是转换函数）。此bind功能是不一样的Function.prototype.bind 功能。它用于创建具有绑定this值的部分应用函数或函数。

就像一个盒子一样，放进盒子里面（提升函数），从盒子里面取出来（绑定函数），放进另外一个盒子里面(提升函数)，本身这个盒子就是类型构造器。

举一个常用的例子，这也是Monad for functional programming，里面除法的例子，实现一个求值函数evaluate，它可以接收类似

function evaluate(e: Expr): Maybe<number> {

  if (e.type === 'value') return Maybe.just(<number>e.value);



  return evaluate((<DivisionExpr>e.value).left)

    .bind(left => evaluate((<DivisionExpr>e.value).right)

      .bind(right => safeDiv(left, right)));

}

在像JavaScript这样的面向对象语言中，unit函数可以表示为构造函数，函数可以表示为bind实例方法。

还有三个遵守的monadic法则：

1. bind(unit(x), f) ≡ f(x)
2. bind(m, unit) ≡ m
3. bind(bind(m, f), g) ≡ bind(m, x ⇒ bind(f(x), g))

4. const unit = (value: number) => Maybe.just<number>(value);
   const f = (value: number) => Maybe.just<number>(value * 2);
   const g = (value: number) => Maybe.just<number>(value - 5);
   const ma = Maybe.just<number>(13);
   const assertEqual = (x: Maybe<number>, y: Maybe<number>) => x.value === y.value;
   
   // first law
   assertEqual(unit(5).bind(f), f(5));
   
   // second law
   assertEqual(ma.bind(unit), ma);
   
   // third law
   assertEqual(ma.bind(f).bind(g), ma.bind(value => f(value).bind(g)));

   
   

前两个说这unit是一个中性元素。第三个说bind应该是关联的 - 绑定的顺序无关紧要。这是添加具有的相同属性：(8 + 4) + 2与...相同8 + (4 + 2)。

举几个比较常见的Monad：

1. Promise Monad

没有想到吧，你平时使用的Promise就是高大上的Monad，它是如何体现的这三个特性呢？

• 类型构造器就是Promise
• unit提升函数 为x => Promise.resolve(x)
• 绑定函数 为Promise.prototype.then

fetch('xxx')

  .then(response => response.json())

  .then(o => fetch(`xxxo`))

  .then(response => response.json())

  .then(v => console.log(v));

最简单的 P(A).then(B) 实现里，它的 P(A) 相当于 Monad 中的 unit 接口，能够把任意值包装到 Monad 容器里。支持嵌套的 Promise 实现中，它的 then 背后其实是 FP 中的 join 概念，在容器里还装着容器的时候，递归地把内层容器拆开，返回最底层装着的值。Promise 的链式调用背后，其实是 Monad 中的 bind 概念。你可以扁平地串联一堆 .then()，往里传入各种函数，Promise 能够帮你抹平同步和异步的差异，把这些函数逐个应用到容器里的值上。回归这节中最原始的问题，Monad 是什么呢？只要满足以上三个条件，我们就可以认为它是 Monad 了：正如我们已经看到的，Promise.resolve() 能够把任意值包装到 Promise 里，而 Promise/A+ 规范里的 Resolve 算法则实际上实现了 bind。因此，我们可以认为：Promise 就是一个 Monad。

2. Continuation Monad

continuation monad用于异步任务。幸运的是，ES6没有必要实现它 - Prmise对象是这个monad的一个实现。

• Promise.resolve(value)包装一个值并返回一个promise（unit函数）。
• Promise.prototype.then(onFullfill: value => Promise)将一个值转换为另一个promise并返回一个promise（bind函数）的函数作为参数。

Promise为基本的continuation monad提供了几个扩展。如果then返回一个简单的值（而不是一个promise对象）， 他将被视为Promise,解析为该值 自动将一个值包装在monad中。

第二个区别在于错误传播。Continuation monad允许在计算步骤之间仅传递一个值。另一方面，Promise有两个不同的值 - 一个用于成功值，一个用于错误（类似于Either monad）。可以使用方法的第二个回调then或使用特殊。catch方法捕获错误。

下面定义了一个简单的Monad类型，它单纯封装了一个值作为value属性：

var Monad = function (v) {
    this.value = v;
    return this;
};

Monad.prototype.bind = function (f) {
    return f(this.value)
};

var lift = function (v) {
    return new Monad(v);
};

我们将一个除以2的函数应用的这个Monad：

console.log(lift(32).bind(function (a) {

    return lift(a/2);

}));



// > Monad { value: 16 }

连续应用除以2的函数：

// 方便展示用的辅助函数，请忽视它是个有副作用的函数。
var print = function (a) {
    console.log(a);
    return lift(a);
};

var half = function (a) {
    return lift(a/2);
};

lift(32)
    .bind(half)
    .bind(print)
    .bind(half)
    .bind(print);
    
//output:
// > 16
// > 8

首先确定业务场景

如果我们把场景设定在开发一个pc端管理后台的话，那么很常见的需求就是根据不同用户，配置不同的权限，显示不同的菜单项目，渲染不同的路由。

那权限到底归谁管

一般来说都是后台配置权限，然后驱动前端显示菜单，但我觉得这样不太好，加一个menu就要向后台申请，太不灵活，费劲儿。

我觉得应该也给前台一定程度的权利，让其可以“绕过”后台主导一部分菜单项和路由项的渲染.

__一言以蔽之__：

前后台协同把事情办了，后台为主，前端为辅。

基于以上分析，制定了一个解决方案

首先列出一下“出场角色”：

动态结构数据 ：通过前后台协同创建数据，其描述的是一种树状关系。

静态内容数据 ：渲染路由和菜单项的基本数据信息。

菜单项和其关联的路由 ：根据以上数据驱动显示。

静态内容配置

主要为两个成员:

• 路由配置：routesMap

• 菜单项配置：menusMap

  二者相关性太高，故在一起进行管理。

路由配置：routesMap

作用：

每一个路由都是一个单体对象，通过注册routesMap内部来进行统一管理。

结构：

{
    ...
    {
        name: "commonTitle_nest",               //国际化单位ID
        icon: "thunderbolt",                    //antd的icon
        path: "/pageCenter/nestRoute",          //路径规则
        exact: true,                            //是否严格匹配
        component: lazyImport(() =>
            import('ROUTES/login')
        ),                                      //组件
        key: uuid()                             //唯一标识
    }
    ...
}

个体参数一览：

基本是在react-router基础上进行扩展的，保留了其配置项。

菜单项配置：menusMap

作用：

每个显示在左侧的菜单项目都是一个单体对象，菜单单体内容与路由对象进行关联，并通过注册routesToMenuMap内部来进行统一管理。

结构：

{
    ...
     [LIGHT_ID]: {
        ...routesMap.lightHome,
        routes: [
            routesMap.lightAdd,
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    }
    ...
}

个体参数一览：

该个体主要关联路由个体，故其参数基本与之一致

动态结构配置

主要为两个类别：

• __menuLocalConfig.json__：前端期望的驱动数据。
• __menuRemoteConfig.json__：后端期望的驱动数据。

作用：

__动静结合，驱动显示__：两文件融合作为动态数据，去激活静态数据（菜单项menusMap）来驱动显示菜单项目和渲染路由组件。

强调：

• __menuLocalConfig.json__：是动态数据的组成部份，是“动”中的“静”，完全由前端主导配置。
• __menuRemoteConfig.json__：应该由后台配置权限并提供，前端配置该数据文件，目的是在后台未返回数据作默认配置，还有模拟mock开发使用。

结构：

[   

    ...

    {

            "menuId": 2001,

            "parentId": 1001

    }

    ...

]

简单，直接地去表示结构的数据集合

动态配置的解释：

简单讲，对于驱动菜单项和路由的渲染，无论后台配置权限控制前端也好，前端想绕过后端主导显示也好，都是一种期望（种因）。二者协商，结合，用尽可能少的信息描述一个结构（枝繁），从而让静态数据对其进行补充（叶茂），然后再用形成的整体去驱动（结果）。

快速上手

注册路由个体

位置在/src/routes/config.js,栗：

/* 路由的注册数据，新建路由在这配置 */
export const routesMap = {
    ...
    templates: {
        name: "commonTitle_nest",
        icon: "thunderbolt",
        path: "/pageCenter/nestRoute",
        exact: true,
        redirect: "/pageCenter/light",
        key: uuid()
    }
    ...
}

详：/路由相关/配置/静态内容配置

决定该路由个体的“出场”

位置同上,栗：

/* 路由匹配menu的注册数据，新建后台驱动的menu在这配置 */
export const menusMap = {
    ...
    [LIGHT_ID]: {
        ...routesMap.lightHome,         //“主角”
        routes: [
            routesMap.lightAdd,         //“配角”
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    },
    ...
}

解：首先路由个体出现在该配置中，就说明出场（驱动渲染route）了，但是出场又分为两种：

以上就已经完成了静态数据的准备，接下来就等动态结构数据类激活它了。

配置动态结构数据

后台配置的权限：

[

  { "menuId": 1002, "parentId": 0 },

  { "menuId": 1001, "parentId": 0 }

]

主导

前端自定义的权限:

[
  { "menuId": 2002, "parentId": 1001 },
  { "menuId": 2001, "parentId": 1001 },
  { "menuId": 2003, "parentId": 0 },
  { "menuId": 2004, "parentId": 1002 },
  { "menuId": 2005, "parentId": 1002 }
]

补充

解：1***和2***分别是后台和前台的命名约定(能区分就行，怎么定随意)，通过以上数据不难看出二者结合描述了一个树状关系，进而去激活静态数据以驱动渲染页面的菜单和路由。

简单讲：就是动态数据描述结构，静态数据描述内容，结构去和内容进行匹配，有就显示，没有也不会出问题，二者配合驱动显示。

至此配置基本完成，可以通过直接修改该文件的方式进行开发和调整，也可以可视化操作。

配置调整费劲？拖拽吧

操作后自动刷新。

自动生成文件

menuLocalConfig.json



menuRemoteConfig.json

总结：

这样我觉得react的路由开发起来得劲儿了不少，整体的解决方案已经确定，供参考。

在图像和其他响应式元素的宽度和高度之间有一个一致的比例是很重要的。在CSS中，我们使用padding hack已经很多年了，但现在我们在CSS中有了原生的长宽比支持。

在这篇文章中，我们将讨论什么是宽高比，我们过去是怎么做的，新的做法是什么。当然，也会有一些用例，对它们进行适当的回退。

什么是高宽比

根据维基百科的说法：

在数学上，比率表示一个数字包含另一个数字的多少倍。例如，如果一碗水果中有八个橙子和六个柠檬，那么橙子和柠檬的比例是八比六（即8∶6，相当于比值4∶3）。

在网页设计中，高宽比的概念是用来描述图像的宽度和高度应按比例调整。

考虑下图

比率是4:3，这表明苹果和葡萄的比例是4:3。

换句话说，我们可以为宽高比为4：3的最小框是4px * 3px框。 当此盒式高度按比例调整为其宽度时，我们将有一个致宽尺寸的框。

考虑下图。

盒子被按比例调整大小，其宽度和高度之间的比例是一致的。现在，让我们想象一下，这个盒子里有一张重要的图片，我们关心它的所有细节。

请注意，无论大小如何，图像细节都被保留。通过拥有一致的高宽比，我们可以获得以下好处

• 整个网站的图像将在不同的视口大小上保持一致。
• 我们也可以有响应式的视频元素。
• 它有助于设计师创建一个图像大小的清晰指南，这样开发者就可以在开发过程中处理它们。

计算宽高比

为了测量宽高比，我们需要将宽度除以如下图所示的高度。

宽度和高度之间的比例是1.33。这意味着这个比例应该得到遵守。请考虑

注意右边的图片，宽度÷高度的值是 1.02，这不是原来的长宽比（1.33或4：3）。

你可能在想，如何得出4:3这个数值？嗯，这被称为最接近的正常长宽比，有一些工具可以帮助我们找到它。在进行UI设计时，强烈建议你确切地知道你所使用的图像的宽高比是多少。使用这个网址可以帮我们快速计算。

网址地址：http://lawlesscreation.github...

在 CSS 中实现宽高比

我们过去是通过在CSS中使用百分比padding 来实现宽高比的。好消息是，最近，我们在所有主要的浏览器中都得到了aspect-ratio的原生支持。在深入了解原生方式之前，我们先首先解释一下好的老方法。

当一个元素有一个垂直百分比的padding时，它将基于它的父级宽度。请看下图。

当标题有padding-top: 50%时，该值是根据其父元素的宽度来计算的。因为父元素的宽度是200px，所以padding-top会变成100px。

为了找出要使用的百分比值，我们需要将图像的高度除以宽度。得到的数字就是我们要使用的百分比。

假设图像宽度为260px，高度为195px。

Percentage padding = height / width

195/260的结果为 0.75（或75％）。

我们假设有一个卡片的网格，每张卡片都有一个缩略图。这些缩略图的宽度和高度应该是相等的。

由于某些原因，运营上传了一张与其他图片大小不一致的图片。注意到中间那张卡的高度与其他卡的高度不一样。

你可能会想，这还不容易解决？我们可以给图片加个object-fit: cover。问题解决了，对吗？不是这么简单滴。这个解决方案在多种视口尺寸下都不会好看。

注意到在中等尺寸下，固定高度的图片从左边和右边被裁剪得太厉害，而在手机上，它们又太宽。所有这些都是由于使用了固定高度的原因。我们可以通过不同的媒体查询手动调整高度，但这不是一个实用的解决方案。

我们需要的是，无论视口大小如何，缩略图的尺寸都要一致。为了实现这一点，我们需要使用百分比padding来实现一个宽高比。

HTML

<article class="card">
  <div class="card__thumb">
    <img src="thumb.jpg" alt="" />
  </div>
  <div class="card__content">
    <h3>Muffins Recipe</h3>
    <p>Servings: 3</p>
  </div>
</article>

CSS

.card__thumb {
  position: relative;
  padding-top: 75%;
}

.card__thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

通过上述，我们定义了卡片缩略图包装器（.card__thumb）的高度取决于其宽度。另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有object-fit: cover，用于上传不同大小的图片的情况。请看下面的动图。

请注意，卡片大小的变化和缩略图的长宽比没有受到影响。

aspect-ratio 属性

今年早些时候，Chrome、Safari TP和Firefox Nightly都支持aspect-ratio CSS 属性。最近，它在Safari 15的官方版本中得到支持。

我们回到前面的例子，我们可以这样改写它。

/* 上面的方式 */
.card__thumb {
  position: relative;
  padding-top: 75%;
}

/* 使用 aspect-ratio 属性 */
.card__thumb {
  position: relative;
  aspect-ratio: 4/3;
}

请看下面的动图，了解宽高比是如何变化的。

Demo 地址：https://codepen.io/shadeed/pe...点击预览

有了这个，让我们探索原始纵横比可以有用的一些用例，以及如何以逐步增强的方法使用它。

渐进增强

我们可以通过使用CSS @supports和CSS变量来使用CSS aspect-ratio。

.card {
  --aspect-ratio: 16/9;
  padding-top: calc((1 / (var(--aspect-ratio))) * 100%);
}

@supports (aspect-ratio: 1) {
  .card {
    aspect-ratio: var(--aspect-ratio);
    padding-top: initial;
  }
}

Logo Images

来看看下面的 logo

你是否注意到它们的尺寸是一致的，而且它们是对齐的？来看看幕后的情况。

// html
<li class="brands__item">
  <a href="#">
    <img src="assets/batch-2/aanaab.png" alt="" />
  </a>
</li>
.brands__item a {
  padding: 1rem;
}

.brands__item img {
  width: 130px;
  object-fit: contain;
  aspect-ratio: 2/1;
}

我添加了一个130px的基本宽度，以便有一个最小的尺寸，而aspect-ratio会照顾到高度。

蓝色区域是图像的大小，object-fit: contain是重要的，避免扭曲图像。

Responsive Circles

你是否曾经需要创建一个应该是响应式的圆形元素？CSS aspect-ratio是这种使用情况的最佳选择。

.person {

  width: 180px;

  aspect-ratio: 1;

}

如果宽高比的两个值相同，我们可以写成aspect-ratio: 1而不是aspect-ratio: 1/1。如果你使用flexbox或grid ，宽度将是可选的，它可以被添加作为一个最小值。

~完，我是小智，宝，你学会了吗~

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://ishadeed.com/article/...

背景

不知从什么时候开始，前端白屏问题成为一个非常普遍的话题，'白屏' 甚至成为了前端 bug 的代名词：_喂，你的页面白了。_而且，'白' 这一现象似乎对于用户体感上来说更加强，回忆起 windows 系统的崩溃 '蓝屏'。
可以说是非常相似了，甚至能明白了白屏这个词汇是如何统一出来的。那么，体感如此强烈的现象势必会给用户带来一些不好的影响，如何能尽早监听，快速消除影响就显得很重要了。

为什么单独监控白屏

不光光是白屏，白屏只是一种现象，我们要做的是精细化的异常监控。异常监控各个公司肯定都有自己的一套体系，集团也不例外，而且也足够成熟。但是通用的方案总归是有缺点的，如果对所有的异常都加以报警和监控，就无法区分异常的严重等级，并做出相应的响应，所以在通用的监控体系下定制精细化的异常监控是非常有必要的。这就是本文讨论白屏这一场景的原因，我把这一场景的边界圈定在了 “白屏” 这一现象。

方案调研

白屏大概可能的原因有两种：

1. js 执行过程中的错误
2. 资源错误

这两者方向不同，资源错误影响面较多，且视情况而定，故不在下面方案考虑范围内。为此，参考了网上的一些实践加上自己的一些调研，大概总结出了一些方案：

一、onerror + DOM 检测

原理很简单，在当前主流的 SPA 框架下，DOM 一般挂载在一个根节点之下（比如 <div id="root"></div> ）发生白屏后通常现象是根节点下所有 DOM 被卸载，该方案就是通过监听全局的 onerror 事件，在异常发生时去检测根节点下是否挂载 DOM，若无则证明白屏。
我认为是非常简单暴力且有效的方案。但是也有缺点：其一切建立在 **白屏 === 根节点下 DOM 被卸载** 成立的前提下，实际并非如此比如一些微前端的框架，当然也有我后面要提到的方案，这个方案和我最终方案天然冲突。

二、Mutation Observer Api

不了解的可以看下文档。
其本质是监听 DOM 变化，并告诉你每次变化的 DOM 是被增加还是删除。为其考虑了多种方案：

1. 搭配 onerror 使用，类似第一个方案，但很快被我否决了，虽然其可以很好的知道 DOM 改变的动向，但无法和具体某个报错联系起来，两个都是事件监听，两者是没有必然联系的。
2. 单独使用判断是否有大量 DOM 被卸载，缺点：白屏不一定是 DOM 被卸载，也有可能是压根没渲染，且正常情况也有可能大量 DOM 被卸载。完全走不通。
3. 单独使用其监听时机配合 DOM 检测，其缺点和方案一一样，而且我觉得不如方案一。因为它没法和具体错误联系起来，也就是没法定位。当然我和其他团队同学交流的时候他们给出了其他方向：通过追踪用户行为数据来定位问题，我觉得也是一种方法。

一开始我认为这就是最终答案，经过了漫长的心里斗争，最终还是否定掉了。不过它给了一个比较好的监听时机的选择。

三、饿了么-Emonitor 白屏监控方案

饿了么的白屏监控方案，其原理是记录页面打开 4s 前后 html 长度变化，并将数据上传到饿了么自研的时序数据库。如果一个页面是稳定的，那么页面长度变化的分布应该呈现「幂次分布」曲线的形态，p10、p20 （排在文档前 10%、20%）等数据线应该是平稳的，在一定的区间内波动，如果页面出现异常，那么曲线一定会出现掉底的情况。

其他

其他都大同小样，其实调研了一圈下来发现无非就是两点

1. 监控时机：调研下来常见的就三种：

   • onerror
   • mutation observer api
   • 轮训

2. DOM 检测：这个方案就很多了，除了上述的还可以：

   • elementsFromPoint api 采样
   • 图像识别
   • 基于 DOM 的各种数据的各种算法识别
   • ...

改变方向

几番尝试下来几乎没有我想要的，其主要原因是准确率 -- 这些方案都不能保证我监听到的是白屏，单从理论的推导就说不通。他们都有一个共同点：监听的是'白屏'这个现象，从现象去推导本质虽然能成功，但是不够准确。所以我真正想要监听的是造成白屏的本质。

那么回到最开始，什么是白屏？他是如何造成的？是因为错误导致的浏览器无法渲染？不，在这个 spa 框架盛行的现在实际上的白屏是框架造成的，本质是由于错误导致框架不知道怎么渲染所以干脆就不渲染。由于我们团队 React 技术栈居多，我们来看看 React 官网的一段话：

React 认为把一个错误的 UI 保留比完全移除它更糟糕。我们不讨论这个看法的正确与否，至少我们知道了白屏的原因：渲染过程的异常且我们没有捕获异常并处理。

反观目前的主流框架：我们把 DOM 的操作托管给了框架，所以渲染的异常处理不同框架方法肯定不一样，这大概就是白屏监控难统一化产品化的原因。但大致方向肯定是一样的。

那么关于白屏我认为可以这么定义：异常导致的渲染失败。

那么白屏的监控方案即：监控渲染异常。那么对于 React 而言，答案就是： Error Boundaries

Error Boundaries

我们可以称之为错误边界，错误边界是什么？它其实就是一个生命周期，用来监听当前组件的 children 渲染过程中的错误，并可以返回一个 降级的 UI 来渲染：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 我们可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 我们可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

一个有责任心的开发一定不会放任错误的发生。错误边界可以包在任何位置并提供降级 UI，也就是说，一旦开发者'有责任心' 页面就不会全白，这也是我之前说的方案一与之天然冲突且其他方案不稳定的情况。
那么，在这同时我们上报异常信息，这里上报的异常一定会导致我们定义的白屏，这一推导是 100% 正确的。

100% 这个词或许不够负责，接下来我们来看看为什么我说这一推导是 100% 准确的：

React 渲染流程

我们来简单回顾下从代码到展现页面上 React 做了什么。
我大致将其分为几个阶段：render => 任务调度 => 任务循环 => 提交 => 展示
我们举一个简单的例子来展示其整个过程（任务调度不再本次讨论范围故不展示）：

const App = ({ children }) => (
  <>
    <p>hello</p>
    { children }
  </>
);
const Child = () => <p>I'm child</p>

const a = ReactDOM.render(
  <App><Child/></App>,
  document.getElementById('root')
);

首先浏览器是不认识我们的 jsx 语法的，所以我们通过 babel 编译大概能得到下面的代码：

var App = function App(_ref2) {
  var children = _ref2.children;
  return React.createElement("p", null, "hello"), children);
};

var Child = function Child() {
  return React.createElement("p", null, "I'm child");
};

ReactDOM.render(React.createElement(App, null, React.createElement(Child, null)), document.getElementById('root'));

babel 插件将所有的 jsx 都转成了 createElement 方法，执行它会得到一个描述对象 ReactElement 大概长这样子：

{
    $$typeof: Symbol(react.element),
  key: null,
  props: {}, // createElement 第二个参数 注意 children 也在这里，children 也会是一个 ReactElement 或 数组
  type: 'h1' // createElement 的第一个参数，可能是原生的节点字符串，也可能是一个组件对象（Function、Class...）
}

所有的节点包括原生的 <a></a> 、 <p></p> 都会创建一个 FiberNode ，他的结构大概长这样：

FiberNode = {
    elementType: null, // 传入 createElement 的第一个参数
  key: null,
  type: HostRoot, // 节点类型（根节点、函数组件、类组件等等）
  return: null, // 父 FiberNode
  child: null, // 第一个子 FiberNode
  sibling: null, // 下一个兄弟 FiberNode
  flag: null, // 状态标记
}

你可以把它理解为 Virtual Dom 只不过多了许多调度的东西。最开始我们会为根节点创建一个 FiberNodeRoot 如果有且仅有一个 ReactDOM.render 那么他就是唯一的根，当前有且仅有一个 FiberNode 树。

我只保留了一些渲染过程中重要的字段，其他还有很多用于调度、判断的字段我这边就不放出来了，有兴趣自行了解

render

现在我们要开始渲染页面，是我们刚才的例子，执行 ReactDOM.render 。这里我们有个全局 workInProgress 对象标志当前处理的 FiberNode

1. 首先我们为根节点初始化一个 FiberNodeRoot ，他的结构就如上面所示，并将 workInProgress= FiberNodeRoot。
2. 接下来我们执行 ReactDOM.render 方法的第一个参数，我们得到一个 ReactElement :

ReactElement = {
  $$typeof: Symbol(react.element),
  key: null,
  props: {
    children: {
      $$typeof: Symbol(react.element),
      key: null,
      props: {},
      ref: null,
      type: ƒ Child(),
    }
  }
  ref: null,
  type: f App()
}

该结构描述了 <App><Child /></App>

3. 我们为 ReactElement 生成一个 FiberNode 并把 return 指向父 FiberNode ，最开始是我们的根节点，并将 workInProgress = FiberNode

{
  elementType: f App(), // type 就是 App 函数
  key: null,
  type: FunctionComponent, // 函数组件类型
  return: FiberNodeRoot, // 我们的根节点
  child: null,
  sibling: null,
  flags: null
}

4. 只要workInProgress 存在我们就要处理其指向的 FiberNode 。节点类型有很多，处理方法也不太一样，不过整体流程是相同的，我们以当前函数式组件为例子，直接执行 App(props) 方法，这里有两种情况

   • 该组件 return 一个单一节点，也就是返回一个 ReactElement 对象，重复 3 - 4 的步骤。并将当前 节点的 child 指向子节点 CurrentFiberNode.child = ChildFiberNode 并将子节点的 return 指向当前节点 ChildFiberNode.return = CurrentFiberNode
   • 该组件 return 多个节点（数组或者 Fragment ），此时我们会得到一个 ChildiFberNode 的数组。我们循环他，每一个节点执行 3 - 4 步骤。将当前节点的 child 指向第一个子节点 CurrentFiberNode.child = ChildFiberNodeList[0] ，同时每个子节点的 sibling 指向其下一个子节点（如果有） ChildFiberNode[i].sibling = ChildFiberNode[i + 1] ，每个子节点的 return 都指向当前节点 ChildFiberNode[i].return = CurrentFiberNode

如果无异常每个节点都会被标记为待布局 FiberNode.flags = Placement

5. 重复步骤直到处理完全部节点 workInProgress 为空。

最终我们能大概得到这样一个 FiberNode 树：

FiberNodeRoot = {
  elementType: null,
  type: HostRoot,
  return: null,
  child: FiberNode<App>,
  sibling: null,
  flags: Placement, // 待布局状态
}

FiberNode<App> {
  elementType: f App(),
  type: FunctionComponent,
  return: FiberNodeRoot,
  child: FiberNode<p>,
  sibling: null,
  flags: Placement // 待布局状态
}

FiberNode<p> {
  elementType: 'p',
  type: HostComponent,
  return: FiberNode<App>,
  sibling: FiberNode<Child>,
  child: null,
  flags: Placement // 待布局状态
}

FiberNode<Child> {
  elementType: f Child(),
  type: FunctionComponent,
  return: FiberNode<App>,
  child: null,
  flags: Placement // 待布局状态
}

提交阶段

提交阶段简单来讲就是拿着这棵树进行深度优先遍历 child => sibling，放置 DOM 节点并调用生命周期。

那么整个正常的渲染流程简单来讲就是这样。接下来看看异常处理

错误边界流程

刚刚我们了解了正常的流程现在我们制造一些错误并捕获他：

const App = ({ children }) => (
  <>
  <p>hello</p>
  { children }
  </>
);
const Child = () => <p>I'm child {a.a}</p>

const a = ReactDOM.render(
  <App>
    <ErrorBoundary><Child/></ErrorBoundary>
  </App>,
  document.getElementById('root')
);

执行步骤 4 的函数体是包裹在 try...catch 内的如果捕获到了异常则会走异常的流程：

do {

  try {

    workLoopSync(); // 上述 步骤 4

    break;

  } catch (thrownValue) {

    handleError(root, thrownValue);

  }

} while (true);

执行步骤 4 时我们调用 Child 方法由于我们加了个不存在的表达式 {a.a} 此时会抛出异常进入我们的 handleError 流程此时我们处理的目标是 FiberNode<Child> ，我们来看看 handleError :

function handleError(root, thrownValue): void {
  let erroredWork = workInProgress; // 当前处理的 FiberNode 也就是异常的 节点
  throwException(
    root, // 我们的根 FiberNode
    erroredWork.return, // 父节点
    erroredWork,
    thrownValue, // 异常内容
  );
    completeUnitOfWork(erroredWork);
}

function throwException(
  root: FiberRoot,
  returnFiber: Fiber,
  sourceFiber: Fiber,
  value: mixed,
) {
  // The source fiber did not complete.
  sourceFiber.flags |= Incomplete;

  let workInProgress = returnFiber;
  do {
    switch (workInProgress.tag) {
      case HostRoot: {
        workInProgress.flags |= ShouldCapture;
        return;
      }
      case ClassComponent:
        // Capture and retry
        const ctor = workInProgress.type;
        const instance = workInProgress.stateNode;
        if (
          (workInProgress.flags & DidCapture) === NoFlags &&
          (typeof ctor.getDerivedStateFromError === 'function' ||
            (instance !== null &&
              typeof instance.componentDidCatch === 'function' &&
              !isAlreadyFailedLegacyErrorBoundary(instance)))
        ) {
          workInProgress.flags |= ShouldCapture;
          return;
        }
        break;
      default:
        break;
    }
    workInProgress = workInProgress.return;
  } while (workInProgress !== null);
}

代码过长截取一部分
先看 throwException 方法，核心两件事：

1. 将当前也就是出问题的节点状态标志为未完成 FiberNode.flags = Incomplete
2. 从父节点开始冒泡，向上寻找有能力处理异常（ ClassComponent ）且的确处理了异常的（声明了 getDerivedStateFromError 或 componentDidCatch 生命周期）节点，如果有，则将那个节点标志为待捕获 workInProgress.flags |= ShouldCapture ，如果没有则是根节点。

completeUnitOfWork 方法也类似，从父节点开始冒泡，找到 ShouldCapture 标记的节点，如果有就标记为已捕获 DidCapture  ，如果没找到，则一路把所有的节点都标记为 Incomplete 直到根节点，并把 workInProgress 指向当前捕获的节点。

之后从当前捕获的节点（也有可能没捕获是根节点）开始重新走流程，由于其状态 react 只会渲染其降级 UI，如果有 sibling 节点则会继续走下面的流程。我们看看上述例子最终得到的 FiberNode 树：

FiberNodeRoot = {
  elementType: null,
  type: HostRoot,
  return: null,
  child: FiberNode<App>,
  sibling: null,
  flags: Placement, // 待布局状态
}

FiberNode<App> {
  elementType: f App(),
  type: FunctionComponent,
  return: FiberNodeRoot,
  child: FiberNode<p>,
  sibling: null,
  flags: Placement // 待布局状态
}

FiberNode<p> {
  elementType: 'p',
  type: HostComponent,
  return: FiberNode<App>,
  sibling: FiberNode<ErrorBoundary>,
  child: null,
  flags: Placement // 待布局状态
}

FiberNode<ErrorBoundary> {
  elementType: f ErrorBoundary(),
  type: ClassComponent,
  return: FiberNode<App>,
  child: null,
  flags: DidCapture // 已捕获状态
}

FiberNode<h1> {
  elementType: f ErrorBoundary(),
  type: ClassComponent,
  return: FiberNode<ErrorBoundary>,
  child: null,
  flags: Placement // 待布局状态
}

如果没有配置错误边界那么根节点下就没有任何节点，自然无法渲染出任何内容。

ok，相信到这里大家应该清楚错误边界的处理流程了，也应该能理解为什么我之前说由 ErrorBoundry 推导白屏是 100% 正确的。当然这个 100% 指的是由 ErrorBoundry 捕捉的异常基本上会导致白屏，并不是指它能捕获全部的白屏异常。以下场景也是他无法捕获的：

• 事件处理
• 异步代码
• SSR
• 自身抛出来的错误

React SSR 设计使用流式传输，这意味着服务端在发送已经处理好的元素的同时，剩下的仍然在生成 HTML，也就是其父元素无法捕获子组件的错误并隐藏错误的组件。这种情况似乎只能将所有的 render 函数包裹 try...catch ，当然我们可以借助 babel 或 TypeScript 来帮我们简单实现这一过程，其最终得到的效果是和 ErrorBoundry 类似的。

而事件和异步则很巧，虽说 ErrorBoundry 无法捕获他们之中的异常，不过其产生的异常也恰好不会造成白屏（如果是错误的设置状态，间接导致了白屏，刚好还是会被捕获到）。这就在白屏监控的职责边界之外了，需要别的精细化监控能力来处理它。

总结

那么最后总结下本文的出的几个结论：
我对白屏的定义：异常导致的渲染失败。
对应方案是：资源监听 + 渲染流程监听。

在目前 SPA 框架下白屏的监控需要针对场景做精细化的处理，这里以 React 为例子，通过监听渲染过程异常能够很好的获得白屏的信息，同时能增强开发者对异常处理的重视。而其他框架也会有相应的方法来处理这一现象。

当然这个方案也有弱点，由于是从本质推导现象其实无法 cover 所有的白屏的场景，比如我要搭配资源的监听来处理资源异常导致的白屏。当然没有一个方案是完美的，我这里也是提供一个思路，欢迎大家一起讨论。

在我们日常开发中贝塞尔曲线无处不在：

1. svg 中的曲线（支持 2阶、 3阶）
2. canvas 中绘制贝塞尔曲线
3. 几乎所有前端2D或3D图形图表库(echarts，d3，three.js)都会使用到贝塞尔曲线

所以掌握贝塞尔曲线势在必得。 这篇文章主要是实战篇，不会介绍和贝塞尔相关的知识， 如果有同学对贝塞尔曲线不是很清楚的话：可以查看我这篇文章——深入理解SVG

绘制贝塞尔曲线

第一步我们先创建ctx, 用ctx 画一个二阶贝塞尔曲线看下。二阶贝塞尔曲线有1个控制点，一个起点，一个终点。

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = '#000';
ctx.moveTo(100,100)
ctx.quadraticCurveTo(180,50, 200,200)
ctx.stroke();

这样我们就画好了一个贝塞尔曲线了。

绘制贝塞尔曲线动画

画一条线谁不会哇？接下来文章的主体内容。 首先试想一下动画我们肯定一步步画出曲线？ 但是这个ctx给我们全部画出来了是不是有点问题。我们重新看下二阶贝塞尔曲线的实现过程动画，看看是否有思路。

从图中可以分析得出贝塞尔上的曲线是和t有关系的， t的区间是在0-1之间，我们是不是可以通过二阶贝塞尔的曲线方程去算出每一个点呢，这个专业术语叫离散化，但是这样的得出来的点的信息是不太准的，我们先这样实现。

先看下方程：

我们模拟写出代码如如下：

//这个就是二阶贝塞尔曲线方程
function twoBezizer(p0, p1, p2, t) {
  const k = 1 - t
  return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
}

//离散
function drawWithDiscrete(ctx, start, control, end,percent) {
    for ( let t = 0; t <= percent / 100; t += 0.01 ) {
        const x = twoBezizer(start[0], control[0], end[0], t)
        const y = twoBezizer(start[1], control[1], end[1], t)
        ctx.lineTo(x, y)
    }
}

我们看下效果：

和我们画的几乎是一模一样，接下啦就用requestAnimationFrame 开始我们的动画给出以下代码：

let percent = 0
function animate() {
    ctx.clearRect( 0, 0, 800, 800 );
    ctx.beginPath();
    ctx.moveTo(100,100)
    drawWithDiscrete(ctx,[100,100],[180,50],[200,200],percent)
    ctx.stroke();
    percent = ( percent + 1 ) % 100;
    id =  requestAnimationFrame(animate)
}
animate()

这里有两个要注意的是， 我是是percent 不断加1 和100 求余，所以呢 percent 会不断地从1-100 这样往复，OK所以我们必须要动画之前做一次区域清理， ctx.clearRect( 0, 0, 800, 800 ); 这样就可以不断的从开始到结束循环往复，我们看下效果：

看着样子是不是还不错哈哈哈😸。

绘制贝塞尔曲线动画方法2

你以为这样就结束了？ 当然不是难道我们真的没有办法画出某一个t的贝塞尔曲线了？ 当前不是，这里放一下二阶贝塞尔方程的推导过程：

二阶贝塞尔曲线上的任意一点，都是可以通过同样比例获得。 在两点之间的任意一点，其实满足的一阶贝塞尔曲线， 一阶贝塞尔曲线满足的其实是线性变化。我给出以下方程

 function oneBezizer(p0,p1,t) {

      return p0 + (p1-p0) * t

  }

从我画的图可以看出，我们只要 不断求A点 和C点就可以画出在某一时间段的贝塞尔了。

我给出以下代码和效果图：

function drawWithDiscrete2(ctx, start, control, end,percent) {
    const t = percent/ 100;
    // 求出A点
    const A = [];
    const C = [];
    A[0] = oneBezizer(start[0],control[0],t);
    A[1] = oneBezizer(start[1],control[1],t);
    C[0] = twoBezizer(start[0], control[0], end[0], t)
    C[1] = twoBezizer(start[1], control[1], end[1], t)
    ctx.quadraticCurveTo( 
        A[ 0 ], A [ 1 ],
        C[ 0 ], C[ 1 ]
    );
}

礼花🎉动画

上文我们实现了一条贝塞尔线，我们将这条贝塞尔的曲线的开始点作为一个圆的圆心，然后按照某个次数求出不同的结束点。 再写一个随机颜色，礼花效果就成了， 直接上代码，

for(let i=0; i<count; i++) {
    const angle = Math.PI * 2 / count * i;
    const x = center[ 0 ] + radius * Math.sin( angle );
    const y = center[ 1 ] + radius * Math.cos( angle );
    ctx.strokeStyle = colors[ i ];
    ctx.beginPath();
    drawWithDiscrete(ctx, center,[180,50],[x,y],percent)
    ctx.stroke();
}

function getRandomColor(colors, count) {
    // 生成随机颜色
    for ( let i = 0; i < count; i++ )  {
        colors.push( 
          'rgb( ' + 
            ( Math.random() * 255 >> 0 ) + ',' +
            ( Math.random() * 255 >> 0 ) + ',' + 
            ( Math.random() * 255 >> 0 ) + 
          ' )'
        );
    }
}

我们看下动画吧：

创建 React 应用

创建 React 应用 参考链接， 如使用npx 包运行工具：

npx create-react-app arjs-react-viewer-app
如果您使用的是yarn，执行命令：

yarn create react-app arjs-react-viewer-app
更多创建 React方法可参考 官方文档

安装 ActivereportsJS NPM 包

React 报表 Viewer 组件已经放在了npm @grapecity/activereports-react npm 中。 @grapecity/activereports 包提供了全部的核心功能。

运行以下命令安装包：

npm install @grapecity/activereports-react @grapecity/activereports
或使用yarn命令

yarn add @grapecity/activereports-react @grapecity/activereports

导入 ActiveReportsJS 样式

打开 src\App.css 文件并添加以下代码，导入Viewer 的默认样式，定义了元素宿主的样式React Report Viewer 控件：

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

viewer-host {

width: 100%;
height: 100vh;
}

添加 ActiveReportsJS 报表

ActiveReportsJS 使用 JSON格式和 rdlx-json扩展报表模板文件。在应用程序的public文件夹中，创建名为 report.rdlx-json 的新文件，并在该文件中插入以下JSON内容：

{
"Name": "Report",
"Body": {

"ReportItems": [
  {
    "Type": "textbox",
    "Name": "TextBox1",
    "Value": "Hello, ActiveReportsJS Viewer",
    "Style": {
      "FontSize": "18pt"
    },
    "Width": "8.5in",
    "Height": "0.5in"
  }
]
}
}

添加 React 报表 Viewer 控件

修改 src\App.js代码:

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
return (

<div id="viewer-host">
  <Viewer report={{ Uri: 'report.rdlx-json' }} />
</div>
);
}

export default App;

运行和调试

使用 npm start 或 yarn start 命令运行项目，如果编译失败了，报以下错误，请删除node_modules 文件夹并重新运行 npm install 或 yarn命令来重新安装需要的包文件。

react-scripts start

internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module 'react'
当应用程序启动时，ActiveReportsJS Viewer组件将出现在页面上。Viewer将显示显示“ Hello，ActiveReportsJS Viewer”文本的报表。您可以通过使用工具栏上的按钮或将报表导出为可用格式之一来测试。

原文：https://segmentfault.com/a/1190000040257641

问：如何用 JS 一次获取 HTML 表单的所有字段 ？

考虑一个简单的 HTML 表单，用于将任务保存在待办事项列表中：

<form>
    <label for="name">用户名</label>
    <input type="text" id="name" name="name" required>

    <label for="description">简介</label>
    <input type="text" id="description" name="description" required>

    <label for="task">任务</label>
    <textarea id="task" name="task" required></textarea>

    <button type="submit">提交</button>
  </form>

上面每个字段都有对应的的type，ID和 name属性，以及相关联的label。 用户单击“提交”按钮后，我们如何从此表单中获取所有数据？

有两种方法：一种是用黑科技，另一种是更清洁，也是最常用的方法。为了演示这种方法，我们先创建form.js，并引入文件中。

从事件 target 获取表单字段

首先，我们在表单上为Submit事件注册一个事件侦听器，以停止默认行为（它们将数据发送到后端）。

然后，使用this.elements或event.target.elements访问表单字段：

相反，如果需要响应某些用户交互而动态添加更多字段，那么我们需要使用FormData。

使用 FormData

首先，我们在表单上为submit事件注册一个事件侦听器，以停止默认行为。接着，我们从表单构建一个FormData对象：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
});

除了append()、delete()、get()、set()之外，FormData 还实现了Symbol.iterator。这意味着它可以用for...of 遍历：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);

  for (const formElement of formData) {
    console.log(formElement);
  }
})

除了上述方法之外，entries()方法获取表单对象形式：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);
});

这也适合Object.fromEntries() (ECMAScript 2019)

为什么这有用？如下所示：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);

  // send out to a REST API
  fetch("https://some.endpoint.dev", {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(/**/)
    .catch(/**/);
});

一旦有了对象，就可以使用fetch发送有效负载。

小心：如果在表单字段上省略name属性，那么在FormData对象中刚没有生成。

总结

要从HTML表单中获取所有字段，可以使用：

• this.elements或event.target.elements，只有在预先知道所有字段并且它们保持稳定的情况下，才能使用。

使用FormData构建具有所有字段的对象，之后可以转换，更新或将其发送到远程API。*

原文：https://www.valentinog.com/bl...

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

我是一个react主义者，这次因为项目组关系必须用vue，作为vue小白就记录一下开发过程中的一些骚想法。

正文

1. 对于路由的操作

可能用过umi的同学知道，umi有一套约定式路由的系统，开发过程中可以避免每写一个页面就去手动import到路由的数组中，你只需要按照规则，就可以自动化的添加路由。

完美，我们今天就简单实现一个约定式路由的功能。

首先把vue自己的路由注释掉

// const routes: Array = [
//   {
//     path: "/login",
//     name: "login",
//     component: Login,
//   },
//   // {
//   //   path: "/about",
//   //   name: "About",
//   //   // route level code-splitting
//   //   // this generates a separate chunk (about.[hash].js) for this route
//   //   // which is lazy-loaded when the route is visited.
//   //   component: () =>
//   //     import(/* webpackChunkName: "about" */ "../views/About.vue"),
//   // },
// ];

可以看到代码非常的多，随着页面的增加也会越来越多。当然vue的这种方式也有很多好处：比如支持webpack的魔法注释，支持懒加载

接下来就去实现我们的约定式路由吧！

我们这次用到的API是require.context，大家可能以为需要安装什么包，不用不用！这是webpack的东西！具体API的介绍大家可以自行百度了

首先用这玩意去匹配对应规则的页面，然后提前创好我们的路由数组以便使用。

const r = require.context("../views", true, /.vue/);

const routeArr: Array = [];

接下来就是进行遍历啦，匹配了../views文件下的页面，遍历匹配结果，如果是按照我们的规则创建的页面就去添加到路由数组中

比如我现在的views文件夹里是这样的

// 遍历
r.keys().forEach((key) => {
  console.log(key) //这里的匹配结果就是 ./login/index.vue  ./product/index.vue
  const keyArr = key.split(".");
  if (key.indexOf("index") > -1) {
    // 约定式路由构成方案，views文件夹下的index.vue文件都会自动化生成路由
    // 但是我不想在路由中出现index，我只想要login，product，于是对path进行改造。
    // 这部其实是有很多优化空间的。大家可以自己试着用正则去提取
    const pathArr = keyArr[1].split("/");
    routeArr.push({
      name: pathArr[1],
      path: "/" + pathArr[1],
      component: r(key).default, // 这是组件
    });
  }
});

一起来看一下自动匹配出来的路由数组是什么模样

完美🚖达成了我们的需求。去页面看一看！

完美实现！ 最后把全部代码送上。这样就实现了约定式自动注册路由，避免了手动添加的烦恼，懒人必备

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
const r = require.context("../views", true, /.vue/);
const routeArr: Array = [];
r.keys().forEach((key) => {
  const keyArr = key.split(".");
  if (key.indexOf("index") > -1) {
    // 约定式路由构成方案，views文件夹下的index.vue文件都会自动化生成路由
    const pathArr = keyArr[1].split("/");
    routeArr.push({
      name: pathArr[1],
      path: "/" + pathArr[1],
      component: r(key).default, // 这是组件
    });
  }
});
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: routeArr,
});

export default router;

2.组件

经过上一章的操作，我们可以写页面了，然后就写到了组件。我发现每次使用组件都要在使用的页面去import，非常的麻烦。

通过上一章的想法，我们是不是也可以自动化导入组件呢？

我的想法是：

• 通过一个方法把components文件下的所有组件进行统一的管理
• 需要的页面可以用这个方法传入对应的规则，统一返回组件
• 这个方法可以手动导入，也可以全局挂载。

先给大家看一下我的components文件夹

再看一下现在的页面长相

ok。我们开始在index.ts里撸代码吧

首先第一步一样的去匹配，这里只需要匹配当前文件夹下的所有vue文件

const r = require.context("./", true, /.vue/);

然后声明一个方法，这个方法可以做到fn('规则')返回对应的组件，代码如下。

function getComponent(...names: string[]): any {

  const componentObj: any = {};

  r.keys().forEach((key) => {

    const name = key.replace(/(\.\/|\.vue)/g, "");

    if (names.includes(name)) {

      componentObj[name] = r(key).default;

    }

  });

  return componentObj;

}

export { getComponent };

我们一起来看看调用结果吧

打印结果：

看到这个结果不难想象页面的样子吧！ 当然跟之前一样啦！当然实现啦！

非常的完美！

最后

由于项目比较急咯，我还有一些骚想法没有时间去整理去查资料实现，暂时先这样吧~

如果文内有错误，敬请大家帮我指出！（反正我也不一定改哈哈）

最后!谢谢！拜拜！

这是一份备忘单，展示了不同的导出方式和相应的导入方式。 它实际上可分为3种类型：名称，默认值和列表 ?

// 命名导入/导出 
export const name = 'value'
import { name } from '...'

// 默认导出/导入
export default 'value'
import anyName from '...'

// 重命名导入/导出 
export { name as newName }
import { newName } from '...'

// 命名 + 默认 | Import All
export const name = 'value'
export default 'value'
import * as anyName from '...'

// 导出列表 + 重命名
export {
  name1,
  name2 as newName2
}
import {
  name1 as newName1,
  newName2
} from '...'

接下来，我们来一个一个的看?

命名方式

这里的关键是要有一个name。

export const name = 'value';

import { name } from 'some-path/file';



console.log(name); // 'value'

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

默认方式

使用默认导出，不需要任何名称，所以我们可以随便命名它?

export default 'value'

import anyName from 'some-path/file'



console.log(anyName) // 'value'

❌ 默认方式不用变量名

export default const name = 'value';  

// 不要试图给我起个名字！

命名方式 和 默认方式 一起使用

命名方式 和 默认方式 可以同个文件中一起使用?

eport const name = 'value'

eport default 'value'

import anyName, { name } from 'some-path/file'

导出列表

第三种方式是导出列表(多个)

const name1 = 'value1'

const name2 = 'value2'



export {

  name1,

  name2

}

import {name1, name2 } from 'some-path/file'



console.log(

  name1,  // 'value1' 

  name2,  // 'value2' 

)

需要注意的重要一点是，这些列表不是对象。它看起来像对象，但事实并非如此。我第一次学习模块时，我也产生了这种困惑。真相是它不是一个对象，它是一个导出列表

// ❌ Export list ≠ Object

export {

  name: 'name'

}

重命名的导出

对导出名称不满意？问题不大，可以使用as关键字将其重命名。

const name = 'value'



export {

  name as newName

}

import { newName } from 'some-path/file'



console.log(newName); // 'value'



// 原始名称不可访问

console.log(name); // ❌ undefined

❌ 不能将内联导出与导出列表一起使用

export const name = 'value'



// 你已经在导出 name ☝️，请勿再导出我

export {

  name

}

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

重命名导入

同样的规则也适用于导入，我们可以使用as关键字重命名它。

const name1 = 'value1'

const name2 = 'value2'



export {

  name1,

  name2 as newName2

}

import {

  name1 as newName1,

  newName2

} from '...'



console.log(newName1); // 'value1'

console.log(newName2); // 'value2'



❌

name1; // undefined

name2; // undefined

导入全部

export const name = 'value'



export default 'defaultValue'

import * as anyName from 'some-path/file'



console.log(anyName.name); // 'value'

console.log(anyName.default); // 'defaultValue'

命名方式 vs 默认方式

是否应该使用默认导出一直存在很多争论。 查看这2篇文章。

• Why I've stopped exporting defaults from my JavaScript modules
• GitLab RFC by Thomas Randolph

就像任何事情一样，答案没有对错之分。正确的方式永远是对你和你的团队最好的方式。

命名与默认导出的非开发术语

假设你欠朋友一些钱。 你的朋友说可以用现金或电子转帐的方式还钱。 通过电子转帐付款就像named export一样，因为你的姓名已附加在交易中。 因此，如果你的朋友健忘，并开始叫你还钱，说他没收到钱。 这里，你就可以简单地向他们显示转帐证明，因为你的名字在付款中。 但是，如果你用现金偿还了朋友的钱（就像default export一样），则没有证据。 他们可以说当时的 100 块是来自小红。 现金上没有名称，因此他们可以说是你本人或者是任何人?

那么采用电子转帐（named export）还是现金（default export）更好？

这取决于你是否信任的朋友?， 实际上，这不是解决这一难题的正确方法。 更好的解决方案是不要将你的关系置于该位置，以免冒险危及友谊，最好还是相互坦诚。 是的，这个想法也适用于你选择named export还是default export。 最终还是取决你们的团队决定，哪种方式对团队比较友好，就选择哪种，毕竟不是你自己一个人在战斗，而是一个团体?

原文：https://segmentfault.com/a/1190000040187607

使用方便有用的方法，以减少代码行数，提高我们的工作效率，增加我们的摸鱼时间。

在我们的日常任务中，我们需要编写函数，如排序、搜索、寻找惟一值、传递参数、交换值等，所以在这里分享一下我工作多年珍藏的几个常用技巧和方法，以让大家增加摸鱼的时间。

这些方法肯定会帮助你：

• 减少代码行
• Coding Competitions
• 增加摸鱼的时间

1.声明和初始化数组

我们可以使用特定的大小来初始化数组，也可以通过指定值来初始化数组内容，大家可能用的是一组数组，其实二维数组也可以这样做，如下所示：

const array = Array(5).fill(''); 

// 输出

(5) ["", "", "", "", ""]



const matrix = Array(5).fill(0).map(() => Array(5).fill(0))

// 输出

(5) [Array(5), Array(5), Array(5), Array(5), Array(5)]

0: (5) [0, 0, 0, 0, 0]

1: (5) [0, 0, 0, 0, 0]

2: (5) [0, 0, 0, 0, 0]

3: (5) [0, 0, 0, 0, 0]

4: (5) [0, 0, 0, 0, 0]

length: 5

2. 求和，最小值和最大值

我们应该利用 reduce 方法快速找到基本的数学运算。

const array = [5,4,7,8,9,2];

求和

array.reduce((a,b) => a+b);

// 输出: 35

最大值

array.reduce((a,b) => a>b?a:b);

// 输出: 9

最小值

array.reduce((a,b) => a<b?a:b);

// 输出: 2

3.排序字符串，数字或对象等数组

我们有内置的方法sort()和reverse()来排序字符串，但是如果是数字或对象数组呢

字符串数组排序

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]

stringArr.sort();

// 输出

(4) ["Joe", "Kapil", "Musk", "Steve"]



stringArr.reverse();

// 输出

(4) ["Steve", "Musk", "Kapil", "Joe"]

数字数组排序

const array  = [40, 100, 1, 5, 25, 10];

array.sort((a,b) => a-b);

// 输出

(6) [1, 5, 10, 25, 40, 100]



array.sort((a,b) => b-a);

// 输出

(6) [100, 40, 25, 10, 5, 1]

对象数组排序

const objectArr = [ 

    { first_name: 'Lazslo', last_name: 'Jamf'     },

    { first_name: 'Pig',    last_name: 'Bodine'   },

    { first_name: 'Pirate', last_name: 'Prentice' }

];

objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));

// 输出 

(3) [{…}, {…}, {…}]

0: {first_name: "Pig", last_name: "Bodine"}

1: {first_name: "Lazslo", last_name: "Jamf"}

2: {first_name: "Pirate", last_name: "Prentice"}

length: 3

4.从数组中过滤到虚值

像 0, undefined, null, false, "", ''这样的假值可以通过下面的技巧轻易地过滤掉。

const array = [3, 0, 6, 7, '', false];

array.filter(Boolean);





// 输出

(3) [3, 6, 7]

5. 使用逻辑运算符处理需要条件判断的情况

function doSomething(arg1){ 

    arg1 = arg1 || 10; 

// 如果arg1没有值，则取默认值 10

}



let foo = 10;  

foo === 10 && doSomething(); 

// 如果 foo 等于 10，刚执行 doSomething();

// 输出: 10



foo === 5 || doSomething();

// is the same thing as if (foo != 5) then doSomething();

// Output: 10

6. 去除重复值

const array  = [5,4,7,8,9,2,7,5];

array.filter((item,idx,arr) => arr.indexOf(item) === idx);

// or

const nonUnique = [...new Set(array)];

// Output: [5, 4, 7, 8, 9, 2]

7. 创建一个计数器对象或 Map

大多数情况下，可以通过创建一个对象或者Map来计数某些特殊词出现的频率。

let string = 'kapilalipak';



const table={}; 

for(let char of string) {

  table[char]=table[char]+1 || 1;

}

// 输出

{k: 2, a: 3, p: 2, i: 2, l: 2}

或者

const countMap = new Map();

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

    if (countMap.has(string[i])) {

      countMap.set(string[i], countMap.get(string[i]) + 1);

    } else {

      countMap.set(string[i], 1);

    }

  }

// 输出

Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. 三元运算符很酷

function Fever(temp) {

    return temp > 97 ? 'Visit Doctor!'

      : temp < 97 ? 'Go Out and Play!!'

      : temp === 97 ? 'Take Some Rest!': 'Go Out and Play!';;

}



// 输出

Fever(97): "Take Some Rest!" 

Fever(100): "Visit Doctor!"

9. 循环方法的比较

• for 和 for..in 默认获取索引，但你可以使用arr[index]。
• for..in也接受非数字，所以要避免使用。
• forEach, for...of 直接得到元素。
• forEach 也可以得到索引，但 for...of 不行。

10. 合并两个对象

const user = { 

 name: 'Kapil Raghuwanshi', 

 gender: 'Male' 

 };

const college = { 

 primary: 'Mani Primary School', 

 secondary: 'Lass Secondary School' 

 };

const skills = { 

 programming: 'Extreme', 

 swimming: 'Average', 

 sleeping: 'Pro' 

 };



const summary = {...user, ...college, ...skills};



// 合并多个对象

gender: "Male"

name: "Kapil Raghuwanshi"

primary: "Mani Primary School"

programming: "Extreme"

secondary: "Lass Secondary School"

sleeping: "Pro"

swimming: "Average"

11. 箭头函数

箭头函数表达式是传统函数表达式的一种替代方式，但受到限制，不能在所有情况下使用。因为它们有词法作用域(父作用域)，并且没有自己的this和argument，因此它们引用定义它们的环境。

const person = {

name: 'Kapil',

sayName() {

    return this.name;

    }

}

person.sayName();

// 输出

"Kapil"

但是这样：

const person = {

name: 'Kapil',

sayName : () => {

    return this.name;

    }

}

person.sayName();

// Output

"

13. 可选的链

const user = {

  employee: {

    name: "Kapil"

  }

};

user.employee?.name;

// Output: "Kapil"

user.employ?.name;

// Output: undefined

user.employ.name

// 输出: VM21616:1 Uncaught TypeError: Cannot read property 'name' of undefined

13.洗牌一个数组

利用内置的Math.random()方法。

const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

list.sort(() => {

    return Math.random() - 0.5;

});

// 输出

(9) [2, 5, 1, 6, 9, 8, 4, 3, 7]

// 输出

(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14.双问号语法

const foo = null ?? 'my school';

// 输出: "my school"



const baz = 0 ?? 42;

// 输出: 0

剩余和展开语法

function myFun(a,  b, ...manyMoreArgs) {

   return arguments.length;

}

myFun("one", "two", "three", "four", "five", "six");



// 输出: 6

和

const parts = ['shoulders', 'knees']; 

const lyrics = ['head', ...parts, 'and', 'toes']; 



lyrics;

// 输出: 

(5) ["head", "shoulders", "knees", "and", "toes"]

16.默认参数

const search = (arr, low=0,high=arr.length-1) => {

    return high;

}

search([1,2,3,4,5]);



// 输出: 4

17. 将十进制转换为二进制或十六进制

const num = 10;



num.toString(2);

// 输出: "1010"

num.toString(16);

// 输出: "a"

num.toString(8);

// 输出: "12"

18. 使用解构来交换两个数

let a = 5;

let b = 8;

[a,b] = [b,a]



[a,b]

// 输出

(2) [8, 5]

19. 单行的回文数检查

function checkPalindrome(str) {

  return str == str.split('').reverse().join('');

}

checkPalindrome('naman');

// 输出: true

20.将Object属性转换为属性数组

const obj = { a: 1, b: 2, c: 3 };



Object.entries(obj);

// Output

(3) [Array(2), Array(2), Array(2)]

0: (2) ["a", 1]

1: (2) ["b", 2]

2: (2) ["c", 3]

length: 3



Object.keys(obj);

(3) ["a", "b", "c"]



Object.values(obj);

(3) [1, 2, 3]

原文：https://dev.to/techygeeky/top...

一、单线程模型的设计

1. 最基础的单线程处理简单任务

假设有几个任务：

• 任务1: "姓名：" + "杭城小刘"
• 任务2: "年龄：" + "1995" + "02" + "20"
• 任务3: "大小：" + (2021 - 1995 + 1)
• 任务4: 打印任务1、2、3 的结果

在单线程中执行，代码可能如下：

//c

void mainThread () {

  string name = "姓名：" + "杭城小刘";

  string birthday = "年龄：" + "1995" + "02" + "20" 

  int age = 2021 - 1995 + 1;

    printf("个人信息为：%s, %s, 大小：%d", name.c_str(), birthday.c_str(), age);

}

线程开始执行任务，按照需求，单线程依次执行每个任务，执行完毕后线程马上退出。

2. 线程运行过程中来了新的任务怎么处理？

问题1 介绍的线程模型太简单太理想了，不可能从一开始就 n 个任务就确定了，大多数情况下，会接收到新的 m 个任务。那么 section1 中的设计就无法满足该需求。

要在线程运行的过程中，能够接受并执行新的任务，就需要有一个事件循环机制。最基础的事件循环可以想到用一个循环来实现。

// c++

int getInput() {

  int input = 0;

  cout<< "请输入一个数";

  cin>>input;

  return input;

}



void mainThread () {

  while(true) {

    int input1 = getInput();

    int input2 = getInput();

    int sum = input1 + input2;

    print("两数之和为：%d", sum);

  }

}

相较于第一版线程设计，这一版做了以下改进：

• 引入了循环机制，线程不会做完事情马上退出。
• 引入了事件。线程一开始会等待用户输入，等待的时候线程处于暂停状态，当用户输入完毕，线程得到输入的信息，此时线程被激活。执行相加的操作，最终输出结果。不断的等待输入，并计算输出。

3. 处理来自其他线程的任务

真实环境中的线程模块远远没有这么简单。比如浏览器环境下，线程可能正在绘制，可能会接收到1个来自用户鼠标点击的事件，1个来自网络加载 css 资源完成的事件等等。第二版线程模型虽然引入了事件循环机制，可以接受新的事件任务，但是发现没？这些任务之来自线程内部，该设计是无法接受来自其他线程的任务的。

从上图可以看出，渲染主线程会频繁接收到来自于 IO 线程的一些事件任务，当接受到的资源加载完成后的消息，则渲染线程会开始 DOM 解析；当接收到来自鼠标点击的消息，渲染主线程则会执行绑定好的鼠标点击事件脚本（js）来处理事件。

需要一个合理的数据结构，来存放并获取其他线程发送的消息？

消息队列这个词大家都听过，在 GUI 系统中，事件队列是一个通用解决方案。

消息队列（事件队列）是一种合理的数据结构。要执行的任务添加到队列的尾部，需要执行的任务，从队列的头部取出。

有了消息队列之后，线程模型得到了升级。如下：

可以看出改造分为3个步骤：

• 构建一个消息队列
• IO 线程产生的新任务会被添加到消息队列的尾部
• 渲染主线程会循环的从消息队列的头部读取任务，执行任务

伪代码。构造队列接口部分

class TaskQueue {

  public:

  Task fetchTask (); // 从队列头部取出1个任务

  void addTask (Task task); // 将任务插入到队列尾部

}

改造主线程

TaskQueue taskQueue;

void processTask ();

void mainThread () {

  while (true) {

      Task task = taskQueue.fetchTask();

      processTask(task);

  }

}

IO 线程

void handleIOTask () {

  Task clickTask;

  taskQueue.addTask(clickTask);

}

Tips: 事件队列是存在多线程访问的情况，所以需要加锁。

4. 处理来自其他线程的任务

浏览器环境中，　渲染进程经常接收到来自其他进程的任务，IO 线程专门用来接收来自其他进程传递来的消息。IPC 专门处理跨进程间的通信。

5. 消息队列中的任务类型

消息队列中有很多消息类型。内部消息：如鼠标滚动、点击、移动、宏任务、微任务、文件读写、定时器等等。

消息队列中还存在大量的与页面相关的事件。如 JS 执行、DOM 解析、样式计算、布局计算、CSS 动画等等。

上述事件都是在渲染主线程中执行的，因此编码时需注意，尽量减小这些事件所占用的时长。

6. 如何安全退出

Chrome 设计上，确定要退出当前页面时，页面主线程会设置一个退出标志的变量，每次执行完1个任务时，判断该标志。如果设置了，则中断任务，退出线程

7. 单线程的缺点

事件队列的特点是先进先出，后进后出。那后进的任务也许会被前面的任务因为执行时间过长而阻塞，等待前面的任务执行完毕才可以执行后面的任务。这样存在2个问题。

• 如何处理高优先级的任务

  假如要监控 DOM 节点的变化情况（插入、删除、修改 innerHTML），然后触发对应的逻辑。最基础的做法就是设计一套监听接口，当 DOM 变化时，渲染引擎同步调用这些接口。不过这样子存在很大的问题，就是 DOM 变化会很频繁。如果每次 DOM 变化都触发对应的 JS 接口，则该任务执行会很长，导致执行效率的降低

  如果将这些 DOM 变化做为异步消息，假如消息队列中。可能会存在因为前面的任务在执行导致当前的 DOM 消息不会被执行的问题，也就是影响了监控的实时性。

  如何权衡效率和实时性？微任务 就是解决该类问题的。

  通常，我们把消息队列中的任务成为宏任务，每个宏任务中都包含一个微任务队列，在执行宏任务的过程中，假如 DOM 有变化，则该变化会被添加到该宏任务的微任务队列中去，这样子效率问题得以解决。

  当宏任务中的主要功能执行完毕欧，渲染引擎会执行微任务队列中的微任务。因此实时性问题得以解决

• 如何解决单个任务执行时间过长的问题

  

  可以看出，假如 JS 计算超时导致动画 paint 超时，会造成卡顿。浏览器为避免该问题，采用 callback 回调的设计来规避，也就是让 JS 任务延后执行。

二、 flutter 里的单线程模型

1. event loop 机制

Dart 是单线程的，也就是代码会有序执行。此外 Dart 作为 Flutter 这一 GUI 框架的开发语言，必然支持异步。

一个 Flutter 应用包含一个或多个 isolate，默认方法的执行都是在 main isolate 中；一个 isolate 包含1个 Event loop 和1个 Task queue。其中，Task queue 包含1个 Event queue 事件队列和1个 MicroTask queue 微任务队列。如下：

为什么需要异步？因为大多数场景下 应用都并不是一直在做运算。比如一边等待用户的输入，输入后再去参与运算。这就是一个 IO 的场景。所以单线程可以再等待的时候做其他事情，而当真正需要处理运算的时候，再去处理。因此虽是单线程，但是给我们的感受是同事在做很多事情（空闲的时候去做其他事情）

某个任务涉及 IO 或者异步，则主线程会先去做其他需要运算的事情，这个动作是靠 event loop 驱动的。和 JS 一样，dart 中存储事件任务的角色是事件队列 event queue。

Event queue 负责存储需要执行的任务事件，比如 DB 的读取。

Dart 中存在2个队列，一个微任务队列（Microtask Queue）、一个事件队列（Event Queue）。

Event loop 不断的轮询，先判断微任务队列是否为空，从队列头部取出需要执行的任务。如果微任务队列为空，则判断事件队列是否为空，不为空则从头部取出事件（比如键盘、IO、网络事件等），然后在主线程执行其回调函数，如下：

2. 异步任务

微任务，即在一个很短的时间内就会完成的异步任务。微任务在事件循环中优先级最高，只要微任务队列不为空，事件循环就不断执行微任务，后续的事件队列中的任务持续等待。微任务队列可由 scheduleMicroTask 创建。

通常情况，微任务的使用场景比较少。Flutter 内部也在诸如手势识别、文本输入、滚动视图、保存页面效果等需要高优执行任务的场景用到了微任务。

所以，一般需求下，异步任务我们使用优先级较低的 Event Queue。比如 IO、绘制、定时器等，都是通过事件队列驱动主线程来执行的。

Dart 为 Event Queue 的任务提供了一层封装，叫做 Future。把一个函数体放入 Future 中，就完成了同步任务到异步任务的包装（类似于 iOS 中通过 GCD 将一个任务以同步、异步提交给某个队列）。Future 具备链式调用的能力，可以在异步执行完毕后执行其他任务（函数）。

看一段具体代码：

void main() {

  print('normal task 1');

  Future(() => print('Task1 Future 1'));

  print('normal task 2');

  Future(() => print('Task1 Future 2'))

      .then((value) => print("subTask 1"))

      .then((value) => print("subTask 2"));

}

//

lbp@MBP  ~/Desktop  dart index.dart

normal task 1

normal task 2

Task1 Future 1

Task1 Future 2

subTask 1

subTask 2

main 方法内，先添加了1个普通同步任务，然后以 Future 的形式添加了1个异步任务，Dart 会将异步任务加入到事件队列中，然后理解返回。后续代码继续以同步任务的方式执行。然后再添加了1个普通同步任务。然后再以 Future 的方式添加了1个异步任务，异步任务被加入到事件队列中。此时，事件队列中存在2个异步任务，Dart 在事件队列头部取出1个任务以同步的方式执行，全部执行（先进先出）完毕后再执行后续的 then。

Future 与 then 公用1个事件循环。如果存在多个 then，则按照顺序执行。

例2:

void main() {

  Future(() => print('Task1 Future 1'));

  Future(() => print('Task1 Future 2'));



  Future(() => print('Task1 Future 3'))

      .then((_) => print('subTask 1 in Future 3'));



  Future(() => null).then((_) => print('subTask 1 in empty Future'));

}

lbp@MBP  ~/Desktop  dart index.dart

Task1 Future 1

Task1 Future 2

Task1 Future 3

subTask 1 in Future 3

subTask 1 in empty Future

main 方法内，Task 1 添加到 Future 1中，被 Dart 添加到 Event Queue 中。Task 1 添加到 Future 2中，被 Dart 添加到 Event Queue 中。Task 1 添加到 Future 3中，被 Dart 添加到 Event Queue 中，subTask 1 和 Task 1 共用 Event Queue。Future 4中任务为空，所以 then 里的代码会被加入到 Microtask Queue，以便下一轮事件循环中被执行。

综合例子

void main() {

  Future(() => print('Task1 Future 1'));

  Future fx = Future(() => null);

  Future(() => print("Task1 Future 3")).then((value) {

    print("subTask 1 Future 3");

    scheduleMicrotask(() => print("Microtask 1"));

  }).then((value) => print("subTask 3 Future 3"));



  Future(() => print("Task1 Future 4"))

      .then((value) => Future(() => print("sub subTask 1 Future 4")))

      .then((value) => print("sub subTask 2 Future 4"));



  Future(() => print("Task1 Future 5"));



  fx.then((value) => print("Task1 Future 2"));



  scheduleMicrotask(() => print("Microtask 2"));



  print("normal Task");

}

lbp@MBP  ~/Desktop  dart index.dart

normal Task

Microtask 2

Task1 Future 1

Task1 Future 2

Task1 Future 3

subTask 1 Future 3

subTask 3 Future 3

Microtask 1

Task1 Future 4

Task1 Future 5

sub subTask 1 Future 4

sub subTask 2 Future 4

解释：

• Event Loop 优先执行 main 方法同步任务，再执行微任务，最后执行 Event Queue 的异步任务。所以 normal Task 先执行
• 同理微任务 Microtask 2 执行
• 其次，Event Queue FIFO，Task1 Future 1 被执行
• fx Future 内部为空，所以 then 里的内容被加到微任务队列中去，微任务优先级最高，所以 Task1 Future 2 被执行
• 其次，Task1 Future 3 被执行。由于存在2个 then，先执行第一个 then 中的 subTask 1 Future 3，然后遇到微任务，所以 Microtask 1 被添加到微任务队列中去，等待下一次 Event Loop 到来时触发。接着执行第二个 then 中的 subTask 3 Future 3。随着下一次 Event Loop 到来，Microtask 1 被执行
• 其次，Task1 Future 4 被执行。随后的第一个 then 中的任务又是被 Future 包装成一个异步任务，被添加到 Event Queue 中，第二个 then 中的内容也被添加到 Event Queue 中。
• 接着，执行 Task1 Future 5。本次事件循环结束
• 等下一轮事件循环到来，打印队列中的 sub subTask 1 Future 4、sub subTask 1 Future 5.

3. 异步函数

异步函数的结果在将来某个时刻才返回，所以需要返回一个 Future 对象，供调用者使用。调用者根据需求，判断是在 Future 对象上注册一个 then 等 Future 执行体结束后再进行异步处理，还是同步等到 Future 执行结束。Future 对象如果需要同步等待，则需要在调用处添加 await，且 Future 所在的函数需要使用 async 关键字。

await 并不是同步等待，而是异步等待。Event Loop 会将调用体所在的函数也当作异步函数，将等待语句的上下文整体添加到 Event Queue 中，一旦返回，Event Loop 会在 Event Queue 中取出上下文代码，等待的代码继续执行。

await 阻塞的是当前上下文的后续代码执行，并不能阻塞其调用栈上层的后续代码执行

void main() {

  Future(() => print('Task1 Future 1'))

      .then((_) async => await Future(() => print("subTask 1 Future 2")))

      .then((_) => print("subTask 2 Future 2"));

  Future(() => print('Task1 Future 2'));

}

lbp@MBP  ~/Desktop  dart index.dart

Task1 Future 1

Task1 Future 2

subTask 1 Future 2

subTask 2 Future 2

解析：

• Future 中的 Task1 Future 1 被添加到 Event Queue 中。其次遇到第一个 then，then 里面是 Future 包装的异步任务，所以 Future(() => print("subTask 1 Future 2")) 被添加到 Event Queue 中，所在的 await 函数也被添加到了 Event Queue 中。第二个 then 也被添加到 Event Queue 中
• 第二个 Future 中的 'Task1 Future 2 不会被 await 阻塞，因为 await 是异步等待（添加到 Event Queue）。所以执行 'Task1 Future 2。随后执行 "subTask 1 Future 2，接着取出 await 执行 subTask 2 Future 2

4. Isolate

Dart 为了利用多核 CPU，将 CPU 层面的密集型计算进行了隔离设计，提供了多线程机制，即 Isolate。每个 Isolate 资源隔离，都有自己的 Event Loop 和 Event Queue、Microtask Queue。Isolate 之间的资源共享通过消息机制通信（和进程一样）

使用很简单，创建时需要传递一个参数。

void coding(language) {

  print("hello " + language);

}

void main() {

  Isolate.spawn(coding, "Dart");

}

lbp@MBP  ~/Desktop  dart index.dart

hello Dart

大多数情况下，不仅仅需要并发执行。可能还需要某个 Isolate 运算结束后将结果告诉主 Isolate。可以通过 Isolate 的管道（SendPort）实现消息通信。可以在主 Isolate 中将管道作为参数传递给子 Isolate，当子 Isolate 运算结束后将结果利用这个管道传递给主 Isolate

void coding(SendPort port) {

  const sum = 1 + 2;

  // 给调用方发送结果

  port.send(sum);

}



void main() {

  testIsolate();

}



testIsolate() async {

  ReceivePort receivePort = ReceivePort(); // 创建管道

  Isolate isolate = await Isolate.spawn(coding, receivePort.sendPort); // 创建 Isolate，并传递发送管道作为参数

    // 监听消息

  receivePort.listen((message) {

    print("data: $message");

    receivePort.close();

    isolate?.kill(priority: Isolate.immediate);

    isolate = null;

  });

}

lbp@MBP  ~/Desktop  dart index.dart

data: 3

此外 Flutter 中提供了执行并发计算任务的快捷方式-compute 函数。其内部对 Isolate 的创建和双向通信进行了封装。

实际上，业务开发中使用 compute 的场景很少，比如 JSON 的编解码可以用 compute。

计算阶乘：

int testCompute() async {

  return await compute(syncCalcuateFactorial, 100);

}



int syncCalcuateFactorial(upperBounds) => upperBounds < 2

    ? upperBounds

    : upperBounds * syncCalcuateFactorial(upperBounds - 1);

总结：

• Dart 是单线程的，但通过事件循环可以实现异步
• Future 是异步任务的封装，借助于 await 与 async，我们可以通过事件循环实现非阻塞的同步等待
• Isolate 是 Dart 中的多线程，可以实现并发，有自己的事件循环与 Queue，独占资源。Isolate 之间可以通过消息机制进行单向通信，这些传递的消息通过对方的事件循环驱动对方进行异步处理。
• flutter 提供了 CPU 密集运算的 compute 方法，内部封装了 Isolate 和 Isolate 之间的通信
• 事件队列、事件循环的概念在 GUI 系统中非常重要，几乎在前端、Flutter、iOS、Android 甚至是 NodeJS 中都存在。

JavaScript有2种类型：基本类型（string, booleans number, symbol）和对象。

对象是复杂的数据结构，JS 中最简单的对象是普通对象：一组键和关联值：

let myObject = {

  name: '前端小智'

}

但是在某些情况下无法创建对象。 在这种情况下，JS 提供一个特殊值null —表示缺少对象。

let myObject = null

在本文中，我们将了解到有关JavaScript中null的所有知识：它的含义，如何检测它，null与undefined之间的区别以及为什么使用null造成代码维护困难。

1. null的概念

JS 规范说明了有关null的信息：

值 null 特指对象的值未设置，它是 JS 基本类型 之一，在布尔运算中被认为是falsy。

例如，函数greetObject()创建对象，但是在无法创建对象时也可以返回null：

function greetObject(who) {

  if (!who) {

    return null;

  }

  return { message: `Hello, ${who}!` };

}



greetObject('Eric'); // => { message: 'Hello, Eric!' }

greetObject();       // => null

但是，在不带参数的情况下调用函数greetObject() 时，该函数返回null。 返回null是合理的，因为who参数没有值。

2. 如何检查null

检查null值的好方法是使用严格相等运算符：

const missingObject = null;

const existingObject = { message: 'Hello!' };



missingObject  === null; // => true

existingObject === null; // => false

missingObject === null的结果为true，因为missingObject变量包含一个null 值。

如果变量包含非空值（例如对象），则表达式existObject === null的计算结果为false。

2.1 null 是虚值

null与false、0、''、undefined、NaN都是虚值。如果在条件语句中遇到虚值，那么 JS 将把虚值强制为false。

Boolean(null); // => false



if (null) {

  console.log('null is truthy')

} else {

  console.log('null is falsy')

}

2.2 typeof null

typeof value运算符确定值的类型。 例如，typeof 15是'number'，typeof {prop：'Value'}的计算结果是'object'。

有趣的是，type null的结果是什么

typeof null; // => 'object'

为什么是'object'，typoef null为object是早期 JS 实现中的一个错误。

要使用typeof运算符检测null值。 如前所述，使用严格等于运算符myVar === null。

如果我们想使用typeof运算符检查变量是否是对象，还需要排除null值：

function isObject(object) {

  return typeof object === 'object' && object !== null;

}



isObject({ prop: 'Value' }); // => true

isObject(15);                // => false

isObject(null);              // => false

3. null 的陷阱

null经常会在我们认为该变量是对象的情况下意外出现。然后，如果从null中提取属性，JS 会抛出一个错误。

再次使用greetObject() 函数，并尝试从返回的对象访问message属性：

let who = '';



greetObject(who).message; 

// throws "TypeError: greetObject() is null"

因为who变量是一个空字符串，所以该函数返回null。 从null访问message属性时，将引发TypeError错误。

可以通过使用带有空值合并的可选链接来处理null:

let who = ''



greetObject(who)?.message ?? 'Hello, Stranger!'

// => 'Hello, Stranger!'

4. null 的替代方法

当无法构造对象时，我们通常的做法是返回null，但是这种做法有缺点。在执行堆栈中出现null时，刚必须进行检查。

尝试避免返回 null 的做法：

• 返回默认对象而不是null
• 抛出错误而不是返回null

回到开始返回greeting对象的greetObject()函数。缺少参数时，可以返回一个默认对象，而不是返回null：

function greetObject(who) {

  if (!who) {

    who = 'Stranger';

  }

  return { message: `Hello, ${who}!` };

}



greetObject('Eric'); // => { message: 'Hello, Eric!' }

greetObject();       // => { message: 'Hello, Stranger!' }

或者抛出一个错误：

function greetObject(who) {

  if (!who) {

    throw new Error('"who" argument is missing');

  }

  return { message: `Hello, ${who}!` };

}



greetObject('Eric'); // => { message: 'Hello, Eric!' }

greetObject();       // => throws an error

这两种做法可以避免使用 null。

5. null vs undefined

undefined是未初始化的变量或对象属性的值，undefined是未初始化的变量或对象属性的值。

let myVariable;



myVariable; // => undefined

null和undefined之间的主要区别是，null表示丢失的对象，而undefined表示未初始化的状态。

严格的相等运算符===区分null和undefined :

null === undefined // => false

而双等运算符==则认为null和undefined 相等

null == undefined // => true

我使用双等相等运算符检查变量是否为null 或undefined:

function isEmpty(value) {

  return value == null;

}



isEmpty(42);                // => false

isEmpty({ prop: 'Value' }); // => false

isEmpty(null);              // => true

isEmpty(undefined);         // => true

6. 总结

null是JavaScript中的一个特殊值，表示丢失的对象，严格相等运算符确定变量是否为空:variable === null。

typoef运算符对于确定变量的类型（number, string, boolean）很有用。 但是，如果为null，则typeof会产生误导：typeof null的值为'object'。

null和undefined在某种程度上是等价的，但null表示缺少对象，而undefined未初始化状态。

原文：https://segmentfault.com/a/1190000040222768

在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多：

• Animation Principles for the Web
• [[译文]网页动画的十二原则](https://cssanimation.rocks/cn...

其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。

Squash and stretch -- 挤压和拉伸

挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。

应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。

看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。

原理动画如下：

类似的一些比较有意思的 Web 动画 DEMO：

CodePen Demo -- CSS Flippy Loader 🍳 By Jhey点击预览

仔细看上面这个 Loading 动画，每个块在跳起之前都会有一个压缩准备动作，在压缩的过程中高度变低，宽度变宽，这就是挤压和拉伸，让动画看上去更加真实。

OK，再看两个类似的效果，加深下印象：

CodePen Demo -- CSS Loading Animation点击预览

CodePen Demo -- CSS Animation Loader - Jelly Box点击预览

简单总结一下，挤压和拉伸的核心在于保持对象的体积一致，当拉伸元素时，它的宽度需要变薄，而当挤压元素时，它的宽度需要变宽。

Anticipation -- 预备动作

准备动作用于为主要的动画动作做好准备，并使动作看起来更逼真。

譬如从地板上跳下来的舞者必须先弯曲膝盖，挥杆的高尔夫球手必须先将球杆向后挥动。

原理动画如下，能够看到滚动之前的一些准备动作：

看看一些实际应用的chang场景，下面这个动画效果：

CodePen Demo -- Never-ending box By Pawel点击预览

小球向上滚动，但是仔细看的话，每次向上滚动的时候都会先向后摆一下，可以理解为是一个蓄力动作，也就是我们说的准备动作。

类似的，看看这个购物车动画，运用了非常多的小技巧，其中之一就是，车在向前冲之前会后退一点点进行一个蓄力动作，整个动画的感觉明显就不一样，它让动画看起来更加的自然：

Staging -- 演出布局

Staging 意为演出布局，它的目的是引导观众的注意力，并明确一个场景中什么是最重要的。

可以通过多种方式来完成，例如在画面中放置角色、使用光影，或相机的角度和位置。该原则的本质是关注核心内容，避免其他不必要的细节吸引走用户的注意力。

原理动画如下：

上述 Gif 原理图效果不太明显，看看示例效果：

CodePen Demo -- CSS Loading Animation点击预览

该技巧的核心就是在动画的过程中把主体凸显，把非主体元素通过模糊、变淡等方式弱化其效果，降低用户在其之上的注意力。

Straight-Ahead Action and Pose-to-Pose -- 连续运动和姿态对应

其实表示的就是逐帧动画和补间动画：

• FrameAnimation（逐帧动画）：将多张图片组合起来进行播放，可以利用 CSS Aniation 的 Steps，画面由一帧一帧构成，类似于漫画书
• TweenAnimation（补间动画）：补间动画是在时间帧上进行关键帧绘制，不同于逐帧动画的每一帧都是关键帧，补间动画可以在一个关键帧上绘制一个基础形状，然后在时间帧上对另一个关键帧进行形状转变或绘制另一个形状等，然后中间的动画过程是由计算机自动生成。

这个应该是属于最基础的了，在不同场景下有不同的妙用。我们在用 CSS 实现动画的过程中，使用的比较多的应该是补间动画，逐帧动画也很有意思，譬如设计师设计好的复杂动画，利用多张图片拼接成逐帧动画也非常不错。

逐帧动画和补间动画适用在不同的场合，没有谁更好，只有谁更合适，比较下面两个时钟动画，其中一个的秒针运用的是逐帧动画，另外一个则是补间动画：

• 时钟秒针运用的是逐帧动画：

CodePen Demo -- CSS3 Working Clock By Ilia点击预览

• 时钟秒针运用的是补间动画：

CodePen Demo -- CSS Rotary Clock By Jake Albaugh点击预览

有的时候一些复杂动画无法使用 CSS 直接实现的，也会利用逐帧的效果近似实现一个补间动画，像是苹果这个耳机动画，就是实际逐帧动画，但是看起来是连续的：

CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen点击预览

这里其实是多张图片的快速轮播，每张图片表示一个关键帧。

Follow through and overlapping action 跟随和重叠动作

跟随和重叠动作是两种密切相关的技术的总称，它们有助于更真实地渲染运动，并有助于给人一种印象，即运动的元素遵循物理定律，包括惯性原理。

• 跟随意味着在角色停止后，身体松散连接的部分应该继续移动，并且这些部分应该继续移动到角色停止的点之外，然后才被拉回到重心或表现出不同的程度的振荡阻尼；
• 重叠动作是元素各部分以不同速率移动的趋势（手臂将在头部的不同时间移动等等）；
• 第三种相关技术是拖动，元素开始移动，其中一部分需要几帧才能追上。

要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。

原理示意图：

看看下面这个购物车动画，仔细看购物车，在移动到停止的过程中，有个很明显的刹车再拉回的感觉，这里运用到了跟随的效果，让动画更加生动真实：

Slow In and Slow Out -- 缓入缓出

现实世界中物体的运动，如人体、动物、车辆等，需要时间来加速和减速。

真实的运动效果，它的缓动函数一定不是 Linear。出于这个原因，运动往往是逐步加速并在停止前变慢，实现一个慢进和慢出的效果，以贴近更逼真的动作。

示意图：

这个还是很好理解的。真实世界中，很少有缓动函数是 Linear 的运动。

Arc -- 弧线运动

大多数自然动作倾向于遵循一个拱形轨迹，动画应该遵循这个原则，遵循隐含的弧形以获得更大的真实感。

原理示意图：

嗯哼，在很多动画中，使用弧线代替直线，能够让动画效果更佳的逼真。看看下面这个烟花粒子动画：

CodePen Demo -- Particles, humankind's only weakness By Rik Schennink点击预览

整个烟花粒子动画看上去非常的自然，因为每个粒子的下落都遵循了自由落体的规律，它们的运动轨迹都是弧线而不是直线。

Secondary Action -- 次要动作

将次要动作添加到主要动作可以使场景更加生动，并有助于支持主要动作。走路的人可以同时摆动手臂或将手臂放在口袋里，说话或吹口哨，或者通过面部表情来表达情绪。

原理示意图：

简单的一个应用实例，看看下面这个动画：

CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram点击预览

这里实现了一个潜艇向前游动的画面，动画本身还有很多可以优化的地方。但也有一些值得学习肯定的地方，动画使用了尾浆转动和气泡和海底景物移动。

同时，值得注意的是，窗口的反光也是一个很小的细节，表示船体在移动，这个就属于一个次要动作，衬托出主体的移动。

再看看下面这打印动画，键盘上按键的上上下下模拟了点击效果，其实也是个次要动作，衬托主体动画效果：

![Secondary Action - CodePen Home
CSS Typewriter](https://p3-juejin.byteimg.com...

CodePen Demo -- CSS Typewriter By Aaron Iker点击预览

Timing -- 时间节奏

时间是指给定动作的绘图或帧数，它转化为动画动作的速度。

在纯粹的物理层面上，正确的计时会使物体看起来遵守物理定律。例如，物体的重量决定了它对推动力的反应，因为重量轻的物体会比重量大的物体反应更快。

同一个动画，使用不同的速率展示，其效果往往相差很多。对于 Web 动画而言，可能只需要调整 animation-duration 或 transition-duration 的值。

原理示意图：

可以看出，同个动画，不同的缓动函数，或者赋予不同的时间，就能产生很不一样的效果。

当然，时间节奏可以运用在很多地方，譬如在一些 Loading 动画中：

CodePen Demo -- Only Css 3D Cube By Hisami Kurita点击预览

又或者是这样，同个动画，不同的速率：

CodePen Demo -- Rotating Circles Preloader点击预览

也可以是同样的延迟、同样的速率，但是不同的方向：

CodePen Demo -- 2020 SVG Animation By @keyframers点击预览

Exaggeration -- 夸张手法

夸张是一种对动画特别有用的效果，因为力求完美模仿现实的动画动作可能看起来是静态和沉闷的。

使用夸张时，一定程度的克制很重要。如果一个场景包含多个元素，则应平衡这些元素之间的关系，以避免混淆或吓倒观众。

原理示意图：

OK，不同程度的展现对效果的感官是不一样的，对比下面两个故障艺术动画：

轻微晃动故障：

严重晃动故障：

CodePen Demo -- Glitch Animation点击预览

可以看出，第二个动画明显能感受到比第一个更严重的故障。

过多的现实主义会毁掉动画，或者说让它缺乏吸引力，使其显得静态和乏味。相反，为元素对象添加一些夸张，使它们更具活力，能够让它们更吸引眼球。

Solid drawing -- 扎实的描绘

这个原则表示我们的动画需要尊重真实性，譬如一个 3D 立体绘图，就需要考虑元素在三维空间中的形式。

了解掌握三维形状、解剖学、重量、平衡、光影等的基础知识。有助于我们绘制出更为逼真的动画效果。

原理示意图：

再再看看下面这个动画，名为 Close the blinds -- 关上百叶窗：

CodePen Demo -- Close the blinds By Chance Squires点击预览

hover 的时候有一个关上动画，使用多块 div 模拟了百叶窗的落下，同时配合了背景色从明亮到黑暗的过程，很好的利用了色彩光影辅助动画的展示。

再看看这个摆锤小动画，也是非常好的使用了光影、视角元素：

CodePen Demo -- The Three-Body Problem By Vian Esterhuizen点击预览

最后这个 Demo，虽然是使用 CSS 实现的，但是也尽可能的还原模拟了现实中纸张飞舞的形态，并且对纸张下方阴影的变化也做了一定的变化：

CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers点击预览

好的动画，细节是经得起推敲的。

Appeal -- 吸引力

一反往常，精美的细节往往能非常好的吸引用户的注意力。

吸引力是艺术作品的特质，而如何实现有吸引力的作品则需要不断的尝试。

原理示意图：

我觉得这一点可能是 Web 动画的核心，一个能够吸引人的动画，它肯定是有某些特质的，让我们一起来欣赏下。

CodePen Demo -- Download interaction By Milan Raring点击预览

通过一连串的动作，动画展开、箭头移动、进度条填满、数字变化，把一个下载动画展示的非常 Nice，让人在等待的过程并不觉得枯燥。

再来看看这个视频播放的效果：

CodePen Demo -- Video button animation - Only CSS点击预览

通过一个遮罩 hover 放大，再到点击全屏的变化，一下子就将用户的注意力给吸引了过来。

Web 动画的一些常见误区

当然，上述的一些技巧源自于迪士尼动画原则，我们可以将其中的一些思想贯穿于我们的 Web 动画的设计之中。

但是，必须指出的是，Web 动画本身在使用的时候，也有一些原则是我们需要注意的。主要有下面几点：

• 增强动画与页面元素之间的关联性
• 不要为了动画而动画，要有目的性
• 动画不要过于缓慢，否则会阻碍交互

增强动画与页面元素之间的关联性

这个是一个常见的问题，经常会看到一些动画与主体之间没有关联性。关联性背后的逻辑，能帮助用户在界面布局中理解刚发生的变化，是什么导致了变化。

好的动画可以做到将页面的多个环节或者场景有效串联。

比较下面两个动画，第二个就比第一个更有关联性：

没有强关联性的：

有关联性的：

很明显，第二个动画比第一个动画更能让用户了解页面发生的变化。

不要为了动画而动画，要有目的性

这一点也很重要，不要为了动画而动画，要有目的性，很多时候很多页面的动画非常莫名其妙。

emm，简单一点来说就是单纯的为了炫技而存在的动画。这种动画可以存在于你的 Demo，你的个人网站中，但不太适合用于线上业务页面中。

使用动画应该有明确的目的性，譬如 Loading 动画能够让用户感知到页面正在发生变化，正在加载内容。

在我们的交互过程中，适当的增加过渡与动画，能够很好的让用户感知到页面的变化。类似的还有一些滚动动画。丝滑的滚动切换比突兀的内容明显是更好的体验。

动画不要过于缓慢，否则会阻碍交互

缓慢的动画，它产生了不必要的停顿。

一些用户会频繁看到它们的过渡动画，尽可能的保持简短。让动画持续时间保持在 300ms 或更短。

比较下面两个动画，第一次可能会让用户耳目一新，但是如果用户在浏览过程中频繁出现通过操作，过长的转场动画会消耗用户大量不必要的时间：

过长的转场动画：

缩短转场动画时间，保持恰当的时长：

结合产品及业务的创意交互动画

这一点是比较有意思的。我个人认为，Web 动画做得好用的妙，是能非常好的提升用户体验，提升品牌价值的。

结合产品及业务的创意动画，是需要挖掘，不断打磨的不断迭代的。譬如大家津津乐道的 BiliBili 官网，它的顶部 Banner，配合一些节日、活动，经常就会有出现一些有意思的创意交互动画。简单看两个：

以及这个：

我非常多次在不同地方看到有人讨论 Bilibili 的顶部 banner 动画，可见它这块的动画是成功的。很好的结合了一些节日、实事、热点，当成了一种比较固定的产品去不断推陈出新，在不同时候给与用户不同的体验。

考虑动画的性价比

最后一条，就是动画虽好，但是打磨一个精品动画是非常耗时的，尤其是在现在非常多的产品业务都是处于一种敏捷开发迭代之下。

一个好的 Web 动画从构思到落地，绝非前端一个人的工作，需要产品、设计、前端等等相关人员公共努力， 不断修改才能最终呈现比较好的效果。所以在项目初期，一定需要考虑好性价比，是否真的值得为了一个 Web 动画花费几天时间呢？当然这是一个非常见仁见智的问题。

参考文章

• 原理图来源 -- Understand Disney's 12 principles of animation
• Animation Principles for the Web
• [[译文]网页动画的十二原则](https://cssanimation.rocks/cn...
• Twelve basic principles of animation
• 功能性动画设计：优秀的转场效果

最后

想使用 Web 技术绘制生动有趣的动画并非易事，尤其在现在国内的大环境下，鲜有人会去研究动画原则，并运用于实践生产之中。但是它本身确实是个非常有意思有技术的事情。希望本文能给大伙对 Web 动画的认知带来一些提升和帮助，在后续的工作中多少运用一些。

原文：https://segmentfault.com/a/1190000040223372