技术备忘录

swiper在浏览器窗口大小改变resize造成swiper-slide显示样式错乱

data(){
    return {
        swiperOption:{
            observe: true,
            on: {
              resize: function () {
                    setTimeout(() => {
                         this.update()
                    }, 500) //延时器很重要，不加可能会出错
                  },
              },
        }
    }
}

避免内存泄漏的方法

1. 少用全局变量，避免意外产生全局变量
2. 使用闭包要及时注意，有Dom元素的引用要及时清理。
3. 计时器里的回调没用的时候要记得销毁。
4. 为了避免疏忽导致的遗忘，我们可以使用 WeakSet 和 WeakMap结构，它们对于值的引用都是不计入垃圾回收机制的，表示这是弱引用。举个例子：

const wm = new WeakMap();const element = document.getElementById('example');

wm.set(element, 'some information');
wm.get(element) // "some information"

这种情况下，一旦消除对该节点的引用，它占用的内存就会被垃圾回收机制释放。Weakmap 保存的这个键值对，也会自动消失。

基本上，如果你要往对象上添加数据，又不想干扰垃圾回收机制，就可以使用 WeakMap。

因为是老项目升级到vue3，写法都没有改，但是发现升级到element-plus后输入框无法输入，用的是vue2的写法，也没有用typescript，所以按照官网实例没用

研究后发现需要加上v-model:model-value才可以输入

<el-form-item label="名称">
  <el-input v-model:model-value="headForm.name" placeholder="你是真ikun么" clearable />
</el-form-item>

发送请求时不添加cookie

let data = await fetch('/v', { credentials: 'omit' })
    data = await data.json();

flv断流时保存播放的最后一帧为图片，减少黑屏

const scale = 0.25;
const video = this.$refs.videoCtrl
let canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
this.poster = canvas.toDataURL('image/png')
canvas = null

Delete ␍eslintprettier/prettier

直接在.eslintrc.js中最后一行添加

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/essential",
    "@vue/standard",
    "eslint:recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "comma-dangle": "off",
    semi: "off",
    quotes: "off",
    "space-before-function-paren": "off",
    "no-multi-spaces": "off",
    "comma-spacing": "off",
    "no-unused-vars": "warn",
    "quote-props": "off",
    "prefer-const": "warn",
    "spaced-comment": "off",
    'prettier/prettier': ['error', { endOfLine: 'auto' }]
  },
};

不同设备下呈现不同的图片

 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)  {     
 .bg {          
         background-image: url("bg@2x.png") // 尺寸为200 * 200的图     
     } 
 }

nginx转发WebSocket

#必须添加的
map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}

 server {
        #普通的端口
        listen 8083;
        # 这里你自己的服务器ip或者域名，1.0是我随便写的
        server_name 1.1.0.0;
        root /web_cloud/dist;

        location /{
                try_files $uri $uri/ /index.html;
        }
        # 正常的接口请求
        location /api/ {
                proxy_pass http://localhost:2021;
                proxy_set_header  Host $http_host;
                proxy_set_header  X-Real-IP  $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header  X-Forwarded-Proto $scheme;
        }
        # 转发ws
        location ^~ /ws {
                # 后台准备的websocket地址端口
                proxy_pass http://localhost:9092;
                # 其他参数都一样
                proxy_read_timeout 300s;
                proxy_send_timeout 300s;
                proxy_set_header  Host $http_host;
                proxy_set_header  X-Real-IP  $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header  X-Forwarded-Proto $scheme;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
        }

}

大屏适配方案

import { ref } from 'vue'

export default function useDraw() {
  // * 指向最外层容器
  const appRef = ref()
  // * 定时函数
  const timer = ref(0)
  // * 默认缩放值
  const scale = {
    width: '1',
    height: '1',
  }
  // * 设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080

  // * 需保持的比例（默认1.77778）
  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const calcRate = () => {
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef.value) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  // 改变窗口大小重新绘制
  const unWindowDraw = () => {
    window.removeEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw,
    unWindowDraw
  }
}

JavaScript获取css变量

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--黑色主题');