前端总结面试题（每日更新）次日

跨域

1. JSONP

//jsonp的原理很简单，就是利用 <script> 标签没有跨域的限制的漏洞。当须要通信时，经过 <script> 标签指向一个须要访问的地址，并提供一个回调函数来接收数据。
//JSONP使用简单而且兼容性不错，可是只限于get请求
<script src="http://sunday/api?param8=a&param2=b&callback=jsonp"></script>
<script>
    function jsonp(data) {
    	console.log(data)
	}
</script>

复制代码

2. CORS

cors须要浏览器和后端同时支持。IE 8 和 9 须要经过XDonmainRequest来实现。
 浏览器会自动进行 CORS 通讯，实现 CORS 通讯的关键是后端，只要后端实现了 CORS ，就实现了跨域。
 服务端设置 Access-C动态容量—Allow-Origin 就能够开启CORS。此属性表示哪些域名能够访问资源。
复制代码

3. document.domain

这种方式只能用于主域名相同的状况下，例如sunday.test.com 和 zhaojiujiu.test.com 适用于该方式。
只须要给页面添加 document.domain = 'test.com'表示主域名都相同就能够实现跨域
复制代码

4. postMessage

// 发送消息端
window.parent.postMessage('message','http://sunday.com')
//接收消息端
var zhaojiujiu = new MessageChannel()
zhaojiujiu.addEventListener('message',event => {
    var origin = even.origin || event.originalEvent.origin
    if(origin === 'http://sunday.com') {
        console.log('验证经过')
    }
})
复制代码

函数的节流和防抖

首先咱们先明确一下函数节流和防抖的定义

• 函数节流：在指定时间间隔内只会执行一次任务
• 函数防抖：任务频繁触发的状况下，只有任务触发的时间间隔超过指定间隔的时候，任务才会执行

函数节流（throttle）

最形象的例子就是，当咱们在滚动页面的时候，判断是否滚动到底部，在不考虑函数节流和代码性能的状况下，就是经过监听==window.scorll==的事件

$(window).on('scroll',function () {
  //判断滚动条是否滚动到页面的底部
  let pagHeight = $('body').height(),
      scroolTop = $(window).scrollTop(),
      winHeight = $(window).height(),
      thresold = pageHeight - scorllTop - winHeight;
  if(thresold > -100 && thresold <= 20) {
    console.log('bottom');
  }
});
//这种状况会很是消耗性能的，在滚动时，浏览器会时刻的监听是否知足滚动的条件，可是在实际的开发中咱们是每隔一段时间去执行一次，因此就出现了函数节流的概念
下面试解决函数节流的解决方案：
function throttle(fn) {
  let tag = true;
  return function() {
    if (!tag) return;
    tag = false;
    setTimeout(() => {
      fn.apply(this,arguments);
      tag = true;
    },500)
  }
}
复制代码

函数防抖（debounce）

这种状况也很是常见，在咱们作搜索功能是，在input中输入数据时，每输入一个数据就会被触发一次请求，在咱们输完搜索内容时，会发生几回请求，不只用户体验很差，就连对服务器的的压力也会变大。 咱们大多数的解决方案就是引入一个函数防抖（debounce）

//函数防抖的原理
function debounce (fn) {
  let tag = null;
  return function () {
    clearTimeout(tag);
    tag = setTimeout(() => {
      fn.apply(this, arguments);
    },500);
  };
}
复制代码

其实函数节流和函数防抖的目的，就是节约计算机资源。

闭包

• 闭包的定义：
  闭包就是可以读取其余函数内部变量的函数，在js中能够将闭包理解为“函数中的函数”
  

• 闭包的用途:
  1.读取函数内部的变量
  2.让变量始终保持在内存中，延长变量的生命周期

• 闭包的条件:
  1.有外层函数和子函数
  2.外层函数有局部变量
  3.子函数能操控外层函数的局部变量
  4.子函数与外部函数有关联

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()
B() // 1

复制代码

• 闭包的存在乎义：
  

// 使用闭包的方式解决var定义函数问题
for (var i = 0;i<=3;i++){
  (function(j){
    setTimeout(function timer() {
      console.log(j)
    },j*1000)
  })(i)
}
复制代码