一个正在努力的程序员

life is a facking movie 人生如戏

深克隆1234567891011121314151617181920212223function deepClone(obj, map) { // 判断数据类型是否为引用类型 否返回数据本身 if (typeof obj !== "object") obj; // 判断map是否包含 obj作为key的值 是返回 值 if (map.get(obj)) map.get(obj); // 定义返回值 let result = {}; // 判断是否为数组 if ( Array.isArray(obj) || Object.prototype.toString.call(obj) === "[object Array]" ) { let result = []; } map.set(obj, result); // 遍历对象 for (let key in obj) { if (obj.hasOwnProperty(key)) { ...

什么是虚拟列表虚拟列表 其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。 假设有 1 万条记录需要同时渲染，我们屏幕的可见区域的高度为 500px,而列表项的高度为 50px，则此时我们在屏幕中最多只能看到 10 个列表项，那么在首次渲染的时候，我们只需加载 10 条即可。 实现虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。 计算当前可视区域起始数据索引(startIndex) 计算当前可视区域结束数据索引(endIndex) 计算当前可视区域的数据，并渲染到页面中 计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset 并设置到列表上 由于只是对可视区域内的列表项进行渲染，所以为了保持列表容器的高度并可正常的触发滚动，将 Html 结构设计成如下结构： 123456789<div class="infinite-list-container"&g ...

Nginx 介绍传统的 Web 服务器，每个客户端连接作为一个单独的进程或线程处理，需在切换任务时将 CPU 切换到新的任务并创建一个新的运行时上下文，消耗额外的内存和 CPU 时间，当并发请求增加时，服务器响应变慢，从而对性能产生负面影响。Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器，而且支持热部署，几乎可以做到 7 * 24 小时不间断运行，即使运行几个月也不需要重新启动，还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的考量，其占用内存少、并发能力强、能支持高达 5w 个并发连接数，最重要的是，Nginx 是免费的并可以商业化，配置使用也比较简单。 Nginx 的最重要的几个使用场景: 静态资源服务，通过本地文件系统提供服务; 反向代理服务，延伸出包括缓存、负载均衡等; API 服务，OpenResty; 对于前端来说 Node.js 不陌生了，Nginx 和 Node.js 的很多理念类似，HTTP 服务器、事件驱动、异步非阻塞等，且 Nginx 的大部分功能使用 Node.js 也可以实现，但 Nginx 和 Node.js 并不 ...

前言在实际项目中，我们可能需要对请求进行“防抖”处理。这里主要是为了阻止用户在某些情况下短时间内重复点击某个按钮，导致前端向后端重复发送多次请求。这里我列举两种比较常见的实际情况： PC 端 - 用户双击搜索按钮，可能会触发两次搜索请求 移动端 - 因移动端没有点击延迟，所以极易造成误操作或多操作，造成请求重发 核心——CancelToken在 Axios 中取消请求最核心的方法是 CanelToken 注意设置是全局请求拦截,所以当有些请求让它重复请求的话 设置白名单 12345// 拦截请求白名单let whiteListUrls = [ "/sysUser/checkRepeat", ...]; 1234567891011121314151617181920212223242526272829303132333435363738394041// 正在进行中的请求列表let reqList: any[] = [];/** * 阻止重复请求 * @param {array} reqList - 请求缓存列表 * @param &# ...

vue 中实现侧边导航栏跟随对应的模块滚动 子模块 1234567891011121314<div class="box"> <ul class="list"> <li v-for="(item, index) in navList" :key="index" @click="scrollTo(index)" :class="{ active: active === index }" class="text-ellipsis" :title="item.title" > {{ item.title }} </li> </ul></div> 12345678910111213141516171819202 ...

自定义 hooks 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import { computed } from "vue";import { mapGetters, mapMutations, mapState, useStore, createNamespacedHelpers, mapActions,} from "vuex";/** * @param mapper  Array | Object * @param mapFn   Function * @param iscomputed 判断是否转变计算属性 * @returns */const useMapper = ( mapper: Array<any> | Object, mapF ...

1npm install animejs 在 main.js 中 12345// 引入animejsimport anime from "animejs";//注册全局方法const app = createApp(App);app.config.globalProperties.$anime = anime; vue 文件模板 123456789<div class="wrapper" @mousemove="handlePause()" @mouseleave="handlePlay"> <div class="boxes"> <div class="box" v-for="(item,index) in overdueCompanyList" :key="item.id" ></div> </div>< ...

css30 seconds of code CSS 片段集合包含 CSS3 的实用程序和交互式示例 包括用于创建常用布局、样式和动画元素的现代技术，以及用于处理用户交互的片段 animate.css Animate.css 是一个随时可用的跨浏览器动画库 用于您的 Web 项目。非常适合强调、主页、滑块和注意力引导提示 hover.css 一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等 用于您自己的元素、修改或仅用于灵感。在 CSS、Sass 和 LESS 中可用 Glass Morphism 快捷生成自定义毛玻璃效果 jsmescroll.js mescroll.js 是在 H5 端 运行的下拉刷新和上拉加载插件 swiper Swiper 常用于移动端网站的内容触摸滑动 Swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper 能实现触屏焦点图、触屏 Tab 切换、触屏轮播图切换等常用效果。 Swiper 开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ lo ...

vue 加载 3D 模型1$ npm install --save three 注意：vue2 模型文件放在 static 下，vue3 模型文件放在 public 下 vue 加载 OBJ 模型123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145<template> <div> <div id="container">< ...