前言

2024年9月17日，Java开发者们迎来了期待已久的JDK23版本。

下载地址：jdk.java.net/23/

文档地址：jdk.java.net/23/release-…

为 JDK 21 之后的第一个非 LTS 版本，最终的 12 个 JEP 特性包括：

JEP 455：模式、instanceof 和 switch 中的原始类型（Primitive Types in Patterns, instanceof, and switch，预览）

JEP 466：类文件 API（Class-File API，第二轮预览）

JEP 467：Markdown 文档注释（Markdown Documentation Comments）

JEP 469：Vector API（第八轮孵化）

JEP 471：废弃 sun.misc.Unsafe 中的内存访问方法以便于将其移除（Deprecate the Memory-Access Methods in sun.misc.Unsafe for Removal）

JEP 473：流收集器（Stream Gatherers，第二轮预览）

JEP 474：ZGC：默认的分代模式（ZGC: Generational Mode by Default）

JEP 476：模块导入声明（Module Import Declarations，预览）

JEP 477：隐式声明的类和实例主方法（Implicitly Declared Classes and Instance Main Methods，第三轮预览）

JEP 480：结构化并发（Structured Concurrency，第三轮预览）

JEP 481：作用域值（Scoped Values，第三轮预览）

JEP 482：灵活的构造函数体（: Flexible Constructor Bodies，第二轮预览）

基本上每次JDK的升级，在带来一些新功能的同时，也会提升一些性能。

一些优秀的语法，也能提升开发效率。

除了编程语言升级能提升开发效率之外，一些好的开发工具或者设备，也可以。

2 提升开发效率

显示器可以提升开发效率？

答：是真的。

2.1 屏幕尺寸

在之后的一段时间内，我尝试过一些不同品牌和型号的外接显示器。

常见的显示器的屏幕比是16:9。

而我现在正在用的明基RD280U显示器的屏幕比是3:2。

跟我的笔记本电脑屏幕相比，高度是笔记本电脑的两倍了。

我第一次使用时，就明显感觉到，明基RD240Q显示器的屏幕更高一些，一屏可以多看十几行代码。

在开发过程中，每次滚动屏幕，都可以多看几行代码，如果次数多了，可以多看很多行代码，真的可以提高开发效率。

2.2 专业编程模式

我后来才知道明基RD280U是一个专业的编程显示器，专门给程序员设计的。

屏幕正下方的这个按键，可以调整编程模式，可以优化IDE上代码的显示效果，让代码更加清晰：

2.3 背光灯

我们之前在晚上编程的时候，经常需要打开台灯，才能让屏幕看到更清楚。

为了解决这个问题，明基RD280U提供了Moonhalo背光灯的功能，下面这张图是我在关灯的情况下拍摄的：

可以看到屏幕有黄色的背景灯光。

下面的这张灯光图更直观：

可以让你沉浸在开发中，不被打扰。

3 全方位呵护

明基RD280U显示器使用了莱茵认证护眼技术，实现了：低蓝光、无屏闪的效果。

3.1 护眼模式

在夜间开发，可以切换夜间保护模式：

如果切换成自动模式，当外面环境变亮时，屏幕会自动变暗。当外面环境变暗时，屏幕会自动变暗。

保护我们的眼睛。

智慧蓝光模式是为了减少蓝光对眼睛的刺激，提供更舒适的视觉体验。

我们可以调节让自己眼睛感到舒服的蓝光。

3.2 抗反射面板

当我们的屏幕出现其他的灯光直射时，笔记本电脑的效果是这样的：

代码完全看不清楚。

而明基RD280U显示器，即使遇到强光也能看清代码。

这是我非常喜欢的设计。

4 软件协同

明基RD280U显示器为了方便我们操作，还提供了一个驱动软件：Display Pilot2。

里面包含了画面切换，快速搜索，桌面分区和键盘快速切换功能。

我们可以在电脑上直接控制显示器：

文章前面介绍的这些功能，都可以直接在电脑上通过Display Pilot2进行控制。

比如开启显示器的Moonhalo背光灯。

新增的flow功能可以设置特定时间场景下的一些显示器的参数。

5 总结

本文主要介绍了JDK23的12项新特性，涵盖了语言预览、API增强、性能优化等多个方面，可能会对开发者的工作流程和编程习惯产生深远的影响。

同时也介绍了我正在使用的明基RD280U显示器的一些优秀的功能，比如：屏幕尺寸更大、专业编程模式、Moonhalo背光灯、护眼功能（夜间防护功能、智慧蓝光）、抗反射面板、display pilot2功能，能够提升开发效率和保护我们的眼睛。

非必须项

处理器（CPU）天梯图

显卡（GPU）天梯图

如何选择显示器

选择电脑显示器时，有几个关键因素需要考虑：

根据你的具体需求和预算，综合考虑上述因素，选择最适合你的显示器。 并不是配置越高越好，重点是根据你的显卡和CPU来看，实现极致性价比，需要对应电脑配置能带动的最大区间，比方说 英特尔 i5-12400F（6核心12线程，睿频4.4GHz）+ 华硕DUAL-RTX 4060-8G游戏显卡能带起来的刷星率极限基本就是165Hz左右，那么你配置2K，180Hz的显示器就够用了，当然你有钱也可以整个4K，200+Hz的

关于外围设备（键鼠、耳机、音响等）

这个看个人喜好以及预算来决定吧，比方说有线还是无线，机械还是非机械等等....

不同价位装机性价比清单（根据目前市场上）

装机其实主要花费就在显卡（GPU）和处理器（CPU）上，显卡（GPU）金额占比超过50%比比皆是，处理器（CPU）金额占比一般是在百分之20%~30%，其他配件金额占比20%~30%左右。

如果预算足够建议优先升级显卡

CPU分为盒装和散片，预算充足盒装，预算不足散片也能用

3K推荐

• CPU: Intel 12代酷睿i5 12400F
• 显卡: 华硕DUAL RTX 3050 6G
• 内存: 威刚D4 16GB 3200MHz
• 硬盘: 英睿达 500GB PCI-E 4.0 M.2
• 主板: 圣旗H610M
• 电源: 爱国者额定500W
• 跑分: 107W±
• 合计：3.5K左右

4K极致性价比

4K-6K这个价位其实CPU最佳的就是就是在下图区间 同理可自行对比GPU天梯图

• CPU: 英特尔 i5-12400F（6核心12线程，睿频4.4GHz）
• 显卡: 华硕DUAL-RTX 4060-8G游戏显卡 升级选项: +299元升级至华硕TX-RTX 4060-O8G-GAMING天选白三风扇
• 散热: 动力火车四铜管白色强劲散热器
• 主板: 华硕PRIME B760M-FD4（支持AURA神光同步）
• 内存: 雷克沙DDR4 16GB 3200MHz高频内存
• 硬盘: 雷克沙500GB NVMe PCIe SSD（读速高达3300MB/S）
• 电源: 源之力静音大师额定600W安规3C白色
• 机箱: 动力火车琉璃海景房
• 合计：4K左右

5K极致性价比

6K极致性价比

7K极致性价比

8K极致性价比

1W极致性价比

1W预算以上可能考虑的不单单是配置了，还有外观之类的，可以DIY定制之类的

1.2W极致性价比

1.3w极致性价比

总结下，其实根据CPU、GPU天梯图就可以找到自己的目标区间，其他配置看个人预算来就行，核心就是两大件！如果有装机高手，欢迎留言交流，有不懂的，欢迎提问。后续会根据问题持续补充

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中提交，我们会在最快的时间解决。

早上刚来，就看到仓库那边不停发消息说，我们的某个功能用不了了。赶紧放下早餐加紧看。

原来是调的一个三方接口报错了：

javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

	at sun.security.ssl.Alert.createSSLException(Alert.java:131)

	at sun.security.ssl.TransportContext.fatal(TransportContext.java:353)

	at sun.security.ssl.TransportContext.fatal(TransportContext.java:296)

	at sun.security.ssl.TransportContext.fatal(TransportContext.java:291)

	at sun.security.ssl.CertificateMessage$T12CertificateConsumer.checkServerCerts(CertificateMessage.java:652)

	at sun.security.ssl.CertificateMessage$T12CertificateConsumer.onCertificate(CertificateMessage.java:471)

	at sun.security.ssl.CertificateMessage$T12CertificateConsumer.consume(CertificateMessage.java:367)

	at sun.security.ssl.SSLHandshake.consume(SSLHandshake.java:376)

	at sun.security.ssl.HandshakeContext.dispatch(HandshakeContext.java:444)

	at sun.security.ssl.HandshakeContext.dispatch(HandshakeContext.java:422)

	at sun.security.ssl.TransportContext.dispatch(TransportContext.java:183)

	at sun.security.ssl.SSLTransport.decode(SSLTransport.java:154)

	at sun.security.ssl.SSLSocketImpl.decode(SSLSocketImpl.java:1279)

	at sun.security.ssl.SSLSocketImpl.readHandshakeRecord(SSLSocketImpl.java:1188)

	at sun.security.ssl.SSLSocketImpl.startHandshake(SSLSocketImpl.java:401)

	at sun.security.ssl.SSLSocketImpl.startHandshake(SSLSocketImpl.java:373)

查看原因：

由于JVM默认信任证书不包含该目标网站的SSL证书，导致无法建立有效的信任链接。

奥...原来是他们把接口从http改为了https,导致我们获取数据报错了。再看看他们的证书，奥...新的。

好了，看看我们的逻辑，这其实是一个获取对方生成的PDF文件的接口

PdfReader pdfReader = new PdfReader(url);

url就是他们给的链接，是这行代码报的错。这时候，开始研究，在网上扒拉，找到了初版方案

尝试1

写一个程序专门获取安全证书，这代码有点长，全贴出来影响阅读。我给扔我hithub上了github.com/lukezhao6/I… 将这个文件贴到本地，执行javac InstallCert.java将其进行编译

编译完长这样：

然后再执行java InstallCert http://www.baidu.com （这里我们用百度举例子，实际填写的就是你想要获取证书的目标网站）

报错不用怕，因为它会去检查目标服务器的证书，如果出现了SSLException,表示证书可能存在问题，这时候会把异常信息打印出来。

在生成的时候需要输入一个1

这样，我们需要的证书文件就生成好了

这时候，将它放入我们本地的 jdk的lib\security文件夹内就行了

重启，这时候访问是没有问题了。阶段性胜利。

但是，但是。一顿操作下来，对于测试环境的docker，还有生产环境貌似不能这么操作。 放这个证书文件比较费事。

那就只能另辟蹊径了。

尝试2

搜到了，还有两种方案。

1.通过System.setProperty("javax.net.ssl.trustStore", "你的jssecacerts证书路径");

2.程序启动命令-Djavax.net.ssl.trustStore=你的jssecacerts证书路径 -Djavax.net.ssl.trustStorePassword=changeit

我尝试了第一种，System.setProperty可以成功，但是读不到文件，权限什么的都是ok的。
检查了蛮多地方

• 路径格式问题


• 文件是否存在


• 文件权限


• 信任库密码


• 系统属性优先级

貌似都是没问题的，但肯定又是有问题的，因为没起作用。但是想着这样的接口有4个，万一哪天其他三个也改了，我又得来一遍。所以就算研究出来了，还是不能稳坐钓鱼台。有没有一了百了的方法嘞。

尝试3

还真找到了：这个错是因为对方网站的证书不被java信任么，那咱不校验了，直接全部信任。这样就算其他接口改了，咱也不愁。而且这个就是获取pdf，貌似安全性没那么重。那就开搞。

代码贴在了下方，上边的大概都能看懂吧，下方的我加了注释。

URL console = new URL(url);

HttpURLConnection conn = (HttpURLConnection) console.openConnection();

if (conn instanceof HttpsURLConnection)  {

    SSLContext sc = SSLContext.getInstance("SSL");

    sc.init(null, new TrustManager[]{new TrustAnyTrustManager()}, new java.security.SecureRandom());

    ((HttpsURLConnection) conn).setSSLSocketFactory(sc.getSocketFactory());

    ((HttpsURLConnection) conn).setHostnameVerifier(new TrustAnyHostnameVerifier());

}

conn.connect();

InputStream inputStream = conn.getInputStream();

PdfReader pdfReader = new PdfReader(inputStream);

inputStream.close();

conn.disconnect();

private static class TrustAnyTrustManager implements X509TrustManager {

    //这个方法用于验证客户端的证书。在这里，方法体为空，表示不对客户端提供的证书进行任何验证。

    public void checkClientTrusted(X509Certificate[] chain, String authType) throws CertificateException {

    }

    //这个方法用于验证服务器的证书。同样，方法体为空，表示不对服务器提供的证书进行任何验证。

    public void checkServerTrusted(X509Certificate[] chain, String authType) throws CertificateException {

    }

    //这个方法返回一个信任的证书数组。在这里，返回空数组，表示不信任任何证书，也就是对所有证书都不做任何信任验证。

    public X509Certificate[] getAcceptedIssuers() {

        return new X509Certificate[]{};

    }

}

//这个方法用于验证主机名是否可信。在这里，无论传入的主机名是什么，方法始终返回 true，表示信任任何主机名。这就意味着对于 SSL 连接，不会对主机名进行真实的验证，而是始终接受所有主机名。

private static class TrustAnyHostnameVerifier implements HostnameVerifier {

    public boolean verify(String hostname, SSLSession session) {

        return true;

    }

}

解决了解决了，这样改算是个比较不错的方案了吧。

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>",

                  });

                }

              }

            });