一 懒加载
懒加载 就是按需加载或者延时加载
优点:
- 不需要将对象的实例化全部写到viewDidLoad中 跨域简化代码 增强代码可读性
- 对系统的内存占用率会减少
- 减轻服务器的负担 提高页面加载速度 减少带宽
二 对象 类 面向对象
对象 是指一个具体的事物 对象是一组无序的相关属性和方法的集合
类 抽象类对象的公共部分
对象通过类实例化出来的
使用class创建自定类
class Start{
constructor(uname){
this.uname = uname;
}
sayHi(){...}
}
var xx = new Start('ccc')
什么是面向对象
编程的两种思想 面向过程和面向对象
– 面向过程 POP 按照分析好的步骤解决问题
– 面向对象 OOP 把事物分解成一个个对象 然后由对象之间分工与合作
三 防抖与节流 如何实现 区别
一 防抖
摘自 https://www.jianshu.com/p/b5fcb9a04b17
防抖 : 触发高频函数事件后 n秒内函数只能执行一次 如果在n秒内这个事情再次被触发的话 那么会重新计算时间
实现方式: 每次触发事件时设置一个延迟调用方法 并且取消之前的延时调用方法
缺点: 如果事件在规定的间隔内被不断触发 则调用方法会被不断延迟
// 防抖
function debounce(fn){
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function(){
// 每当用户输入的时候把前一个 settimeout clear掉
clearTimeout(timeout);
// 然后创建一个新的setTimeout 保证interval间隔内如果事件持续触发 不好执行fn函数
tiemout = setTimeout(()=>{
fn.apply(this, arguments);
},500);
}
}
// 处理函数
function handle(){
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle));
应用场景:
- serch搜索联想 用户在不断输入值时 用防抖来节约请求资源
- 频繁操作点赞和取消点赞 需要获取最后一次操作结果并发送给服务器
二 节流
节流: 高频事件触发 但在n秒内只会执行一次 节流会稀释函数的执行频率
实现方式: 每次触发事件时 如果当前有等待执行的延时函数 则之间return
// 节流
function throttle(fn){
let canRun = true; // 通过闭包保存一个标记
return function(){
// 在函数开头判断标记是否为true 不为true就return
if(!canRun) return;
// 立即设置为false
canRun = false;
// 将外部传入的函数的执行放在setTimeout中
setTimeout(()=>{ // 当定时器没有执行的时候标记永远是false
fn.apply(this, arguments);
canRun = true; // 表示可以执行才一次循环
},500)
}
}
function sayHi(e){
console.log(e.target.innerWidth, e.target.innerheight);
}
window.addEventListener('resize', throttle(sayHi));
应用场景:
- 鼠标不断点击触发 mousedown(单位时间内只触发一次)
- window触发resize的时候 不断的调整浏览器窗口大小会不断的触发这个事件 用防抖来让其只触发一次
总结:
函数防抖: 将多次操作合并为一次操作进行 原理是维护一个计时器 规定在delay时间后触发函数 但是在delay时间内再次出发的话 就会取消之前的计时器而重新设置 这样一来 只有最后一次操作能被触发
函数节流: 使得一定时间内触发一次函数 原理是通过判断是否有延迟调用函数未执行
区别: 函数节流不管事件触发有多频繁 都会保证在规定时间内一定会执行一次真正的事件处理函数 而函数防抖只是在最后一次事件后才触发一次函数
