前端總結面試題（每日更新）次日

跨域

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)
}
複製代碼