美文网首页
JS知识点

JS知识点

作者: 小皮胡 | 来源:发表于2020-06-17 08:43 被阅读0次

1、前端常见跨域解决方案

2、cookie,localStorage,SessionStorage三者的区别

3、unload事件

当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件。根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发unload,以保证向后兼容。

resize事件

当浏览器窗口大小发生变化时,会在window上触发resize事件;注意,firefox浏览器会在窗口大小停止变化时才触发resize事件,而其他浏览器则在窗口发生1px的变化就触发。

scroll事件

当页面随滚动条滚动时会触发连续scroll事件;混杂模式下,基于body计算滚动距离,在标准模式下,基于document计算滚动距离。

4、防抖和节流

函数防抖(debounce)

实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法

缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟

函数节流(throttle)

实现方式:每次触发事件时,如果当前有等待执行的延时函数,则直接return

总结

函数防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

应用场景

debounce

search搜索联想,用户在不断输入值时,用防抖来节约请求资源。

window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次

throttle

鼠标不断点击触发,mousedown(单位时间内只触发一次)

监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断

5、typeof返回的值:Boolean,string,undefined,number,object,function

6、闭包:内部函数被保存到外部

(1)外界无法访问闭包内部的数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动向外界提供访问接口;

(2)一般的函数,调用完毕之后,系统自动注销函数,而对于闭包来说,在外部函数被调用之后,闭包结构依然保存在

(3)使用闭包会占有内存资源,过多的使用闭包会导致内存溢出等.

什么是闭包?闭包的作用,用法及优缺点

7、JavaScript深入之从原型到原型链

8、bind函数

相关文章

  • js小知识点

    js小知识点 整理 js小知识点 (一):获取元素 1:document.getElementById('id名'...

  • 小知识点集汇一

    小知识点集汇一 小知识点 node接口模拟返回 js接口模拟数据 mockjs mocha js 测试框架--教程...

  • 前端知识温习

    js知识点 温习js css知识点 温习css jquery温习 自己实现一个jquery vue框架温习 温习v...

  • js的浅拷贝与深拷贝

    js的浅拷贝与深拷贝 涉及知识点: js中的数据类型(基本类型,引用类型) js中的存储数据的堆栈相关知识点; 下...

  • 2018-08-22

    今天简单了解了一下关于js对象的知识点。包括JS 数字 JS 字符串 JS 日期 JS 数组 JS 逻辑 JS 算...

  • js旋转木马特效

    目标知识点 : 学习js数组的增删方法:(pop()、push()、shift()、unshift()) 练习js...

  • 前端小知识点综合大全

    小知识点 node接口模拟返回 js接口模拟数据 mockjs mocha js 测试框架--教程 git 教程 ...

  • 18-进阶:Canvas 画板

    本节知识点 JS知识点 获取标签的方法之一(id):document.getElementById(id) 鼠标按...

  • 02 JS and CSS Clock

    02 JS and CSS Clock 效果 效果Github 知识点 transition transform ...

  • react学习(2)

    知识点 1:babel.js的作用:ES6=>ES5,jsx=>js2:小案例

网友评论

      本文标题:JS知识点

      本文链接:https://www.haomeiwen.com/subject/fhjtmhtx.html