BOM 及一些拓展内容

cancer
144 阅读5分钟

概述

BOM全称（broswer object model 浏览器对象模型），主要是用于获取和操作相关内容的。它是缺乏规范，通过共有对象来实现对应的兼容。它主要的内容是浏览器操作也就是说如果脱离了浏览器那么久没有BOM

相关共有对象

  • window （全局（global）对象，所有的全局变量及方法都是他的内容）
  • location（地址栏对象）
  • history（历史对象）
  • navigator（浏览器导航对象）
  • screen（屏幕对象）
  • frames 子窗口 （其实也是window）
  • document 文档对象

image.png

学习BOM的重点是为了掌握对应的浏览器操作的同时了解路由的原理

Window
概述

window 属于浏览器的global对象 ，它可以理解为浏览器窗口（每开一个窗口就会单独存在一个window）

global对象特性
  • 所有的全局变量都是属于他的属性
  • 所有的全局定义的方法都是他的方法
  • global具备省略其他名字ed特性

window相关属性 所有的其他共有对象都是window对象的属性

  • console.log（caches） 缓存储存器 cachestorage
  • console.log（closed） 窗口是否关闭
  • console.log （cookiestore） cookie 储存器
  • console.log （crypto） 提供一个加密对象
  • console.log （indexedDB）浏览器数据库 存储其他储存不了的东西
  • console.log （innerHeight）高度
  • console.log （innerwidth）宽度
  • console.log（localStorage）本地存储
  • console.log（sessionstorage） 本地储存

window 相关方法

open

三个参数分别为打开的页面地址，打开的名字（类似于a标签target属性） 相关配置的内容

image.png

close

关闭当前窗口

相关控制台的方法

console 他是一个属性会返回一个方法

window.close（）

  • console.log（console） //打印的是个对象
  • console.log（'日志打印'）
  • console.count（'数量打印'）
  • console.debug（'测试打印'）
  • console.warn（'警告打印'）
  • console.error（'错误打印'）
  • console.group（'数组打印'）
  • console.dir（'文件夹'） -console.groupend （分组）
  • 跟时间相关
  • console .time （）
  • 日志打印
  • console.timeLog（）
  • 添加事件锉标签
  • console.timeStamp（'hello'）
  • 结束计时打印
  • console.timeEnd（）
弹窗相关方法
  • alert 提示框
  • confirm 相互框
  • prompt 输入框

image.png

打印机调用方法 print

window.print（）

image.png

moveTo和moveBy（窗口移动） //暂无法使用

image.png

resizeTo和resizeBy（改变窗口大小） //暂无法使用

image.png

scrollTo和scrollby （滚动栏位置变化） 可用

image.png

image.png

fetch 请求

image.png

相关异步的定时器和延时器

  • setinterval clearinterval 定时器
  • setTimeout clearTimeout 延时器
  • setImmeddiate clearlmmediate 类似延时器

image.png

失去焦点 和聚焦

  • focus 聚焦
  • blur 失去焦点

location *

location是一个地址栏对象 ，主要是对于地址的内容栏进行设置及获取，以及使用地址栏进行跳转。

location相关属性
  • href 链接地址
  • hash#后面的属性
  • search？后面的属性
  • host 主机 hostname 主机名
  • port 端口好
  • protocol 协议
  • origin 跨域地址
  • pathname 文件路径
  • ancestorOrigins 当前所属于上下文

image.png

  • 相关方法
  • reload 重新加载 （刷新）
  • assign 跳转
  • replace 替换当前href 进行跳转

image.png

location中用于跳转页面的方式
  • assign 方法
  • replace 方法
  • location.href 进行赋值
  • location 直接赋值

location ='www.baidu.com'

history

history是用操作对应的历史页面的一个对象，他可以进行历史页面的切换和相关的添加历史页面的操作

  • history相关的属性
  • length 历史页面个数
  • state 状态值
  • scrollRestoration 滚动恢属性

image.png

history 相关方法
  • back 后退
  • forward 前进
  • go 去任意历史页面
  • oushstate 添加一个新的历史页面（length+1）并且将对应的state值重新刷新 replacestate 替换当前的历史页面（更改当前的地址栏）并且将对应的state值重新设置 （不会进行跳转操作 不会刷新）

image.png

history 的pushstate和replacestate最大的好处在于页面不刷新

navigator

浏览器导航，浏览器相关内容及系统相关内容。

属性

userAgent 携带系统信息 及浏览器信息

screen

屏幕对象主要是获取可占用的屏幕高度宽度 属性 width.height availheight.availwidth colorDepth 颜色深度 pixelDepth 色彩深度 ...

image.png

document

document主要是用于形容对应的html文档（html文档对象），它是整个dom操作中的超类.

拓展内容

路由（router）

根据对应的路由表，进行路由的分发（根据不同的路由路径 分发不同的页面 （渲染不同的内容））

后端路由

前后端不分离（前端和后端的代码是一块的，早起php技术，早起的js技术，早起的asp技术）

核心实现

请求不一样的地址 给不一样的页面

优点

速度快，适用于seo（搜索引擎优化）

缺点

服务器压力大 安全性受损

前端路由

前后端分离

将前端代码和后端代码完整分离，（后续再进行联调 后端返回前端路由表 前端再处理路由表切换）

前端路由的分类

页面路由（页面跳转的路由（刷新））
location.assign（）
location.replace（）
location.href='url'
location='url'

hash路由 （hash值变化并不会刷新页面） 通过hashchange事件来监听hash值渲染不同的内容

image.png

history路由（H5路由）
  • 通过pushstate或者replacestate来更改对应的url地址（不刷新）
  • 通过popstate事件 进行监听 监听state的变化 获取地址栏的地址 （需要利用back forward go才能触发）

image.png

  • 根据对应的地址栏的地址 渲染不同的内容
- 页面路由和对应的hash及history的区别
  • 页面路由会进行页面切换（刷新操作）（多页面切换）
  • hash及history 不会进行页面的切换（没有刷新操作）（单页面）
  • hash及haistory路由广泛用于单页面应用程序（SPA）的路由
  • vue和react开发的应用大部分都是单页面应用（所以对应的vue和react的路由的视线就是hash及history，常用的模式就是hash模式和history模式 默认情况下对应的路由模式为hash）

SPA

单页面应用（只有一个页面）， 它主要的特点在于一个页面做渲染 不需要多页面的切换

优点

不需要刷新 速度快（渲染量少）

缺点

首屏加载慢

不利于seo （商城等等）

为了解决上述的缺点，我们在使用对应的单页面应用的技术的时候，通常会配合服务器渲染（SSR）来做

SSR（服务器渲染）

  • 服务器直接返回整个页面进行渲染
  • 一般只做首页（首屏渲染）
avatar
文章
阅读
粉丝