- 博客(24)
- 收藏
- 关注
RSS订阅原创 threejs 光源和漫反射材质解析
根据上一篇文章[threejs入门](https://blog.csdn.net/weixin_42202310/article/details/137815314)了解到threejs的三要素：场景、相机和渲染器，我们也通过这三要素渲染了一个简单的立方体，但是这个立方体整体没有什么质感，不接近现实中的物体，接下来我们开始优化这个三维画面
2024-04-19 15:43:54
365
1
原创 2024 前端高频面试题，刷到就是赚到
共分为三个阶段： 解析 parse， 优化 optimize, 生成 generate,最终生成可执行函数render。重绘是指元素样式的改变引起浏览器重新绘制元素，但不影响其在文档流的位置，例如改变颜色，背景等。重排是指元素的尺寸、位置等属性改变以前你浏览器重新计算元素的几何属性，导致其他元素重新排列。网页的重绘（Repaint）和重排（Reflow）是网页性能优化中重要的概念。
2024-04-18 19:59:41
1080
原创 openlayers实现地图锚点和点击弹窗
这次使用openlayers实现的地图锚点和点击弹窗的功能，参考了网上别人的一些经验，简化了代码，后续实现点击弹窗插入数据的能力。使用的技术栈是vue3 + vite。由于OSM国内访问不到，这次使用的天地图的数据，token自己去天地图上注册获取就可以了layers: [T=vec_w&x={x}&y={y}&l={z}&tk=你的token'})}),],zoom: 5,})})使用vue3的 teleport 标签，把目标弹窗插入到 body 里面<template>
2023-12-04 16:19:09
584
原创 CSS3：实现三栏布局的五种方法
在前端面试中，面试官出于对css基础的考察，通常会问一个三栏布局的问题，即：页面上有三个区域，如何实现左右宽500px，中间宽度自适应，通常我们会答出来一两种方法，但是其实有五种方法，如果都答出来，肯定是加分的，接下来我会一一介绍这五种方法。grid 布局是最简单的，根本不用进行额外的宽度设置，grid 意思是网格布局，是css3 推出的一种强大的栅格布局方案，之后我们会专门出一期来讲解grid的使用，敬请期待吧。不同于两栏布局可以左侧浮动，右侧空值，三栏需要中间实现自适应的话使用。
2023-12-01 10:23:35
127
1
原创 前端面试题：如何使用数组的reduce方法实现数组的map的功能
callbackFn 为数组中每个元素执行的函数。其返回值将作为下一次调用 callbackFn 时的 accumulator 参数。对于最后一次调用，返回值将作为 reduce() 的返回值。accumulator 上一次调用 callbackFn 的返回的结果。在第一次调用时，如果指定了 initialValue 则为指定的值，否则为 array[0] 的值。currentValue 当前元素的值。
2023-11-30 11:29:28
157
原创 前端面试题：一千个请求如何实现依次发起
我们知道，无论使用何种方式调用请求，都是异步的，所以这里我们使用setTimeout 代替请求，请求的时间是不固定的，就使用随机数代替，一千个请求就考虑使用遍历来完成。消耗，真有一千个请求，前端肯定也不会依次请求，只要将各个请求出来的特征数据排序就可以执行对应的回调函数。实际业务中，一般不会使用一千个请求依次调用，如果需要一千个请求的数据，一般是要放在后端合并请求，减少。如果业务中有一千个请求，需要依次请求，如何使用js代码实现。这样实现是实现了，但是有没有不使用递归的方法，还真有。
2023-11-29 15:46:51
136
1
原创 vue3 实现并封装一个瀑布图组件
image 表示页面的图片，或者canvas图像参数sx, sy 代表从源图片的剪切坐标参数 sw, sh 代表从源图片的剪切宽高参数dx, dy 代表目标图片/canvas的粘贴坐标参数 sw, sh 代表目标图片/canvas的粘贴宽高canvas。
2023-11-29 14:29:52
927
4
原创 vue3 实现自定义进度条，纯数据的滚动条
/ 最小值min: {},// 最大值max: {},// 当前值},// 当前显示多少viewNum: {},// 是否可拖拽isDrag: {},})const slider = ref(null) // 进度条DOM元素const thunk = ref(null) // 拖拽DOM元素const current = ref(props.modelValue) // 当前进度通过传入的最大最小值，我们能够清晰地知道进度条的范围，
2023-11-27 17:06:08
916
1
原创 canvas 实践--绘制选择框和注册点击事件
生成两个元素之间的连线，需要双击弹出选框，然后点击选框中的某一点，圆点变为红色；其实最终目的是要再点击另一个元素，生成两个元素之间的连线，在这里我们只讲到选框和点击事件的实现，让我们一起来看一下如何实现的。
2023-10-18 15:55:32
983
1
原创 百度地图的基础和自定义动画的实践
百度在线地图用于生成在线的地图，可以完成地图绘制、基本标记点，本文主要介绍百度地图API和百度gl模块的基本使用，无人机动画的介绍
2023-10-17 15:45:55
340
1
原创 Docker容器下gitlab下载地址端口配置问题
仔细思考发现这中间是有问题的，这个问题就是docker有端口映射：本来是容器80端口映射到主机的8888端口，现在我把gitlab配置文件中的80端口改成8888端口了，就找不到容器的80端口了，所以页面就打不开了。保存，退出，重启docker，果然端口映射信息也出现了，再打开gitlab的网址，网页也能打开了，查看下载地址，也加上了端口号，运行了流水线，执行完了构建命令。我们的gitlab是部署在docker容器里面的，对于开发团队来说是一个性价比很高的操作，也是很多人选择。进入与容器id匹配的文件夹。
2023-09-21 10:03:58
505
原创 Gitlab 流水线配置总结
Build是构建流程，可以在script 写下自己的脚步，package是打包流程，可以把打出的包进行归档，test、deploy 是测试和部署。CI/CD 流水线，点击运行流水线，选择分支配置变量，选择创建流水线，流水线就创建起来了，可以通过作业来查看流水线日志。安装完成之后就可以在ci/cd配置的runner中看到我们可用的runner了。4、使用以下命令将GitLab Runner链接到您的GitLab服务器。4、使用以下命令将GitLab Runner链接到您的GitLab服务器。
2023-09-20 17:25:10
855
1
原创 vxeTable 与 element-ui完成表格地区筛选
对于后端分页的表格来讲，前端展示的只是一部分数据，这样的话筛选就要传入后台参数，让后台去数据库中查找复合条件的数据进行返回，于是我们需要对vxe-table进行一些配置。如上图所示，template 里面的input就是自定义内容，这里的传参比较奇特，由于是自定义插槽，并不需要列表，需要ageOptions的一个data属性进行传参。data 属性承载着选中的数据，根据vxe提供的示例，结合el-cascader 级联选择器对地区选择的支持，可以完成表格地区筛选的功能。,然后需要监听表格中的筛选确定操作，
2023-09-20 17:14:01
496
1
原创 纯css修改图标颜色的五种方式
本文总结了纯css改变图标颜色的五种办法，适用于同一图标用于多种颜色，从而减少打包体积，总结不易，多多点赞收藏。
2023-02-24 22:13:40
3834
原创 记录一次vue组件发布的全过程
vue 组件发布组件介绍创建一个基于vue的树形连线组件首先 创建一个vue项目Vue create tree-connection开发目录基本上没有大的调整src里面放置我们的代码打包配置由于我们是做的组件，就不要用vue默认的cli打包了，我们需要自己配置entry 和 outputentry 没有什么好说的，前面是文件名后面是入口，output这里的libraryTraget 有 amd，cmd等选项，这里我们选umd通用配置，就是什么情况都能使用我们的组件entry: {
2022-03-14 23:49:18
170
原创 typescript 基础讲解
typescript 基础作用方便开发，如果有类型错误，编译的时候就会抛出错误，而不是一直不知道类型类型声明ts 可以根据上下文自动指定类型·let num = 123 // number也可以显式声明类型let str:string= ‘abc’基本类型boolean、string、number、array、null、object 等与js类似类数组类型tuple 元组类型 固定类型和长度的数组let person1: [number, string] = [1, 'ho
2022-03-01 22:07:43
98
原创 三分钟带你手写一个完整的Promise
三分钟带你手写一个完整的Promise实现一个基础Promise 是类，接受一个函数参数，然后内部有status 变量和then方法，status状态初始值为pending(等待)，then方法的回调函数暂存于内存中，当参数函数的需要提前执行的异步操作执行完之后，执行成功会resolve(value)，status变为fulfilled,statu执行失败则会有reject(err),status变为rejected由以上分析，可以撸出代码:class MyPromise { construct
2021-10-26 23:32:25
96
原创 前端异步事件详解
前端异步事件详解js 事件机制javascript 的单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以JavaScript只能是单线程其他的辅助线程除了单线程作为主线程之外，还存在着其他
2021-10-17 22:16:48
159
原创 纯js实现词云，让标题像云彩一样动起来
云文字开发效果展示项目使用npm install cloudword -S// 在 main.js 里面引用import cloudWord from 'cloudWord'new cloudWord({ el: '#cloudWord', // 云文字容器 words: ['one', 'two', 'three'], colors: ['red', 'yellow', 'green'], onClick(elem) { console.log('点击的文字信息：
2021-10-07 20:10:37
2173
原创 前端项目工程化和webpack 4.0总结 （一）
前端项目工程化和webpack 4.0总结 （一）webpack 4.0总结前言：项目工程化就是项目自动化，能用几行命令行来给我们执行压缩、转换、分类等繁琐的纯体力劳动，之前有gulp，grunt等工具执行压缩等操作，但是不够全面，直到神器webpack的诞生, 使用webpack就解决前端一大半工程化的问题webpack 前端工程化配置webpack 四大能力打包 把所有文件打包到相对集中的一个目录，利于访问加载，对模块化特别友好运行 启用一个本地服务转换 转化less => css
2021-10-06 21:43:06
96
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人