18 BOM

日嗯任
158 阅读7分钟

BOM 概述

BOM 是 浏览器对象模型 ， 是和浏览器做交互效果的 ，对象是 window

BOM 由一系列相关的对象构成，且每个对象都提供了很多方法和属性

BOM 缺乏标准，它是网景公司的

  • BOM 的顶级对象是window

  • BOM 学习的是 浏览器窗口交互的一些对象

  • 兼容性较差

BOM 比 DOM 更大，它包含DOM

BOM顶级对象 window

window 对象是浏览器的顶级对象

1、它是js访问浏览器窗口的一个接口

2、它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

3、不过在调用的时候可以省略window

image.png

注 ： window下的一个特殊属性 window.name

image.png

window 对象的常见事件

页面加载事件

在DOM 中，script必须写在 元素下面

因为html是从上到下依次执行的，必须等元素都加载完毕后，才能进行 DOM操作

在BOM中

window.onload 传统 只可一个

等到页面所有的元素都加载完毕后，再执行 script

image.png

不过 window.onload 传统注册事件只能写一次，如果有多个，则是会以最后一个window.onload 为准

addEventListener 无限制

image.png

先弹出mm 再弹出aa

DOMContentLoaded DOM加载完毕就执行

image.png

所以 若设置背景颜色了，那么在页面在 也是 先弹出 DOMContentLoaded ，然后背景颜色再改变

调整窗口大小 resize

只要 窗口大小发生像素变化时，就会触发

可以用这个做响应式布局

image.png

定时器

setTimeout(调用函数，[延迟的毫秒数])

该定时器在 毫秒数到期后，执行函数 ，单位毫秒，省略默认0

注 ： 1、window可以省略

image.png

2、 关于调用函数 ，它可以直接写函数，也可以写函数名

image.png

3、调用函数写函数名时，可以是'函数名()'

image.png

4、因为多个定时器，所以可以给定时器起名字

image.png

清除 clearTimeout(定时器名字)

image.png

setInterval

和setTimeout大差不差

image.png

清除 clearInterval(定时器名称)

image.png

setTimeout 和 setInterval区别

setTimeout 只调用一次

setInterval 是 每隔这个延时时间,就会去调用这个

回调函数

setTimeout和setInterval里面的调用函数 都是回调函数 callback

1、普通函数是按照代码顺序直接调用的

2、而回调函数，是需要等待时间，时间到了才去调用这个函数，所以称为回调函数

3、也就是说 ： 回调 == 回头调用，上一件事情干完后，再回头再调用这个函数

4、之前的 onclick 里面的函数 也是回调函数

this指向

一般情况下 this的最终指向是 那个调用它的对象

  1. 全局作用域或者 普通函数中的 this指向全局对象window(注意 定时器里面的this也指向window)

image.png

image.png

  1. 方法调用中 是 谁调用 this就指向谁

image.png

image.png

3.构造函数中 this 指向 构造函数的实例

分析

    是因为 new了一个构造函数，那么就开辟了一个新的内存空间，那么就创建了一个空对象

    而this就指向这个空对象，而在这里面 空对象赋值给fun，所以this指向fun

image.png

JS同步和异步

JS单线程

JS 语言的特点是 '单线程' , 就是 同一个时间只能做一件事情

因为 JS是为处理页面中用户的交互,及操作DOM而诞生的

    eg : 我们对 某个DOM元素进行添加和删除操作,不能同时进行,应该先添加,再删除

单线程 就意味着 所有的任务都需要排队,前一个任务结束,后一个才会执行

那么这样导致的问题就是 : 若js执行的时间过长,那么就会造成页面的渲染不连贯, 导致页面渲染加载阻塞的感觉

解决页面渲染不连贯

解决问题 ： 利用多核CPU的计算能力 , HTML5提出Web Worker标准，允许js脚本创建多个线程,所以js中出现了 同步和异步

同步

前一个任务结束后,再执行后一个任务 ; 程序的执行顺序和任务的排列 顺序是一致的

异步

在做一件事情时,会花费很长时间,那么在做这件事情的同时,还可以去 处理其他事情

本质区别： 各个流程执行顺序不同

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

1、先执行 执行栈中的同步任务

2、异步任务(回调函数) 放入任务队列中

3、一旦 执行栈中的所有 同步任务执行完毕,系统就会按次序读取 任务队列中的异步任务

4、于是 被读取的异步任务结束等待状态,进入执行栈,开始执行

异步任务类型

异步任务 是通过执行回调函数实现的

 一般来说,异步任务有3类
 
        1 普通时间 : 点击 resize等
        
        2 资源加载 load error等
        
        3 定时器  (注 : setTimeout啥的是同步任务,但是里面的回调函数属于异步任务)

JS执行机制

js执行机制 : event loop 事件循环

        1、在js 中 把同步任务放入执行栈(主线程) 中 ,来执行 ;
        
        2、把异步任务 首先提交给异步进程来进行处理(就是要有点击,定时器,ajax啥的,先处理这个)
        
        3、当触发完毕后,再放入异步任务队列中 
        
        4、然后当 主线程的同步任务执行完毕后,去异步队列中看看有没有异步任务，有就放到主线程的执行栈中执行
        
        5、然后再 去看看异步任务队列中 ,有没有异步任务 ,有就再取

分析

image.png

1、先把同步任务放入主线程中

image.png

2、执行主线程的任务

image.png

3、此时 输出1 2 ,执行 setTimeout ,这时 就把 fn放入异步任务

image.png

image.png

location 对象

window 对象给我们提供了一个 location属性 用于获取或者设置窗体的URL ， 且可以用来解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

URL

统一资源定位符 是 互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置 以及 浏览器应该怎么处理它

URL语法格式为 ：

protocol://host[:post]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

protocol : 通信协议 http,ftp,https等

host : 主机（域名） www.baidu.com

port : 端口号 可选 省略时使用 方案默认的端口 eg http的端口号是80

path : 路径 由0或者多个/符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址

query : 参数 以键值对的形式 ，通过 & 符号分隔开

fragment : 片段 #后面内容 常见于 链接锚点

location.href 路径

点击后可跳转

image.png

location.search 参数

可以获取参数 ?及后面的

location 方法

assign() 跳转

和href一样 ， 记录历史，可以回退 ， 也称为重定向页面

image.png

image.png

replace() 替换当前页面

不记录历史，无法回退

image.png

image.png

reload() 重新加载当前页面

() 里面无参数

是刷新 == F5

image.png

(true) 里面参数 true

是 强制刷新 == ctrl+F5

image.png

navigator 对象

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

image.png

history 方法

history 对象一般在实际开发中比较少用，但是会在一些OA办公系统中见到

执行它们的前提必须是 要跳转的页面都点击过了，所以才会跳转过去

forward() 前进

image.png

back() 后退

image.png

go(参数) 参数写几 就前进/后退几页

image.png

avatar
文章
阅读
粉丝