摘要：常說的瀏覽器執(zhí)行的包含兩部分基礎(chǔ)知識(shí)標(biāo)準(zhǔn)標(biāo)準(zhǔn)的內(nèi)容包括事件綁定請(qǐng)求包括協(xié)議存儲(chǔ)標(biāo)準(zhǔn)沒有規(guī)定任何基礎(chǔ)相關(guān)的東西。如果未經(jīng)允許即可獲取，那是瀏覽器同源策略出現(xiàn)了漏洞。

常說的JS（瀏覽器執(zhí)行的JS）包含兩部分

JS基礎(chǔ)知識(shí)（ECMA 262 標(biāo)準(zhǔn)）

JS-Web-API（W3C 標(biāo)準(zhǔn)）

JS-Web-API的內(nèi)容包括

DOM
BOM
事件綁定
ajax請(qǐng)求（包括http協(xié)議）
存儲(chǔ)

W3C 標(biāo)準(zhǔn)沒有規(guī)定任何JS基礎(chǔ)相關(guān)的東西。W3C不管變量類型、原型、作用域和異步，只管定義于瀏覽器中JS操作頁(yè)面的API和全局變量。

DOM

DOM(Document Object Model) 文檔對(duì)象模型
DOM可以理解為：瀏覽器把拿到的html代碼，結(jié)構(gòu)化成瀏覽器能識(shí)別并且JS可操作的一個(gè)模型

DOM 是哪種基本的數(shù)據(jù)結(jié)構(gòu)？

樹

DOM 操作的常用API有哪些？

獲取節(jié)點(diǎn)，以及節(jié)點(diǎn)的 property 和 attribute
獲取父節(jié)點(diǎn)，獲取子節(jié)點(diǎn)
新增節(jié)點(diǎn)，移動(dòng)節(jié)點(diǎn)，刪除節(jié)點(diǎn)

DOM 節(jié)點(diǎn)的 attribute 和 property 有何區(qū)別？

attribute 是對(duì)html標(biāo)簽屬性的操作
property 是對(duì)js對(duì)象屬性的操作

BOM

BOM(Browser Object Model) 瀏覽器對(duì)象模型

如何檢測(cè)瀏覽器的類型？

// navigator
var ua = navigator.userAgent;
var isChrome = ua.indexOf("Chrome");
console.log(isChrome);

如何拆解url的各部分？

// location
console.log(location.href); // 整個(gè)地址
console.log(location.protocol); // 協(xié)議 "http:" "https:"
console.log(location.host); // 域名 "172.24.1.99"
console.log(location.pathname); // path "/home/subject"
console.log(location.search); // "?uid=99"
console.log(location.hash); // "#mid=100"

如何獲取當(dāng)前設(shè)備的屏幕分辨率？

// screen
console.log(screen.width);
console.log(screen.height);

瀏覽器的后退和前進(jìn)功能？

// history
history.back();  // 后退
history.forward();  // 前進(jìn)

事件綁定

事件冒泡的過程？

事件冒泡是指，觸發(fā)內(nèi)層的事件之后，事件會(huì)按照DOM的樹形結(jié)構(gòu)像水泡一樣不斷的向上觸發(fā)直至頂端。

示例：

    
激活
    
取消
    
取消
    
取消


    
取消
    
取消

function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn);
}

// 冒泡的應(yīng)用
var p1 = document.getElementById("p1");
var body = document.body;
bindEvent(p1, "click", function (e) {
    e.stopPropagation();
    alert("激活");
});
bindEvent(body, "click", function (e) {
    alert("取消");
});

對(duì)于一個(gè)無限下拉加載圖片的頁(yè)面，如何給每個(gè)圖片綁定事件？

    a1
    a2
    a3
    

// 使用代理
var div3 = document.getElementById("div3");
div3.addEventListener("click", function (e) {
    var target = e.target;
    if (target.nodeName === "A") {
        alert(target.innerHTML);
    }
});

一個(gè)通用的事件監(jiān)聽函數(shù)（通用事件綁定）

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type, function (e) {
        var target;
        if (selector) {
            target = e.target;
            if (target.matches(selector)) {
                fn.call(target, e);
            }
        } else {
            fn(e);
        }
    });
}

// 使用代理
var div1 = document.getElementById("div1");
bindEvent(div1, "click", "a", function (e){
    console.log(this.innerHTML);
});

// 不使用代理
var a1 = document.getElementById("a1");
bindEvent(a1, "click", function (e){
    console.log(a1.innerHTML);
});

ajax

手動(dòng)編寫一個(gè)ajax，不依賴第三方庫(kù)

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.douban.com/v2/movie/top250", false); // false => 異步
xhr.onreadystatechange = function () {
    // 這里的函數(shù)異步執(zhí)行
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
};
xhr.send(null);

狀態(tài)碼說明

readyState
0 - (未初始化) 還沒有調(diào)用send()方法
1 - (載入) 已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 - (載入完成) send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 - (交互) 正在解析響應(yīng)內(nèi)容
4 - (完成) 響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

status http狀態(tài)碼
2xx - 表示成功處理請(qǐng)求。如200
3xx - 需要重定向，瀏覽器直接跳轉(zhuǎn)
4xx - 客戶端請(qǐng)求錯(cuò)誤，如404
5xx - 服務(wù)端錯(cuò)誤

跨域

什么是跨域？

瀏覽器有同源策略，不允許ajax訪問其他域的接口
跨域條件：協(xié)議、域名、端口，有一個(gè)不同就算跨域

跨域的幾種實(shí)現(xiàn)方式？

前端：JSONP，vue proxyTable設(shè)置代理
服務(wù)器端：設(shè)置 http header

JSONP簡(jiǎn)單示例

可以跨域的標(biāo)簽？

 用于打點(diǎn)統(tǒng)計(jì)，統(tǒng)計(jì)網(wǎng)站可能是其他域