
js
文章平均质量分 63
web前端小龚
都是干货
展开
-
虚拟滚动实现(Vue)
欢迎点击: 个人官网博客.项目列表数据越来越多(上万条),正常列表可以分页,但是像下拉框之类组件就不能分页。每次都要加载所有的(很慢),性能不好的浏览器特别卡顿。虚拟滚动的技术完美解决。主要用于无法使用分页功能的长列表首屏加载速度慢问题,DOM加载过多“无用”元素。上效果图:核心:元素监听scroll事件计算可视化高度一次能装几个列表,然后从总数据中进行slice截取每一次滚动后根据scrollTop值获取一个可以整除itemH结果进行偏移上代码,可直接复制运行<!D原创 2021-06-22 10:11:30 · 10904 阅读 · 26 评论 -
Vue中大型项目的总结(纯原创)
Vue中后台项目的前端总结技术栈:样式:CSS 预处理器的选择:局部样式与全局样式:异步请求:--- 重点封装 Axios:跨域问题:Mock 数据:规则:路由:--- 重点布局三大类:权限验证:1.auth2.permissionsVuex:组件库:过滤器:指令:项目优化:--- 特重点1.体验优化:页面载入进度条:美化滚动条:静态资源加载页面(首次加载白屏):移动端 100vh 问题:2.构建优化:1.包分析工具:webpack-bundle-analyzer2.开启 Gzip(后端配置支持你的 .gz原创 2021-06-09 16:22:15 · 8831 阅读 · 29 评论 -
移动端预览PDF及转成图片保存
欢迎点击: 个人官网博客移动端预览PDF及转化为图片保存一、iframe标签预览pdf二、vue-pdf 预览pdf(可自行封装弹出等效果)1.下载依赖包2.1上下滑动式2.3分页式三、pdf.js(可预览可下载) 将pdf--->canvas--->图片由于微信中苹果限制,是无法保存下载pdf文件的,安卓可以(会自动跳转到系统自带浏览器下载)。但是为了让用户能保存pdf,就只有改需求将其转化为图片,图片在微信是不受限制可以保存的。一、iframe标签预览pdf<iframe原创 2021-06-02 16:14:36 · 6413 阅读 · 5 评论 -
JS数组API详解汇总
JS数组API汇总一、循环类1. arr.forEach() --- 遍历循环2. arr.map()---返回新数组,return什么就输出什么3. arr.every()---全部满足条件4. arr.some()---部分满足条件5. arr.filter()---条件过滤6.arr.reduce(callback,[initialValue])---汇总**6.1累加:****6.2简单用法:****6.3数组处理:****6.4将数组转化为对象:****6.5将二维数组转化为一维:****6.6原创 2021-05-14 16:45:21 · 19724 阅读 · 15 评论 -
TypeScript(TS)语法整理
TypeScript(TS)学习宝典,让你从小白成就大神原创 2021-05-10 15:54:32 · 12128 阅读 · 5 评论 -
函数防抖与函数节流详解
欢迎点击: 个人官网博客为了解决频繁触发DOM事件,项目中需要使用函数防抖或节流,我们来看看吧!1.函数防抖:对于连续的事件响应我们只需要执行一次回调就类似于在某个时间范围内,再次执行的话清除上一次执行效果图:应用场景:1.每次 resize/scroll 触发统计事件2.文本输入的验证,连续输入文字后发送 AJAX 请求进行验证,验证一次就好demo代码:<!DOCTYPE html><html lang="en"><head>原创 2021-04-06 15:55:55 · 11434 阅读 · 1 评论 -
js浅拷贝与深拷贝的区别和实现
欢迎点击: 个人官网博客浅拷贝,深拷贝,区别:1.浅拷贝就类似于简单的赋值,比如let a=1;b=a,这就实现了简单的浅拷贝,修改a的值,b也会跟着改变。2.深拷贝就是b单独开辟出来了一块内存空间,无论a怎么变,跟b都没有任何关系,b不会因a变而变。...原创 2021-03-25 09:42:35 · 3132 阅读 · 4 评论 -
js实现图片懒加载,图片预加载
欢迎点击: 个人官网博客预加载(进度)比如一些公众号h5宣传页面,受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏; 进入页面的时候把图片全加载一遍,就不会出现图片加载慢显示慢的情况效果图:<script> //页面所有img标签的集合 let img = document.getElementsByTagName("img"); function yuLoad() { let index = 0 for原创 2021-03-22 15:28:37 · 5111 阅读 · 0 评论 -
promise用法,及结合async,await详解
欢迎点击: 个人官网博客promise,及结合async,await详解1.promise基础promise 异步问题同步化解决方案,很多人说promise解决了回调地狱。我个人认为promise只是顺带解决回调地狱,不是解决回调地狱的最佳方案,因为promise要链式then方法,一旦多起来,又陷入了then地狱。真正解决回调地狱的是async,await,简洁明了(待会下面细讲)。promise 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、原创 2021-03-19 18:47:29 · 7520 阅读 · 0 评论 -
解决js计算精度问题BigNumber.js
欢迎点击: 个人官网博客JavaScript存在计算的精度问题,所以直接计算就可能会导致各种各样的bug,像一些加减乘除的前端计算。为什么JavaScript会有精度问题?因为JavaScript中所有的数字(包括整数和小数)都只有一种类型–Number。它的实现遵循IEEE 754标准,使用64位固定长度来表示,也就是标准的double双精度浮点数。它的优点是可以归一化处理整数和小数,节省储存空间。而实际计算的时候会转换成二进制计算再转成十进制。进制转换之后会很长,舍去一部分,计算再转回来,就原创 2021-03-18 10:27:29 · 8691 阅读 · 3 评论 -
动态加载css,js,动态创建link标签,script标签
欢迎点击: 个人官网博客老规矩,先上效果图创建Link标签 //createLink('./css/phone.css') function createLink(cssURL) { let head = document.getElementsByTagName('head')[0] let linkTag = document.createElement('link') linkTag.id = 'dynamic原创 2021-03-17 17:55:46 · 1254 阅读 · 1 评论 -
纯前端html导出pdf(jsPDF.js)-分页-不分页
欢迎点击: 个人官网博客基础效果图:demo源码使用html2canvas自动分页效果图:demo源码一、基础:1.先引入几个文件<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"&g原创 2021-03-17 15:53:50 · 8690 阅读 · 0 评论 -
RSA加密jsencrypt.js
欢迎点击: 个人官网博客先上效果图(demo源码) <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>使用公钥加密数据,使用私钥解密数据(常用)使用jsencrypt对数据进行RSA公钥加密:var encr原创 2021-03-17 09:39:07 · 6678 阅读 · 0 评论 -
js常用插件(十五)之基于vue的城市选择插件cityChoice.js
js常用插件(十五)之基于vue的城市选择插件cityChoice.js欢迎点击: 个人官网博客效果图:cityChoice.jsAnimate.cssstyle.css(cityChoice.css)使用方法(非常简单):<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta nam原创 2021-03-09 16:28:42 · 1186 阅读 · 0 评论 -
js获取当前位置
搜狐api<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> console.log(returnCitySN)</script>百度api获取<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&.原创 2021-03-09 15:35:56 · 3897 阅读 · 0 评论 -
js模糊查询
第一篇博客。原创 2021-03-09 14:50:18 · 21913 阅读 · 4 评论