近期分享学习心得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,一经查实,立即删除!

相关文章

C语言基础语法复习08-位域bit-fields

在c2011 iso文档中,位域与struct、union是一起定义的: Structure and union specifiers Syntaxstruct-or-union-specifier:struct-or-union identifier opt { struct-declaration-list }struct-or-union identifierstruct-or-union:structunionstruct-d…

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 教程。 流…

C++智能指针shared_ptr使用详解

shared_ptr 是一个共享所有权的智能指针,允许多个指针指向同一个对象。 ​ shared_ptr使用引用计数,每一个shared_ptr的拷贝都指向相同的内存。每使用它一次,内部的引用计数加1,每析构一次,内部的引用计数减1,减为0时,释放所指向的堆内存。shared_ptr内部的引用计数是…

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…

利用html2canvas + jspdf将页面内容生成pdf并且下载

依赖安装 npm install html2canvas npm install jspdf函数调用以及实现&#xff08;vue&#xff09; // 引入 import html2canvas from html2canvas import JsPDF from jspdfconst previewEl document.getElementById(targetDom) // 函数调用 this.savePdf(previewEl).then(…

QImage函数setAlphaChannel

最近使用QImage的函数setAlphaChannel时遇到了一个坑&#xff0c;花了不少时间才弄清楚&#xff1a;在使用这个函数后&#xff0c;图像格式都会变成QImage::Format_ARGB32_Premultiplied。 先看下setAlphaChannel在帮助文档的说明&#xff1a; void QImage::setAlphaChannel(…

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

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