跨标签页通信常见方案

• BroadClass Channel 广播
• Service Worker 火狐在用户隐私模式下不可用
• LocalStorage window.onstorage 监听
• Shared Workder 定时轮询 setInterval
• indexdDB 定时轮询 setInterval
• cookie 定时轮询
• window.open window.postMessage
• Websocket

跨页面共享数据

const channel = new BroadcastChannel("demo");
export function sendMsg(type, content) {
  channel.postMessage({
    type,
    content,
  });
}
export function listenMsg(calback) {
  const handler = (e) => {
    callback && callback(e.data);
  };
  channel.addEventListener("message", handler);
  return () => {
    channel.removeEventListener("message", handler);
  };
}

import { onUnmounted } from "vue";

export const enum EBroadcastChannelContextEnum {
  REVIEW_TASKS = "PDA_NORMAL_CHECK_INDEX", //
}

export const useBroadcastChannelContext = (
  key: EBroadcastChannelContextEnum,
  fun?: Function
) => {
  const message = function (ev) {
    console.log("get", key);
    fun && fun(ev.data);
  };
  const channel = new BroadcastChannel(key);
  if (fun) {
    channel.addEventListener("message", message);
    onUnmounted(() => {
      channel.removeEventListener("message", message);
    });
  }

  const postMessage = (msg: string) => {
    console.log("send", key);

    channel.postMessage(msg);
  };

  return {
    postMessage,
  };
};

fetch 请求中断

let controller = null;
//取消上一次的请求
controller && controller.abort();
controller = new AbortController();
try {
  const list = await fetch(
    "http://localhost:9527/api/search?key=" + input.value,
    {
      signal: controller.signal,
    }
  ).then((resp) => resp.json());
  createSuggest(list);
} catch {
  console.log("abort");
}

set 妙用 并集交集差集

两个数组的并集 交集 差集 不能出现重复项 得到的就诶过是一个新的数组

const arr1 = [33, 22, 55, 33, 11, 33, 5];
const arr2 = [3423, 3423, 4234, 234234];

//并集
const union = [...new Set([...arr1, ...arr2])];
console.log(union);
//交集
const cross = [...new Set(arr1)].filter((it) => {
  return arr2.includes(it);
});
//差集
const diff = union.filter((it) => !cross.includes(it));

CSS 变量还能这样用！再遇到这种问题就可以巧妙解决啦

关键字：合成线程

<style>
  .container {
    width: 80%;
    height: 300px;
    border: 3px solid #aaa;
    position: relative;
    margin: 0 auto;
  }
  .item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f40;
    left: 0;
    top: 30px;
    position: absolute;
    animation: move 4px linear infinite;
  }
  @keyframes move {
    50% {
      transform: translateX(calc(var(--w) - 100%));
    }
  }
</style>

<div class="container">
  <div class="item"></div>
</div>

<script>
  const container = document.querySelector(".container");
  const item = document.querySelector(".item");
  item.style.setProperty("--w", container.clientWidth + "px");
</script>

在开发中遇到这种较大的数据请求，该如何加快响应速度

• 问题代码

async function loadNovel() {
  const url = "http://duy1-static.oss-cn-beijing.aliyuncs.com/files/novel.txt";
  const resp = await fetch(url);
  const text = await resp.text();
  console.log(text);
}

• 分片处理（存在乱码）

  const resp = await fetch(url);
  const reader = resp.body.getReader();
  const decoder = new TextDecoder();
  for(;;){
    const (value, done)  = await reader.read();
    if(done){
      break;
    }
    const text = decoder.decode(value);
    console.log(text);
  }

• 处理乱码

async function loadNovel() {
  const url = "http://......txt";
  const resp = await fetch(url);
  const reader = resp.body.getReader();
  const decoder = new TextDecoder();
  let remainChunk = new Uint8Array(0);
  for (;;) {
    const { value, done } = await reader.read();
    if (done) break;
    const lastIndex = value.lastindexOf();
    const chunk = value.slice(0, lastIndex);
    const readChunk = new Uint8Array(re + chunk.length);
    remainChunk = value.slice(lastIndex);
    const text = decoder.decode(readChunk);
    console.log(text);
  }
}

// 假设你有一个 Uint8Array，它包含 UTF-8 编码的数据
const uint8Array = new Uint8Array([
  /* ... 数据的字节 ... */
]);

// 创建一个 TextDecoder 实例，指定要使用的编码（在这种情况下是 'utf-8'）
const decoder = new TextDecoder("utf-8");

// 使用 decoder.decode() 方法将字节解码为字符串
const string = decoder.decode(uint8Array);

console.log(string); // 输出解码后的字符串

字符串截取的 bug

最开始 js 使用的编码是 ucs-2 每一个文字对应 16 位空间 一个文字对应一个码元

后面是 utf-16 length 实际上是码元的数量

码点 - 一个文字算一个码点

console.log(''.codePointAt(0) > 0xffff) // 得到码点的值 如果大于 16 进制数占用两个码元

const str = "阿是吉娃娃员他说的纷";
String.prototype.sliceByPoint = function (pStart, pEnd) {
  let result = ""; //截取结果
  let pIndex = 0; //码点的指针
  let cIndex = 0; //码元的指针
  while (1) {
    if (pIndex >= pEnd || cIndex >= this.length) {
      break;
    }
    const point = this.codePointAt(cIndex);
    if (pIndex >= pStart) {
      result += String.fromCodePoint(point);
    }
    pIndex++;
    cIndex += point > 0xffff ? 2 : 1;
  }
  return result;
};

let 和 var 的区别

let var 都可以跨越 script 元素访问 let var 都有提升，只是 let const 做了特殊处理（编译原理决定）

什么是 vue 数据响应式

数据变化后，会自动重新运行依赖该数据的函数

简单又实用的打包结果分析工具

webpack-bundle-analyzer 打包结果分析

前提条件 vue cli webpack 或者 vite rollup-plugin-visualizer

解除表单 UI 和功能的耦合、高质量的封装表单组件

vscode github Reposite 插件 将远程项目拉到本地

实现地图数据展示

数据源

(async function(){
    const myChart = echarts.init(document.querySelector('.geo'))//
    <!-- 初始化获得echart实例 -->
    myChart.showLoading();//loading层
    const resp = await fetch('./china.geojson.json').then((resp)=>{
        return resp.json();
    })//获取中国geojson数据

    const users = await fetch('./user.json').then((resp)=>{
        return resp.json();
    })//获取用户数据
    //注册地图数据
    echarts.registermap('China',resp);
    myChart.setOption({
        title:{
            text:'注册用户分布图'，//
        },
        <!-- formatter 为文字提示格式， {b}表示数据名 {c}表示数据值 -->
        tooltip:{formatter:'{b}注册用户{c}人'},
        visualMap:{
            <!-- 可视地图，一般用户设置不同颜色来展现数据的差异 -->
            let:'left',//可视地图显示的位置
            top:'center',//可视地图显示的位置
            min:0,//区间的最小值
            max:10000,//区间数据的最大值
            text:['高','低'],//文本，默认为数值文本
            calculable:true,//是否允许控制区间
        },
        series:[
            {
                type:'map',//图标类型； 地图
                map:'China',//使用注册的地图
                roam:true，//是否开启鼠标缩放和平移漫游
                scaleLimit:{
                    <!-- 缩放比例控制 -->
                    min:0.7,//最小缩放到0.7倍
                    max:3,//最大缩放到3倍
                },
                data:users,
            }
        ]

    })

    myChart.hideLoading();

})();

CommonJS，彻底理解这个函数就全部搞定

require 伪代码

ES Module 符号绑定造成的神奇现象，你有遇到过

• 两个绑定共用一个内存空间

只有导入语句这里有符号绑定

• 解决办法