bom

Chenprwe
117 阅读6分钟

前言

  • bom（browser object model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
  • bom缺乏标准，javascript语法的标准化组织是ECMA，dom的标准化组织是w3c，bom最初是netscape浏览器标准的一部分

window对象

  • window对象是浏览器的顶级对象，具有双重角色
  • 它是js访问浏览器窗口的一个接口
  • 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • 在调用的时候可以省略window
  • window.name是window下的一个特殊属性

window对象的常见事件

窗口（页面）加载事件

  • window.onload = function()或者window.addEventListener('load',function(){})
  • window.onload是窗口（页面）的加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数
  • 优酪乳window.onload可以吧js代码放到页面的任何地方，因为onload是等页面内容全部加在完毕，再去执行的处理函数
  • window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
  • 如果使用addEventListener则没有限制
  • document.addEventListener('DOMContentLoaded',function(){})
  • DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图表，flash等，ie9以上才支持
  • 如果页面的图片很多，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

调整窗口大小事件

  • window.onresize = function(){}或者window.addEventListener("resize",function(){})
  • 时调整窗口大小加载事件，当触发时就调用的处理函数
  • 只要窗口大小发生像素变化，就会触发这个事件
  • 我们经常利用这个事件完成响应式布局。 window.innerWidth当前屏幕的宽度

定时器setTimeout

  • window对象给我们提供了两个非常好用的方法-定时器setTimeout()以及setInterval()
  • window.setTimeout(调用函数,[延迟的毫秒数])
  • steTimeout方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
  • window在调用的时候可以省略，延迟时间的单位是毫秒，也可以生省略，如果省略默认是0
  • 此调用函数可以直接写函数，也可以写函数名
  • 页面中可能有很多的定时器，我们经常给定时器赋值一个标识符

回调函数

  • setTimeout()这个调用函数我们也称为回调函数callback
  • 普通函数按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数

清楚定时器clearTimeout

  • window.clearTimeout(timeoutID)停止setTimeout定时器
  • window可以省略
  • timeoutID就是定时器的名字（标识符

setInterval()定时器

  • window.setInterval(回调函数，[间隔的毫秒数])
  • setInterval方法重复调用一个函数，每隔一段时间，就去调用一次回调函数

清除定时器clearInterval()

  • window.clearInterval(timeId)停止setInterval定时器

this指向问题

  • this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象
  • 全局作用域或者普通函数中this指向全局对象window
  • 方法调用中谁调用this指向谁
  • 构造函数中this指向构造函数的实例

同步和异步

  • 同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
  • 异步：在等待这个任务结束时，同时处理其他的任务

同步任务和异步任务执行过程

  • 同步任务：都在主线程上执行，形成一个执行栈
  • 异步任务：1. 普通时间，如click、resize等；2. 资源加载，如load、error等；3. 定时器，包括setInterval、setTimeout等
  • js执行机制：先执行执行栈中的同步任务，异步任务（回调函数）放入任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
  • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称事件循环（event loop）

URL

  • URl是统一资源定位符（Uniform Resource Locator），是互联网上标准资源的地址。互联网上每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
  • URL的一般语法格式为protocol://host[:port]/path/[?query]#fragment
  • protocol：通信协议常用的http，ftp，maito等
  • host：主机（域名）
  • port：端口号，可选，省略时使用方案等默认端口，如http的默认端口为80
  • query：参数 以键值对的形式通过&富豪隔开
  • fragment：片段 #后面内容常见于链接 猫店

location对象常见属性

  • location对象时window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的事一个对象，所以我们将这个属性也称为location对象
  • location.href 获取或者设置整个URL
  • location.host返回主机（域名）
  • location.port 返回端口号 如果未写返回 空字符串
  • location.pathname返回路径
  • location.search返回参数
  • location.hash返回片段 # 后面内容 常见于链接、锚点

location对象的方法

  • location.assign()跟href一样，可以跳转页面（也称为重定向页面），记录浏览器历史，可以实现后退功能
  • location.replace()替换当前页面，因为不记录历史，所以不能后退页面
  • location.reload()重新加载牙面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5

navigator对象

  • navigator对象包含有关的浏览器信息，它有很多属性，我们常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

history对象

  • window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL
  • back()可以后退功能
  • forward()前进功能
  • go(参数)前进后退功能，参数如果是1前进1个页面，如果是-1后退一个页面
avatar
文章
阅读
粉丝