javascript技巧

JavaScript防抖动与节流处理

2022-06-21
针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能. 因此针对这类事件要进行防抖动或者节流处理 防抖动 它的做法是限制下次函数调用之前必须等待的时间间隔.正确实现 debouncing 的方法是将若干个函数调用合成 一次,并在给定时间过去之后仅被调用一次. // 将会包装事件的 debounce 函数 function debounce(fn, delay) { // 维护一个 timer let timer =

document.cookie 使用小结

2022-06-21
目录 一.cookie设置 二.修改cookie值 三.获取cookie值 四.删除cookie值 一.cookie设置 1.每个cookie都是键/值对,设置多个时,用:隔开,如:document.cookie = "userid=9;username=echo"; cookie值:只能用 可以用在url编码中的字符,所以要用escape()函数进行编码,再用unescape()进行解码获取对应的值 所以如下设置:document.cookie = "username=&q

Lottie动画前端开发使用技巧

2022-06-21
目录 一.为什么会有Lottie动画呢? 二.Lottie介绍 三.Lottie常见属性和方法 四.封装Lottie - React Hooks版 五.Lottie组件的引入与调用 结语 一.为什么会有Lottie动画呢? 在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾.一般来说,页面中包含的动画效果越复杂,前端程序员在实现时需要的工期成本越大,尤其是在官网.大促活动.活动拉新等包含巨多动画效果的场景中,动画实现需要的时间占据了大部分工期时

基于Cesium实现加载显示热力图

2022-06-20
目录 CesiumHeatmap 编写案例 我是一个小白,到目前为止对于3D方面的东西不是特别的懂,所以说,对于cesium使用的并不是特别的好,可以说根本不会吧,所以说也是在一点一点摸索,一点一点学习的过程中,所以说有些博文写的可能不是准确的,只是用来记录一下学习过程,错了别喷我啊!! CesiumHeatmap 首先嘞,绘制热力图需要有一个工具,就是使用 CesiumHeatmap 这个工具,然后呢,下面是他的一个github的地址. CesiumHeatmap [时空门~ 嗖~] 下载下来

JavaScript设计模式中的桥接和中介者模式

2022-06-20
目录 一.桥接设计模式 桥接设计模式在工作中的使用 二.JavaScript中介者模式 生活中的中介者 中介者设计模式案例 业务中的中介者 一.桥接设计模式 桥接设计模式是一种偏向于组合的设计模式,而非继承的设计模式,实现的细节从一个模块推送给另一个具有单独模块的对象 桥接设计模式在开发中常用于事件监控,还有数组的一些方法都能够体现出来桥接设计模式的思想,例如数组方法的forEach方法 桥接设计模式在工作中的使用 有一个很多页面的网站,我们预期是让用户可以选择修改网站的主体,如果给每个页面都创

TypeScript中的类型断言[as语法|<>语法]的使用

2022-06-20
Typescript中类型断言官方解释 要理解好类型断言,其实就深刻理解一句话:你会比TypeScript更了解某个值的详细信息 . 类型断言,断言 断言,顾名思义,我断定怎么怎么样,代入这句话里就是,我断定这个类型是什么.当然这是我们主观上的思维逻辑,程序并不认可,所以我们需要告诉程序:“相信我,我知道自己在干什么” . 这么干说,大家可能还是理解的不够透彻,我用两个函数举一个例子: /** * @param d 日期 * @param f 想要格式化的字符串 */ function date

JS实现深拷贝的几种方法介绍

2022-06-20
引 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复制了a,为啥修改数组a,数组b也跟着变了,这里

javaScript遍历对象和数组的方法总结

2022-06-20
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性). var obj = {'0':'a','1':'b','2':'c'}; Object.keys(obj).forEach(function(key){ console.log(key,obj[key]);

js自己实现一个大文件切片上传+断点续传的示例代码

2022-06-20
目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

利用Three.js实现3D三棱锥立体特效

2022-06-20
目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 3D特效的话最容易让人想到的应该是three.js吧.我们今天来说说它. Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多.使用最广泛的三维引擎. Threejs是一款WebGL三维引擎,它可以用来做什么许多许多地场景应用 一个小案例 <!DOCTYPE html> <html lang="en"> <head> <me

JavaScript实现动态网页时钟

2022-06-19
本文实例为大家分享了JavaScript实现动态网页时钟的具体代码,供大家参考,具体内容如下 设计思路: 1先建立一个数组保存带有0〜9数字的10张图片; 2.通过GETDATE()获得本地时间保存在变量数值指明MyTime中; 3. getHours()返回的是24进制即0~23的整数,getMinutes()方法返回一个处于0到59之间的整数,getSeconds()方法返回一个处于0到59之间的整数; 4.通过的setTimeout()每隔1秒调用一次显示()函数改变图像对象的SRC属性.

SVG快速构建马赛克效果

2022-06-19
目录 何为 image-rendering? image-rendering: pixelated 实现马赛克效果的局限性 利用 CSS 再图片缩小后再放大? SVG 滤镜叠加实现马赛克效果 CSS/SVG 实现马赛克的局限性 最后 之前好友Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化. 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法. 何为 image-rendering? CSS 属性 image-renderi

JavaScript实现网页五子棋小游戏

2022-06-19
本文实例为大家分享了JavaScript实现网页五子棋小游戏的具体代码,供大家参考,具体内容如下 设计思路如下: 1.先采用的Math.random()方法决定哪一方先行; 2.设置变量WFLAG = 1,BFLAG = 0时执白子,WFLAG = 0,BFLAG = 1时执黑子; 3.设置标志[I]中,当为白子时标志[I] = 1,当为黑子时标志[I] = 2,且标志[I]不为0时不能落子; 4.设置判断语句,当列5子时,竖5子,斜5子时为胜利,并计分; 5.重新开始 - 重新初始化变量. 采

JavaScript获取字符串实际长度(包含中英文)

2022-06-19
日常开发过程中,经常会遇到需要计算字符串的实际长度(包含中英文),今天整理下我平时使用的方法: 方法一:使用charCodeAt()来判断字符编码 charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

JavaScript设计模式之原型模式详情

2022-06-19
目录 前言 案例 回顾 原型的拓展 前言 设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于JS中的继承是用原型链继承的,所以原型模式是用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法 案例 比如我们现在需要实现一个页面上的轮播图,可能需要用到对轮播图操作的方法,比如聚焦,切换,点击展开等动作,那么我们可以创一个图片轮播的方法,也可以叫做类 上面这个方法只是一个基础的方法,但在实际操作中我们可能会有不同的各种各

JavaScript实现页面电子时钟

2022-06-19
本文实例为大家分享了JavaScript实现页面电子时钟的具体代码,供大家参考,具体内容如下 题目:页面上有一个电子时钟,显示当前的年月日,时分秒,要求自动变化,双位显示,例如:九点九分九秒,显示为09:09:09 代码: <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta http-equiv="

JS使用window.requestAnimationFrame()实现逐帧动画

2022-06-19
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

JS异步的执行顺序分析

2022-06-19
1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的resolve,reject属于微任务队列,setTimeout属于宏任务队列 注意以上都是 队列,先进先出. 微任务包括 `process.nextTick` ,`promise` ,`MutationObserver`. 宏任务包括 `script` , `setTimeout` ,`setInterval` ,`setImmediat

基于JS实现动态跟随特效的示例代码

2022-06-19
目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 这次用到了关于css的一些功能,和jQuery. CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通过 @keyframes 规则,您能够创建动

JavaScript实现时钟特效

2022-06-19
本文实例为大家分享了JavaScript实现时钟特效的具体代码,供大家参考,具体内容如下 简单时间实现: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.ge