合集-有意思的
摘要：``` //使用递归的方式实现数组、对象的深拷贝 export function deepClone (obj) { let objClone = Array.isArray(obj) ? [] : {}; if (obj && typeof obj "object") { for (var key
阅读全文
摘要：优化一下之前 点击查看代码 ``` function getUrlParameters(url) { const params = {}; const queryString = url.split('?')[1]; if (queryString) { const paramPairs = que
阅读全文
摘要：点击查看代码 ``` 启用 禁用 展开/折叠 全选/全不选 父子(联动/不联动) 取消 确认 ```
阅读全文
摘要：在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。 1.静态模板提升（Static Template Hoisting）：Vue 3使用了基于模板的静态分析技术，可以在编译阶段将静态的模板部分提升为常量，从而减少运行时的diff和渲染开销。 2.静态标记（Static Marking
阅读全文
摘要：
阅读全文
摘要：渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。 下面是渲染引擎在取得内容之后的基本流程： 1.解析html为dom树，解析css为cssom。渲染引擎开始解析html，并将标签转化为内容树中的dom节点。 2. 把dom和cssom结合起来生成渲染树(render)。接着，它解
阅读全文
摘要：Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。 其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）。 语法 Object.entries(obj) 参数 obj：可以返回其可枚举属性的键值对的对象。
阅读全文
摘要：https://blog.csdn.net/chenzhizhuo/article/details/101291652 这个大佬写的很细，强烈推荐
阅读全文
摘要：``` import { Loading } from 'element-ui' let loadingCount = 0 let loading const startLoading = () => { loading = Loading.service({ lock: true, text: '
阅读全文
摘要：## 性能代价和获得的用户体验收益不成正比 ```` 先从技术方面讲的话，无非就是数组每个下标都要添加监听器， 无疑会增加内存消耗， 而数组的sort、splice、reverse、shift、unshift等都会触发大量的数组子项的下标更改和变动， 从而触发大量getter和setter， 这在数
阅读全文
摘要：问题：表单验证正则匹配数字，但输入汉字仍然通过 原因：.number会将input里的值用parseFloat()转化，这样用正则匹配数字后，输入的即使是：123四五六；也不会报错，因为123四五六被转换成了123 解决办法：将.number去除即可 除了.number修饰符外，还有 .lazy 、
阅读全文
摘要：电梯导航css 前端的算法https://visualgo.net/zh img和video的裁剪 数据脱敏 图片不遮挡图像 element+导航栏 绘制svg动态图标 加一个hover动画时间 backface-visibility隐藏盒子背面
阅读全文
摘要：js手写一个call /** * 手写一个call方法 * 函数名字为myCall * symbol优化 */ let obj = { name: '白衣', age: 3, } function getYaer (name, age) { // console.log('函数内的this',thi
阅读全文
摘要：js手写一个apply /** * 手写一个apply方法 * 函数名字为 myApply * symbol优化 */ Function.prototype.myApply = function (targetObj, args) { // symbol优化 let key = Symbol('ke
阅读全文
摘要：手写一个 bind 方法 /** * 手写一个 bind 方法 * 函数名字为 myBind */ Function.prototype.myBind = function (targetObj, ...args) { return (...argus) => this.call(targetObj
阅读全文
摘要：说明 构造函数继承实现属性继承 以父类原型纯净对象 改变constructor的指向(如果不改变就会指向父类，要想实现继承要指向子类) create的第二个参数会覆盖掉第一个参数中的相同数据
阅读全文
摘要：点击查看代码 对于为什么要传入一个函数来更新状态，是为了确保在更新状态之前，使用最新的状态值进行计算。 让我解释一下。在React中，当我们调用setXXX钩子来更新状态时，React并不会立即更新状态值。相反，它将更新请求加入到一个队列中，并在稍后的时间点批量处理这些更新请求。这样做是为了优化性能
阅读全文
摘要：函数柯里化 function setSumMark (length) { let arr1 = [] function myCurrying (...argus) { arr1.push(...argus) if (arr1.length length) { let res = arr1.slice
阅读全文
摘要：点击查看代码 axios请求中断_下载中断和下载进度 <script setup lang="ts"> import axios from 'axios' import { ref } from 'vue' let abort: AbortController const progress = re
阅读全文
摘要：点击查看代码 <script setup lang="ts"> import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:3000', // 设置请求超时时间为5秒 timeout: 200
阅读全文
摘要：axios请求重试_axios-retry插件 <script setup lang="ts"> import axios from 'axios' import axiosRetry from 'axios-retry' const request = axios.create({ baseURL
阅读全文
摘要：简介 虚拟列表是一种优化长列表渲染的技术，它可以在保持流畅性的同时，渲染大量的数据。 在传统的列表渲染中，如果列表非常长，会导致渲染时间过长，页面卡顿，用户体验变得非常差。而虚拟列表则是只渲染可见区域内的数据，而非全部渲染，这样就可以大大提高渲染效率，保持页面流畅性。 应用场景 虚拟列表技术在大数据
阅读全文
摘要：支持多种文件(docx、excel、pdf)预览的 vue 组件库。 同时支持 vue2/3 使用简单 支持本地文件 支持远程地址 pdf 预览 安装依赖 npm i @vue-office/pdf <script setup lang="ts"> // 引入 VueOffice 组件 import
阅读全文
摘要：
阅读全文
摘要：把原生 DOM 标签转换后加入到 3D 场景空间中显示 function domTo3D() { // 1. 准备原生 DOM 标签 const tag = document.createElement('span') tag.innerHTML = '我是文字' tag.style.color =
阅读全文
摘要：原生 DOM 还用原生的 DOM 点击事件，要注意开启 pointerEvents CSS3DRenderer 是一个新的渲染器，需要在渲染循环调用并适配 labelRenderer.domElement.style.pointerEvents = 'none' // 让标签触发鼠标交互事件 thr
阅读全文
摘要：点击查看代码 // 目标：初始化 three.js 基础环境 import * as THREE from 'three' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' import { CSS3DRen
阅读全文
摘要：二分查找算法 const func = (array, target) => { let left = 0 let right = array.length - 1 while (left <= right) { let mid = Math.floor((left + right) / 2) if
阅读全文
摘要：js判断字符串是否连贯 var name="ABCDEF"; //需要验证的字符串 var lcontinuity=0; //用于连贯个数的计数 for(var i=1;i<name.length;i++){ if(((name[i].charCodeAt())-(name[i-1].charCod
阅读全文
摘要：世界坐标系：场景空间的中心点 模型坐标系：模型物体本身的中心点 // 注意：建模师给的模型文件，物体的坐标轴原点可能不再正中心 物体位移：参考父级物体的坐标系 旋转和缩放：参考自身坐标系
阅读全文
摘要：this.model.traverse(obj => { obj.castShadow = true })
阅读全文
摘要：点击查看代码 const resizeObserver = ref(null); //进行初始化和监听窗口变化 onMounted(async () => { await nextTick(() => { initChart(); setOptions(options.value, opts.val
阅读全文
摘要：作用： 1 验证码是目前大多网站所支持并使用于注册登录的。就在于其作用能有效防止恶意登录注册，验证码每次都不同, 这就可以排除,用其他病毒或者软件自动申请用户及自动登陆.有效防止这种问题。 2 短信验证码等可以验证用户的合法性 1 智能选图 文字点选 短信 滑动 等一般 都是购买的服务 2 图片文字
阅读全文
摘要：同一处的多个装饰器是按照洋葱模型，由外到内进入，再由内到外执行
阅读全文
摘要：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex-grow ：flex-grow属性定义盒子的放大比例，默认为0 不放大 其他数字按比例放大 flex-shrink：如果所有项目的flex-shrink属
阅读全文
摘要：1 怎么判断是安卓还是 ios** //获取浏览器的userAgent,并转化为小写 var ua = navigator.userAgent.toLowerCase(); //判断是否是苹果手机，是则是true var isIos = (ua.indexOf('iphone') != -1) ||
阅读全文
摘要：URI Uniform Resource Identifier 统一资源标识符 URL Uniform Resource Locator 统一资源定位符 URN Uniform Resource Name 统一资源名称
阅读全文
摘要：点击查看代码 function createBasic() { // 目标：了解顶点坐标绘制正方形 // 1. 准备 BufferGemotry 缓冲几何图形 // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置 // 3. 准备 BufferAttribute 属性缓冲对象，保存几何图形的属
阅读全文
摘要：概念：attribute 用于向顶点着色器，传输几何图形待处理的各种属性，例如：顶点坐标，UV 坐标等等 注意：attribute 只能用于顶点着色器中，值在运行时会从几何图形属性中取值 点击查看代码 function createBasic() { // 目标：着色器变量 - attribute
阅读全文
摘要：点击查看代码 /** * 参数：模型文件路径，成功回调函数 * * 基于 three.js 加载器分别加载模型 * * 全部加载后通过回调函数传出打印 */ import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js' imp
阅读全文
摘要：将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是19201080的，某个数值是fontSize:12，当前显示器是3840的大屏，那么你现在的字体大小应该是：12（3840/1920）= 24。 //当前视口宽度 let now
阅读全文
摘要：点击查看代码 /* * @Author: your name * @Date: 2021-10-22 10:27:11 * @LastEditTime: 2021-12-04 00:04:58 * @LastEditors: Please set LastEditors * @Description
阅读全文
摘要：点击查看代码 // 鼠标按下 mousedownFn = () => { this.isMouseTouching = true // 鼠标已经按下 } // 鼠标移动 mousemoveFn = (e) => { if (this.isMouseTouching) { // 只有按下时进入此逻辑代
阅读全文
摘要：轨道控制器内部会取出摄像机初始位置坐变化 camera.position.z = 0.1 调整立方体沿着 z 轴做 -1 缩小（镜面翻转） cube.scale.set(1, 1, -1) 在什么条件下让标签触发鼠标交互事件 原生dom pointerEvents = ‘all’ 渲染器配置 non
阅读全文
摘要：uniapp底层跨端原理 - 代码编写：开发者使用Vue.js框架编写uniapp的代码，包括页面结构、样式和逻辑等。 - 编译过程：在编译过程中，uniapp会将Vue.js的代码转换为各个平台所需的代码。这一转换过程由uniapp的编译器完成。 - 平台特定代码生成：根据不同平台的特性和要求，u
阅读全文
摘要：点击查看代码 - 输入验证和过滤：对于用户输入的数据，进行严格的验证和过滤。可以使用正则表达式或其他验证方式，确保输入的数据符合预期的格式和内容。同时，对于特殊字符进行转义处理，防止恶意代码的注入。 - 输出编码：在将用户输入的内容输出到页面上时，进行正确的编码处理。使用合适的编码函数将特殊字符进行
阅读全文
摘要：推荐 concurrently 点击查看代码 "dev": "concurrently \"nodemon --exec electron . \" \"vite\"", 成熟的脚手架 日常开发可以使用 electron-vite (opens new window)或 electron-vite-
阅读全文
摘要：在实现tab的时候，margin-bottom:-1px无效的问题 active的tab项，要指定他的border-top, 如： border-top: 1px solid #fff; border-bottom: none; margin-bottom: -1px; background: #f
阅读全文
摘要：grid网格布局 ul{ padding: 0; width: 100%; height: 100%; /*设置为grid网格布局*/ display: grid; /*设置三行高度都为100px；*/ grid-template-rows:100px 100px 100px ; /*设置三行宽度都
阅读全文
摘要：点击查看代码 :nth-child(){},用来选择父元素下的第n个子元素。 注意：:nth-child(){}是根据父元素下所有子元素进行排序 :nth-child(2n){}，选中父元素下偶数行的子元素。 :nth-child(2n+1){}，选中父元素下奇数行的子元素。 :nth-child(
阅读全文
摘要：点击查看代码 <button @click="getMy" data-eventsync="true">获取信息</button> let getMy = () => { if (uni.getUserProfile) { console.log('可以用'); uni.getUserProfile
阅读全文
摘要：新接口getUserProfileFn内置login，如果必须要login返回的参数要隔离开 vue3书写要对按钮配置属性 <button @click="logintou" data-eventsync="true" class="main-login-bottom">授权登录</button>
阅读全文
摘要：1.文本编辑器的下拉框无法使用。即选择字号字体的下拉选择框无法使用。 通过调试，发现不是编辑器的下拉框没有出来，而是下拉框显示在弹出框的底部，猜测是否和z-index属性有关。 产生这个问题的原因是文本编辑器默认的z-index是900，而弹出框的z-index比900大，会将下拉框等覆盖住，即其在
阅读全文
摘要：快应用版本 function chunkArray(array, chunkSize) { let result = []; for (let i = 0; i < array.length; i += chunkSize) { let chunk = array.slice(i, i + chun
阅读全文
摘要：点击查看代码 function addSpecialValueToLastChunk(array, chunkSize, specialValue) { let chunks = chunkArray(array, chunkSize); let lastChunk = chunks[chunks.
阅读全文
摘要：点击查看代码 Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
阅读全文
摘要：点击查看代码 // 定义全局变量 let startTime = null; // 记录开始时间 let elapsedTime = 0; // 记录已用时间 // 当用户进入阅读页面时调用该函数 function startReading() { const storedTime = parseI
阅读全文
摘要：点击查看代码 function getStorage(key) { return new Promise((resolve, reject) => { uni.getStorage({ key: key, success: (res) => { resolve(res.data); }, fail:
阅读全文
摘要：首先要在打包好的产物中创建一个文件 之后传到后台测试版本就行，等个半个小时左右重启ide就可以使用 package.json { "industrySDK": true } 附带链接 https://developer.open-douyin.com/docs/resource/zh-CN/mini
阅读全文
摘要：小知识 width:100%与width:auto区别 width:100% : 子元素的 content 撑满父元素的content，如果子元素还有 padding、border等属性，或者是在父元素上设置了边距和填充，都有可能会造成子元素区域溢出显示; width:auto : 是子元素的 co
阅读全文
摘要：点击查看代码 /** * @param {string} s * @return {string} */ let removeDuplicates = function (s) { let stack = [] for (let v of s) { if (stack.length && stack
阅读全文
摘要：uniapp原生组件层级问题
阅读全文
摘要：在uni-app框架下，使用scroll-view进行下拉加载时，不要设置 scroll-top 或者 scroll-left 否则会出现，页面抖动的情况
阅读全文
摘要：确保你当前位于要合并文件的源分支上。可以使用 git branch命令查看当前分支，并使用 git checkout命令切换到源分支。 使用 git checkout命令切换到目标分支，即你想要合并文件的分支。 git checkout source_branch -- path/to/file s
阅读全文
摘要：https://html2particle.mmeme.me/ 阿文最开心大佬写的， 如侵吾删除
阅读全文
摘要：https://wanglin2.github.io/mind-map/#/index
阅读全文
摘要：点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport"
阅读全文
摘要：::webkit-scrollbar-corner伪元素
阅读全文
摘要：css 点击查看代码 span { line-height: 2; background: -webkit-linear-gradient(left, #12c2e9, #c471ed, #f64f59) no-repeat right bottom; background-size: 0% 2px
阅读全文
摘要：有布尔 先把布尔转为number 数字和字符串 字符串转number，如果前导为0会被忽略，空字符串转换成0，非数字字符串或其他转为NaN 对象和非对象 对象valueOf获取基本类型，对象转为字符串后再转换为数字 还有很多情况未涉及的，请补充
阅读全文
摘要：波浪 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>波浪</title> </head> <style type="text/css"> *{ padding: 0; margin: 0; } .blue{ width: 10
阅读全文
摘要：SSE比websocket更轻 SSE是基于http/https协议的 websocket是一个新的协议，ws/wss协议 如果只需要服务端向客户端推送消息，推荐使用SSE 如果需要服务端和客户端双向推送，请选择websocket 不论是SSE还是websocket，对于浏览器的兼容性都不错 轮询是
阅读全文
摘要：Promise.withResolvers 使用 Promise.withResolvers() 关键的区别在于解决和拒绝函数现在与 Promise 本身处于同一作用域，而不是在执行器中被创建和一次性使用。这可能使得一些更高级的用例成为可能，例如在重复事件中重用它们，特别是在处理流和队列时。这通常也
阅读全文
摘要：https://blog.csdn.net/wang_yu_shun/article/details/121299208 极力推荐这个博主写的，前端有关负数的小技巧
阅读全文
摘要：http://www.turnjs.com
阅读全文
摘要：普通的递归实 function flatten(arr) { let result = []; for(let i = 0; i < arr.length; i++) { if(Array.isArray(arr[i])) { result = result.concat(flatten(arr[i
阅读全文
摘要：Vue-Plugin-HiPrint 是一个Vue.js的插件，旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint，您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使
阅读全文
摘要：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse 推荐这个大佬，很厉害悬浮按钮 评论组件 词云 瀑布流照片容器 视频动态封面 3D轮播图 web桌宠 贡献度面板 拖拽上传 自动补全输入框 图片滑块验证 千分位
阅读全文
摘要：DOMRect 表示的盒子的类型由返回它的方法或属性指定。例如，WebVR API 的 VREyeParameters.renderRect (en-US) 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。 https://developer.mozilla.org/zh-C
阅读全文
摘要：好玩的 // if (true) { // return // } // // 不会打印 // console.log('1') // if (false) { // return // } // // 会打印 // console.log('2') // if (true) return // /
阅读全文
摘要：直接被JS写死的debugger关键字下了断点。行吧，不让调试就不让调试吧，关闭开发者工具之后，直接跳到了空白页。 开发者工具Ctrl+F8可以禁用断点调试 点击查看代码 <!DOCTYPE html> <html> <header> <title>test</title> </header> <b
阅读全文
摘要：点击查看代码 function ellipsisText(longText, displayLength) { // 确保显示长度至少包含省略号的3个字符 if (displayLength < 3) { throw new Error('Display length should be at le
阅读全文
摘要：Steps to reproduce 选择某个选项后会自动关闭 What is Expected? 选择后不自动关闭，等点击按钮后再去触发组件内的关闭方法。 What is actually happening? 自动关闭 Additional comments 这个问题当初在elementui的时
阅读全文
摘要：flex-grow项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。负值对该属性无效。 flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算
阅读全文
摘要：{ path: '/:pathMatch(.)', component: () => import('@/views/error/404.vue') },
阅读全文
摘要：shape-outside定义一个由内容区域的外边缘封闭形成的形状 shape-outside 是一个非常实用的属性，可以实现一些比较复杂的文本环绕效果。 shape-outside 的兼容性比较好，不是特殊情况应该完全适用。
阅读全文
摘要：document.createRange() 是 JavaScript 中的一个方法，用于创建一个 Range 对象，表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容，然后对其进行操作。 它可以： 设置选中文本范围：可以使用 document.createRange() 方法创建
阅读全文
摘要：点击查看代码 <template> <view class="coinCenter"> <scroll-view scroll-y="true" :refresher-enabled="true" :refresher-triggered="retriggered" :style="`height:
阅读全文
摘要：新旧虚拟DOM对比的时候，Diff 算法比较只会在同层级进行，不会跨层级比较。 首先比较两个节点的类型，如果类型不同，则废弃旧节点并用新节点替代。 对于相同类型的节点，进一步比较它们的属性。记录属性差异，以便生成相应的补丁。 如果两个节点相同，继续递归比较它们的子节点，直到遍历完整个树。 如果节点有
阅读全文
摘要：点击查看代码 // h5开发环境 const h5Dev = { baseUrl: 'https://devh5.....' } // h5测试环境 const h5Test= { baseUrl: 'https://testh5.....' } // h5生产环境 const h5Prod= {
阅读全文
摘要：uniapp中post请求会默认header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。但是如果在微信平台content-type必须严格执行
阅读全文
摘要：https://doc.weixin.qq.com/doc/w3_AAcAYAbdAFwpM63n1R5SIat3aa4cX?scode=AJEAIQdfAAoYHVCBbdAG4A1QYmAFQ 上面是文档链接 引入 { "plugins": { "novel-plugin": { "versio
阅读全文
摘要：选择“查看”下的“命令面板” 输入：View: Reset View Locations 所有的视图会恢复到默认的位置。
阅读全文
摘要：模块中的导入：在 app.module.ts 中导入 HdService 是为了告诉 NestJS 框架这个服务需要被注册为提供者，使其可以在依赖注入容器中使用。 控制器中的导入：在 app.controller.ts 中导入 HdService 是为了使用 TypeScript 的类型检查和智能提
阅读全文
浙公网安备 33010602011771号