![](https://img-blog.csdnimg.cn/20200108162749307.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
0 error(s) 0 warning(s)
文章平均质量分 95
0 error(s) 0 warning(s)
yingjieweb
踏踏实实学点前端
展开
-
高德地图「海量点标记 + 海量标注」卡顿问题 解决方案
最近刚做了个和地图相关的需求,涉及到「海量点标记 + 海量标注」。当数据量达到三千以上的时候,海量标注会明显拖慢页面的加载/响应速度,非常影响用户体验,因此我对其进行了优化。感觉还挺有挑战性的,在这里总结一下,如果再能给遇到同样问题的你一点帮助的话,那就再好不过啦!😉...原创 2022-05-07 17:05:57 · 14702 阅读 · 32 评论 -
使用 svg-sprite-loader、svgo-loader 优化 svg symbols
最近重新学习了一遍 React 基础,新起了个小 Demo 实践一下,项目中用到的静态资源也比较少,图标当时使用的是svg symbols 的方式引入(字体图标三种格式区别),但是在开发的过程中遇到几个问题:① 下载的 svg 可能有自带的 fill 属性,添加 color 样式不生效。② 封装 Icon 组件时,每用到一个 svg 图标都需要引入一下,显得有点不太聪明。 为解决上述两个问题,上网找了一下解决方案,在这里总结一下,每天成长一点点。原创 2022-04-08 22:20:06 · 10797 阅读 · 0 评论 -
前端项目开发者笔记 — 第一份实习
2019年12月24日,人生中的第一份实习。实习的公司虽然不大,但是团队氛围很好,带我的前辈们也特别好,真的非常感谢他们对我的帮助。实习过程中前辈给的建议:养成做技术总结文档的习惯。重视变成思想和底层技术。开发人员以后的职业出路可以是:资深工程师、创业、管理层(但是不能丢技术)。如果只做前端以后的职业发展会受限,我可以先从前端切入,前后端都要学习,以后才能成长为成架构师。开发人员三年是一个成长阶段...原创 2019-12-28 11:43:08 · 870 阅读 · 3 评论 -
JS 如何动态获取本地文件夹中的所有图片
1、require.context最近在帮师哥做一个简单的数据和图片展示的项目,其中有一个需求是要在页面上显示出该项目某一文件夹下的所有图片,图片的数目和文件名不确定,只知道图片存放的目录。一开始想到的思路是在页面上设置输入框,输入图片的数目和文件名,但是这样不够方便,想优化一下,所以在网上看到了这个 require.context() 方法,下面先对其做一个简单的介绍。require.context(directory, useSubdirectories, regExp)//参数:/原创 2020-11-25 22:55:55 · 11161 阅读 · 2 评论 -
相比 setInterval(),更推荐 setTimeout()
目录1、通过 setInterval() 的方式实现2、通过 setTimeout() 的方式实现3、用 setInterval() 实现变更后的需求4、用 setTimeout() 实现变更后的需求5、setInterval() 和 setTimeout() 比较总结先看一个需求:打印:1,2,3,4,5,6,7,8,9。(要求每间隔一秒钟打印出一个数字)1、通过 s...原创 2020-03-11 17:17:47 · 371 阅读 · 0 评论 -
Vue 中使用 base64 编码和解码
1、在项目根目录下安装npm install --save js-base642、在项目文件中引入let Base64 = require('js-base64').Base643、在项目文件中使用Base64.encode('潘高') // 5r2Y6auYBase64.decode('5r2Y6auY') // 潘高版权声明:本文为CSDN博主「潘高」的原...转载 2020-04-09 10:27:54 · 1495 阅读 · 0 评论 -
Element UI 中国省市区级联数据
目录1、npm 安装2、级联数据引入3、细节 Tips4、页面使用看到简书上有一篇关于地区级联的文章,转载一下,希望能帮助到大家。文章出处:Element UI 省市区级联数据前端工作过程中难免会要用到选择地址的时候,除了从后台获取特定地区数据的情况外,一般都是全国的省市区提供给用户选择,Element UI 提供了一个很好的插件。1、npm 安装npm inst...转载 2020-03-02 16:00:52 · 742 阅读 · 0 评论 -
提取 Object 类型中值是 true 的 key
const message = { 1: true, 2: true, 3: false };const arr = [];for (let item in message) { if (message[item]) { arr.push(item); }}console.log(arr.join(','));const array = { 1: t...原创 2020-02-19 20:36:05 · 614 阅读 · 0 评论 -
Vue - 给对象新增属性(使用Vue.$set())
今天做项目的过程中遇到一个问题,百思不得其解,询问大佬后恍然大悟,踩坑的主要原因是知识盲区,上网搜到一篇比较好的简书博客,转载过来,希望能帮到大家,原文链接:Vue - 给对象新增属性(使用Vue.$set())。在开发过程中,我们时常会遇到这样一种情况:当 vue 的 data 里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新...转载 2020-03-27 12:41:18 · 5472 阅读 · 1 评论 -
Vue - v-for 中为什么不能用 index 作为 key
目录1、先来看一个例子2、上述问题的解决方法3、不能用 index 作为 key这是一篇脱坑日记,踩坑的原因是在做项目的过程中,我使用 v-for 指令渲染子组件,并将 index 绑定给 key,这一行为导致了删除操作会错删子组件的问题。而且我通过控制台打印信息,所有的信息都正常,并不知道深陷其坑的具体原因,询问大佬后恍然大悟,究其根源还是自己太菜,还要继续努力啊!1、先...原创 2020-05-01 05:56:19 · 2639 阅读 · 0 评论 -
Vue 正则验证:邮箱,手机号,身份证,IP,MAC,微信号等
Vue正则验证:邮箱,手机号,身份证,IP,MAC,微信号等//1. 手机号:var validateMobilePhone = (rule, value, callback) => { if (value === '') { callback(new Error('手机号不可为空')); } else { if (value !== '') { ...转载 2020-02-06 20:31:11 · 1240 阅读 · 1 评论