跳至主要內容
JS原生事件

一,事件注册的三种方式

1,通过 HTML 元素指定事件属性来绑定

<button onclick ="clickFu()">点我吧</button>
<script>
   function clickFu(){
       alert(3333)
   }
</script>

qianxun大约 5 分钟js基础必会
this指向问题

一,函数内部的this指向

函数内this指向,是当我们调用函数的时候才能确定。调用方式的不同决定this的指向不同。
this的指向,是在调用函数时根据执行上下文所动态确定的。
调用方式 this指向
普通函数调用 window
构造函数调用 实例对象,原型对象里的方法也指向实例对象
对象方法调用 该方法所属的对象
事件绑定方法调用 绑定事件对象
定时器函数 window
立即执行函数 window

qianxun大约 2 分钟js基础必会
图片懒加载

一,为什么需要图片懒加载

在老版本的Chrome中,图片的加载其实是会阻塞DOM渲染的。在我们现代浏览器中,这一点基本不用担心了,也就是说现在的图片加载不会阻塞DOM渲染,但是每一个图片都会对应一个HTTP请求而浏览器允许同时并发请求的数量是有限的(数量为6),假设你的网站有大量的图片,那么加载的过程是很耗时的,尤其像那些电商类需要大量图片的网站,可想而知,网站的初始加载时间会很长,再加上网络等其它影响,用户体验会很差。为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。


qianxun大约 3 分钟js基础必会
节流与防抖

一,节流概念(Throttle)

规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

主要应用场景有:

  1. 鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
  2. 在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
  3. 监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断;

qianxun大约 3 分钟js基础必会