【JS基礎】DOM，BOM，事件繫結，ajax，跨域，儲存

ican發表於2019-02-16
JS事件跨域

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

  1. JS基礎知識（ECMA 262 標準）
  2. JS-Web-API（W3C 標準）

JS-Web-API的內容包括

DOM
BOM
事件繫結
ajax請求（包括http協議）
儲存

W3C 標準沒有規定任何JS基礎相關的東西。W3C不管變數型別、原型、作用域和非同步，只管定義於瀏覽器中JS操作頁面的API和全域性變數。

DOM

DOM(Document Object Model) 文件物件模型
DOM可以理解為：瀏覽器把拿到的html程式碼，結構化成瀏覽器能識別並且JS可操作的一個模型

DOM 是哪種基本的資料結構？

樹

DOM 操作的常用API有哪些？

獲取節點，以及節點的 property 和 attribute
獲取父節點，獲取子節點
新增節點，移動節點，刪除節點

DOM 節點的 attribute 和 property 有何區別？

attribute 是對html標籤屬性的操作
property 是對js物件屬性的操作

BOM

BOM(Browser Object Model) 瀏覽器物件模型

如何檢測瀏覽器的型別？

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

如何拆解url的各部分？

// location
console.log(location.href); // 整個地址
console.log(location.protocol); // 協議 `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`

如何獲取當前裝置的螢幕解析度？

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

瀏覽器的後退和前進功能？

// history
history.back();  // 後退
history.forward();  // 前進

事件繫結

事件冒泡的過程？

事件冒泡是指，觸發內層的事件之後，事件會按照DOM的樹形結構像水泡一樣不斷的向上觸發直至頂端。

示例：

<div id="div1">
    <p id="p1">啟用</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
</div>
<div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
</div>
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn);
}

// 冒泡的應用
var p1 = document.getElementById(`p1`);
var body = document.body;
bindEvent(p1, `click`, function (e) {
    e.stopPropagation();
    alert(`啟用`);
});
bindEvent(body, `click`, function (e) {
    alert(`取消`);
});

對於一個無限下拉載入圖片的頁面，如何給每個圖片繫結事件？

<div id="div3">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <!--會隨時新增更多 a 標籤-->
</div>
// 使用代理
var div3 = document.getElementById(`div3`);
div3.addEventListener(`click`, function (e) {
    var target = e.target;
    if (target.nodeName === `A`) {
        alert(target.innerHTML);
    }
});

一個通用的事件監聽函式（通用事件繫結）

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

手動編寫一個ajax，不依賴第三方庫

var xhr = new XMLHttpRequest();
xhr.open(`GET`, `http://api.douban.com/v2/movie/top250`, false); // false => 非同步
xhr.onreadystatechange = function () {
    // 這裡的函式非同步執行
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        }
    }
};
xhr.send(null);

狀態碼說明

readyState
0 – (未初始化) 還沒有呼叫send()方法
1 – (載入) 已呼叫send()方法，正在傳送請求
2 – (載入完成) send()方法執行完成，已經接收到全部響應內容
3 – (互動) 正在解析響應內容
4 – (完成) 響應內容解析完成，可以在客戶端呼叫了

status http狀態碼
2xx – 表示成功處理請求。如200
3xx – 需要重定向，瀏覽器直接跳轉
4xx – 客戶端請求錯誤，如404
5xx – 服務端錯誤

跨域

什麼是跨域？

瀏覽器有同源策略，不允許ajax訪問其他域的介面
跨域條件：協議、域名、埠，有一個不同就算跨域

跨域的幾種實現方式？

前端：JSONP，vue proxyTable設定代理
伺服器端：設定 http header

JSONP簡單示例

<script>
    window.callback = function (data) {
        // 這是我們跨域得到的資訊
        console.log(data);
    }
</script>
<script src="http://www.yourname.com/api.js"></script>
<!--以上將返回 callback({x:100.y:200})-->
<!--模擬呼叫了js的callback方法-->

可以跨域的標籤？

<img> 用於打點統計，統計網站可能是其他域
<link> <script> 可以使用CDN，CDN的也是其他域
<script> 可以用於JSONP

跨域注意事項：
所有的跨域請求都必須經過資訊提供方允許。如果未經允許即可獲取，那是瀏覽器同源策略出現了漏洞。

儲存

描述 cookie,sessionStorage,localStorage 的區別？

1.容量不同
2.是否會攜帶到ajax中
3.API的易用性

cookie

本身用於客戶端和服務端通訊
但是它有本地儲存的功能，於是就被“借用”
使用 document.cookie = … 獲取和修改即可

cookie用於儲存的缺點

儲存量太小，只有4KB
所有http請求都帶著，會影響獲取資源的效率
API過於簡單，需要封裝才能用 document.cookie = …

sessionStorage，localStorage

HTML5 專門為儲存而設計，最大容量5M
API簡單易用
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
sessionStorage：瀏覽器關閉清空資料
localStorage：只要不手動清空，就一直在

相關文章