面試題重點突出

什麼是跨域？跨域請求資源的方法有哪些？

一、什麼是跨域？
因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：
網絡協議不一樣，如http協議訪問https協議。
端口不一樣，如80端口訪問8080端口。
域名不一樣，如qianduanblog.com訪問baidu.com。
子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。
域名和域名對應ip,如www.a.com訪問20.205.28.90.
二、跨域請求資源的方法：
(1)、porxy代理
定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。
實現方法：經過nginx代理；
注意點：一、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。
使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp
定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。
特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲json格式。
實例以下：

<script>
    function testjsonp(data) {
       console.log(data.name); // 獲取返回的結果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺點：
　　一、這種方式沒法發送post請求（這裏）
　　二、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

介紹一下 JS 的基本數據類型。

Undefined、Null、Boolean、Number、String

如何利用JavaScript實現一個自定義事件，存在on，off，emit三個方法？

這個題目的意義在哪裏？我想，應該是對於一些特定的業務邏輯，好比在註冊一個「通知」的事件，在與Native交互以後，假設這個交互是在入口級別的頁面裏，那麼如何發送給具體某個業務呢？事件應該是最簡單的一種方式，在某個具體的業務中註冊一個事件，而後在與Native交互完，拿到某些數據後，而後觸發這個事件。

咱們來一步一步實現一個最簡單的事件類Event，不考慮任何其餘複雜的狀況。假設在這個Event類的內部有一個this._events = [] 數組來維繫整個事件系統，咱們分別實現on，off，emit三個方法便可。

on（註冊一個事件）：

Event.prototype.on = function(type,fun){
    let cbs = this._events[type];
    cbs ? cbs.push(fun) : this._events[type] = [];
        if (!cbs) {
            this._events[type].push(fun)
    }        
}

這裏爲何要將this._events設計爲二維數組？由於事件能夠是多個，可是事件名可能相同。這個邏輯意圖很是的明顯，根據type參數從this._events中獲取是否存在。若是不存在，建立一個type爲key的數組，並將事件句柄程序push到數組中。

off（註銷一個事件）：

Event.prototype.off = function(type,fun){    
    let cbs = this._events[type];    
    //事件列隊中無事件
    if (!cbs) {        
            return this;
    }    
        //刪除全部的事件
    if (!event && !fun) {        
            this._events = {};        
            return this;
    }    
        //只有事件名稱時
    if (event && !fun) {        
            this._events[type] = null;        
            return this;
    }    
        //刪除某個事件隊列中的某個事件
    let cb;    
        let i = cbs.length;    
        while(i--){
        cb = cbs[i];        
                if (cb === fun || cb.fun === fun) {             
                    cbs.splice(i,1);             
                    break;
        }
    }
}

雖然註銷事件方法的邏輯可能相比之下稍許多了些，但它的實現也很是簡單，只要只存在事件組key名的狀況，或者刪除某個事件隊列中的某個事件句柄程序便可。

emit（觸發一個事件）：

Event.prototype.emit = function(type){    
    let cbs = this._events[type];    
    let args = tools.toArray(arguments,1);    
    if (cbs) {        
        let i = 0;        
        let j = cbs.length;        
        for(;i<j;i++){            
            let cb = cbs[i];            
            cb.apply(this,args);
        }
    }
}

邏輯依然很是簡單，經過事件名從this._events獲取相應的事件句柄程序數組，而後將arguments轉成數組，（這裏考慮的是可能會傳入參數）若是事件句柄程序數組存在，進行循環，再講args參數apply給每個取出來的事件句柄程序。

請描述一個網頁從開始請求道最終顯示的完整過程？

一個網頁從請求到最終顯示的完整過程通常能夠分爲以下7個步驟：
（1）在瀏覽器中輸入網址；
（2）發送至DNS服務器並得到域名對應的WEB服務器IP地址；
（3）與WEB服務器創建TCP鏈接；
（4）瀏覽器向WEB服務器的IP地址發送相應的HTTP請求；
（5）WEB服務器響應請求並返回指定URL的數據，或錯誤信息，若是設定重定向，則重定向到新的URL地址；
（6）瀏覽器下載數據後解析HTML源文件，解析的過程當中實現對頁面的排版，解析完成後在瀏覽器中顯示基礎頁面；
（7）分析頁面中的超連接並顯示在當前頁面，重複以上過程直至無超連接須要發送，完成所有數據顯示。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？

Web Storage有兩種形式：LocalStorage（本地存儲）和sessionStorage（會話存儲）。
這兩種方式都容許開發者使用js設置的鍵值對進行操做，在在從新加載不一樣的頁面的時候讀出它們。這一點與cookie相似。
（1）與cookie不一樣的是：Web Storage數據徹底存儲在客戶端，不須要經過瀏覽器的請求將數據傳給服務器，所以x相比cookie來講可以存儲更多的數據，大概5M左右。
（2）LocalStorage和sessionStorage功能上是同樣的，可是存儲持久時間不同。
LocalStorage：瀏覽器關閉了數據仍然能夠保存下來，並可用於全部同源（相同的域名、協議和端口）窗口（或標籤頁）；
sessionStorage：數據存儲在窗口對象中，窗口關閉後對應的窗口對象消失，存儲的數據也會丟失。
注意：sessionStorage 均可以用localStorage 來代替，但須要記住的是，在窗口或者標籤頁關閉時，使用sessionStorage 存儲的數據會丟失。
（3）使用 local storage和session storage主要經過在js中操做這兩個對象來實現，分別爲window.localStorage和window.sessionStorage. 這兩個對象均是Storage類的兩個實例，天然也具備Storage類的屬性和方法。