防抖(debounce):单位时间内,频繁触发事件,只执行最后一次。 比如点击按钮,2秒后调用函数,结果在1.5秒的时候又点了,则会重新计算2秒后在调用函数。
应用场景:搜索框、输入框、手机邮箱验证等
思路:利用定时器,每次触发先清除定时器() 底层代码实现:
const box = document.querySeleter(".box")let i = 1function mouseMove() {box.innerHTML = i++}function debounce(fn, t) {let timer// return 返回一个匿名函数return function() {if(timer) clearTimeout(timer)timer = setTimeOut(function() {fn()}, t)}}box.addEventListener('mousemove', debounce(mouseMove, 500))节流(throttle):单位时间内,频繁触发事件,只执行一次
应用场景比较多的是:鼠标经过、页面缩放、滚动条滚动scroll事件、下拉刷新等高频事件 思路:利用定时器,判断是否有定时器,如果有等定时器结束再开启新的定时器 代码实现:
const box = document.querySeleter(".box")let i = 1function mouseMove() {box.innerHTML = i++}function throttle(fn, t) {let timer// return 返回一个匿名函数return function() {if(!timer) {timer = setTimeOut(function() {fn()// 清空定时器 此处使用timer=null清除定时器是因为写在了定时器里面,setTimeout中是无法清除定时器的,因为定时器还在运作timer = null}, t)}}}box.addEventListener('mousemove', throttle(mouseMove, 500)) 2. js闭包什么是闭包:闭包就是能够读取其他函数内部变量的函数
function fn0 () {const aaa = 0return function() {return aaaconsole.log('打印', aaa)}}闭包存在意义:
可以延长变量的生命周期4可以创建私有的环境闭包好处:
可以读取其他函数的内部变量将变量始终保存在内存中可以封装对象的私有属性和方法坏处:
消耗内存、使用不当会造成内存溢出问题 3. Vue相关总结 3.1 vue中的data为什么是一个函数?(面试常问) Vue 中的 data 必须是个函数,因为当 data 是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。简单来说,就是为了保证组件的独立性和可复用性,如果 data 是个函数的话,每复用一次组件就会返回新的 data,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响 3.2 MVC 和 MVVM的区别 MVC:M(model数据)、V(view视图),C(controlle控制器)缺点是前后端无法独立开发,必须等后端接口做好了才可以往下走;前端没有自己的数据中心,太过依赖后台MVVM:M(model数据)、V(view视图)、VM(viewModel控制数据的改变和控制视图)html部分相当于View层,可以看到这里的View通过通过模板语法来