近期分享学习心得3

1、全屏组件封装

先看之前大屏端的监控部分全屏代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
整块全屏代码
常规流是下面这种

//进入全屏
function full(ele) {//if (ele.requestFullscreen) {//    ele.requestFullscreen();//} else if (ele.mozRequestFullScreen) {//    ele.mozRequestFullScreen();//} else if (ele.webkitRequestFullscreen) {//    ele.webkitRequestFullscreen();//} else if (ele.msRequestFullscreen) {//    ele.msRequestFullscreen();//}const funcNames=['requestFullscreen','mozRequestFullScreen','webkitRequestFullscreen','msRequestFullscreen',]const name=funcNames.find(funcName=>funcName in ele)name&&ele[name]()
}
//退出全屏
function exitFullscreen() {if(document.exitFullScreen) {document.exitFullScreen();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if(document.msExitFullscreen) {document.msExitFullscreen();}
}
//监控全屏window.onresize = () => {// 全屏下监控是否按键了ESC//that.isFull = this.isFullScreenFunc()
}
//判断全屏
isFullScreenFunc() {return !!(document.fullscreen ||document.mozFullScreen ||document.webkitIsFullScreen ||document.webkitFullScreen ||document.msFullScreen)},
//获取全屏节点
function getFullscreenElement() {return (        document.fullscreenElement ||document.mozFullScreenElement ||document.msFullScreenElement ||document.webkitFullscreenElement||null);
}

提高

function getPropertyName(names,target){return names.find(name=>name in target)
}
const enterFullScreen=getPropertyName(['requestFullscreen','mozRequestFullScreen','webkitRequestFullscreen','msRequestFullscreen',
],document.documentElement)
export function enter(ele){enterFullScreen&&ele[enterFullScreen]()
}
//获取全屏节点
const fullEleName=getPropertyName(['fullscreenElement','mozFullScreenElement','msFullScreenElement','webkitFullscreenElement',
],document.documentElement)
export function getElement(){return document[fullEleName]||null
}

在这里插入图片描述

2、任务执行的洋葱模型(存疑,后期回顾)

在这里插入图片描述
在这里插入图片描述
KOA洋葱模型

3、状态库持久化(存疑,后期回顾)

状态库vuex和pinia,存储在内存中,一旦刷新数据没了,在和同事探讨时,发现数据是存储在session和local里,再取出来
1、vuex

2、pinia

4、统一vite中的图片转换逻辑

在这里插入图片描述
一张小图一张大于4M大图,
开发环境里打印的是正常绝对路径,
生产环境大于4M图自动变成base64
在这里插入图片描述
第一种方法是动生产环境,修改配置,小于4096就自动转换,改成0
在这里插入图片描述
第二种方法是动开发环境,自己写vite插件,
在这里插入图片描述
写个插件小于4096在开发环境转成base64,
【code ai代码补全】
在这里插入图片描述
打印的id是文件的绝对路径
在这里插入图片描述
导入fs模块
import fs from ‘node:fs’

await fs.promise.stat(id)//stat文件状态,是异步的

下面是上面await的打印对象
在这里插入图片描述
在这里插入图片描述
如果大于4096才需要转换,
读取文件,是buffer对象,转base64
在这里插入图片描述
vite是由esbuild和rollup组成,
transform是rollup的钩子函数,做代码转换用的
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/99295.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FreeRTOS自我救赎3之USB虚拟串口

任何项目的功能都从需求出发,在这里我用的是斥侯蜂的一块STM32F407ZGT6 在开发一个项目的过程中,免不了串口调试,而这块板子板载的mircousb不是直接连的引脚而是一个OTGUSB

Maven(4)-利用intellij idea创建maven 多模块项目

本文通过一个例子来介绍利用maven来构建一个多模块的jave项目。开发工具:intellij idea。 一、项目结构 multi-module-project是主工程,里面包含两个模块(Module): web-app是应用层,用于界面展示&#xff…

FFmpeg 命令:从入门到精通 | FFmpeg 解码流程

FFmpeg 命令:从入门到精通 | FFmpeg 解码流程 FFmpeg 命令:从入门到精通 | FFmpeg 解码流程流程图FFmpeg 解码的函数FFmpeg 解码的数据结构补充小知识 FFmpeg 命令:从入门到精通 | FFmpeg 解码流程 本内容参考雷霄骅博士的 FFmpeg 教程。 流…

ubuntu2204配置仓库为阿里源

官网上支持到2004,2204需要手动更改一下 deb https://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse deb-src https://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiversedeb https://mirrors.aliyun.com/ubuntu/ jam…

学生用的台灯护眼的哪种比较好?精选适合学生用的护眼台灯

现代小孩的学习压力确实很大,已经不能和我们以往那种“半大自然化学习”相提并论啦,如今各种学习PAD、电脑网课,成堆的学习资料与作业,恐怕是从小学甚至学前就已经是常态了。而且在平时我们路过学校的时候应该也不难发现&#xff…

Vue中如何进行音视频录制与视频剪辑

在Vue中进行音视频录制与视频剪辑 随着互联网的发展,音视频处理已经成为前端开发中一个越来越重要的领域。Vue.js作为一款流行的前端框架,为我们提供了丰富的工具和生态系统,使得音视频录制和编辑变得更加容易。本文将介绍如何在Vue中进行音…

论文阅读--Cell-free massive MIMO versus small cells

无蜂窝大规模MIMO与小蜂窝网络 论文信息 Ngo H Q, Ashikhmin A, Yang H, et al. Cell-free massive MIMO versus small cells[J]. IEEE Transactions on Wireless Communications, 2017, 16(3): 1834-1850. 无蜂窝大规模MIMO中没有小区或者小区边界的界定,所有接入…

位移贴图和法线贴图的区别

位移贴图和法线贴图都是用于增强模型表面细节和真实感的纹理贴图技术,但是它们之间也存在着差异。 1、什么是位移贴图 位移贴图:位移贴图通过在模型顶点上定义位移值来改变模型表面的形状。该贴图包含了每个像素的高度值信息,使得模型的细节…

idea compile项目正常,启动项目的时候build失败,报“找不到符号”等问题

1、首先往上找,看能不能找到如下报错信息 You aren’t using a compiler supported by lombok, so lombok will not work and has been disabled. 2、这种问题属于lombok编译失败导致,可能原因是依赖jar包没有更新到最新版本 3、解决方案 1&#xff09…

二、图像处理

待完善 一、图片缩放 import org.bytedeco.opencv.global.opencv_imgcodecs; import org.bytedeco.opencv.global.opencv_imgproc; import org.bytedeco.opencv.opencv_core.Mat; import org.bytedeco.opencv.opencv_core.Size;public class ImageResizer {public static voi…

Python —— UI自动化之八大元素定位

1、基础元素定位 1、id定位 使用html中标签的id元素去定位,在一般定位中优先选择,举例: from time import sleep from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Firefox() driver.get(&q…

MySQ 学习笔记

1.MySQL(老版)基础 开启MySQL服务: net start mysql mysql为安装时的名称 关闭MySQL服务: net stop mysql 注: 需管理员模式下运行Dos命令 . 打开服务窗口命令 services.msc 登录MySQL服务: mysql [-h localhost -P 3306] -u root -p****** Navicat常用快捷键 键动作CTRLG设…

修炼k8s+flink+hdfs+dlink(三:安装dlink)

一:mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二:上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…

Django REST framework API版本管理【通过GET参数传递】

API版本 在开发过程中可能会有多版本的API,因此需要对API进行管理。django drf中对于版本的管理也很方便。 http://www.example.com/api/v1/info http://www.example.com/api/v2/info 上面这种形式就是很常见的版本管理 在restful规范中,后端的API需…

css记录写一个奇怪的按钮

完成作业的时候发现一个很有意思的按钮&#xff0c;记录一下记录一下 看看界面 可以看出是一个奇形怪状的按钮&#xff0c;而且在按下的时候&#xff0c;图片和文字的颜色会改变 尝试解决 <!DOCTYPE html> <html lang"zh"> <head><meta chars…

cartographer-(0)-ubuntu(20.04)-环境安装

1.安装 ROS wiki.ros.org 1.1修改镜像源&#xff1a; 到网站上找与操作系统相匹配的镜像源 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb htt…

Linux基础指令大全

Linux基础指令大全 1. ls 指令2. pwd命令3. cd 指令4. touch指令5. mkdir指令6. rmdir指令 && rm 指令7. man指令8.cp指令9. mv指令10. cat 指令11. more指令12. less指令13. head指令14. tail指令15. 时间相关的指令1. **在显示方面&#xff0c;使用者可以设定欲显示的…

node中的crypto模块指南

node中的crypto模块指南 加密操作可能很棘手&#xff0c;以至于付费的加密服务公司的存在只是为了确保在代码库中正确实现加密操作。好消息是&#xff0c;只需学习一些知识&#xff0c;我们就可以使用 Node 的内置加密模块免费进行适当的加密。 在本指南中&#xff0c;我们将…

2023-2024年华为ICT网络赛道模拟题库

2023-2024年网络赛道模拟题库上线啦&#xff0c;全面覆盖网络&#xff0c;安全&#xff0c;vlan考点&#xff0c;都是带有解析 参赛对象及要求&#xff1a; 参赛对象&#xff1a;现有华为ICT学院及未来有意愿成为华为ICT学院的本科及高职院校在校学生。 参赛要求&#xff1a…

基于共生生物优化的BP神经网络(分类应用) - 附代码

基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.共生生物优化BP神经网络3.1 BP神经网络参数设置3.2 共生生物算法应用 4.测试结果…