BOM详细介绍

BOM

1.BOM概述


1.1-什么是BOM

BOM(Browser Object Model)即浏览器对象模型,它提供独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。

BOM缺乏标准,javascript语法的标准化组织是ECMA,BOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

BOM DOM
浏览器对象模型 文档对象模型
浏览器当做一个对象看待 文档当做一个对象看待
BOM的*对象是window DOM的*对象是document
浏览器窗口交互的一些对象 操作页面的元素
浏览器厂商各自浏览器定义的,兼容性较差 W3C标准

1.2-BOM的构成

BOM比DOM大,它包含DOM
BOM详细介绍
window对象是浏览器的*对象,它具有双重角色。
1.它是js访问浏览器的一个窗口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window,alert()、prompt()都属于window的对象方法。

注意:window下的一个特殊属性window.name
不建议在全局下var name


2.window对象常见的事件


2.1-窗口加载事件

window.onload = function(){}
//或者
window.addEventListener("load",function(){});

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图象、脚本文件、css文件等),就调用处理函数。
注意:window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。而window.addEventListener不存在冲突问题。

document.addEventListener('DOMcontentLoaded',function(){})

DOMcontentLoaded事件触发时,仅当DOM加载完成,不包括样式表、图片、flash等。(IE9以上才支持)
如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适。

2.2-调整窗口大小事件

window.onresize = function (){}
//或者
window.addEventListener("resize",function(){});

1.只要窗口大小发生像素变化,就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度。


3.定时器


3.1-两种定时器

setTimeout(function(){},ms);
//和【ms为毫秒,毫秒数到了才调用函数,ms可以省略默认为0】
setInterval(function(){},ms)
setTimeout setInterval
调用一次 一直调用

3.2-回调函数

setTimeout()我们也称为回调函数callback
普通函数都是按代码顺序直接调用的。

3.3-清除定时器clearTimeout()

clearTimout(定时器名称)

3.4-清除定时器clearInterval()

<button class="begin">开启定时器</button>
<button class="stop">停止定时器</button>
<script>
    var begin = document.querySelelctor(".begin");
    var stop = document.querySelector(".stop");
    var timer =null;
    begin.addEvevtListener("click",function(){
		 timer = setInterval(function(){
			consloe.log("你好吗");
		},1000);
	stop.addEventListener("click",function(){
		clearInterval(timer);
	})
});
</script>

BOM详细介绍
案例:发送验证短信,60s后才可再次点击

手机号码<input type="number"><button>发送</button>
<script>
	var btn = document.querySelector('button');
	btn.addEventListener("click",function(){
		btn.disabled = ture;
		var timer = setInterval(function(){
			if(time == 0){//清除定时器
				clearInterval(timer);
				btn.disabled = false;
				btn.innerHTML = '发送';
				time =60;
			}else{
				btn.innerHTML = '还剩下' + time + '秒';
				time--;
			}
		},1000);
	})

</script>

3.5-this指向

一般情况下this的最终指向是调用它的对象
1.全局作用域或者普通函数中this指向全局对象window(注意定时器的this指向window)

console.log(this);
function fn(){ console.log(this); }

2.方法调用中,谁调用this指向谁

var o = {
	sayHi:function(){
		console.log(this);//指向o
	}
}
o.sayHi();//o调用

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

function fun(){
	console.log(this);//指向实例fun
}
var fun = new Fun();

4.JS执行机制

4.1-JS是单线程

js语言一大特点就是单线程 。就是说,同一个时间只能做一件事。如对某个DOM进行添加删除菜操作,不能同时进行,应该先添加后删除。
单线程就意味着,所有任务需要排队,前一个任务结束才会执行后一个任务。这样所导致的问题是:如果JS执行时间过长,会造成页面渲染不连贯,导致页面渲染加载堵塞的感觉。

4.2-同步和异步

为了解决这个问题,利用多核CPU的计算能力,HTML5提出web worker标准,允许javasript脚本创建多个线程。于是js出现了同步和异步。

同步

前一个任务结束后再执行后一个任务,程序的执行顺序与任务顺序是一致的、同步的。
比如做饭的同步做法:先烧水煮饭,等水开了,再去切菜,炒菜。

异步

在做一件事的同时还可以处理其他事情。
如在烧水的同时,切菜,炒菜。

console.log(1);
setTimeout(function(){
	console.log(3);
},0);
console.log(2);
//代码执行结果是123

同步任务

同步任务都在主线程上执行,形成一个执行栈。
如上述代码console.log()、setTimeout()在执行栈上,而setTimeout内的function属于异步任务。

异步任务

js的异步是通过回调函数实现的
一般而言,异步任务有以下三种类型:
1.普通事件,如click、resize
2.资源加载,如load、error等
3.定时器,包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)

js执行机制

BOM详细介绍
1.先执行执行栈中的同步任务
2.异步任务(回调函数)放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。


5.location对象


Location对象方法 返回值
Location.assign() 跟href一样,可以跳转页面(重定向),记录历史可以后退
Location.replace() 替换当前页面,因为不记录历史,所以不能后退页面
location.raload 刷新,重新加载页面

6.navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值。
下面前端代码可以判断用户哪个终端打开页面

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
	window.location.href="";//手机
}else{
	window.location.href="";//电脑
}

一般情况下,该功能是服务端做的

7.history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL

history对象方法 作用
back() 可以后退功能
forward() 前进功能
go(参数) 1:前进,-1:后退
var btn = ducument.querySelector('button');
btn.addEventListener(click'',function(){
	//history.forward();
	history.go(1);
})
上一篇:BOM 定时器JS执行机制


下一篇:JS练习_BOM水果列表删除提示功能