BOM

用户1223725238332
129 阅读10分钟

BOM

概述

BOM (Browser Object model 浏览器对象模型)，主要是对应的浏览器内容的相关操作对象。它缺乏规 范，利用共有对象来解决每个浏览器兼容的问题。它主要的内容是浏览器操作，也就是说如果脱离浏览器那么就没有BOM

BOM主要的内容
  • window 浏览器窗口
  • location 地址栏 *
  • history 历史对象 *
  • navigator 导航对象
  • screen 屏幕对象
  • document 文档对象
  • frames 子窗口对象实际它也是一个window

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

window对象

window对象是浏览器global对象，它表示浏览器的窗口。里面具备相关方法及内容。所有的全局属性 及对应的全局方法都是它的子内容。 bom其他的相关内容都是window的子元素（属性）。

global对象的特性
  1. 所有的全局变量都是属于他的属性
  2. 所有的全局定义的方法都是它的方法
  3. global具备省略其他名字的特性 9HNX{`ONI45FVBLX{(_~EDP.png 属性

  • caches 浏览器缓存

  • cookieStore cookie存储器

  • crypto 加密包

  • indexedDB 浏览器的数据库

  • innerHeight,innerWidth 浏览器显示区域的宽高

  • localStorage,sessionStorage 浏览器的本次存储

  • console 浏览器控制台对象

  • .....

     //相关属性
  console.log(window.caches) //浏览器缓存
  console.log(window.clientInformation) //客户端详情 返回一个navigator对象
  console.log(window.closed) //是否关闭
  console.log(window.crypto) //加密包
  console.log(window.indexedDB) //浏览器自带数据库 （存储其他地方存储不了的数据 存储数据
  大）
  console.log(window.innerHeight,window.innerWidth) //获取窗口的高度 获取窗口的宽度 显
  示内容部分
  console.log(window.localStorage) //本地存储
  console.log(window.sessionStorage) //本地存储
  console.log(window.console) //获取控制台对象
  console.log(window.document)
  console.log(window.history)
  console.log(window.location)
  console.log(window.frames)

方法 （window对象可以被省略）

打印相关方法

//console的打印相关的方法
console.log('日志打印')
console.count('数量打印')
console.debug('调试打印')
console.warn('警告打印')
console.error('错误打印')
console.group('分组打印')   groupEnd 分组结束
console.info('信息打印')
console.dir('文件打印')
//清空控制台
console.clear()
跟时间相关
console..time()  timeEnd 时间结束（打印程序执行时间）
弹窗相关方法

  • alert

  • confirm

  • prompt

    alert('信息弹窗')  普通提示  传入提示内容  没有返回值
var str = prompt('输入弹窗')//输入弹窗 返回输入的字符串
console.log(str)
var is = confirm('您是否要删除')//交互弹窗 接收一个boolean类型的值 点击确认返回true 点击取消返回false
 console.log(is)
print 打印机调用方法
window.print() //将当前窗口的内容进行打印
打开和关闭窗口的方法

  • open 三个参数分别为打开的页面地址 打开的名字 窗口的相关配置

      // left=0 窗口距离屏幕左侧的象素值；
  // titlebar=no 是否显示标题栏，被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes；
  // menubar=no 表示菜单栏，默认值是yes；
  // scrollbars=yes 是否显示滚动条，默认值是yes；
  // resizable=no 是否允许改变窗口大小，默认值是yes；
  // status=no 是否要添加一个状态栏，默认值是yes；
  // toolbar=no 是否显示工具栏，默认值是yes；
  // location=no 是否显示地址栏，默认值是yes；
  //打开窗口url地址   相关打开方式（_self 自身打开 _blank 新的页面）  窗口的相关配置
  window.open('http://www.baidu.com','_blank','width=20,height=40,top=0,left=0')

  • close 关闭当前的窗口

      newWindow.close()
  window.close()
窗口位置移动的方法

  • moveTo 传入对应的x，y坐标移动到这个坐标

      //100,100
  window.moveTo(200,200) //移动到坐标200,200的位置

  • moveBy 传入对应的需要移动的距离 在原本的基础上移动这个距离

      //100,100
  window.moveBy(200,200) //移动到坐标300,300的位置
窗口大小的更改的方法

  • resizeTo 传入对应的宽高 更改到这个宽高的大小

      //100,100
  window.resizeTo(200,200) //200,200

  • resizeBy 传入对应的宽高 在原本的大小上增加对应的宽高

      //100,100
  window.resizeBy(200,200) //300,300
滚动栏的位置更改 (x,y)

  • scrollTo 传入x,y坐标移动到这个坐标

      //50,50
  window.scrollTo(100,100) //滚动栏距离到100,100

  • scrollBy 传入移动的距离在原本基础上移动对应的距离

      //50,50
  window.scrollBy(100,100) //滚动栏距离到150,150
fetch请求
//用于请求数据  传入一个请求地址的url  返回一个promise
var promise = window.fetch(new URL ('https://music.163.com/weapi/middle/clientcfg/config/list?csrf_token='),{
    menthod:'post'
})
console.log(promise)
获取焦点和失去焦点的方法
window.focus() //获取焦点
window.blur() //失去焦点
相关异步的定时器和延时器

  1. setInterval clearInterval 定时器

  2. setTimeout clearTimeout 延时器

  3. setImmediate clearImmediate 类似于延时器

     window.setInterval(function(){},1000,'传递的参数')
 window.clearInterval('定时器id')清除定时器
 window.setTimeout(function(){},1000,'传递的参数')
 window.clearTimeout('延时器id')清除延时器
 window.setImmediate(function(){},1000,'传递的参数')
 window.clearImmediate('清除上述的内容') 清除上述内容
延时器
window.setImmediate //等待其他执行完再执行
location

location表示是地址栏对象，主要作用是设置地址栏内容及获取地址栏内容。

属性（所有属性都是可读可写）

  • hash #号后面的值

  • host 主机

  • hostname 主机名

  • href: 地址路径

  • origin 跨域地址

  • pathname 路径名

  • port 端口号

  • protocol 协议

  • search ?后面携带的参数

      console.log(location)
  // #号后的值 #一般都存在于最后面
  console.log(location.hash)
  //域名 相当于ip地址+端口号 localhost表示本机它的IP为127.0.0.1
  console.log(location.host)
  //ip地址
  console.log(location.hostname)
  //地址的链接
  console.log(location.href)
  //跨域地址
  console.log(location.origin)
  //路径地址 去除对应的ip地址+端口号的剩余内容
  console.log(location.pathname)
  //端口号 1-65525 （1-100的端口一般被系统占用） http协议默认端口为80 https的默认端口为443
  console.log(location.port)
  //超文本传输协议 网络请求访问常用 http 不安全 https 安全
  console.log(location.protocol)
  //?后面的值 ?用于传递参数的 ?key=值&key=值
  console.log(location.search)
  //location是可以设置的
  location.hash = "hello"
  location.search = 'name=tom'
  // location.port = 9999
  location.proctocol = "https" //没作用
  location.hostname = "127.0.0.1"
  //href location的链接地址 设置href可以使页面跳转 没有历史记录
  // location.href = "http://www.baidu.com"
  location = "http://www.baidu.com" //跟href属性是一致的

方法

  • reload 重新加载

  • assign 跳转页面

  • replace 替换href地址跳转页面

      //重新加载
  location.reload()
  // 历史原因 可以会传入对应的boolean类型的值 true表示重新加载 false表示从缓存中加载
  location.reload(true)
  // assign 跳转页面的 有历史记录的
  location.assign('http://www.baidu.com')
  // 替换当前href地址 没有历史记录
  location.replace('http://www.baidu.com')
location 中用于跳转页面的方式
  1. replace 直接替换当前页面的href 没有历史记录
  2. assign 跳转页面 历史记录的
  3. location.href location的href进行赋值 有历史记录
  4. location location 直接进行赋值 有历史记录
history

history是历史对象，主要是用于操作对应的历史页面的。

属性 （只读）

  • state 状态值

  • length 历史页面个数

  • scrollRestoration 滚动恢复属性

      console.log(history.state) //状态值 默认为null
  console.log(history.length) //历史页面个数
  console.log(history.scrollRestoration)//滚动栏位置缓存选项 滚动恢复属性
方法 （不会进行刷新操作）

  • pushState 将历史页面推入（设置state的值 state的值会发生变化 历史页面个数+1 推入一个历史页面 这个页面地址会替换当前的页面地址 但是不会进行页面刷新操作 ）

  • replaceState 将历史页面替换（设置state的值 state的值会发生变化 历史页面个数不会变化 替换当前的历史页面 这个页面地址会替换当前的页面地址 不会进行刷新操作）

      //相关方法
  function push(){
  history.pushState('hello','','./state.html')
  console.log(history.length) //2
  console.log(history.state) //hello
  }
  function replace(){
  history.replaceState('hi','','./state.html')
  console.log(history.length) //1
  console.log(history.state) //hi
  }

  • forward 前进

  • back 后退

  • go 历史页面跳转

      <!-- 前进后退和跳转 -->
  <button onclick="history.forward()">前进</button>
  <button onclick="history.back()">后退</button>
  <!-- go方法里面传入的是对应的数值 0为当前页面 大于为0为前进 小于0为后退 -->
  <button onclick="history.go(-1)">跳转</button>
navigator

浏览器的导航对象，主要是描述当前浏览器的信息及相关内容。

相关属性

userAgent 携带发生给对应的服务器

console.log(navigator.appName) //当前应用名
console.log(navigator.appCodeName) //应用编码名
console.log(navigator.appVersion) //应用版本
console.log(navigator.userAgent) //客户端相关信息
screen

浏览器的屏幕对象，主要是用于获取当前的屏幕大小。（大屏可视化）

属性

  • width 宽度

  • height 高度

  • availHeight 可占用高度

  • availWidth 可占用宽度

  • colorDepth 颜色深度

  • pixelDepth 色彩深度

      //宽度和高度
  console.log(screen.width);
  console.log(screen.height);
  //可占用宽度和高度
  console.log(screen.availHeight);
  console.log(screen.availWidth);
  //可占用的位置离左边和上边的距离
  console.log(screen.availLeft)
  console.log(screen.availTop)
  //返回屏幕的颜色深度
  console.log(screen.colorDepth)
  //返回屏幕的位深度/色彩深度（bit depth）
  console.log(screen.pixelDepth)
document

表示当前的文档对象，也就是书写的html文档。

frames

表示子窗口，实际也是一个window对象

总结
  • bom是利用共有对象来实现对应的兼容。主要的对象有window，history , screen , navigator,document、frames、location。
  • history主要是用于操作历史页面的，里面的方法都不会进行刷新操作。（back、forward、go 、
  • pushState 、replaceState）
  • location 主要是用于操作对应的地址栏 里面的属性都可以进行设置（hash、query）。 主要的方
  • 法有（reload、assign、replace）。
  • screen主要是屏幕对象，它可以获取屏幕相关内容。
  • navigator是导航对象，主要可以获取浏览器的相关内容及外设。
  • bom基础是路由的底层实现（主要用到了location 及 history）
跳转页面的几种方式
  • a标签跳转页面
  • location赋值
  • location.href赋值
  • location.assign()
  • location.replace()
  • history.go()
  • history.back()
  • history.forward()

拓展内容

路由（router）

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

后端路由

前后端不分离 前端和后端的代码是一块的 早期php技术 早期的jsp技术，早期的asp技术

核心实现 请求不一样的地址给不一样的页面（丢页面）

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

缺点 服务器压力大

前端路由

前端后端分离

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

前端路由的分类

页面路由（页面跳转的路由（刷新））

location.assign(url)
location.replace(url)
location.hreff='url'
location='url'

hash路由(hash值变化并不会刷新页面)

通过hashChange事件来监听hash值得变化 根据不同得hash值渲染不同的内容

window.onhashChange=function(){
    if(location.hash=='#hello'){
        console.log('你好')
    }else if(location.hash=='#shop'){
        console.log('商品')
    }
}

history路由（h5路由） 通过pushStatr或者replaceState来更改对应得url地址（不刷新） 通过popState事件来进行监听 监听state得变化 获取地址栏的地址 （需要利用back foeward go 才能触发）

// history路由 back go forward才能触发
window.onpopstate = function(){
  console.log(location.pathname)
  document.getElementById('show').innerText = location.pathname
    }

根据对应的地址栏的地址渲染不同的内容

页面路由和对应的hash及history的区别

页面路由会进行页面的切换（刷新操作）（多页面切换） hash及history路由 不会进行页面的切换（没有刷新操作）（单页面） hash及history路由广泛用于单页面应用程序（SPA）的路由 vue和react 开发的应用大部分都是单页面应用（所以对应的vae和reactd的路由的实现就是hash及history，常用模式就是hash模式及history 模式，默认情况下对应的路由模式为hash）

SPA

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

优点不需要刷新，速度快（渲染少）

缺点首屏加载慢

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

SSR(服务器渲染)

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