跨域與閉包

跨域

當違背同源策略時就會發生跨域問題

常見的解決跨域問題的方法有jsonp ， cors  ， 服務器代理。。。

cors

cors是一種標準，現已支持絕大多數的瀏覽器，當瀏覽器檢測到你發送的是跨域請求時會進行一個簡單的處理（給請求頭加上 Origin （協議 + 域名 + 端口））

cors服務端會將這個字段做爲跨域標誌，接受到後會對origin進行判斷是否爲容許源，驗證經過服務端會給請求頭加上access-Control-Allow-Origin、Access-Control-Allow-Credentials等字段。

cors裏面有一個簡單請求與非簡單請求的概念，簡單請求的條件以下：

	（1) 請求方法是如下三種方法之一： 　　　　 HEAD GET POST
	2）HTTP的頭信息不超出如下幾種字段： 　　　　 Accept Accept-Language 　　　　Content-Language Last-Event-ID 　　　　Content-Type： application/x-www-form-urlencoded、 　　　　multipart/form-data、text/plain

簡單請求如上所說正常進行，非簡單請求會在發送前先發送一個options類型的預檢請求，驗證經過以後纔會執行真正的請求；

 

 關於jsonp的原理分析

 在前端裏使用jsonp須要進行以下設置
    // 動態建立script標籤發出去的請求是異步請求
    // 服務器響應的內容是【函數調用】

// 建立script標籤
    var script = document.createElement('script');
    // 設置回調函數（由於是異步操做，因此該回調函數能夠放在任何位置）
    // 這裏的getData函數實際是有服務器的響應內容（內容就是js代碼-函數調用 
    // getData（data）調用）
    function getData(data){
        //數據請求回來會被觸發的函數
        console.log(data);
    }
    // 設置script 的src屬性，設置請求地址
    script.src = 'http://localhost:3000?callback=getData'; //假設get請求，url裏保存地址
    // 讓script生效
    document.body.appendChild(script);

        

關於callback函數能夠自定義，回調函數的命名需與後端保持一致

// 建立script標籤
    var script = document.createElement('script');
    // 設置回調函數
    function hello(data){
        //數據請求回來會被觸發的函數
        console.log(data);
    }
    // 設置script 的src屬性，設置請求地址
    //script.src = 'http://localhost:3000?callback=getData'; //假設get請求，url裏保存地址
    script.src = 'http://localhost:3000?[與後端約定的命名]hello=getData';
    // 讓script生效
    document.body.appendChild(script);

    // hello就是回調函數
    // 這就是jsonp的本質：動態建立script標籤，而後經過它src屬性發送跨域請求，而後服務器響應數據格式爲【函數調用（hello（實參））】，因此在發送請求前必須先聲明一個函數，
　　 // 而且函數的名字與參數中傳遞的名字要一致，
　　 // 這裏聲明的函數是由服務器響應的內容（實際就是一段js代碼-函數調用）來調用

 

閉包

什麼是閉包？

1，密閉的容器，相似於set，map容器，存儲數據的容器

2，閉包是一個對象，存放數據的格式：key：value

造成的條件

　　1.函數嵌套

　　2.內部函數引用外部函數的局部變量

閉包的優勢：

　　延長外部函數局部變量的生命週期

閉包的缺點：

　　容易形成內存的泄露

注意點：

　　1，合理使用閉包

　　2，用完閉包要及時清除（銷燬）

簡單閉包面試題：

（1）說出打印結果

function fun (){
        var count = 1;
        return function(){
            count++;
            console.log(count);
        }
    }
    var fun2 = fun();
    fun2();    //2
    fun2();    //3

（2）說出打印狀況

function fun(n,o){
        console.log(o);
        return{
            fun:function(m){
                return fun(m,n)
            }
        }
    }
    var a = fun(0) 
    a.fun(1) 
    a.fun(2)
    a.fun(3)  //undefined,0,0,0

    var b = fun(0).fun(1).fun(2).fun(3)    //undefined,0,1,2,3

    var c = fun(0).fun(1)
    c.fun(2)
    c.fun(3)     //undefined,0,1,1