ECharts

ECharts是一个由百度开发的强大的数据可视化库，它提供了丰富的图表类型和灵活的配置选项。以下是一个简单的示例，展示如何使用Echarts创建一个折线图：

import * as echarts from 'echarts';



const chartDom = document.getElementById('main');



const myChart = echarts.init(chartDom);





const option = {

  xAxis: {

    type: 'category',

    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  },

  yAxis: {

    type: 'value'

  },

  series: [

    {

      data: [150, 230, 224, 218, 135, 147, 260],

      type: 'line'

    }

  ]

};



option && myChart.setOption(option);

如上步骤，简单易用，难点都封装好了，只需要配置数据即可。如果需要在网页中快速展示图表信息，刚好这个图表是比较常规的，不需要过多地调整和配置，就可以采用ECharts。

Antv

Antv是蚂蚁金服开发的数据可视化库，它基于G2和G6，提供了一系列强大的图表和可视化组件。下面是一个使用Antv使用G2产品创建折线图的示例：

import { Chart } from "@antv/g2";



const chart = new Chart({ container: "container" });



chart.options({

  type: "view",

  autoFit: true,

  data: [

    { year: "1991", value: 3 },

    { year: "1992", value: 4 },

    { year: "1993", value: 3.5 },

    { year: "1994", value: 5 },

    { year: "1995", value: 4.9 },

    { year: "1996", value: 6 },

    { year: "1997", value: 7 },

    { year: "1998", value: 9 },

    { year: "1999", value: 13 },

  ],

  encode: { x: "year", y: "value" },

  scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },

  children: [

    { type: "line", labels: [{ text: "value", style: { dx: -10, dy: -12 } }] },

    { type: "point", style: { fill: "white" }, tooltip: false },

  ],

});



chart.render();

Antv提供了简单易用的API和丰富的图表组件，可以帮助开发者快速构建各种类型的数据可视化图表。在官网可以看到由七个模块产品，分别是：

G2｜G2Plot：可视化图形语法和通用图表库

S2：多维可视分析表格

G6｜Graphin：关系数据可视化分析工具和图分析组件

X6｜XFlow：流程图相关分图表和组件

L7｜L7Plot：地理空间数据可视化框架和地理图表

F2｜F6：移动端的可视化解决方案

AVA：可视分析技术框架

D3

D3(d3js.org/getting-sta…

import * as d3 from "d3";

import {useRef, useEffect} from "react";



export default function LinePlot({

  data,

  width = 640,

  height = 400,

  marginTop = 20,

  marginRight = 20,

  marginBottom = 30,

  marginLeft = 40

}) {

  const gx = useRef();

  const gy = useRef();

  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);

  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);

  const line = d3.line((d, i) => x(i), y);

  useEffect(() => void d3.select(gx.current).call(d3.axisBottom(x)), [gx, x]);

  useEffect(() => void d3.select(gy.current).call(d3.axisLeft(y)), [gy, y]);

  return (

    <svg width={width} height={height}>

      <g ref={gx} transform={`translate(0,${height - marginBottom})`} />

      <g ref={gy} transform={`translate(${marginLeft},0)`} />

      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data)} />

      <g fill="white" stroke="currentColor" strokeWidth="1.5">

        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}

      </g>

    </svg>

  );

}

D3不是传统意义上的图表库，是由30个离散库或者模块组成的套件。如果你对其它高级图表库不满意，想使用SVG或Canvas、甚至WebGL滚动自己的图表，那么可以使用D3工具库。

ZRender

ZRender是2D绘图引擎。它提供Canvas、SVG、等多种渲染方式，也是ECharts的渲染器。

import zrender from 'zrender';

var zr = zrender.init(document.getElementById('main'));

var circle = new zrender.Circle({

    shape: {

        cx: 150,

        cy: 50,

        r: 40

    },

    style: {

        fill: 'none',

        stroke: '#F00'

    }

});

zr.add(circle);

console.log(circle.shape.r); // 40

circle.attr('shape', {

    r: 50 // 只更新 r。cx、cy 将保持不变。

});

通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。

从代码规范看，Echarts和D3官网的案例有用到es5的语法，Antv遵循了es6的语法规范，更专业。从灵活程度和使用难易程度来看，ECharts<Antv<D3<ZRender。还有使用到其它图表工具库的，欢迎留言探讨📒

前言

最近开发中遇到这么一个需求，上传视频文件的时候需要截取视频的一部分画面来供选择，作为视频的封面，截取画面可以使用canvas来实现，将视频画面画进canvas里，再通过canvas来生成文件对象和一个预览的url

逻辑层和视图层

想要将视频画进canvas里就需要操作dom，但是在uniapp中我们是无法操作dom的，uniapp的app端逻辑层和视图层是分离的，renderjs运行的层叫【视图层】，uniapp原生script叫【逻辑层】，会产生一个副作用就是是在造成了两层之间通信阻塞

所以uniapp推出了renderjs，renderjs是一个运行在视图层的js，可以让我们在视图层操作dom，但是不能直接调用，需要在dom元素中绑定某个值，当值发生改变就会触发视图层的事件

// 视图层

// module为renderjs模块的名称，通过 模块名.事件 来调用事件

<script module="capture" lang="renderjs"></script>



// 逻辑层

// prop为绑定的值，名字可以随便起，但是要和change后面一致

// 当prop绑定的值发生改变就会触发capture模块的captures事件

<view style="display: none;" :prop="tempFilePath" :change:prop="capture.captures"></view>

<template>

    <view class="container">

        <view style="display: none;" :prop="tempFilePath" :change:prop="capture.captures"></view>

    </view>

</template>



<script>

    export default {

        data() {

            return {

                tempFilePath: ''

            }

        },

        mounted() {

           this.tempFilePath = 'aaaaaaaaaaaaaaaa'

        }

    }

</script>



<script module="capture" lang="renderjs">

    export default {

        methods: {

            captures(tempFilePath) {

                console.log(tempFilePath);

            },

        }

    }

</script>

截取画面帧

我们先获取到视频的信息，通过uni.chooseVideo(OBJECT)这个api我们可以拿到视频的临时文件路径，然后再将临时路径交给renderjs去进行截取操作

定义一个captureFrame方法，方法接收两个参数：视频的临时文件路径和截取的时间。先创建video元素，设置video元素的currentTime属性（视频播放的当前位置）的值为截取的时间，由于video元素没有加到dom上，video播放到currentTime结束

并设置video元素的autoplay自动播放属性为true，但是由于浏览器的限制video无法自动播放，但是静音状态下可以自动播放，所以还要将video元素的muted属性设为true，最后再将src属性设置为视频的临时文件路径，当video元素可以播放的时候就可以将video元素画进canvas里了

captureFrame(vdoSrc, time = 0) {

    return new Promise((resolve) => {

        const vdo = document.createElement('video')

        // video元素没有加到dom上，video播放到currentTime（当前帧）结束

        // 定格时间，截取帧

        vdo.currentTime = time

        // 设置自动播放，不播放是黑屏状态，截取不到帧画面

        // 静音状态下允许自动播放

        vdo.muted = true

        vdo.autoplay = true

        vdo.src = vdoSrc

        vdo.oncanplay = async () => {

            const frame = await this.drawVideo(vdo)

            resolve(frame)

        }

    })

},

然后再定义一个drawVideo方法用于绘制视频，接收一个video元素参数，在方法中创建一个canvas元素，将canvas元素的宽高设置为video元素的宽高，通过drawImage方法将视频画进canvas里，再通过toBlob方法创建Blob对象，然后通过URL.createObjectURL() 创建一个指向blob对象的临时url，blob对象可以用来上传，url可以用来预览

drawVideo(vdo) {

    return new Promise((resolve) => {

        const cvs = document.createElement('canvas')

        const ctx = cvs.getContext('2d')

        cvs.width = vdo.videoWidth

        cvs.height = vdo.videoHeight

        ctx.drawImage(vdo, 0, 0, cvs.width, cvs.height)



        // 创建blob对象

        cvs.toBlob((blob) => {

            resolve({

                blob,

                url: URL.createObjectURL(blob),

            })

        })

    })

}

最后我们就可以在触发视图层的事件里去使用这两个方法来截取视频画面帧了，最后将数据传递返回给逻辑层，通过this.$ownerInstance.callMethod() 向逻辑层发送消息并将数据传递过去

// 视图层

async captures(tempFilePath) {

    let duration = await this.getDuration(tempFilePath)

    let list = []

    for (let i = 0; i < duration; i++) {

        const frame = await this.captureFrame(tempFilePath, duration / 10 * i)

        list.push(frame)

    }

    this.$ownerInstance.callMethod('captureList', {

        list,

        duration

    })

},

getDuration(tempFilePath) {

    return new Promise(resolve => {

        const vdo = document.createElement('video')

        vdo.src = tempFilePath

        vdo.addEventListener('loadedmetadata', () => {

            const duration = Math.floor(vdo.duration);

            vdo.remove();

            resolve(duration)

        });

    })

},



// 逻辑层

captureList({

    list,

    duration

}) {

    // 操作......

}

运行

最后运行起来，发现报了一个错误：Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported，这是因为由于浏览器的安全考虑，如果在使用canvas绘图的过程中，使用到了外域的资源，那么在toBlob()时会抛出异常，设置video元素的crossOrigin属性值为anonymous就行了

app端	h5

前言

开篇雷击

好害怕

怎么办

不要慌

仔细看完文章，彻底解决代码包大小超过限制

提示：以下是本篇文章正文内容，下面案例可供参考

一、微信小程序上传时的规则

微信小程序官方规定主包大小不能超过2M，单个分包大小也不能超过2M，多个分包总大小不能超过8M，文件过大会增加启动耗时，对用户体验不友好。

官方解释：

二、分析、整理项目中的文件

1.正常来说一个小程序该有以下目录构成：

│

│——.hbuilderx       	    

│

│——api       			// 接口路径及请求配置                       

│

│——components			// 公共组件

│

│——config			        // 全局配置

│

│——node_modules           	// 项目依赖

│

│——pages        		        // 项目主包

│

│——order        		        // 项目分包

│

│——static			        // 静态资源

│  │

│  ├─scss        		        // 主包css样式

│  │

│  ├─js       			// 全局js方法

│  │

│  └─image      		        // tabBar图标目录

│

│——store     			// Vuex全局状态管理

│

│——utils     			// 封装的特定过滤器

│

│——error-log			// 错误日志

│......

│

2.和自己本地的文件目录对比一下，分析后根据实际情况整理出规范的目录，相同文件规整至一起，删除多余的文件，检查每个页面中是否存在未使用的引用资源

三、按以下思路调整

1.图标资源建议只留下tabBar图标（注意：tabBar图标的大小，控制在30-40k左右最优），其余资源通过网络路径访问，有条件的就上个CDN加速好吧。

2.主包目录建议只留下tabBar相关的页面，其余文件按分包处理（注意：单个分包大小也不能超过2M，多个分包总大小不能超过8M，根据业务划分出合理的分包：例如：order、pay、login、setting、user...）

3.公共组件，公共方法的使用（建议：把分包理解成一个单独的项目，scss，js，components，小程序插件...这些都是仅限于这个分包内使用，后期也方便维护）

4.避免使用过大的js文件，或替换为压缩版或者mini版

5.检查是否存在冗余代码，抽出可复用的进行封装

6.小程序插件（建议：挂载在分包上使用，挂载主包上会影响体积）

	{

			// 分包order

			"root": "order",

			"pages": [{

					"path": "index",

					"style": {

						"navigationStyle": "custom",

						"usingComponents": {

							"healthcode": "plugin://xxxxx"

						}

					}

				}

			],

			//插件引入

			"plugins": {

				"healthcode-plugin": {

					"version": "0.2.3",

					"provider": "插件appid"

				}

			}

	}

7.根据官方建议开启按需引入、分包优化
manifest.json-源码视图

	"mp-weixin" : {

        "appid" : "xxxxx",

        "setting" : {

            "urlCheck" : false,

            "minified" : true

        },

        // 按需引入

        "lazyCodeLoading" : "requiredComponents",

        "permission" : {

            "scope.userLocation" : {

                "desc" : "获取您的位置信息，用于查询数据"

            }

        },

        "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ],

        // 分包优化

        "optimization" : {

            "subPackages" : true

        }

    }

8.Hbuilderx工具点击发行-微信小程序 （注意：运行默认是不会压缩代码）

四、终极办法

如果按以上步骤下来，还是提示代码大小超过限制的话，不妨从微信开发工具上试试

按图勾选上相关配置（注意：不要勾选上传代码时样式自动补全，会增加代码体积）

五、写在最后

1.提升小程序首页渲染速度 官方给出的代码注入优化

首页代码避免出现复杂的逻辑，控制代码量，去除无用的引入，合理的接口数量

2.小程序加载分包时可能会遇到等待的情况，解决这个问题的办法：

pages.json文件开启分包预下载

    "preloadRule": {

		"pages/index": { // 访问首页的时候就开始下载order、pay分包的内容

			"network": "all", // 网络环境 all全部网络，wifi仅wifi下预下载

			"packages": ["order","pay"] // 要下载的分包

		}

    }

总结

本文介绍了开发微信小程序时，遇到的代码包大小超过限制的问题，希望可以帮助到你。

好了，周末闲来无事，突然有个诡异想法！

如题，惯性思路很简单，就是直接撸上一个空内容的html。

注：以下都是在现代浏览器中执行，主要为**Chrome 版本 120.0.6099.217（正式版本） （64 位）和Firefox123.0.1 (64 位) **

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

</body>

</html>

؏؏☝ᖗ乛◡乛ᖘ☝؏؏~

但是，要优雅~咱玩的花一点，如果这个HTML中加入一行文字，比如下面这样，如何让这行文字一直不显示出来呢？

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

<div>放我出去！！！</div>

</body>

</html>

思考几秒~有了，江湖一直传言，Javascrip代码执行不是影响Render树生成么，上循环！于是如下

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

<div>放我出去！！！</div>

<script>

    while (1) {

      let a;

    }

    // 或者这样

    /*(function stop() {

       var message = confirm("我不想让文字出来！");

 

       if (message == true) {

         stop()

       } else {

         stop()

       }

     })()*/

</script>

</body>



</html>

```一下一下

bingo，可以实现，那再换个思路呢？加载资源？



说干就干，在开发者工具上，设置上下载速度为1kb/s，测试了以下三种类型资源



```html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

  <!-- <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css" as="style"/> -->

  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->

  <div class="let-it-go">放我出去！！！</div>

  <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script>

  <style>

    .let-it-go {

      color: red;

    }

    </style>

</body>

</html>

总得来说，JS和CSS文件，需要排在.let-it-go元素前面或者样式前面，才会影响到渲染DOM或者CSSOM，图片或者影片之类的，不管放前面还是后面，都无影响。如果在css文件中，一直有import外部CSS，也是有很大影响！

但正如题目，这种只能影响一时，却不能一直影响，就算你在代码里写一个在头部不停插入脚本，也没有用，比如如下这么写，按，依旧无效：

<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

  <link rel="stylesheet" href="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"

    as="style" />

  <!-- <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/static/bytedesign.min.css"/> -->

  <script>

    // setInterval(()=>{

    // 不停插入script脚本 或者css文件

    let index = '';

    (function fetchFile() {

      var script = document.createElement('script');

      script.src = `https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect${index}.js`;

      document.head.appendChild(script);

      script.onload = () => {

        fetchFile()

      }

      script.onerror = () => {

        fetchFile()

      }

      index+=1

      

      // 创建一个 link 元素

      //var link = document.createElement('link');

      // 设置 link 元素的属性

     // link.rel = 'stylesheet';

     // link.type = 'text/css';

     // link.href = 'https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/app.f81e9f9${index}.css';

      // 将 link 元素添加到文档的头部

      //document.head.appendChild(link);

    })()

    // },1000)

  </script>

  <div class="let-it-go">放我出去！！！</div>

  <style>

    .let-it-go {

      color: red;

    }

  </style>

  <!-- <script src="https://lf3-cdn-tos.bytescm.com/obj/static/log-sdk/collect/5.1/collect.js"></script> -->

</body>



</html>

那么，还有别的方法吗？暂时没有啥想法了，等后续再在这篇上续接~

另外，在实验过程中，有一个方式让我很意外，以为以下代码也会造成页面一直空白，但好像不行。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>demo</title>

</head>

<body>

  <div id="appp"></div>

  <script>

    (function createElement() {

      var parentElement = document.getElementById('appp');

      // 创建新的子元素

      var newElement = document.createElement('div');

      // 添加文本内容（可选）

      newElement.textContent = '这是新的子元素';

      // 将新元素添加到父元素的子元素列表的末尾

      parentElement.appendChild(newElement);

      createElement()

    })()

  </script>

  <div class="let-it-go">放我出去！！！</div>

</body>

</html>

这可以很好的证明，插入DOM元素这个任务，会在主HTML渲染之后再执行。

祝周末愉快~

简述

当js进行算术运算时，有时候会遇到以下几个问题：

// 控制台可以尝试以下代码

0.1 + 0.2  // 0.30000000000000004

0.3 - 0.1  // 0.19999999999999998

19.9 * 100 // 1989.9999999999998

为什么会遇到这个问题呢？

由于在计算机运算过程中，十进制的数会被转化为二进制来运算，有些浮点数用二进制表示是无穷的，浮点数运算标准（IEEE 754）64位双精度的小数部分最多支持53位二进制位，运算过程中超出的二进制位会被截断。运算完后再转为十进制。所以产生了精度问题。

为了解决此问题，整理了一些第三方的js库。

相关js库推荐

big.js

版本介绍

本次用的big.js版本为6.2.1

页面引入

下载big.js:

访问以下页面，在网页中右键另存为即可

// 因为作为本地测试，就不下载压缩版本了

https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.js

​

// 若需要压缩版本

https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.min.js

引入到html页面：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Big js</title>

</head>

<body>

  <!-- 引入页面 -->

  <script src="./js/big.js"></script>

  <script>

    // 尝试Big构造方法

    console.log('Big', Big)

  </script>

</body>

</html>

工程化项目

npm install big.js

在所需页面引入：

// 现在一般用 es 模块引入

import Big from 'big.js';

使用

基本演示：

// 加

let a = new Big(0.1)

a = a.plus(0.2)

​

// 由于运算结果是个对象，所以展示以下值

console.log('a', a) //  {s: 1, e: -1, c: Array(1)}

// 可以使用 Number || toNumber() 转为我们需要的数值

console.log('a', a.toNumber) || console.log('a', Number(a)) // 0.3

可以链式调用：

x.div(y).plus(z).times(9)

参考文档

// big.js 项目 github地址

https://mikemcl.github.io/big.js

​

// big.js 官方文档地址

https://mikemcl.github.io/big.js/

​

// 这篇文档将api写的很全了

https://blog.csdn.net/a123456234/article/details/132305810

难度：困难

给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串，则返回空字符串 "" 。

注意：

• 对于 t 中重复字符，我们寻找的子字符串中该字符数量必须不少于 t 中该字符数量。


• 如果 s 中存在这样的子串，我们保证它是唯一的答案。

示例 1：

输入：s = "ADOBECODEBANC", t = "ABC"

输出："BANC"

解释：最小覆盖子串 "BANC" 包含来自字符串 t 的 'A'、'B' 和 'C'。

示例 2：

输入：s = "a", t = "a"

输出："a"

解释：整个字符串 s 是最小覆盖子串。

示例 3:

输入: s = "a", t = "aa"

输出: ""

解释: t 中两个字符 'a' 均应包含在 s 的子串中，

因此没有符合条件的子字符串，返回空字符串。

提示：

• m == s.length


• n == t.length


• 1 <= m, n <= 105


• s 和 t 由英文字母组成

解题思路：

JavaScript实现：

/**

 * @param {string} s

 * @param {string} t

 * @return {string}

 */

var minWindow = function(s, t) {

    const need = {}, windowCounts = {};

    let left = 0, right = 0;

    let valid = 0;

    let start = 0, length = Infinity;



    // Initialize the need counter with characters from t.

    for(let c of t){

        need[c] ? need[c]++ : need[c] = 1;

    }



    // Function to check if the current window satisfies the need.

    const is_valid = () => Object.keys(need).every(c => (windowCounts[c] || 0) >= need[c]);



    while(right < s.length){

        const c = s[right];

        right++;



        // Increment the count in the windowCounts if the character is needed.

        if(need[c]){

            windowCounts[c] ? windowCounts[c]++ : windowCounts[c] = 1;

            if(windowCounts[c] === need[c])

                valid++;

        }



        // If the current window is valid, try to shrink it from the left.

        while(valid === Object.keys(need).length){

            if(right - left < length){

                start = left;

                length = right - left;

            }



            const d = s[left];

            left++;



            // Decrement the count in the windowCounts if the character is needed.

            if(need[d]){

                if(windowCounts[d] === need[d])

                    valid--;

                windowCounts[d]--;

            }

        }

    }



    return length === Infinity ? '' : s.substring(start, start + length);

};、

前段时间看到了一张神奇的 gif，如下：

感觉特别不可思议，而且是本地运行的环境，于是想自己实现一个但是碍于自己太菜了缺乏对球体、粒子和物理的3D技能，然后去了解了一下如何使一个窗口对另一个窗口的位置做出反应。

于是我做了一个极简的丑陋的版本：

首先，我们看一下在多个客户端之间共享信息的所有方法：

1. 服务器

显然，拥有服务器（使用轮询或Websockets）会简化问题。然而，我们能不能在不使用服务器的情况下去实现呢？

2. 本地存储

本地存储本质上是一个浏览器键值存储，通常用于在浏览器会话之间保持信息的持久性。虽然通常用于存储身份验证令牌或重定向URL，但它可以存储任何可序列化的内容。可以在这里了解更多信息。

最近发现了一些有趣的本地存储API，包括storage事件，该事件在同一网站的另一个会话更改本地存储时触发。

我们可以通过将每个窗口的状态存储在本地存储中来利用这一点。每当一个窗口改变其状态时，其他窗口将通过存储事件进行更新。

这是我最初的想法，但是后来发现还有其他的方式可以实现

3. 共享 Workers

简单来说，Worker本质上是在另一个线程上运行的第二个脚本。虽然它们没有访问DOM，因为它们存在于HTML文档之外，但它们仍然可以与您的主脚本通信。 它们主要用于通过处理后台作业来卸载主脚本，比如预取信息或处理诸如流式日志和轮询之类的较不重要的任务。

我这有一篇关于web Worker 的文章 没了解过的可以先去看看。

共享的 Workers 是一种特殊类型的 WebWorkers，可以与多个相同脚本的实例通信。

4. 建立 Workers

我使用的是Vite和TypeScript，所以我需要一个worker.ts文件，并将@types/sharedworker作为开发依赖进行安装。我们可以使用以下语法在我的主脚本中创建连接：

new SharedWorker(new URL("worker.ts", import.meta.url));

接下来需要考虑的就是以下几方面：

• 确定每个窗口


• 跟踪所有窗口的状态


• 当一个窗口改变其状态时，通知其他窗口重新绘制

type WindowState = {  

    screenX: number; // window.screenX  

    screenY: number; // window.screenY  

    width: number; // window.innerWidth  

    height: number; // window.innerHeight  

};

最关键的信息是window.screenX和window.screenY，因为它们可以告诉我们窗口相对于显示器左上角的位置。

将有两种类型的消息：

• 每个窗口在改变状态时，将发布一个windowStateChanged消息，带有其新状态。


• 工作者将向所有其他窗口发送更新，以通知它们其中一个已更改。工作者将使用sync消息发送所有窗口的状态。

// worker.ts  

let windows: { windowState: WindowState; id: number; port: MessagePort }[] = [];  

  

onconnect = ({ ports }) => {  

    const port = ports[0];  



    port.onmessage = function (event: MessageEvent) {  

        console.log("We'll do something");  

    };  

};

我们与 SharedWorker 的基本连接将如下所示。我编写了一些基本函数来生成一个ID，并计算当前窗口状态，同时我对我们可以使用的消息类型进行了一些类型定义，称为 WorkerMessage：

// main.ts  

import { WorkerMessage } from "./types";  

import {  

    generateId,  

    getCurrentWindowState,  

} from "./windowState";  

  

const sharedWorker = new SharedWorker(new URL("worker.ts", import.meta.url));  

let currentWindow = getCurrentWindowState();  

let id = generateId();

一旦启动应用程序，应该立即通知工作者有一个新窗口，因此需要发送一条消息：

// main.ts  

sharedWorker.port.postMessage({  

    action: "windowStateChanged",  

    payload: {  

        id,  

        newWindow: currentWindow,  

    },  

} satisfies WorkerMessage);

然后可以在工作者端监听此消息，并相应地更改 onmessage。基本上，一旦接收到 windowStateChanged 消息，它要么是一个新窗口，我们将其追加到状态中，要么是一个旧窗口发生了变化。然后，我们应该通知所有窗口状态已经改变：

// worker.ts  

port.onmessage = function (event: MessageEvent) {  

    const msg = event.data;  

    switch (msg.action) {  

        case "windowStateChanged": {  

            const { id, newWindow } = msg.payload;  

            const oldWindowIndex = windows.findIndex((w) => w.id === id);  

            if (oldWindowIndex !== -1) {  

                // old one changed  

                windows[oldWindowIndex].windowState = newWindow;  

            } else {  

                // new window  

                windows.push({ id, windowState: newWindow, port });  

            }  

                windows.forEach((w) =>  

                // send sync here  

            );  

        } 

        break;

    }  

};

要发送同步消息，实际上我需要一个小技巧，因为“port”属性无法被序列化，所以我将其转换为字符串，然后再解析回来。因为我比较懒，我不会只是将窗口映射到一个更可序列化的数组：

w.port.postMessage({  

    action: "sync",  

    payload: { allWindows: JSON.parse(JSON.stringify(windows)) },  

} satisfies WorkerMessage);

接下来就是绘制内容了。

5. 使用Canvas 绘图

在每个窗口的中心画一个圆圈，并用一条线连接这些圆圈，将使用 HTML Canvas 进行绘制

const drawCenterCircle = (ctx: CanvasRenderingContext2D, center: Coordinates) => {  

    const { x, y } = center;  

    ctx.strokeStyle = "#eeeeee";  

    ctx.lineWidth = 10;  

    ctx.beginPath();  

    ctx.arc(x, y, 100, 0, Math.PI * 2, false);  

    ctx.stroke();  

    ctx.closePath();  

};

要绘制线条，需要进行一些数学计算（我保证，不是很多 🤓），将另一个窗口中心的相对位置转换为当前窗口上的坐标。 基本上，正在改变基底。使用以下数学公式来实现这个功能。首先，将更改基底，使坐标位于显示器上，并通过当前窗口的 screenX/screenY 进行偏移。

const baseChange = ({  

    currentWindowOffset,  

    targetWindowOffset,  

    targetPosition,  

}: {  

    currentWindowOffset: Coordinates;  

    targetWindowOffset: Coordinates;  

    targetPosition: Coordinates;  

}) => {  

    const monitorCoordinate = {  

        x: targetPosition.x + targetWindowOffset.x,  

        y: targetPosition.y + targetWindowOffset.y,  

    };  

  

    const currentWindowCoordinate = {  

        x: monitorCoordinate.x - currentWindowOffset.x,  

        y: monitorCoordinate.y - currentWindowOffset.y,  

    };  

  

    return currentWindowCoordinate;  

};

现在有了相同相对坐标系上的两个点，可以画线了！

const drawConnectingLine = ({  

    ctx,  

    hostWindow,  

    targetWindow,  

}: {  

    ctx: CanvasRenderingContext2D;  

    hostWindow: WindowState;  

    targetWindow: WindowState;  

}) => {  

    ctx.strokeStyle = "#ff0000";  

    ctx.lineCap = "round";  

    const currentWindowOffset: Coordinates = {  

    x: hostWindow.screenX,  

    y: hostWindow.screenY,  

    };  

    const targetWindowOffset: Coordinates = {  

    x: targetWindow.screenX,  

    y: targetWindow.screenY,  

    };  



    const origin = getWindowCenter(hostWindow);  

    const target = getWindowCenter(targetWindow);  



    const targetWithBaseChange = baseChange({  

    currentWindowOffset,  

    targetWindowOffset,  

    targetPosition: target,  

    });  



    ctx.strokeStyle = "#ff0000";  

    ctx.lineCap = "round";  

    ctx.beginPath();  

    ctx.moveTo(origin.x, origin.y);  

    ctx.lineTo(targetWithBaseChange.x, targetWithBaseChange.y);  

    ctx.stroke();  

    ctx.closePath();  

};

现在，只需要对状态变化做出反应即可。

// main.ts  

sharedWorker.port.onmessage = (event: MessageEvent) => {  

    const msg = event.data;  

    switch (msg.action) {  

        case "sync": {  

            const windows = msg.payload.allWindows;  

            ctx.reset();  

            drawMainCircle(ctx, center);  

            windows  

            .forEach(({ windowState: targetWindow }) => {  

                drawConnectingLine({  

                    ctx,  

                    hostWindow: currentWindow,  

                    targetWindow,  

                });  

            });  

        }  

    }  

};

最后一步，只需要定期检查窗口是否发生了变化，如果是，则发送一条消息。

setInterval(() => {setInterval(() => {  

    const newWindow = getCurrentWindowState();  

    if (  

        didWindowChange({  

            newWindow,  

            oldWindow: currentWindow,  

        })  

    ) {  

    sharedWorker.port.postMessage({  

        action: "windowStateChanged",  

        payload: {  

            id,  

            newWindow,  

        },  

    } satisfies WorkerMessage);  

        currentWindow = newWindow;  

    }  

}, 100);

精彩新文章：拿客户电脑，半小时完成轮播组件开发！被公司奖励500

背景

我们公司的导航菜单是动态可配置的，有的页面菜单数量比较多，有的比较少。

由于大多页面菜单都是比较少的，因此当菜单非常多时， 我们采用了朴实无华的滚动条：当横向超出的时候，滚动展示。

但很快，客户就打回来了：说我们的样式太丑，居然用滚动条！还质问我们产品这合理吗？产品斩钉截铁的告诉客户，我让开发去优化...

于是，领导让我们想解决方案。（我真谢谢产品！）

很快，我想到一个方案（从其他地方看到的交互），我告诉领导：

我们可以做成动态菜单栏，如果展示不下了，出现一个更多按钮，多余的菜单都放到更多里面去：

领导说这个想法不错啊，那就你来实现吧！

好家伙，我只是随便说说，没想到，自己给自己挖了个大坑啊！

不过，我最后也是顺利的完成了这个效果的开发，还被评上了本季度优秀开发！分享一下自己的实现方案吧！

技术方案

基础组件样式开发

既然要开发这个效果，干脆就封装一个通用组件AdaptiveMenuBar.vue吧。我们先写一下基本样式，如图，灰色区域就是我们的组件内容，也就是我们菜单栏动态展示的区域。

AdaptiveMenuBar.vue

<template>

    <div class="adaptive-menu-bar">

    </div>

</template>



<style lang="less" scoped>

.adaptive-menu-bar {

    width: 100%;

    height: 48px;

    background: gainsboro;

    display: flex;

    position: relative;

    overflow: hidden;

}

</style>



  

我们写点假数据

<template>

    <div class="adaptive-menu-bar">

        <div class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                {{ item.name }}

            </div>

        </div>



        <div>更多</div>

    </div>

</template>



<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];

</script>



<style lang="less" scoped>

.adaptive-menu-bar {

    width: 100%;

    height: 48px;

    background: gainsboro;

    display: flex;

    position: relative;

    overflow: hidden;

    .origin-menu-item-wrap{

        width: 100%;

        display: flex;

    }

}

</style>

如图，由于菜单数量比较多，一部分已经隐藏在origin-menu-item-wrap这个父元素里面了。

实现思路

那我们要如何才能让多余的菜单出现在【更多】按钮里呢？原理很简单，我们只要计算出哪个菜单超出展示区域即可。假设如图所示，第12个菜单被截断了，那我们前11个菜单就可以展示在显示区域，剩余的菜单就展示在【更多】按钮里。

更多按钮的展示逻辑

更多按钮只有在展示区域空间不够的时候出现，也就是origin-menu-item-wrap元素的滚动区域宽度scrollWidth 大于其宽度clientWidth的时候。

用代码展示大致如下

<template>

  <div ref="menuBarRef" class="origin-menu-item-wrap">

      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

          <m-button type="default" size="small">{{ item.name }}</m-button>

      </div>

  </div>

</template>

<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



onMounted(() => {

    const menuWrapDom = menuBarRef.value;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    }

});

</script>

截断位置的计算

要计算截断位置，我们需要先渲染好菜单。

然后开始对menu-item元素宽度进行加和，当相加的宽度大于菜单展示区域的宽度clientWidth时，计算终止，此时的menu-item元素就是我们要截断的位置。

菜单截断的部分，我们此时放到更多里面展示就可以了。

大致代码如下：

<template>

  <div ref="menuBarRef" class="origin-menu-item-wrap">

      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

          <m-button type="default" size="small">{{ item.name }}</m-button>

      </div>

  </div>

</template>

<script setup>

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



onMounted(() => {

    const menuWrapDom = menuBarRef.value;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    }

    // 计算截断菜单的索引位置

    let sliceIndex = 0

    // 获取menu-item元素dom的集合

    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');

    // 将NodeList转换成数组

    const nodeArray = Array.prototype.slice.call(menuItemNodeList);

    let addWidth = 0;

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

        const node = nodeArray[i];

        // clientWidth不包含菜单的margin边距，因此我们手动补上12px

        addWidth += node.clientWidth + 12;

        // 76是更多按钮的宽度，我们也要计算进去

        if (addWidth + 76 > menuWrapDom.clientWidth) {

            sliceIndex.value = i;

            break;

        } else {

            sliceIndex.value = 0;

        }

      }

  

});

</script>

样式重整

当被截断的元素计算完毕时，我们需要重新进行样式渲染，但是注意，我们原先渲染的菜单列不能注销，因为每次浏览器尺寸变化时，我们都是基于原先渲染的菜单列进行计算的。

所以，我们实际需要渲染两个菜单列：一个原始的，一个样式重新排布后的。

如上图，黄色就是原始的菜单栏，用于计算重新排布的菜单栏，只不过，我们永远不在页面上展示给用户看！

<template>

    <div class="adaptive-menu-bar">

        <!-- 原始渲染的菜单栏 -->

        <div ref="menuBarRef" class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                <m-button type="default" size="small">{{ item.name }}</m-button>

            </div>

        </div>

      

        <!-- 计算优化显示的菜单栏 -->

        <div v-for="(item, index) in menuList" :key="index" class="menu-item">

            <m-button type="default" size="small">{{ item.name }}</m-button>

        </div>

        <div >更多</div>

    </div>

</template>

代码实现

基础功能完善

为了我们的菜单栏能动态的响应变化，我们需要再每次resize事件触发时，都重新计算样式

const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



// 是否展示更多按钮

const showMoreBtn = ref(false);



const setHeaderStyle = () => {

  // ....

}



window.addEventListener('resize', () => setHeaderStyle());



onMounted(() => {

    setHeaderStyle();

});

</script>

完整代码

完整代码剥离了一些第三方UI组件，便于大家理解。

<template>

    <div class="adaptive-menu-bar">

        <!-- 原始渲染的菜单栏 -->

        <div ref="menuBarRef" class="origin-menu-item-wrap">

            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">

                {{ item.name }}

            </div>

        </div>

        <!-- 计算优化显示的菜单栏 -->

        <div v-for="(item, index) in menuList" :key="index" class="menu-item">

            {{ item.name }}

        </div>



        <!-- 更多按钮 -->

        <div v-if="showMoreBtn" class="dropdown-wrap">

            <span>更多</span>

            <!-- 更多里面的菜单 -->

            <div class="menu-item-wrap">

                <div v-for="(item, index) in menuOriginData.slice(menuList.length)" :key="index">{{ item.name }}</div>

            </div>

        </div>

    </div>

</template>

<script setup>

import { IconMeriComponentArrowDown } from 'meri-icon';



const menuBarRef = ref();



const open = ref(false);



const menuOriginData = [

    { name: '哆啦a梦', id: 1 },

    { name: '宇智波佐助', id: 1 },

    { name: '香蕉之王奥德彪', id: 1 },

    { name: '漩涡鸣人', id: 1 },

    { name: '雏田', id: 1 },

    { name: '大雄', id: 1 },

    { name: '源静香', id: 1 },

    { name: '骨川小夫', id: 1 },

    { name: '超级马里奥', id: 1 },

    { name: '自来也', id: 1 },

    { name: '孙悟空', id: 1 },

    { name: '卡卡罗特', id: 1 },

    { name: '万年老二贝吉塔', id: 1 },

    { name: '小泽玛丽', id: 1 }

];



const menuList = ref(menuOriginData);



// 是否展示更多按钮

const showMoreBtn = ref(false);



const setHeaderStyle = () => {

    const menuWrapDom = menuBarRef.value;

    if (!menuWrapDom) return;

    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {

        showMoreBtn.value = true;

    } else {

        showMoreBtn.value = false;

    }

    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');

    if (menuItemNodeList) {

        let addWidth = 0,

            sliceIndex = 0;

        // 将NodeList转换成数组

        const nodeArray = Array.prototype.slice.call(menuItemNodeList);

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

            const node = nodeArray[i];

            addWidth += node.clientWidth + 12;

            if (addWidth + 64 + 12 > menuWrapDom.clientWidth) {

                sliceIndex = i;

                break;

            } else {

                sliceIndex = 0;

            }

        }

        if (sliceIndex > 0) {

            menuList.value = menuOriginData.slice(0, sliceIndex);

        } else {

            menuList.value = menuOriginData;

        }

    }

};



window.addEventListener('resize', () => setHeaderStyle());



onMounted(() => {

    setHeaderStyle();

});

</script>