序言

提示信息（tooltip）是一种常见的 GUI 元素。在可视化领域，tooltip 通常指用户将鼠标悬停在图元上或者图表区域时弹出的明细数据信息框。如果是桌面环境，通常会在用户将指针悬停在元素上而不单击它时显示 tooltip；如果是移动环境，通常会在长按（即点击并按住）元素时显示 tooltip。

这样一个小小的组件，却可以十分有效地丰富图表的数据展现能力和图表交互效果，同时在实际业务领域的用途也非常广泛。

近些年来，业界主要图表库（如ECharts、G2等）都提供了 tooltip 的配置能力和默认渲染能力，以达到开箱即用的效果。VChart 更不例外，提供了更加灵活的 tooltip 展示与配置方案。

通过使用 VChart，你既可以显示图表中任何系列的图元所携带的数据信息（mark tooltip）：

也可以显示某个特定维度项下的所有图元的数据信息（dimension tooltip）：

乃至可以灵活地自定义 tooltip，甚至在其中插入子图表，拓展交互的边界：

本文将通过一些实战案例，详细讲述 VChart 提示信息的重点用法、自定义方式以及设计细节。

示例一：可触及的 tooltip，与 Amazon 的安全三角形

为了不对用户的鼠标交互进行干扰，VChart 的 tooltip 默认不会响应鼠标事件。但是在某些情况，用户却希望鼠标可以移到 tooltip 中进行一些额外的交互行为，比如点击 tooltip 中的按钮和链接，或者选取并复制一些数据。

为了满足这类需求，tooltip 支持在 spec 中配置 enterable 属性。如果不配置或者配置 enterable: false，默认效果是这样的，鼠标无法移到 tooltip 元素内：

而如果配置 enterable: true，效果如以下截图所示：

图表简化版 spec 为：

const spec = {

  type: 'waterfall',

  data: [], // 数据略

  legends: { visible: true, orient: 'bottom' },

  xField: 'x',

  yField: 'y',

  seriesField: 'type',

  total: {

    type: 'field',

    tagField: 'total'

  },

  title: {

    visible: true,

    text: 'Chinese quarterly GDP in 2022'

  },

  tooltip: {

    enterable: true // TOOLTIP SPEC

  }

};



const vchart = new VChart(spec, { dom: CONTAINER_ID });

vchart.renderSync();

简单对比两个 tooltip 的效果，可以发现后者在鼠标靠近 tooltip 时，tooltip 便适时地停住了。

这个小小的交互细节里却有些文章，灵感来源直接来自 Amazon 的官网实现。

这个例子也许已经为人熟知，我们简单回顾一下。这首先要从普通网站的下拉菜单开始讲起：

在一个设计欠佳的菜单组件里（如 bootstrap），鼠标从一级菜单移入二级菜单往往是很困难的，很容易触发二级菜单的隐藏策略，从而变成一场无聊的打地鼠游戏。

但是 Amazon 早期官网的菜单，由于用户使用频率高，根本无法接受这样的体验。于是他们完美地解决了这个问题，并成为一个交互优化的经典案例。

其思路的核心，便是检测鼠标移动的方向。如果鼠标移动到下图的蓝色三角形中，当前显示的子菜单将继续打开一小会儿：

在鼠标的每个位置，你可以想象鼠标当前位置与下拉菜单的右上角和右下角之间形成一个三角形。如果下一个鼠标位置在该三角形中，说明用户可能正在将鼠标移向当前显示的子菜单。Amazon 利用这一点实现了很好的效果。只要鼠标停留在该蓝色三角形中，当前子菜单就会保持打开。如果鼠标移出该三角形，他们会立即切换子菜单，使其感觉非常敏捷。

整体效果类似于下图所示：

正所谓，上帝在细节中（God is in the details）。从这个交互优化里，我们看到的不仅是一个精妙的算法，而是一个科技巨头对于产品和用户体验的态度。Amazon 的数百亿市值有多少是从这些很小很小，但是明显很用心的产品细节中积累起来的呢？

VChart 的 tooltip 也一样，着重参考了 Amazon 的交互优化。如果配置 enterable: true，在每个时刻，都会存在一个这样的“安全三角形”，三个顶点分别是鼠标光标以及 tooltip 的两个端点，取面积最大的三角形：

如果鼠标在下一刻滑到这个三角形区域中， tooltip 便为鼠标“停留一会儿”，直到鼠标移到 tooltip 区域内。

但是在鼠标移到 tooltip 区域之前，tooltip 并不会永远停下来等待鼠标。如果鼠标过于缓慢地靠近 tooltip，tooltip 还是会离开的（变成一场失败、却又在意料之中的奔赴）。这样便可以同时保证用户鼠标有足够的行动自由度。以下示例特地将鼠标移动速度放慢，便可以实现既进入三角形区域，又不会被 tooltip “挡路”：

作为对比，ECharts 的 tooltip 虽然同样支持 enterable 属性，但是 ECharts 主要通过简单的 tooltip 缓动来支持鼠标移入，鼠标仍需要不停地“追逐” tooltip 才能移至其中，灵活性便打了折扣。以下为 ECharts 的效果：

示例二：灵活的 pattern，内容与样式的自由配置

为了尽最大可能满足更多业务方的需求，VChart 的 tooltip 支持比较灵活的内容和样式配置。下文将以官网 demo（http://www.visactor.io/vchart/demo…

在这个图表中，用户配置了一条 y=10000 的标注线。同时要求在 dimension tooltip 中实现：

• 数据项从大到小排序；


• 比标注线高的数据项标红（条件格式）；


• 在 tooltip 内容的最后一行加上标注线所代表的数据。

同时，这个 tooltip 的位置还拥有以下特征：

• dimension tooltip 的位置固定在光标上方；


• mark tooltip 的位置固定在数据项下方。

如以下动图所示：

这个示例实际上代表了很多不同类型的业务需求。下面拆解来看一下：

基本 tooltip 内容配置

首先，剥去自定义内容和样式的部分，这个图表的最简 spec 和基本 tooltip 配置如下：

const markLineValue = 10000;

const spec = {

  type: 'line',

  data: {

    values: [

      { type: 'Nail polish', country: 'Africa', value: 4229 },

      // 其他数据略

    ]

  },

  stack: false,

  xField: 'type',

  yField: 'value',

  seriesField: 'country',

  legends: [{ visible: true, position: 'middle', orient: 'bottom' }],

  markLine: [

    {

      y: markLineValue,

      endSymbol: { visible: false },

      line: { style: { /* 样式配置略 */ }}

    }

  ],

  tooltip: { // TOOLTIP SPEC

    mark: {

      title: {

        value: datum => datum.type

      },

      content: [

        {

          key: datum => datum.country,

          value: datum => datum.value

        }

      ]

    },

    dimension: {

      title: {

        value: datum => datum.type

      },

      content: [

        {

          key: datum => datum.country,

          value: datum => datum.value

        }

      ]

    }

  }

};



const vchart = new VChart(spec, { dom: CONTAINER_ID });

vchart.renderSync();

显示效果如下：

观察 spec 不难发现，mark tooltip 和 dimension tooltip 分别用回调方式配置了 tooltip 的显示内容。其中：

• title.value 显示的是数据项中对应于 xField 的内容；


• content.key 显示的是数据项中对应于 seriesField（也是区分出图例项的 field）的内容；


• content.value 显示的是数据项中对应于 yField 的内容。

回调是 tooltip 内容的基本配置方式，用户可以在 title 和 content 中自由配置回调函数来实现数据绑定和字符串的格式化。

Tooltip 内容的排序、增删、条件格式

我们再来看一下 dimension tooltip 的 spec：

{

  tooltip: { // TOOLTIP SPEC

    mark: { /* ...略 */ },

    dimension: {

      title: {

        value: datum => datum.type

      },

      content: [

        {

          key: datum => datum.country,

          value: datum => datum.value

        }

      ]

    }

  }

}

不难发现，content 配置的数组只包含 1 个对象，但是上图显示出来却有 4 行内容。为什么呢？

其实在 dimension tooltip 中发生了和折线图元类似的 data join 过程：由于在数据中，seriesField 划分出了 4 个数据组（图例项有 4 个），因此在经过笛卡尔积后，真实 tooltip 内容行数为 content 数组成员数量乘以 4。在数据组装过程中，每个数据组都要依次走一遍 content 数组成员里的回调。

我们把 spec 中的 tooltip 内容配置称为 TooltipPattern，tooltip 所需数据称为 TooltipData，最终的 tooltip 结构称为 TooltipActual。数据组装过程可以表示为：

$MakeTooltip(TooltipPattern, TooltipData) = TooltipActual$

在本例中，经过这个过程，TooltipPattern 中的回调在 TooltipActual 中消失（回调已被执行 4 次），且由 1 行变成了 4 行。

这个过程完整的执行流程如下：

那么回到示例中的用户需求，用户希望将 tooltip 内容行由大到小排序。那么这个步骤自然要在 TooltipActual 生成之后执行，也就是上图中的 “updateTooltipContent” 过程。

Tooltip spec 中支持配置 updateContent 回调来对 TooltipActual 的 content 部分进行操作。排序可以这样写：

{

  tooltip: { // TOOLTIP SPEC

    mark: { /* ...略 */ },

    dimension: {

      title: {

        value: datum => datum.type

      },

      content: [

        {

          key: datum => datum.country,

          value: datum => datum.value

        }

      ],

      updateContent: prev => {

        // 排序

        prev.sort((a, b) => b.value - a.value);

      }

    }

  }

}

updateContent 回调的第一个参数为已经计算好的 TooltipActual。加上回调以后，排序生效：

在 tooltip 中实现条件格式以及新增一行也是一样的方法，可以直接在 updateContent 回调中处理：

{

  updateContent: prev => {

    // 排序

    prev.sort((a, b) => b.value - a.value);

    // 条件格式：比标注线高的数据项标红

    prev.forEach(item => {

      if (item.value >= markLineValue) {

        item.valueStyle = {

          fill: 'red'

        };

      }

    });

    // 新增一行

    prev.push({

      key: 'Mark Line',

      value: markLineValue,

      keyStyle: { fill: 'orange' },

      valueStyle: { fill: 'orange' },

      // 自定义 shape 的 svg path

      shapeType: 'M44.3,22.1H25.6V3.3h18.8V22.1z M76.8,3.3H58v18.8h18.8V3.3z M99.8,3.3h-9.4v18.8h9.4V3.3z M12.9,3.3H3.5v18.8h9.4V3.3z',

      shapeColor: 'orange',

      hasShape: true

    });

  }

}

调试 spec，回调生效，最后效果如下：

Tooltip 样式和位置

VChart tooltip 支持将 tooltip 固定于某图元附近或者鼠标光标附近。在本例中，mark tooltip 固定于图元的下方，而 dimension tooltip 固定于鼠标光标的上方，可以这样配置：

{

  tooltip: { // TOOLTIP SPEC

    mark: {

      // 其他配置略

      position: 'bottom' // 显示在下方

      positionAt: 'mark' // 固定在图元附近，由于这是默认值，这行可以删掉

    },

    dimension: {

      // 其他配置略

      position: 'top', // 显示在上方

      positionAt: 'pointer' // 固定在鼠标光标附近

    }

  }

}

而样式配置可以在 tooltip spec 上的 style 配置项下进行自定义。style 支持配置 tooltip 组件各个组成部分的统一样式，详细配置项可参考官网文档（http://www.visactor.io/vchart/opti…

最后效果如下，完整 spec 可见官网 demo（http://www.visactor.io/vchart/demo…

示例三：锦上添花，可按需修改的 tooltip dom 树

VChart 的 tooltip 共支持两种渲染模式：

• Dom 渲染，适用于桌面或移动端浏览器环境；


• Canvas 渲染，适用于移动端小程序、node 环境等非浏览器环境。

对于 dom 版本的 tooltip，为了更好的支持业务方的自定义需求，VChart 开放了对 tooltip dom 树的修改接口。下文将以官网 demo（http://www.visactor.io/vchart/demo…

在这个示例中，用户要求在 tooltip 的底部增加一个超链接，用户点击链接后，便可以自动跳转到 Google，对 tooltip 标题进行进一步搜索。这个示例要求两个能力：

• 示例一介绍的 enterable 能力，开启后鼠标会被允许滑入 tooltip 区域，这是在 tooltip 中实现交互的前提；


• 在默认 tooltip 上绘制自定义的 dom 元素。

为了实现第二个能力，tooltip 支持了回调 updateElement，这个回调配在 tooltip spec 顶层。这个示例的 tooltip 配置如下：

{

  tooltip: { // TOOLTIP SPEC

    enterable: true,

    updateElement: (el, actualTooltip, params) => {

      // 自定义元素只加在 dimension tooltip 上

      if (actualTooltip.activeType === 'dimension') {

        const { changePositionOnly, dimensionInfo } = params;

        // 判断本次 tooltip 显示是否仅改变了位置，如果是的话退出

        if (changePositionOnly) { return; }

        // 改变默认 tooltip dom 的宽高策略

        el.style.width = 'auto';

        el.style.height = 'auto';

        el.style.minHeight = 'auto';

        el.getElementsByClassName('value-box')[0].style.flex = '1';

        for (const valueLabel of el.getElementsByClassName('value')) {

          valueLabel.style.maxWidth = 'none';

        }

        // 删除上次执行回调添加的自定义元素

        if (el.lastElementChild?.id === 'button-container') {

          el.lastElementChild.remove();

        }

        // 添加新的自定义元素

        const div = document.createElement('div');

        div.id = 'button-container';

        div.style.margin = '10px -10px 0px';

        div.style.padding = '10px 0px 0px';

        div.style.borderTop = '1px solid #cccccc';

        div.style.textAlign = 'center';

        div.innerHTML = `href="https://www.google.com/search?q=${dimensionInfo[0]?.value}"

          style="text-decoration: none"

          target="_blank"

        >Search with Google`;

        el.appendChild(div);

      } else {

        // 对于 mark tooltip，删除上次执行回调添加的自定义元素

        if (el.lastElementChild?.id === 'button-container') {

          el.lastElementChild.remove();

        }

      }

    }

  }

}

updateElement在每次 tooltip 被激活或者更新时触发，在触发时，TooltipActual 已经计算完毕，且 dom 节点也已经准备好。回调的第一个参数便是本次将要显示的 tooltip dom 根节点。目前不支持替换该节点，只支持对该节点以及其孩子进行修改。

这个配置的设计最大限度地复用了 VChart tooltip 的内置逻辑，同时提供了足够自由的自定义功能。你可以随心所欲地定制 tooltip 显示内容，并且复用任何你没有覆盖的逻辑。

比如，你可以对 tooltip 的大小进行重新定义，而不用关心窗口边界的躲避策略是否会出问题。事实上 VChart 会自动把 tooltip 定位逻辑复用在修改过的 dom 上：

这个回调还可以进一步封装，比如在 react-vchart 中将用户侧的 react 组件插入 tooltip。目前这个封装主要由业务侧自主进行，后续 VChart 也有计划提供官方支持。

示例四：完全自定义，由业务托管 tooltip 渲染

若要更进一步，VChart tooltip 最高级别的自定义，便是让 VChart 完全将 tooltip 渲染交给用户。有以下两种方式可以选择：

• 用户自定义 tooltip handler


• 用户使默认 tooltip 失效，监听 tooltip 事件

再结合示例二、示例三的铺垫，便可以带出整个 tooltip 模块的设计架构。熟悉了架构便更容易了解每条渲染路径以及各个层级的关系。

由上图可见，示例三对应的是 “Custom DOM Render” 的自定义，示例二对应了 “Custom TooltipActual” 部分的自定义。而示例四，便是对应整个 “Tooltip Events” 以及 “Custom TooltipHandler” 的自定义。

由于上图中，“Tooltip Events” 和 “Custom TooltipHandler” 纵跨了多个层级，因此它覆盖的默认逻辑是最多的，体现在：

• 当给图表设置了自定义 tooltip handler 后，内置的 tooltip 将不再起作用。


• VChart 不感知、不托管自定义 tooltip 的渲染，需要自行实现 tooltip 渲染，包括处理原始数据、tooltip 内容设计，以及根据项目环境创建组件并设置样式。


• 当图表删除时会调用当前 tooltip handler 的release函数，需要自行实现删除。

目前，火山引擎 DataWind 正是使用自定义 tooltip handler 的方式实现了自己的图表 tooltip。DataWind 支持用户对tooltip 进行富文本渲染，甚至支持了 tooltip 内渲染图表的能力。

另外，也可以参考官网示例（http://www.visactor.io/vchart/demo…

自定义 tooltip handler 的核心是调用 VChart 实例方法 setTooltipHandler，部分示例代码如下：

vchart.setTooltipHandler({

  showTooltip: (activeType, tooltipData, params) => {

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

    tooltip.style.left = params.event.x + 'px';

    tooltip.style.top = params.event.y + 'px';

    let data = [];

    if (activeType === 'dimension') {

      data = tooltipData[0]?.data[0]?.datum ?? [];

    } else if (activeType === 'mark') {

      data = tooltipData[0]?.datum ?? [];

    }

    tooltipChart.updateData(

      'tooltipData',

      data.map(({ type, value, month }) => ({ type, value, month }))

    );

    tooltip.style.visibility = 'visible';

  },

  hideTooltip: () => {

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

    tooltip.style.visibility = 'hidden';

  },

  release: () => {

    tooltipChart.release();

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

    tooltip.remove();

  }

});

其他特性一览

VChart tooltip 包含一些其他的高级特性，下文将简要介绍。

在任意轴上触发 dimension tooltip

Dimension tooltip 一般最适合用于离散轴，ECharts 同时支持连续轴上的 dimension tooltip（axis tooltip）。而 VChart 支持了在连续轴、时间轴乃至在一个图表中的任意一个轴上触发 dimension tooltip。

以下示例展示了 dimension tooltip 在连续轴（时间轴）上汇总离散数据的能力（这个 case 和一般的 dimension tooltip 刚好相反）：

一般的 dimension tooltip 会在离散轴（纵轴）触发 tooltip，汇总连续数据（对应于时间轴）。而 VChart 同时支持这两种方式的 tooltip。

Demo 地址：http://www.visactor.io/vchart/demo…

长内容支持：换行和局部滚动

过长的内容在 tooltip 上一般是 bad case。但是为了使长内容的浏览体验更好，VChart tooltip 可以配置多行文本以及内容区域局部滚动。如以下示例：

局部滚动 Demo 地址：http://www.visactor.io/vchart/demo…

多行文本配置项：http://www.visactor.io/vchart/opti…

结语

Tooltip 在提升用户浏览图表的体验中扮演着重要的角色。本文介绍了 VChart tooltip 的基本使用方法、技术设计以及多层面的自定义方案。然而为了保证行文清晰，VChart tooltip 还有一些其他的用法细节本文没有涉及，想了解更多可以查阅官网 demo 以及文档。

然而需要提醒的是，虽然 tooltip 能够有效传递数据与信息、以及增加图表的互动能力，但过分依赖它们可能会导致用户体验下降。合理地利用 tooltip，让它们在需要时出现而不干扰用户的主要任务，是设计和开发中应保持的平衡。

希望本文能为你在配置 VChart tooltip 时提供有用的指导。愿你在图表中创造更加直观、轻松且愉快的用户体验时，VChart 能成为你强大的伙伴。

github：github.com/VisActor/VC…

相关参考：

前言

大家好，我是你不会困，写代码就不会困，今天分享的是总算体会到jsx写法为啥灵活

什么是jsx写法？

当谈到JavaScript中的JSX写法时，人们往往会想到React和Vue这样的流行前端框架。JSX作为一种在JavaScript中编写类似于HTML的语法，为前端开发者提供了更灵活和直观的方式来构建用户界面。

JSX的灵活性体现在多个方面。首先，JSX允许开发者在JavaScript中嵌入HTML标记，使得代码更易读和维护。通过使用JSX，开发者可以在同一个文件中编写JavaScript逻辑和界面布局，而无需频繁切换不同的文件。这种混合编程风格提高了开发效率，同时也方便了代码的组织和调试。

其次，JSX支持在标记中使用JavaScript表达式，这使得动态生成界面变得更加简单。开发者可以在JSX中直接使用JavaScript变量、函数调用和逻辑控制语句，从而动态地渲染页面内容。这种灵活性使得开发者能够根据不同的数据状态和条件来动态展示内容，提升了用户体验。

另外，JSX还支持在标记中使用循环和条件语句，比如map函数和条件渲染，从而实现列表展示、条件展示等常见的UI需求。这种功能使得开发者可以更方便地处理复杂的UI逻辑，同时简化了代码的编写和维护。

此外，JSX的组件化特性也为前端开发带来了很多好处。通过将UI拆分成独立的组件，开发者可以更好地组织和管理代码，提高代码的重用性和可维护性。JSX中的组件可以嵌套使用，形成复杂的UI结构，同时每个组件可以单独管理自己的状态和逻辑，使得代码更加清晰和可扩展。

今天在开发的时候发现，这两个即可开启总计列

show-summary

:summary-method="getSummaries"

但是产品的需求比较麻烦，需要渲染多行，查了相关的文档，好像没有这种渲染的demo，翻看项目的代码，有一部分代码的实现比较巧妙，使用的是jsx写法，然后就尝试着去实现

要在vue里面使用jsx写法，在script标签使用<script lang="jsx">，即可使用

getSummaries(param) {

      const { columns } = param

      const sums = []

      const nullHtml = '-'

      columns.forEach((column, index) => {

        if (index === 0) {

          sums[index] = '总计'

          return

        }

        if (this.totalSum.summaryReceivableComparisons) {

          sums[index] = (

            <div>

              {this.totalSum.summaryReceivableComparisons.map((item) => (

                <div class='cell-item' key={item.invoiceCurrency}>

                  <p>

                    {this.formatValue(

                      item[column.property],

                      column.property.includes('Ratio')

                        ? 'percentage'

                        : 'thousandth'

                    )}

                  </p>

                </div>

              ))}

            </div>

          )

        } else {

          sums[index] = nullHtml

          return

        }

      })

      return sums

    },

上面的代码使用了map来遍历，将对应的html返回，el-table的总计列即可生效，来应对不同的需求

总结

总的来说，JSX作为JavaScript中的一种扩展语法，为前端开发带来了更灵活、直观和高效的开发体验。通过使用JSX，开发者可以更轻松地构建交互丰富、动态变化的用户界面，同时提高了代码的可读性和可维护性。JSX的灵活性和表现力使其成为现代前端开发中不可或缺的一部分。

Electron实现静默打印小票

静默打印流程

1.渲染进程通知主进程打印

//渲染进程 data是打印需要的数据

window.electron.ipcRenderer.send('handlePrint', data)

2.主进程接收消息,创建打印页面

//main.ts

/* 打印页面 */

let printWindow: BrowserWindow | undefined

/**

 * @Author: yaoyaolei

 * @Date: 2024-06-07 09:27:22

 * @LastEditors: yaoyaolei

 * @description: 创建打印页面

 */

const createPrintWindow = () => {

  return new Promise<void>((resolve) => {

    printWindow = new BrowserWindow({

      ...BASE_WINDOW_CONFIG,

      title: 'printWindow',

      webPreferences: {

        preload: join(__dirname, '../preload/index.js'),

        sandbox: false,

        nodeIntegration: true,

        contextIsolation: false

      }

    })



    printWindow.on('ready-to-show', () => {

      //打印页面创建完成后不需要显示,测试时可以调用show查看页面样式(下面有我处理的样式图片)

      // printWindow?.show()

      resolve()

    })



    printWindow.webContents.setWindowOpenHandler((details: { url: string }) => {

      shell.openExternal(details.url)

      return { action: 'deny' }

    })



    if (is.dev && process.env['ELECTRON_RENDERER_URL']) {

      printWindow.loadURL(`${process.env['ELECTRON_RENDERER_URL']}/print.html`)

    } else {

      printWindow.loadFile(join(__dirname, `../renderer/print.html`))

    }

  })

}



ipcMain.on('handlePrint', (_, obj) => {

   //主进程接受渲染进程消息,向打印页面传递数据

  if (printWindow) {

    printWindow!.webContents.send('data', obj)

  } else {

    createPrintWindow().then(() => {

      printWindow!.webContents.send('data', obj)

    })

  }

})

3.打印页面接收消息，拿到数据渲染页面完成后通知主进程开始打印

<!doctype html>

<html>

<head>

  <meta charset="UTF-8" />

  <title>打印</title>

  <style>

  </style>

</head>



<body>



</body>

<script>

  window.electron.ipcRenderer.on('data', (_, obj) => {

  //这里是接受的消息,处理完成后将html片段放在body里面完成后就可以开始打印了

  //样式可以写在style里,也可以内联

    console.log('event, data: ', obj);

  //这里自由发挥

    document.body.innerHTML = '处理的数据'

  //通知主进程开始打印

    window.electron.ipcRenderer.send('startPrint')

  })

</script>

</html>

这个是我处理完的数据样式,这个就是print.html

4,5.主进程接收消息开始打印,并且通知渲染进程打印状态

ipcMain.on('startPrint', () => {

  //这里如果不指定打印机使用的是系统默认打印机,如果需要指定打印机,

  //可以在初始化的时候使用webContents.getPrintersAsync()获取打印机列表,

  //然后让用户选择一个打印机,打印的时候将打印机名称传过来

  printWindow!.webContents.print(

    {

      silent: true,

      margins: { marginType: 'none' }

      //deviceName:如果要指定打印机传入打印机名称

    },

    (success) => {

      //通知渲染进程打印状态

      if (success) {

        mainWindow.webContents.send('printStatus', 'success')

      } else {

        mainWindow.webContents.send('printStatus', 'error')

      }

    }

  )

})

完毕~

问题描述

公司有个内部项目是用 Electron 来开发的，有个功能需要像浏览器一样加载第三方站点。

本来一切安好，但是某天打开某个站点的链接，导致 整个客户端直接变成了该站点的页面。

这一看就是该站点做了特殊的处理，经排查网页源码后，果然发现了有这么一句代码。

    if (window.top !== window.self) {

      window.top.location = window.location;

    }

翻译一下就是：如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。

奇怪的是两者不是 跨域 了吗，为什么 iframe 还可以影响顶级窗口。

先说一下我当时的一些解决办法：

后续内容就是一点复盘工作。

场景复现（Web端）

一开始怀疑是客户端的问题，所以我用在纯 Web 上进行了一次对比验证。

这里我们新建两个文件：1.html 和 2.html，我们称之为 页面A 和 页面B。

然后起了两个本地服务器来模拟同源与跨域的情况。

页面A：http://127.0.0.1:5500/1.html

页面B：http://127.0.0.1:5500/2.html 和 http://localhost:3000/2.html

符合同源策略

<body>

  <h1>这是页面A</h1>

  <!-- 这是同源的情况 -->

  <iframe id="iframe" src="http://127.0.0.1:5500/2.html" />

  

  <script>

    iframe.onload = () => {

      console.log('iframe loaded..')

      console.log('子窗口路径', iframe.contentWindow.location.href)

    }

  </script>

</body>

<body>

  <h2>这是页面B</h2>



  <script>

    console.log('page2...')

    console.log(window === window.top)

    console.log('顶部窗口路径', window.top.location.href)

  </script>

</body>

我们打开控制台可以看到 页面A 和 页面B 是可以 互相访问 到对方窗口的路径。

如果这个时候在 页面B 加上文章开头提到的 代码片段，那么显然页面将会发生变化。

跨域的情况

这时候我们修改 页面A 加载 页面B 的地址，使其不符合同源策略。

理所应当的是，两个页面不能够相互访问了，这才是正常的，否则内嵌第三方页面可以互相修改，那就太不安全了。

场景复现（客户端）

既然 Web 端是符合预期的，那是不是 Electron 自己的问题呢？

我们通过 electron-vite 快速搭建了一个 React模板的electron应用，版本为：electron@22.3.27，并且在 App 中也嵌入了刚才的 页面B。

function App(): JSX.Element {

  return (

    <>

      <h1>这是Electron页面</h1>

      <iframe id="iframe" src="http://localhost:3000/2.html"/>

    </>

  )

}

export default App

对不起，干干净净的 Electron 根本不背这个锅，在它身上的表现如同 Web端 一样，也受同源策略的限制。

那么肯定是我的项目里有什么特殊的配置，通过对比主进程的代码，答案终于揭晓。

new BrowserWindow({

    ...,

    webPreferences: {

        ...,

        webSecurity: false // 就是因为它

    }

})

Electron 官方文档 里是这么描述 webSecurity 这个配置的。

webSecurity boolean (可选) - 当设置为 false, 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的，还会把 allowRunningInsecureContent设置为 true. 默认值为 true。

也就是说，Electron本身是有一层屏障的，但当该属性设置为 false 的时候，我们的客户端将会绕过同源策略的限制，这层屏障也就消失了，因此 iframe 的行为表现得像是嵌套了同源的站点一样。

解决方案

把这个配置去掉，确实是可以解决这个问题，但考虑到可能对其他功能造成的影响，只能采取其他方案。

如文章开头提到的，用 webview 替换 iframe。

webview 是 Electron的一个自定义元素（标签），可用于在应用程序中嵌入第三方网页，它默认开启安全策略，直接实现了主应用与嵌入页面的隔离。

因为目前这个需求是仅作展示，不需要与嵌套页面进行交互以及复杂的通信，因此在一开始的开发过程中，并没有使用它，而是直接采用了 iframe。

而 iframe 也能够实现类似的效果，只需要添加一个 sandbox 属性可以解决。

MDN 中提到，sandbox 控制应用于嵌入在 <iframe> 中的内容的限制。该属性的值可以为空以应用所有限制，也可以为空格分隔的标记以解除特定的限制。

如此一来，就算是同源的，两者也不会互相干扰。

总结

这不是一个复杂的问题，发现后及时修复了，并没有造成很大的影响（还好是自己人用的平台）。

写这篇文章的主要目的是为了记录这次事件，让我意识到在平时开发过程中，把注意力过多的放在了 业务、样式、性能等这些看得见的问题上，可能很少关注甚至忽略了 安全 这一要素，以为前端框架能够防御像 XSS 这样的攻击就能安枕无忧。

谨记，永远不要相信第三方，距离产生美。

如有纰漏，欢迎在评论区指出。

写在开头

日常我们在页面中使用特殊字体，一般操作都是直接由前端来全量引入设计师提供的整个字体包即可，具体操作如下：

<template>

  <div class="font">橙某人</div>

</template>



<style scoped>

@font-face {

  font-family: "orange";

  src: url("./orange.ttf");

}

.font {

  font-family: "orange";

}

</style>

很简单吧🤡，但有时应用场景不同，可能需要我们考虑一下性能问题。

一般来说，我们常见的字体包整个是非常大的，小的有几M到十几M，大的可能去到上百M都有，特别是中文类的字体包会相对英文类的要更大一些。

如本文案例，我们仅需在用户输入完后加载对应的字体包即可，这样能避免性能的损耗。

为此，我们需要把整个字体包拆分、细致化、子集化，让它能达到按需引入的效果。

那么这要如何来做这个事情呢？这个方案单单前端可做不了，我们需要配合后端一起，下面就来看看具体的实现过程吧。😗

前端

前端小编用 Vue 来编写，具体如下：

<template>

  <div>

    <input v-model="name" />

    <button @click="handleClick">生成</button>

    <div v-if="showName" class="font">{{ showName }}</div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      name: "",

      showName: "",

    };

  },

  methods: {

    handleClick() {

      // 创建link标签

      const linkElement = document.createElement("link");

      linkElement.setAttribute("rel", "stylesheet");

      linkElement.setAttribute("type", "text/css");

      linkElement.href = `http://localhost:3000?name=${encodeURIComponent(this.name)}`;

      document.body.appendChild(linkElement);

      // 优化显示效果

      setTimeout(() => {

        this.showName = this.name;

      }, 300);

    },

  },

};

</script>



<style>

.font {

  font-family: orange;

  font-size: 50px;

}

</style>

应该都能看懂吧，主要就是生成了一个 <link /> 标签并插入到文档中，标签的请求地址指向我们服务端，至于服务端会返回什么你可以先猜一猜。👻

服务端

服务端小编选择用 Koa2 来编写，你也可以选择 Express 或者 Egg ，甚至 Node 也是可以的，差异不大，具体逻辑如下：

const koa = require("koa2");

const fs = require("fs");

const FontMin = require("fontmin");



const app = new koa();



/** @name 优化，缓存已经加载过的字体包进内存 **/

const fontFamilyMap = {};



/** @name 加载字体包 **/

function loadFontLibrary(fontPath, fontFamily) {

  if (fontFamilyMap[fontFamily]) return fontFamilyMap[fontFamily];

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

    fs.readFile(fontPath, (error, file) => {

        if (error) {

          reject(new Error(error.message));

        } else {

          fontFamilyMap[fontFamily] = file;

          resolve(file);

        }

    });

  });

}



app.use(async (ctx) => {

  const { name } = ctx.query;

  // 设置返回文件类型

  ctx.set("Content-Type", "text/css");



  const fontPath = "./font/orange.ttf";

  const fontFamily = "orange";

  if (!fs.existsSync(fontPath)) return (ctx.body = "字体包读取失败");



  const fontMin = new FontMin();

  const fontFile = await loadFontLibrary(fontPath, fontFamily);

  fontMin.src(fontFile);



  const getFontCSS = () => {

    return new Promise((resolve) => {

      fontMin

        .use(FontMin.glyph({ text: name }))

        .use(FontMin.css({ base64: true, fontFamily }))

        .run((error, files) => {

          if (error) {

            console.log("error", error.message);

          } else {

            const fontContent = files?.[1]?.contents;

            resolve(fontContent);

          }

      });

    });

  };



  const fontCSS = await getFontCSS();



  ctx.body = fontCSS;

});



app.listen(3000);



console.log("服务器开启: http://localhost:3000/");

我们主要是采用了 Fontmin 库来完成整个字体包的按需加载功能，这个库是第一个纯 JavaScript 字体子集化方案。

可能有后端是 Java 或者其他技术栈的小伙伴，你们也不用担心，据小编和公司后端同事了解，不同技术栈也是有对应的库可以解决的，需要的可以自行查查看。

至此，本篇文章就写完啦，撒花撒花。

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。

老样子，点赞+评论=你会了，收藏=你精通了。

iframe（Inline Frame）是一种在网页中嵌套其他网页的 HTML 元素。通过 iframe，开发者可以在一个页面中加载另一个页面的内容，提升用户体验和功能性。下面将详细探讨 iframe 的原理、使用场景以及注意事项，并提供相应的代码示例。

一、iframe 的原理

iframe 是一种 HTML 标签，其基本语法如下：

<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

• src：指定要加载的网页地址。


• width 和 height：定义 iframe 的宽度和高度。


• frameborder：控制边框显示（在 HTML5 中不推荐使用）。

当浏览器遇到 iframe 标签时，会发起一个独立的网络请求来加载指定的 URL。这使得嵌入的内容在主文档之外独立渲染。

二、使用场景

三、注意点

```http

X-Frame-Options: DENY

```

四、示例代码

以下是一个综合示例，展示了如何使用 iframe 加载一个 YouTube 视频并应用响应式设计：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Iframe Example</title>

    <style>

        .responsive-iframe {

            position: relative;

            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

            height: 0;

            overflow: hidden;

        }

        .responsive-iframe iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>



<h1>嵌入 YouTube 视频</h1>

<div class="responsive-iframe">

    <iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

</div>



</body>

</html>

结论

iframe 是一种强大的网页嵌入技术，能够增强网页功能和用户体验。在使用时，需要充分考虑安全性、性能和跨域问题，以确保良好的用户体验。通过合理配置和使用，iframe 可以为网页增加更多的互动性和功能性。

---09/19ヾ(￣▽￣)ByeBye

1、背景

与后端对接口时，看到有一个get请求的接口，它的参数是放在body中的

******get请求参数可以放在body中？？

随即问了后端，后端大哥说在postman上是可以的，还给我看了截图

可我传参怎么也调不通！

下面就来探究到底是怎么回事

2、能否发送带有body参数的get请求

项目中使用axios来进行http请求，使用get请求传参的基本姿势：

// 参数拼接在url上

axios.get(url, {

  params: {}

})

如果想要将参数放在body中，应该怎么做呢？

查看axios的文档并没有看到对应说明，去github上翻看下axios源码看看

在lib/core/Axios.js文件中

可以看到像delete、get、head、options方法，它们只接收两个参数，不过在config中有一个data

熟悉的post请求，它接收的第二个参数data就是放在body的，然后一起作为给this.request作为参数

所以看样子get请求应该可以在第二个参数添加data属性，它会等同于post请求的data参数

顺着源码，再看看lib/adapters/xhr.js，上面的this.request最终会调用这个文件封装的XMLHttpRequest

export default isXHRAdapterSupported && function (config) {

  return new Promise(function dispatchXhrRequest(resolve, reject) {

    let requestData = config.data



    // 将config.params拼接在url上

    request.open(config.method.toUpperCase(), 

                 buildURL(fullPath, config.params, config.paramsSerializer), true);

    

    // 省略若干代码

    ...



    // Send the request

    request.send(requestData || null);

  });

}

最终会将data数据发送出去

所以只要我们传递了data数据，其实axios会将其放在body发送出去的

2.1 实战

本地起一个koa服务，弄一个简单的接口，看看后端能否接收到get请求的body参数

router.get('/api/json', async (ctx, next) => {

	console.log('get请求获取body： ', ctx.request.body)

  

	ctx.body = ctx.request.body

})



router.post('/api/json', async (ctx, next) => {

	console.log('post请求获取body： ', ctx.request.body)



	ctx.body = ctx.request.body

})

为了更好地比较，分别弄了一个get和post接口

前端调用接口：

const res = await axios.get('/api/json', {

  data: {

    id: 1,

    type: 'GET'

  }

})





const res = await axios.post('/api/json', {

  data: {

    id: 2,

    type: 'POST'

  }

})

console.log('res--> ', res)

在axios的send处打一个断点

可以看到数据已经被放到body中了

后端已经接收到请求了，但是get请求无法获取到body！

结论：

• 前端可以发送带body参数的get请求，但是后端接收不到


• 这就是接口一直调不通的原因

3、这是为何呢？

我们查看WHATGW标准，在XMLHttpRequest中有这么一个说明：

大概意思：如果请求方法是GET或HEAD ，那么body会被忽略的

所以我们虽然传递了，但是会被浏览器给忽略掉

这也是为什么使用postman可以正常请求，但是前端调不通的原因了

因为postman并没有遵循WHATWG的标准，body参数没有被忽略

3.1 fetch是否可以？

fetch.spec.whatwg.org/#request-cl…

答案：也不可以，fetch会直接报错

总结

新年快乐！在这个快速发展的前端世界里，咱们工程师面临的挑战也是一个接一个。今天，咱们就来聊聊前端实时通信这个话题。

想想看，你在使用那些传统的HTTP客户端时，比如axios，是否遇到过这样的问题：与React、Vue等框架的结合不够紧密，导致开发效率低下；在性能方面表现不佳，尤其是在处理频繁或重复的请求时；还有那略显臃肿的体积，以及混乱的响应数据类型定义？

哎呀妈呀，这些问题听着就让人头大。但别急，有个叫做alovajs的工具，可能会让你眼前一亮。

alovajs是一个轻量级的请求策略库，它不仅提供了与axios相似的API设计，让你能更快上手，还解决了上述的那些问题。它如何解决？咱们来一探究竟。

首先，alovajs能够与UI框架深度融合，自动管理请求相关的数据。这意味着你在Vue或React等框架中使用alovajs时，不再需要手动创建和维护请求状态，大大提高了开发效率。

其次，alovajs默认开启了内存缓存和请求共享，这些功能可以在提高请求性能的同时，提升用户体验并降低服务端的压力。比如，当你实现一个列表页，用户点击列表项进入详情页时，alovajs可以智能地使用缓存数据，避免不必要的重复请求。

最后，alovajs的体积只有4kb+，仅是axios的30%左右，而且它提供了更加直观的响应数据TS类型定义，对于重度使用Typescript的同学来说，这绝对是个福音。

说了这么多，是不是有点心动了？如果你对alovajs感兴趣，可以访问它的官网查看更多详细信息：alovajs官网。也欢迎你在评论区分享你对alovajs的看法和使用经验，让我们一起交流学习吧！
有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。

1 问题背景

顾问反馈大屏在反复切换的过程中，页面会出现白屏，导致后续的操作无法进行，只能通过刷新页面才能恢复正常。

2 问题复现

测试同事经过几分钟的快速切换导航后，复现了，报错了如下内容

问题如果复现了，其实就解决了一半了

3 查找问题

经过复现后，发现除了上面的报错，每当页面崩溃前，chrome总会有下方的warning。然后基于cesium封装的地图就会崩溃。

翻译成中文：警告：目前有了太多激活的webgl上下文，最早的上下文将会丢失

4 排查问题

经过和地图组的人沟通，得到一个结论WebGL一个页面上最多有16个实例

• 怀疑echarts在下方菜单切换过程中，没有进行销毁

检查了代码中的echats的页面在销毁的时候，发现都进行了dispose，排除了这个的原因

• 怀疑起echarts的3d的饼状图
  之前设计师设计了一个3d的饼状图，参考了 3d柄图环图，一个页面上有多这个组件。
  效果如下：

5 锁定组件进行验证

加入了类似的代码，进行验证后解决了此问题

6 总结

const canvasArr = myChart.getDom().getElementsByTagName('canvas');

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

    canvasArr[i].getContext('webgl').getExtension('WEBGL_lose_context').loseContext()

}

7 参考文档

• github.com/ecomfe/echa…

背景

在开发一个小程序项目时，遇到一个需要列表滚动，松手时自动吸附的动画需求，如下（最终效果）：

很自然用了scroll-view组件，但使用过程中发现scroll-view 里包含'position: fixed;top:0;'的元素时，应用scroll-with-animation=true，搭配更改scroll-top时，松手后fixed的元素会抖一下......

于是决定不用组件内置的scroll-with-animation，改用手动控制scroll-top实现吸附的效果。

思路

通常，要做动画，我们就得确定以下信息，然后用代码实现：

• 初始状态


• 结束状态


• 动画时长


• 动画过程状态如何变化（匀速/先加速后减速/...）

这四个信息一般从UI/交互那里确认，前三个代码实现很简单，第四个在css动画里（如transition/animation）用 timing-function 指定：

在js动画里，改变css的属性可通过 Web Animations API 里的 easing 属性指定：

而如果需要动画的状态不是css的属性呢（例如上面的scrollTop）？这就要用到补间/插值工具了，tween.js登场！

关于 tween.js

tween翻译有‘补间‘的意思

补间（动画）（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。

简单点就是tweenjs可以指定状态从初始值到结束值该怎么变化，下面是简单的使用例子：

const box = document.getElementById('box') // 获取我们想要设置动画的元素。

const coords = {x: 0, y: 0} // 从 (0, 0) 开始



const tween = new TWEEN.Tween(coords, false) // 创建一个修改“坐标”的新 tween。

	.to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。

	.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数使动画流畅。

	.onUpdate(() => {

		// 在 tween.js 更新“坐标”后调用。

		// 使用 CSS transform 将 'box' 移动到 'coords' 描述的位置。

		box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')

	})

	.start() // 立即开始 tween。



	// 设置动画循环。

	function animate(time) {

		tween.update(time)

		requestAnimationFrame(animate)

	}

	requestAnimationFrame(animate)

• 完整用法请看tween.js 用户指南

在微信小程序里使用tween.js

导入适配

下载 github.com/tweenjs/twe… 文件，修改下‘now’的实现，把performance.now()改成Date.now() 即可在小程序里使用：

动画循环

小程序里没有直接支持requestAnimationFrame，这个可以用canvas组件的requestAnimationFrame方法代替：

    // wxml

    // ...

    <canvas type="2d" id="canvas" style="width: 0; height: 0; pointer-events: none; position: fixed"></canvas>

    // ...

    

    

    // js

    wx.createSelectorQuery()

      .select("#canvas")

      .fields({

        node: true,

      })

      .exec((res) => {

        this.canvas = res[0].node;

      });

    // ...

    

    // ...

    const renderLoop = () => {

      TWEEN.update();

      this.canvas.requestAnimationFrame(renderLoop);

    };

    renderLoop();

其他

锁帧

手动改scrolltop还是得通过setData方法，频繁调用可能会导致动画卡顿，requestAnimationFrame一般1s跑60次，也就是60fps，根据需要可以增加锁帧逻辑：

const fps = 30; // 锁30fps

const interval = 1000 / fps;

let lastTime = Date.now();

const renderLoop = () => {

    this.canvas.requestAnimationFrame(renderLoop);

    

    const now = Date.now();

    if(now - lastTime > interval){

        // 真正的动作在这里运行

        TWEEN.update();

        lastTime = now;

    }

};

renderLoop();

官方支持？

要是 scrollView 组件支持 wxs 更改scrollTop就好了
developers.weixin.qq.com/community/d…

效果图如下

实现: 封装VerifyImg组件

<template>

  <el-dialog v-model="dialogShow" width="380px" top="24vh" class="verifyDialog">

    <div class="verify-v">

      <div

        class="check"

        @mousedown="onMouseDown"

        @mouseup="onMouseUp"

        @mousemove="onMouseMove"

        @touchstart="onTouchStart"

        @touchmove="onTouchMove"

        @touchend="onTouchEnd"

      >

        <p>拖动滑块使图片角度为正</p>

        <div class="img-con">

          <img :src="imgUrl" :style="{ transform: imgAngle }" />

          <div v-if="showError" class="check-state">验证失败</div>

          <div v-else-if="showSuccess" class="check-state">验证成功</div>

          <div v-else-if="checking" class="check-state">验证中</div>

        </div>

        <div

          ref="sliderCon"

          class="slider-con"

          :class="{ 'err-anim': showError }"

          :style="{ '--percent': percent, '--bgColor': showError ? bgError : bgColor }"

        >

          <div ref="slider" class="slider" id="slider" :class="{ sliding }" :style="{ '--move': `${slidMove}px` }">

            <el-icon size="22"><Right id="slider" /></el-icon>

          </div>

        </div>

      </div>

    </div>

  </el-dialog>

</template>

<script>

export default {

  data() {

    return {

      imgUrl: '',

      dialogShow: false,

      showError: false,

      showSuccess: false,

      checking: false,

      sliding: false,

      slidMove: 0,

      percent: 0,

      sliderConWidth: 0,

      bgColor: 'rgba(25, 145, 250, 0.2)',

      bgError: 'rgba(255,78,78,0.2)',

      imgList: [

        new URL(`../../assets/images/verify/fn1.png`, import.meta.url).href,

        new URL(`../../assets/images/verify/fn2.png`, import.meta.url).href,

        new URL(`../../assets/images/verify/fn3.png`, import.meta.url).href

      ]

    }

  },



  computed: {

    angle() {

      let sliderConWidth = this.sliderConWidth ?? 0

      let sliderWidth = this.sliderWidth ?? 0

      let ratio = this.slidMove / (sliderConWidth - sliderWidth)

      return 360 * ratio

    },

    imgAngle() {

      return `rotate(${this.angle}deg)`

    }

  },

  mounted() {

    this.imgUrl = this.imgList[this.rand(0, 2)]

  },



  methods: {

    onTouchMove(event) {

      console.log('onTouchMove')

      if (this.sliding && this.checking === false) {

        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。

        let m = event.touches[0].clientX - this.sliderLeft

        if (m < 0) {

          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0

          // 所以直接等于 0，以防止越界

          m = 0

        } else if (m > this.sliderConWidth - this.sliderWidth) {

          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。

          // 因为css的 translateX 函数是以元素的左上角坐标计算的

          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。

          m = this.sliderConWidth - this.sliderWidth

        }

        this.slidMove = m

        console.log(this.slidMove)



        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'

      }

    },

    onTouchEnd() {

      console.log('onTouchEnd')

      if (this.sliding && this.checking === false) {

        this.checking = true

        this.validApi(this.angle)

          .then(isok => {

            if (isok) {

              this.showSuccess = true

            } else {

              this.showError = true

            }

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

              // setTimeout(() => {

              if (isok) {

                resolve(Math.round(this.angle))

              } else {

                reject()

              }

              setTimeout(() => {

                this.resetSlider()

              }, 1000)

              // }, 1500)

            })

          })

          .then(angle => {

            // 处理业务，或者通知调用者验证成功

            console.log(angle)

            this.$emit('toLogin')

          })

          .catch(e => {

            console.log(e)



            // alert('旋转错误')

          })

      }

    },

    onTouchStart(event) {

      console.log('onTouchStart', event)

      // 设置状态为滑动中

      this.sliding = true

      // 下面三个变量不需要监听变化，因此不放到 data 中

      this.sliderLeft = event.touches[0].clientX // 记录鼠标按下时的x位置

      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度

      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度

      console.log(this.sliderLeft, this.sliderConWidth, this.sliderWidth)

    },

    rand(m, n) {

      return Math.ceil(Math.random() * (n - m + 1) + m - 1)

    },



    showVerify() {

      this.imgUrl = this.imgList[this.rand(0, 2)]

      this.dialogShow = true

    },

    closeVerify() {

      //1.5s后关闭弹框

      setTimeout(() => {

        this.dialogShow = false

      }, 1500)

    },

    // 重置滑块

    resetSlider() {

      this.sliding = false

      this.slidMove = 0

      this.checking = false

      this.showSuccess = false

      this.showError = false

      this.percent = 0

    },

    //拖拽开始

    onMouseDown(event) {

      console.log(event.target.id, this.checking)

      if (event.target.id !== 'slider') {

        return

      }



      if (this.checking) return

      // 设置状态为滑动中

      this.sliding = true

      // 下面三个变量不需要监听变化，因此不放到 data 中

      this.sliderLeft = event.clientX // 记录鼠标按下时的x位置

      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度

      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度

    },

    //拖拽停止

    onMouseUp(event) {

      if (this.sliding && this.checking === false) {

        this.checking = true

        this.validApi(this.angle)

          .then(isok => {

            if (isok) {

              this.showSuccess = true

            } else {

              this.showError = true

            }

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

              // setTimeout(() => {

              if (isok) {

                resolve(Math.round(this.angle))

              } else {

                reject()

              }

              setTimeout(() => {

                this.resetSlider()

              }, 1000)

              // }, 1500)

            })

          })

          .then(angle => {

            // 处理业务，或者通知调用者验证成功

            console.log(angle)

            this.$emit('toLogin')

          })

          .catch(e => {

            console.log(e)



            // alert('旋转错误')

          })

      }

    },

    //拖拽进行中

    onMouseMove(event) {

      if (this.sliding && this.checking === false) {

        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。

        let m = event.clientX - this.sliderLeft

        if (m < 0) {

          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0

          // 所以直接等于 0，以防止越界

          m = 0

        } else if (m > this.sliderConWidth - this.sliderWidth) {

          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。

          // 因为css的 translateX 函数是以元素的左上角坐标计算的

          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。

          m = this.sliderConWidth - this.sliderWidth

        }

        this.slidMove = m

        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'

      }

    },

    // 验证角度是否正确

    validApi(angle) {

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

        // 模拟网络请求

        setTimeout(() => {

          // 图片已旋转的角度

          const imgAngle = 90

          // 图片已旋转角度和用户旋转角度之和

          let sum = imgAngle + angle

          // 误差范围

          const errorRang = 20

          // 当用户旋转角度和已旋转角度之和为360度时，表示旋转了一整圈，也就是转正了

          // 但是不能指望用户刚好转到那么多，所以需要留有一定的误差

          let isOk = Math.abs(360 - sum) <= errorRang



          resolve(isOk)

        }, 1000)

      })

    }

  }

}

</script>



<style lang="scss">

.verifyDialog {

  .el-dialog__body {

    padding: 15px !important;

  }

}

</style>

<style lang="scss" scoped>

.verify-v {

  display: flex;

  justify-content: center;

  align-items: center;

}

.check {

  --slider-size: 40px;

  width: 300px;

  background: white;

  box-shadow: 0px 0px 12px rgb(0 0 0 / 8%);

  border-radius: 5px;

  padding: 10px 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  .img-con {

    position: relative;

    overflow: hidden;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    margin-top: 20px;

    img {

      width: 100%;

      height: 100%;

      user-select: none;

    }

    .check-state {

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.5);

      color: white;

      position: absolute;

      top: 0;

      left: 0;

      display: flex;

      justify-content: center;

      align-items: center;

    }

  }

}

.check .slider-con {

  width: 80%;

  height: var(--slider-size);

  border-radius: 3px;

  margin-top: 1rem;

  position: relative;

  background: #f5f5f5;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;

  background: linear-gradient(to right, var(--bgColor) 0%, var(--bgColor) var(--percent), #fff var(--percent), #fff 100%);

  .slider {

    &:hover {

      background: #1991fa;

      color: #fff;

    }

    background: #fff;

    width: var(--slider-size);

    height: var(--slider-size);

    border-radius: 3px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    cursor: move;

    display: flex;

    justify-content: center;

    align-items: center;

    --move: 0px;

    transform: translateX(var(--move));

    .sliding {

      background: #4ed3ff;

    }

  }

}

.slider-con.err-anim {

  animation: jitter 0.5s;

  .slider {

    background: #ff4e4e;

  }

}

body {

  padding: 0;

  margin: 0;

  background: #fef5e0;

}



@keyframes jitter {

  20% {

    transform: translateX(-5px);

  }

  40% {

    transform: translateX(10px);

  }

  60% {

    transform: translateX(-5px);

  }

  80% {

    transform: translateX(10px);

  }

  100% {

    transform: translateX(0);

  }

}

</style>

使用

<VerifyImg ref="verifyRef" @to-login="handleLogin"></VerifyImg>





handleLogin(){

...

}

前言

前段时间，我司的IoT平台的客户大量上新了一堆设备后，在使用过程中，出现了网络连接超时，服务器错误等问题，客户小题大做，抓着这个尾巴不放手，喷我司系统不健壮，要求我们杜绝API错误。

由于IoT多是日志、设备、测试、Action、图表、通信类的功能，API请求&返回数据量大、时间长。在后端添加索引的情况下，接口仍然达不到秒级，接口普遍都是1～3s，部分接口甚至达到小10s。我司把服务器的硬盘和CPU都进行了一波升级，效果都不是很理想。

这个烫手的山芋，落在了前端的头上。我们被迫进行了一波系统升级优化

解决方案

我们结合这个需求，制定了以下几条标准：

1. 不能入侵其他的功能
2. 对系统的破坏尽可能的小
3. 杜绝或者尽可能的减少弹框问题
4. 保证数据的正确展示，对于错误要正确的暴露出来

根据以上几条标准，于是方案就自然的确定了：

API请求时间

拉长API的请求时间,将超时时间由30s，更新为60s

const service = axios.create({

  baseURL: '/xxx',

  timeout: 60 * 1000 // 请求超时时间

})

重发机制

1. API请求超时: 当新页面大量接口请求，某个接口请求时间过长，总时间>60s时，我们会对这个接口进行至多重发3次，用180s的时间去处理这个接口，当请求成功后，关闭请求

重发的接口不能超过timeout时长，否则一直会重发失败。也可以自定义重发的时间

2. 偶发的服务器异常: 当接口出现50X时，重发一次

可以使用axois自带的方法，也可以使用axios-retry插件,axios-retry插件更简单，底层也是axois方法实现的。相比较而言，axios-retry更简单，但不知为什么，我没有实现

// request.js

// 默认重发3次，每次的间隔时间为3s

service.defaults.retry = 3;

service.defaults.retryDelay = 3000;



export function againRequest(

  error,

  axios,

  time = error.config.retry

) {

  const config = error.config;



  if (!config || !config.retry) return Promise.reject(error);



  // 设置用于记录重试计数的变量 默认为0

  config.__retryCount = config.__retryCount || 0;



  // 判断是否超过了重试次数

  if (config.__retryCount >= time) {

    // alert



    return Promise.reject(error);

  }



  config.__retryCount += 1;



  const backoff = new Promise(resolve => {

    setTimeout(() => {

      resolve();

    }, config.retryDelay || 1);

  });



  return backoff.then(() => {

    /*

       以下三行，根据项目实际调整

       这三行是处理重发请求接口变成string，并且重定向的问题

    */

    if (config.data && isJsonStr(config.data)) {

      config.data = JSON.parse(config.data);

    }

    config.baseURL = "/";

    

    return axios(config);

  });

}



export let isLoop = config => {

  if (

    config.isLoop &&

    config.isLoop.count >= 0 &&

    config.url == config.isLoop.url

  ) {

    return true;

  }

  return false;

};



export let isJsonStr = str => {

  if (typeof str == "string") {

    try {

      var obj = JSON.parse(str);

      if (typeof obj == "object" && obj) {

        return true;

      } else {

        return false;

      }

    } catch (e) {

      console.log("error: " + str + "!!!" + e);

      return false;

    }

  }

};

注意到是： axois不能是0.19.x

issue中提到使用0.18.0。经过实践，0.20.x也是可以的，但需要进行不同的配置，具体请看issue。参考资料中有提到 axios issues github

也可以使用axios-retry

axios-retry

npm install axios-retry



// ES6

import axiosRetry from 'axios-retry';



axiosRetry(axios, { retries: 3 });

取消机制

当路由发生变化时，取消上一个路由正在请求的API接口

监控路由页面: 调用cancelAllRequest方法

// request.js

const pendingRequests = new Set();



service.cancelAllRequest = () => {

  pendingRequests.forEach(cancel => cancel());

  pendingRequests.clear();

};

轮询

轮询有2种情况，一种是定时器不停的请求，一种是监听请求N次后停止。

比如： 监听高低电平的变化 - 如快递柜的打开&关闭。

1. 一直轮询的请求:
   • 使用WebSocket
   • 连续失败N次后，谈框。
2. 轮询N次的请求:
   • 连续失败N次后，谈框。

export function api(data, retryCount) {

  return request({

    url: `/xxx`,

    method: "post",

    isLoop: {

      url: "/xxx",

      count: retryCount

    },

    data: { body: { ...data } }

  });

}

自定义api url的原因是：

同一个页面中，有正常的接口和轮询的接口，url是区分是否当前的接口是否是轮询的接口

监听滚动

对于图表类的功能，监听滚动事件，根据不同的高度请求对应的API

节流机制

1. 用户连续多次请求同一个API
   • 按钮loading。最简单有效
   • 保留最新的API请求，取消相同的请求

错误码解析

网络错误 & 断网

if (error.toString().indexOf("Network Error") !== -1) {

        if (configData.isLoop && configData.isLoop.count >= 0) {

          networkTimeout();

          // 关闭所有的定时器

          let t = setInterval(function() {}, 100);

          for (let i = 1; i <= t; i++) {

            clearInterval(i);

          }

          return;

        }

        networkTimeout();

      }

404

else if (error.toString().indexOf("404") !== -1) {

    // 404

}

401

else if (error.toString().indexOf("401") !== -1) {

    // 清除token，及相应的数据，返回到登录页面

}

超时

else if (error.toString().indexOf("Error: timeout") !== -1) {

        if (!axios.isCancel(error) && !isLoop(configData)) {

          return againRequest(error, service);

        }

        if (configData.isLoop && configData.isLoop.count === 3) {

          requestTimeout();

        }

      }

50X

else if (error.toString().indexOf("50") !== -1) {

    if (!axios.isCancel(error) && !isLoop(configData)) {

      return againRequest(error, service, 1, 2);

    }

    if (configData.isLoop && configData.isLoop.count === 1) {

      requestTimeout();

    }

  } 

未知错误

else {

      // 未知错误，等待以后解析

    }

总结

结果将状态码梳理后，客户基本看不到API错误了，对服务的稳定性和可靠性非常满意，给我们提出了表扬和感谢。我们也期待老板升职加薪！

参考资料

1. axios issues github
2. axios-retry
3. axios请求终极封装
4. axios

作者：高志小鹏鹏
来源：juejin.cn/post/7413187186131533861

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">

<script src="https://unpkg.com/video.js/dist/video.min.js">script>





<link href="https://unpkg.com/video.js@8.17.3/dist/video-js.min.css" rel="stylesheet">

<script src="https://unpkg.com/video.js@8.17.3/dist/video.min.js">script>





<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video-js.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video.min.js">script>

<video

    id="my-player"

    class="video-js"

    controls

    preload="auto"

    poster="//vjs.zencdn.net/v/oceans.png"

    data-setup='{}'>

  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">source>

  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">source>

  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">source>

  <p class="vjs-no-js">

    To view this video please enable JavaScript, and consider upgrading to a

    web browser that

    <a href="https://videojs.com/html5-video-support/" target="_blank">

      supports HTML5 video

    a>

  p>

video>

3. 初始化播放器：

var player = videojs('my-video');

就这样，你就可以在网页上嵌入一个功能丰富的视频播放器了。

该videojs函数还接受一个options对象和一个回调：

var options = {};



var player = videojs('my-player', options, function onPlayerReady() {

  videojs.log('Your player is ready!');



  // In this context, `this` is the player that was created by Video.js.

  this.play();



  // How about an event listener?

  this.on('ended', function() {

    videojs.log('Awww...over so soon?!');

  });

});

结语

Video.js 是一个功能强大且灵活的视频播放器，它支持多种视频格式和流媒体协议，并且具有丰富的插件生态和良好的定制性。无论你是构建一个视频分享平台还是需要实现高质量的直播播放，Video.js 都能为你提供稳定且可扩展的解决方案。

希望这篇文章能帮助你了解 Video.js 的强大功能，并激发你在项目中使用它的灵感，这么好的东西，赶快分享给你的朋友们吧！

前言

本文将介绍在线协同文档编辑器是如何解决冲突的，大部分公司在解决冲突上目前用的都是 OT 算法，与之对应，也有一个 CRDT 算法实现。接下来，我们将深入这两种算法的实现及原理。

解决冲突的方案

在线协同文档编辑器通常使用不同的算法来解决冲突，具体算法取决于编辑器的实现和设计。以下是一些常见的解决冲突的算法：

这些算法都有各自的优缺点，并且在不同的场景和需求下可能更适合不同的编辑器实现。

接下来，我们先聊聊 OT 算法。

OT 算法

当多个用户同时编辑同一文档时，OT算法通过操作转换来保持文档状态的一致性。下面是一个简单的示例，帮助你理解OT算法的工作原理。

假设有两个用户 A 和 B 同时编辑一段文本，初始文本为 "Hello, world!"。

用户 A 在文本末尾添加了字符 " How are you?"。

用户 B 在文本末尾添加了字符 " I'm fine."。

在 OT 算法中，每个操作都由一个操作类型和操作内容组成。在这个例子中，添加字符操作的操作类型为 "insert"，操作内容为被插入的字符。

用户 A 的操作序列为：[insert(" How are you?")]
用户 B 的操作序列为：[insert(" I'm fine.")]

首先，服务器收到用户 A 的操作序列，将其应用到初始文本上，得到 "Hello, world! How are you?"。然后，服务器收到用户 B 的操作序列，将其应用到初始文本上，得到 "Hello, world! I'm fine."。

接下来，服务器需要进行操作转换，将用户 B 的操作序列转换为适应用户 A 的文本状态。在这个例子中，用户 B 的操作 "insert(" I'm fine.")" 需要转换为适应 "Hello, world! How are you?" 的操作。

操作转换的过程如下：

最终，服务器将转换后的操作序列发送给用户 A 和用户 B，他们将其应用到本地文本上，最终得到相同的文本状态 "Hello, world! How are you? I'm fine."。

这个例子展示了 OT 算法如何通过操作转换来保持多个用户同时编辑时文档状态的一致性。在实际应用中，OT 算法需要处理更复杂的操作类型和情况，并进行更详细的操作转换。

接下来，我们聊聊 CRDT 算法：

CRDT 算法

当多个用户同时编辑同一文档时，CRDT（Conflict-free Replicated Data Type，无冲突复制数据类型）算法通过设计特定的数据结构和操作规则来实现冲突自由的复制。下面是一个简单的示例，帮助你理解CRDT算法的工作原理。

在CRDT算法中，文档被表示为一个数据结构，常见的数据结构之一是有序列表（Ordered List）。每个用户的编辑操作会被转换为操作序列，并应用到本地的有序列表上。

假设有两个用户 A 和 B 同时编辑一段文本，初始文本为空。用户 A 在文本末尾添加了字符 "Hello"，用户 B 在文本末尾添加了字符 "World"。

在CRDT算法中，每个字符都被赋予一个唯一的标识符，称为标记（Marker）。在这个例子中，我们使用递增的整数作为标记。

用户 A 的操作序列为：[insert("H", 1), insert("e", 2), insert("l", 3), insert("l", 4), insert("o", 5)]
用户 B 的操作序列为：[insert("W", 6), insert("o", 7), insert("r", 8), insert("l", 9), insert("d", 10)]

每个操作都包含要插入的字符以及对应的标记。

当用户 A 应用自己的操作序列时，有序列表变为 "Hello"。同样地，当用户 B 应用自己的操作序列时，有序列表变为 "World"。

接下来，服务器需要将两个用户的操作序列合并为一致的文本状态。在CRDT算法中，合并的过程是通过比较标记的大小来确定字符的顺序，并确保最终的文本状态一致。

合并的过程如下：

最终，合并后的有序列表为 "HelloWorld"。

这个例子展示了CRDT算法如何通过设计特定的数据结构和操作规则，以及比较标记的大小来实现冲突自由的复制。在实际应用中，CRDT算法可以应用于各种数据结构和操作类型，并进行更复杂的合并过程。

CRDT 的标记实现方案

方案选型

OT算法和CRDT算法都是用于实现实时协同编辑的算法，但它们有不同的优点、缺点和工作原理。

OT算法的优点：

OT算法的缺点：

CRDT算法的优点：

CRDT算法的缺点：

OT算法和CRDT算法的区别：

选择使用哪种算法取决于具体的应用场景和需求。OT算法适用于需要实时协同编辑的场景，而CRDT算法适用于去中心化和冲突自由的场景。

总结

本文介绍了在线协同文档编辑器中解决冲突的算法，主要包括OT算法和CRDT算法。OT算法通过操作转换来保持文档状态的一致性，而CRDT算法通过设计特定的数据结构和操作规则实现冲突自由的复制。OT算法需要中央服务器进行操作转换，适用于需要实时协同编辑的场景。CRDT算法可以在去中心化环境中工作，每个用户都有完整的本地数据，适用于去中心化和冲突自由的场景。选择使用哪种算法取决于具体的应用场景和需求。

背景

某天客户报了一个问题，说是大屏的声音不能自动播放了,我们的大屏应用是有个报警的，当有报警的时候，自动会播放警报的声音

复线步骤

测试后发现如下结论

如果你想测试，可以点我进行测试

你可以先点击上方链接的 尝试一下 ，下方为截图

这个时候你会听到一声马叫声

然后，你刷新下马叫声的页面，这个时候声音的自动播放将不会生效

报错问题排查

打开控制台，不出意外看到了一个报错信息。

翻译为中文的意思为
不允许的错误。播放失败，因为用户没有先与文档交互。goo.gl/xX8pDD

尝试解决

那我给通过给body添加点击事件，自动触发点击事件，在点击的事件后自动播放声音。
（当是我的想法是，这个大概率是不行的，chrome应该不会忽略这一点，不然这个功能就相当于不存在）

经过测试后，发现确实还不行，在意料中。

参考别人的网站，用抖音测试

点击我跳转抖音

想到了我们可以参考抖音，我用抖音的进行测试，当你不做任何的操作，页面应该如下

我们从这里得出结论，这个应该是浏览器的限制，需要查看官方文档，看看原因

查阅官方文档

点我查看chrome的官方文档

我截取了一些关键的信息

注意浏览器会有一个媒体互动指数，这是浏览器自动计算的，该分越高，才会触发自动播放

查看电脑的媒体互动指数

在url上输入 about://media-engagement，你会看到如下的截图，

经过测试后 当网站变成了is High,音频会自动播放，不会播放失败。

这就解释了为什么有的网站可以自动播放声音，有的网站不可以自动播放声音

ok，我们继续往下看，这个时候看到了一些关键的信息。

作为开发者，我们不应该相信音频/视频会播放成功，要始终在播放的回掉中来进行判断

看到这些，我们来模仿抖音的实现.在播放声音的catch的时候，显示一个错误的弹窗，提示用户，当用户点击的时候，自动播放声音

   this.alarmAudio = new Audio(require("@/assets/sound/alarm.mp3"));

    this.alarmAudio

            .play()

            .then(() => {

              this.notifyId && this.notifyId.close();

            })

            .catch((error) => {

              if (error instanceof DOMException) {

                // 这里可以根据异常类型进行相应的错误处理

                if (error.name === "NotAllowedError") {

                  if (this.notifyId) return;

                  this.notifyId = Notification({

                    title: "",

                    duration: 0,

                    position: "bottom-left",

                    dangerouslyUseHTMLString: true,

                    onClick: this.onAudioNotifyConfirm,

                    showClose: false,

                    customClass: "audio-notify-confirm",

                    message:

                      "<div style='color:#fff;font-size:18px;cursor:pointer'>因浏览器限制，需<span style='color:#ff2c55'>点击打开声音</span></div>",

                  });

                }

              }

            });