前端
文章平均质量分 96
各种前端问题的技巧和解决方案,主要包括但不限于:
1、由于版本更迭,已经落后并且有bug的源码修改方式
2、特殊的、少见的需求,不包括网上常见的教程和入门的web设计,也不包括常见的文档里就有的内容
3、优质的web布局和样式设计分享
做一名优质的前端工程师
Watermelo617
一个giser,coder,noder,要做最好的前端工程师,但java、docker、数据库、python什么都学什么都做
展开
-
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。原创 2024-07-05 21:23:59 · 903 阅读 · 31 评论 -
属性描述符初探——Vue实现数据劫持的基础
属性描述符(Property Descriptor)在JavaScript中是一个特殊的对象,它定义了对象属性的行为和特性。属性描述符有很多内容可以挖掘,比如defineProperty与Proxy的区别,比如vue2与vue3实现数据劫持的方式有什么不同,实现效果有哪些差异等,这篇博文只是入门,以后有时间再深挖。原创 2024-07-05 14:35:11 · 1018 阅读 · 24 评论 -
最细最有条理解析:事件循环(消息循环)是什么?进程与线程的定义、关系与差异
单线程是异步产生的原因,事件循环是异步的实现方式。程序的运行会产生进程,进程的执行者就是线程。渲染主线程从消息队列的调度结果中获取要执行的任务,并不断循环读取和进行,这个过程就是事件循环。为什么需要事件循环这个技术手段,线程与进程的联系与区别,详情请看正文原创 2024-07-01 21:26:57 · 689 阅读 · 24 评论 -
什么是深拷贝;深拷贝和浅拷贝有什么区别;深拷贝和浅拷贝有哪些方法(详解)
浅拷贝适用于只复制对象的第一层属性,且这些属性不是引用类型。深拷贝适用于需要完全独立的副本,包括对象和数组的嵌套结构。选择哪种拷贝方式取决于你的具体需求和场景。此外,要注意赋值运算符连浅拷贝都算不上,是纯粹的引用,没有创建新的数组/对象。原创 2024-06-15 17:21:09 · 1506 阅读 · 8 评论 -
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢原创 2024-06-10 22:30:33 · 1854 阅读 · 12 评论 -
路由通配符,小小的字符有大大的作用,你真的熟悉吗?
使用 :catchAll 可以创建非常灵活的路由规则,因为它可以匹配几乎任何形式的 URL。所以用来做404页面的路由匹配符非常好用。原创 2024-06-08 23:15:06 · 1006 阅读 · 4 评论 -
对象数据的读取,看这一篇就够了!Object.keys()、Object.values()和Object.entries()用法详解;如何获取对象原型链上的属性
Object.keys()、Object.values()和Object.entries()都是利于对象操作的便捷方法,能有效提升数据处理的效率。原创 2024-06-07 21:58:32 · 1108 阅读 · 2 评论 -
别再用双层遍历循环来做新旧数组对比,寻找新增元素了!
这类问题的重点在于能不能突破基础思路,突破基础思路是从程序员入门变成中级甚至高级的第一步,如果所有需求都通过最基础的业务逻辑来做,是得不到成长的。原创 2024-06-01 16:06:41 · 1621 阅读 · 2 评论 -
多维数组操作,不要再用遍历循环foreach了!来试试数组展平的小妙招!array.flat()用法与array.flatMap() 用法及二者差异详解
理论上array.flat()能做的事情,array.flatMap()都可以做,但是array.flat()更简单,占用内存更少,执行更快。原创 2024-05-31 22:07:13 · 1297 阅读 · 0 评论 -
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。原创 2024-05-25 17:33:09 · 4665 阅读 · 4 评论 -
通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求
将服务器的工作目录渲染到前端页面上是经常遇到需要实现的需求,其中从后端API获取本地目录信息后,将数据渲染成自定义的前端工作目录是篇博客将要谈到的主要内容原创 2024-05-21 17:24:06 · 1732 阅读 · 2 评论 -
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。原创 2024-05-12 16:43:25 · 1280 阅读 · 3 评论 -
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。原创 2024-05-11 21:57:14 · 1532 阅读 · 3 评论 -
通过array.map()实现数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求、DOM操作、搜索和过滤,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。原创 2024-05-05 15:01:09 · 1053 阅读 · 1 评论 -
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。原创 2024-05-04 14:00:00 · 2626 阅读 · 3 评论 -
通过array.reduce()实现数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据和性能优化,reduce()的使用详解(附实际应用代码)
array.reduce()可以用来数据汇总、条件筛选和映射、对象属性的扁平化、转换数据格式、聚合统计、处理树结构数据、性能优化等,使用难度相对高一些,但是能大大减少代码量。原创 2024-04-30 19:36:25 · 2023 阅读 · 4 评论 -
开发和内网部署正常,反向代理后出现404和图片加载失败的解决方案;部署到公网后报错404;部署到公网后图片加载出错;动态渲染获取图片失败
最近在做一个项目的收尾工作时,需要将开发好的前端项目部署到服务器上,在测试和修改阶段,是部署在内网服务器上的,用来提供内部人员测试和考核,并提供优化意见。也就是说,在开发阶段和内网部署阶段都没有问题。问题就出在部署到公网的过程中,首先想用某个特定的域名,但又是独立开发的项目,所以用了反向代理,将该域名下的一个路由指向了内网服务器连接的首页。大概就是将(这里用xxx.com和127.0.0.1来代替真实的域名和ip。这样操作去做反向代理,然后就出了一堆问题。原创 2024-04-27 18:29:40 · 1168 阅读 · 0 评论 -
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。原创 2024-04-26 16:52:50 · 4748 阅读 · 4 评论 -
Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图
Mapbox的中国分部好像在2021年左右就退出中国了,官方文档的汉化工作也戛然而止,相关的社区建设也相当欠缺,内容比较混乱,最离谱的是mapbox官方底图库中的中国地图基本都是错的,天地图引入又麻烦......恰好我最近有一个基础的mapbox应用需求,就做了一些整理和探索,分享给大家。原创 2024-04-20 20:22:58 · 2070 阅读 · 0 评论 -
el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序
写这篇博客的原因是前段时间做了一个数据列可变的表格,同时需要实现在网页中更新了数据列之后,能够对表格进行排序的需求。博客主要内容:el-table实现动态数据的实时排序,一篇文章讲清楚elementui的表格排序功能,利用@sort-change实现动态数据排序,el-table排序方法,el-table可变数据的动态排序原创 2024-04-08 16:29:28 · 4283 阅读 · 11 评论 -
表格中添加渐变色带,表格中添加多色色带,el-table中添加渐变色带,elementUI表格添加色带
渐变色带,能大幅提升可视化效果,优雅美观,同时也可以自定义程度,比如60以下就需要警告或者表示危险,就可以用红色渐变绿色,将渐变点设置在60%的位置,这样渐变色带在美观的同时本身也能带有更多的信息。多色色带,只要选好配色,就能明亮简洁,信息全面,同时也能做维度筛选。直观来看是综合的色带,但是每个具体的维度都能展示,并且可以隐藏部分维度重新排序(也就能实现单维度展示和排序)在表格中添加色带,可视化效果能更加优雅美观。原创 2024-03-31 23:50:02 · 1126 阅读 · 0 评论