自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(55)
  • 收藏
  • 关注

原创 js手写一个简单的发布订阅EventMitter

【代码】手写EventMitter类。js发布订阅

2024-06-22 18:14:01 92

原创 手写节流防抖函数

应用场景:搜索框停止输入后再触发搜索、滚动触发事件等。

2024-06-11 22:16:35 279

原创 Three.js点与材质(Points)

【代码】Three.js点与材质(Points)

2024-05-20 08:18:40 237

原创 Three.js光照与阴影

/ 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true。// 3、设置光照投射阴影 directionalLight.castShadow = true。// 5、设置物体接收阴影 plane.receiveShadow = true。// 4、设置物体投射阴影 sphere.castShadow = true。//设置three.js渲染区域的尺寸(像素px)// 1、材质要满足能够对光照有反应。// 相机围绕目标进行轨道运动。// 目标:灯光与阴影。

2024-05-14 07:41:13 379

原创 Three.js纹理贴图

/ texture.wrapS = THREE.MirroredRepeatWrapping // 水平贴图,镜像重复。// texture.wrapT = THREE.RepeatWrapping // 垂直贴图,纹理重复到无穷大。// texture.minFilter = THREE.NearestFilter // 取最接近的。// texture.rotation = Math.PI / 4 // 旋转45°。// texture.offset.x = 0.5 // 向左偏移,负为反。

2024-05-06 07:41:08 951 1

原创 Three.js使用动画库( GSAP 一款基于 JavaScript 的 web动画库)

【代码】Three.js使用动画库( GSAP 一款基于 JavaScript 的 web动画库)

2024-04-26 09:29:19 385 3

原创 WebGL异步绘制多点

/ 从当前绑定的缓冲区中读取顶点数据(index, size, type, normalized是否顶点数据归一, stride相邻两个顶点间的字节数, offset从缓冲区的什么位置开始存储变量)// 一秒钟后,向顶点数据中再添加的一个顶点,修改缓冲区数据,然后清理画布,绘制顶点。// 声明顶点着色器 attribute 变量。// 两秒钟后,清理画布,绘制顶点,绘制线条。2.一秒钟后,在左下角画一个点。// 开启顶点数据的批处理功能。// 获取到顶点着色器中变量。// 创建着色器程序。

2024-04-07 15:30:51 323

原创 WebGL根据鼠标控制生成点位,随机改变点的大小颜色

/ 片元着色器变量 uniform, precision mediump float是片元着色器的规范。// 存点的位置,如果异步执行drawArrays会导致颜色缓冲区重置,所以在这里我们需要同步执行。// 获取cavans坐标宽高,距离视口尺寸的距离。// 在范围内的片元颜色进行渲染,超出的部分废弃。// 鼠标基于webgl坐标的中心位置。// 获取鼠标距离视口尺寸的距离。// 鼠标在canvas中的位置。// canvas画布的中心位置。// 解决坐标基底的差异。// 解决y方向的差异。

2024-04-02 10:26:13 560

原创 Three.js起步案例(缓冲区画线)

【代码】Three.js起步案例(画线)

2023-12-26 14:00:02 425

原创 Three.js中文网18-21入门案例(gui.js库)

【代码】Three.js中文网18-21入门案例(gui.js库)

2023-12-26 10:59:32 636

原创 Three.js中文网14入门案例(阵列立方体和相机适配体验)

Three.js中文网14入门案例

2023-12-14 17:18:47 541

原创 Three.js中文网1-12入门案例

Three.js中文网1-12入门案例

2023-12-14 16:25:49 788

原创 纯前端实现根据数据导出excel文件

const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, '表单1的名称')XLSX.writeFile(workbook, 'excel的名称.xlsx')

2023-11-29 13:33:24 477

原创 纯前端实现导入excel数据

const reader = new FileReader();reader.onload = e => {const data = e.target?.resultconst workbook = XLSX.read(data, { type: 'array' })const firstSheetName = workbook.SheetNames[0]const worksheet = workbook.Sheets[firstSheetName]const results = XLSX.utils.s

2023-11-28 16:51:58 946

原创 WebGL利用缓冲区绘制三角和矩形(后附three.js写法)

WebGL利用缓冲区绘制三角形

2023-08-28 17:36:50 477

原创 封装WebGL初始化着色器函数

/gl.drawArrays(gl.TRIANGLES, 0, 1) // 三角形。// x, y, z, w齐次坐标(x/w, y/w, z/w)// 着色器: 通过程序代替固定的渲染管线,来处理图像的渲。//gl.drawArrays(gl.LINES, 0, 1) // 线。// 必须要存在 main 函数 (浮点数)// 片元着色器:像素(颜色,纹理)// 要绘制的点的坐标。// 顶点着色器:顶点理解为坐标。// 顶点着色器源码。// 片元着色器源码。

2023-05-08 17:46:20 215 1

原创 给vue动态组件component添加@事件

【代码】给vue动态组件component添加@事件

2023-02-01 21:38:05 1063

原创 浅拷贝和深拷贝

深拷贝和浅拷贝的区别;理解深拷贝和浅拷贝;认识深拷贝和浅拷贝;浅拷贝和深拷贝的区别;

2022-09-09 11:35:38 601

原创 vue3组合式API标注类型(Ts)

vue3组合式API标注类型(Ts)

2022-08-31 18:04:36 701

原创 vue实现通过手机号发送短信验证码登录

vue实现通过手机号发送短信验证码登录

2022-05-20 16:10:23 5362 2

原创 element实现简单上传文件功能

element简单实现导入功能

2022-05-05 18:38:40 662

原创 vue3使用$emit【defineEmits】

vue3.2使用emit【defineEmits】 组件传值

2022-05-05 14:02:05 5967

原创 vue3给props设置默认值【defineProps】

vue3.2 defineProps设置默认值

2022-03-30 11:14:57 28349 3

原创 post导出文件【fetch】

post导出文件【fetch】项目中导出excel文件很常见,分为`get`和`post`方式,get相对简单些,在url后面拼接需要的参数即可get请求方式拼接参数长度上限为2083,超过这个长度导出excel失败

2022-03-23 17:27:41 1818 1

原创 手写call,apply,bind方法【前端面试系列】

手写call,apply,bind方法【前端面试系列】

2022-03-02 18:37:54 341

原创 JS实现图片懒加载的三种方式

实现图片懒加载的三种方式

2022-02-23 18:40:10 1920 1

原创 Pinia快速入门

Pinia快速入门Pinia是 Vue.js 的轻量级状态管理库,最近很受欢迎。它的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)2021.11.24 Pinia 正式成为 vuejs 的一员,尤雨溪当天在 Twitter 上宣布:Pinia 正式成为 vuejs 官方的状态库,意味着 Pinia 就是 Vuex 5

2022-02-15 13:49:59 814

原创 js实现一个简单的对象深拷贝【前端面试系列】

js利用递归实现一个简单的对象深拷贝

2022-01-17 16:49:07 581

原创 CSS3 SVG 画一个三角形

css3 svg 画一个三角形

2021-12-31 15:21:35 3218

原创 Vue2+Ts实战项目开发与项目优化(四)发布部署

项目打包npm run build本地预览部署npm i -g serveserve -s dist创建本地服务test-serve/app.jsnpm i -D expressnpm i --save-dev http-proxy-middleware // 使用代理中间件const express = require('express')const app = express()const path = require('path')const { createProxy

2021-12-16 00:00:03 1239

原创 前端上传视频至阿里云并转码

我们这里选用的是第三方方案流程图整体流程页面展示添加脚本文件到根目录,并引入脚本public/index.html<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte

2021-12-15 21:25:18 3973 2

原创 Vue2+Ts实战项目开发与项目优化(三)用户管理和权限管理

用户管理用户管理角色->角色管理相应的权限分配角色一个用户可以拥有多个角色角色权限管理角色可用来分配菜单和资源角色分配菜单权限控制菜单角色分配资源权限控制接口

2021-12-11 20:05:33 354

原创 Vue2+Ts实战项目开发与项目优化(二)用户登录和身份认证

关于Token过期的问题access_token 作用:获取需要授权的接口数据expires_in 作用 access_token 过期时间refresh_token 作用:刷新获取新的 access_token方法一:在请求发起前拦截每个请求,判断 token 的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token后再继续请求优:在请求前拦截,能节省请求,省流量缺:需要后端额外提供一个token过期时间的字段,使用了本地时间判断,若本地时间被篡改,特别是本地时间比服务器时间慢时

2021-12-02 23:24:39 939

原创 Vue2+Ts实战项目开发与项目优化(一)项目初始化

使用vue-cli创建项目vue create edu-boss-fed加入git版本管理

2021-11-22 23:40:57 4033

原创 vue3和vue2的区别

源码组织方式的变化Composition API性能提升Vite

2021-11-17 07:58:10 1128

原创 GitHub Actions自动化部署

现代化的部署方式(CI/CD)持续集成,持续部署CI/CD服务Jenkins, GitHub Actions, Gitlab CI, Travis CI, Circle Ci// 这里我们用到GitHub Actions

2021-11-15 22:43:11 1655 1

原创 ElementUI table动态展开收起,以及初始收起状态(另累写法仅作参考)

最近的需求碰到一个使用ElementUI table表格的时候需要实现点击动态加载数据并展开和收起。效果图实现????ElementUI 树形数据与懒加载 <el-table ref="table" :row-key="id" :tree-props="{ children: 'children' }" @expand-change="handleExpendRow" ></el-table> //

2021-10-10 14:40:59 5131

原创 options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】

options has an unknown property ‘contentBase‘. These properties are valid: 【devServer contentBase报错】

2021-09-25 14:11:27 7796 6

原创 虚拟DOM与diff算法

diff算法新虚拟dom和老虚拟dom进行diff(精细化比较),算出应该如何最小量更新,最后反映到真正的dom上虚拟DOM(虚拟DOM->真实DOM是通过模板编译)真实dom计算机处理起来比较复杂->转换用js对象描述dom的层次解构。dom中的一切属性都在虚拟dom中有对应的属性为什么要有虚拟dom,因为diff是发生在虚拟dom上的...

2021-09-23 08:35:00 144

原创 微信小程序开发中遇到的问题

这里是我在写微信小程序时,使用cover-view遇到的一些坑cover-view的层级问题微信小程序中cover-view的层级不受z-index控制,且层级最高cover-view在ios中iconfont图标无法显示官方的解释是:cover-view不支持使用字体icon,请使用图片代替...

2021-09-17 14:11:58 410

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除