2025-02-15 日报 Day98

今日的鸡汤

你想要的一切，终究只能靠自己；你想要的人生，也只能自己给自己。愿你靠着努力，成为自己想成为的那个人，奔向向往的生活。

今日学习内容

1、JS 红皮书 P379-381 第十二章：BOM

今日笔记

1、screen对象: window 的另一个属性 screen 对象，是为数不多的几个在编程中很少用的 JavaScript 对象。这个对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。
2、history对象: history 对象表示当前窗口首次使用以来用户的导航历史记录。因为 history 是 window 的属性，所以每个 window 都有自己的 history 对象。出于安全考虑，这个对象不会暴露用户访问过的 URL，但可以通过它在不知道实际 URL 的情况下前进和后退。

• 导航: go()方法可以在历史记录中前进或后退指定的页数。正数表示前进，负数表示后退。比如：

  // 后退一页
  history.go(-1); 
  // 前进一页
  history.go(1); 
  // 前进两页
  history.go(2);

  go()有两个简写方法：back()和 forward()。顾名思义，这两个方法模拟了浏览器的后退按钮和前进按钮：

  // 后退一页
  history.back(); 
  // 前进一页
  history.forward();

  history 对象还有一个 length 属性，表示历史记录中有多个条目。
  3、历史状态管理:
  hashchange 会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。而状态管理API 则可以让开发者改变浏览器 URL 而不会加载新页面。为此，可以使用 history.pushState()方法。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL。例如：

  let stateObject = {foo:"bar"}; 
  history.pushState(stateObject, "My title", "baz.html");

  因为 pushState()会创建新的历史记录，所以也会相应地启用“后退”按钮。此时单击“后退”按钮，就会触发 window 对象上的 popstate 事件。popstate 事件的事件对象有一个 state 属性，其中包含通过 pushState()第一个参数传入的 state 对象：

  window.addEventListener("popstate", (event) => { 
   let state = event.state; 
   if (state) { // 第一个页面加载时状态是 null 
   processState(state); 
   } 
  });

  基于这个状态，应该把页面重置为状态对象所表示的状态（因为浏览器不会自动为你做这些）。记住，页面初次加载时没有状态。因此点击“后退”按钮直到返回最初页面时，event.state 会为 null。
  可以通过 history.state 获取当前的状态对象，也可以使用 replaceState()并传入与
  pushState()同样的前两个参数来更新状态。更新状态不会创建新历史记录，只会覆盖当前状态：
  history.replaceState({newFoo: “newBar”}, “New title”);
  传给 pushState()和 replaceState()的 state 对象应该只包含可以被序列化的信息。因此，DOM 元素之类并不适合放到状态对象里保存。

注意 使用 HTML5 状态管理时，要确保通过 pushState()创建的每个“假”URL 背后都对应着服务器上一个真实的物理 URL。否则，单击“刷新”按钮会导致 404 错误。所有单页应用程序（SPA，Single Page Application）框架都必须通过服务器或客户端的某些配置解决这个问题。

4、浏览器对象模型（BOM，Browser Object Model）是以 window 对象为基础的，这个对象代表了浏览器窗口和页面可见的区域。window 对象也被复用为 ECMAScript 的 Global 对象，因此所有全局变量和函数都是它的属性，而且所有原生类型的构造函数和普通函数也都从一开始就存在于这个对象之上。本章讨论了 BOM 的以下内容。
 要引用其他 window 对象，可以使用几个不同的窗口指针。
 通过 location 对象可以以编程方式操纵浏览器的导航系统。通过设置这个对象上的属性，可以改变浏览器 URL 中的某一部分或全部。
 使用 replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新 URL。
 navigator 对象提供关于浏览器的信息。提供的信息类型取决于浏览器，不过有些属性如userAgent 是所有浏览器都支持的。
BOM 中的另外两个对象也提供了一些功能。screen 对象中保存着客户端显示器的信息。这些信息通常用于评估浏览网站的设备信息。history 对象提供了操纵浏览器历史记录的能力，开发者可以确定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。

5、navigator对象属性:

• appName: 浏览器的名称
• appVersion: 浏览器的版本号
• buildId: 浏览器的构建编号
• userAgent: 浏览器的用户代理字符串