跳到主要内容

BOM

BOM 基础​

BOM​
  • Browser Object Model;
  • 浏览器对象模型;

window 对象​

窗口相关属性方法​

  • window.top: Window | null 实例属性: 指向浏览器顶层窗口;
  • window.parent: Window | null 实例属性: 当前窗口的父窗口, 若无窗口即 window.top;
  • window.self: Window 实例属性: window 本身;
  • window.screenLeft: number 实例属性: 窗口左侧位置的像素值;
  • window.screenTop: number 实例属性: 窗口顶部位置的像素值;
  • window.moveTo(x: number, y: number): void 实例方法: 将窗口移动至 (x, y) 对应的绝对位置;
  • window.moveBy(x: number, y: number): void 实例方法: 把窗口相对移动 (x, y);
  • window.devicePixelRatio: number 实例属性: 表示物理像素和逻辑像素的比值, 与 DPI 对应;
  • window.outerWidth: number 实例属性: 浏览器窗口外部宽度;
  • window.outerHeight: number 实例属性: 浏览器窗口外部高度;
  • window.innerWidth: number 实例属性: 浏览器窗口中页面视口宽度;
  • window.innerHeight: number 实例属性: 浏览器窗口中页面视口高度;
  • window.resizeTo(width: number, height: number): void 实例方法: 缩放窗口至 (width, height);
  • window.resizeBy(x: number, y: number): void 实例方法: 相对调整窗口大小;
  • window.scrollX: number 实例属性: 相对于页面视口的水平滚动位置;
  • window.scrollY: number 实例属性: 相对于页面视口的垂直滚动位置;
  • window.scrollBy(x: number, y: number): void 实例方法: 相对于当前视口滚动指定像素;
  • window.scrollTo(x: number, y: number): void 实例方法: 滚动到页面指定位置;
  • window.scrollTo(options: { left?: number; top?: number; behavior?: "auto" | "smooth" }): void 实例方法: 滚动到页面指定位置, 支持平滑滚动;
  • window.alert(message?: string): void 实例方法: 显示警告对话框;
  • window.confirm(message?: string): boolean 实例方法: 显示确认对话框, 点击确认返回 true, 反之返回 false;
  • window.prompt(message?: string, defaultValue?: string): string | null 实例方法: 显示提示对话框, 点击确认返回输入值, 反之返回 null;
  • window.open(url?: string, target?: string, features?: string): Window | null 实例方法: 打开新窗口或导航到指定 URL;
  • window.setTimeout(callback: (...args: any[]) => void, delay?: number, ...args: any[]): number 实例方法: 在指定延迟后执行回调函数;
  • window.clearTimeout(timeoutId?: number): void 实例方法: 取消由 setTimeout 设置的定时任务;
  • window.setInterval(callback: (...args: any[]) => void, delay?: number, ...args: any[]): number 实例方法: 每隔指定时间重复执行回调函数;
  • window.clearInterval(intervalId?: number): void 实例方法: 取消由 setInterval 设置的循环任务;
定时器的局限​
  • 时间精度无法保证 (6ms 左右);
  • setTimeout 存在延迟积累问题;
  • setInterval 存在任务跳过问题;

location 对象​

location 对象​

  • 保存窗口文档信息;
  • window.location 和 document.location 都指向它;

location API​

  • location.ancestorOrigins: DOMStringList 实例属性: 返回当前文档的所有祖先源;
  • location.hash: string 实例属性: 返回 URL 中的 hash 部分(包括 # 符号);
  • location.host: string 实例属性: 返回 URL 中的主机名和端口;
  • location.hostname: string 实例属性: 返回 URL 中的主机名;
  • location.href: string 实例属性: 返回或设置完整的 URL;
  • location.origin: string 实例属性: 返回 URL 的协议、主机名和端口;
  • location.pathname: string 实例属性: 返回 URL 中的路径部分;
  • location.port: string 实例属性: 返回 URL 中的端口;
  • location.protocol: string 实例属性: 返回 URL 中的协议(包括 : 符号);
  • location.search: string 实例属性: 返回 URL 中的查询字符串(包括 ? 符号);
  • location.assign(url: string): void 实例方法: 加载新的文档;
  • location.reload(forceReload?: boolean): void 实例方法: 重新加载当前文档;
  • location.replace(url: string): void 实例方法: 用新的文档替换当前文档(不会在历史记录中创建新条目);
  • location.toString(): string 实例方法: 返回 URL 的字符串表示;

URLSearchParams API​

  • URLSearchParams(init?: string | string[][] | Record<string, string> | URLSearchParams): URLSearchParams 构造函数: 创建 URLSearchParams 对象;
  • URLSearchParams.prototype.size: number 实例属性: 返回参数数量;
  • URLSearchParams.prototype.append(name: string, value: string): void 实例方法: 添加指定键值对;
  • URLSearchParams.prototype.delete(name: string, value?: string): void 实例方法: 删除指定键(或指定键值对);
  • URLSearchParams.prototype.entries(): IterableIterator<[string, string]> 实例方法: 返回所有键值对的迭代器;
  • URLSearchParams.prototype.forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void 实例方法: 遍历所有键值对;
  • URLSearchParams.prototype.get(name: string): string | null 实例方法: 返回指定键的第一个值;
  • URLSearchParams.prototype.getAll(name: string): string[] 实例方法: 返回指定键的所有值;
  • URLSearchParams.prototype.has(name: string, value?: string): boolean 实例方法: 判断是否存在指定键(或指定键值对);
  • URLSearchParams.prototype.keys(): IterableIterator<string> 实例方法: 返回所有键的迭代器;
  • URLSearchParams.prototype.set(name: string, value: string): void 实例方法: 设置指定键的值(会删除该键的其他值);
  • URLSearchParams.prototype.sort(): void 实例方法: 按键名排序所有键值对;
  • URLSearchParams.prototype.toString(): string 实例方法: 返回查询字符串;
  • URLSearchParams.prototype.values(): IterableIterator<string> 实例方法: 返回所有值的迭代器;
  • 记录一系列浏览器信息;

screen 对象​

  • 记录客户端显示器信息;

history 对象​

history 对象​

  • 管理浏览器历史记录;

history API​

  • history.length: number 实例属性: 返回历史记录中的条目数量;
  • history.scrollRestoration: "auto" | "manual" 实例属性: 控制页面刷新或导航后是否恢复滚动位置;
  • history.state: any 实例属性: 返回当前历史条目的状态对象;
  • history.back(): void 实例方法: 加载历史列表中的前一个 URL;
  • history.forward(): void 实例方法: 加载历史列表中的下一个 URL;
  • history.go(delta?: number): void 实例方法: 加载历史列表中的特定页面;
  • history.pushState(state: any, title: string, url?: string | null): void 实例方法: 向历史记录添加新条目;
  • history.replaceState(state: any, title: string, url?: string | null): void 实例方法: 修改当前历史记录条目;

最佳实践​

自动滚动​

  • 根据 scrollWidth, clientWidth, scrollLeft 判断是否可以滚动;
  • 使用 requestAnimationFrame 实现平滑滚动;
const autoScroll = () => {
  const scroll = async () => {
    if (!tagRef.current) return;
    else;
    // 判断是否可以滚动
    if (tagRef.current.scrollWidth <= tagRef.current.clientWidth) return;
    else;
    // 判断是否滚动至重点
    if (
      tagRef.current.scrollLeft + tagRef.current.clientWidth ===
      tagRef.current.scrollWidth
    ) {
      tagRef.current.scrollLeft = 0;
    } else() {
      tagRef.current.scrollLeft += 1;
    }
    intervalRef.current = requestAnimationFrame(scroll);
  };

  // 判断 DOM
  if (!tagRef.current) return;
  else;
  // 自动滚动
  intervalRef.current = requestAnimationFrame(scroll);
  // 对应事件处理程序
  tagRef.current.onmouseenter = () => {
    cancelAnimationFrame(intervalRef.current);
  };
  tagRef.current.onmouseleave = () => {
    intervalRef.current = requestAnimationFrame(scroll);
  };
};

使用 setTimeout/setInterval 模拟对方​

使用 setTimeout 实现 setInterval​
function setInterval(fn, delay) {
  let timer = null;
  const interval = () => {
    fn();
    timer = setTimeout(interval, delay);
  };
  setTimeout(interval, delay);

  return {
    cancel: () => {
      clearTimeout(timer);
    },
  };
}

const origin = Date.now();
const fn = () => {
  console.log(Date.now() - origin);
};
setInterval(fn, 1000);
使用 setInterval 实现 setTimeout​
function mySetTimeout(fn, time) {
  const timer = setInterval(() => {
    clearInterval(timer);
    fn();
  }, time);

  return {
    cancel: () => {
      clearInterval(timer);
    },
  };
}

const origin = Date.now();
const fn = () => {
  console.log(Date.now() - origin);
};
mySetInterval(fn, 1000);