深入JavaScript Day30 - BOM、window、

2022-02-15 本文已影响0人望穿秋水小作坊

一、从 BOM 的学习，窥探学习方法论

1、BOM里面包括几十个属性，几十个方法，面对如此繁杂的内容，我们该如何去学习呢？【学习方法论，非常重要】

【线性学习】如果我们只是一个一个API的去熟悉，那么很容易忘记，而且不知道API之间的关系。下等学习策略
【树形学习】弄清楚整个BOM的架构，然后每个分支下熟悉几个常用API，这样的学习方式就非常优秀。 高屋建瓴

image.png

2、BOM的全称是什么？是什么之间的桥梁？【弄清楚BOM的关系、作用】

-【Browser Object Model】可以看成是连接JavaScript脚本与浏览器窗口的桥梁。

3、BOM主要包括哪四个对象模型？【BOM树形结构】

【window】包括全局属性、方法、控制浏览器窗口相关的属性、方法；
【location】是URL的抽象实现；
【history】操作浏览器的历史；
【document】当前窗口操作文档的对象；

二、学习window、location、history对象【BOM树形结构的分支】

1、window对象在浏览器中有哪两个身份？

【全局对象】我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；在浏览器中就是window对象。
【浏览器窗口对象】作为浏览器窗口时，提供了对浏览器操作的相关的API。

image.png

2、window作为窗口对象，常见的属性演练？

// 浏览器高度
console.log(window.outerHeight);
console.log(window.innerHeight);

console.log("screenX:", window.screenX);
console.log("screenY:", window.screenY);

// 监听滚动
window.addEventListener("scroll", (event) => {
  console.log(window.scrollX);
  console.log(window.scrollY);
});

3、window作为窗口对象，常见的方法演练？

window.onfocus = function () {
  console.log("窗口获取到焦点");
};
window.onblur = function () {
  console.log("窗口失去了焦点");
};

// 整个页面以及所有的资源都加载完成
window.onload = function () {
  console.log("页面加载完成");
};

// hash改变
const hashBtn = document.querySelector("#hash");
hashBtn.onclick = function () {
  location.hash = "aaa";
};
window.onhashchange = function () {
  console.log("hash被修改了");
};

4、为什么window会有 addEventListener等事件方法？代码演练？

【从架构的角度】因为 Window类继承自 EventTarge 。

function handleWindowClick() {
  console.log("浏览器窗口被点击");
}
function handleWindowScroll() {
  console.log("浏览器窗口在滚动");
}
// window的事件监听
window.addEventListener("click", handleWindowClick);
window.addEventListener("scroll", handleWindowScroll);
// window的事件监听移除
const removeBtn = document.querySelector("#removeBtn");
removeBtn.onclick = function () {
  window.removeEventListener("click", handleWindowClick);
  window.removeEventListener("scroll", handleWindowScroll);
};