前端-JS进阶-BOM

BOM

1. BOM是浏览器对象模型，提供独立于内容与浏览器窗口进行交互的对象，其核心为window（如窗口后退，前进，刷新等）

2. BOM的兼容性较差，是由各自浏览器厂商定义的

3. BOM比DOM更大，BOM包含了DOM

1. window对象

1. window对象是浏览器的顶级对象，具有双重角色
2. 它是js访问浏览器窗口的一个借口
3. 它是一个全局对象。定义在全局作用域中的变量/函数都会成为window对象的属性和方法
4. 调用时可以省略window，alert();prompt();都属于window的方法
5. 注意：window下的name存在特殊属性，所以变量名不单独取name

2. window常见事件

1. 窗口加载事件

window.onload是窗口（页面）加载事件，当文档内容完全加载完成后触发该事件（包括图像，脚本文件，CSS文件等）
书写形式：window.onload = function(){} 或者 window.addEventListener('load',function(){})
// 添加窗口加载事件后就可将js代码写在head中
// window.onload传统注册事件方式只能写一次，如有多个，会以最后一个window.onload为准
// addEventListenenr则没有限制，可写多次
document.addEventListener('DOMContentLoaded',function(){}) 是当DOM加载完毕（不包括CSS/图片/flash等）就触发
// 当页面图片较多的情况下可使用此方法
// DOMContentLoaded加载速度会比load更快，且不影响js执行

2. 调整窗口大小事件

window.onresize是窗口大小变化就会触发事件，利用此事件可以做响应式网页（window.innerWidth当前屏幕宽度）
书写形式：window.onresize = function(){} 或 window.addEventListener('resize',function(){})

window.onresize = function(){
  if(window.innerWidth < 800){
    div.style.display='none';
  } // 如果窗口宽度小于800 则隐藏元素
}

3. 重新加载

window.addEventListener('pageshow',function(e){
  if(e.persisted){执行语句}; // 返回为ture则说明此时页面是从缓存取过来的页面
})
pageshow与load的区别：
在火狐浏览器中有“往返缓存”，load在火狐浏览器中返回上一个页面是无法刷新页面，此时load无法触发
pageshow不论页面是否有缓存，在重新加载页面时都会触发

3. 定时器

a. window.setTimeout(调用函数,[延迟的毫秒数])，设置一个定时器，定时器到期后执行调用函数
// window在调用时可省略
setTimeout(function(){ // 这里函数可以写函数名（不需要加小括号）
  console.log('IU')
},2000) // 2s后输出，这里2000单位为毫秒，也可不写，默认为0（立马执行）

// 页面中可能存在多个定时器，可给定时器添加标识符（名字）
var time1 = setTimeout(function(){},2000)
var time2 = setTimeout(function(){},3000)...
// setTimeout中的调用函数也称为回调函数callback

b. window.clearTimeout(timeoutID)停止setTimeout定时器
var time1 = setTimeout(function(){},2000)
clearTimeout(time1); // 停止上面的定时器

c. window.setInterval(调用函数,[间隔的毫秒数])，重复调用一个函数，每隔着个事件，就调用一次回调函数
var time1 = setInterval(function(){},2000)

d. windoe.clearInterval(timeID)停止setInterval定时器
// 如果定时器写在函数内，需要函数外部先设置timeID为null

❤️案例：通过点击开启/关闭定时器
var time = null; // 先定义全局变量赋值为null，函数内定义为局部变量，其他函数无法调用
div.addEventListener('click',function(){
  time = setInterval(function(){},1000);
}) // 点击开启定时器
div.addEventListener('click',function(){
  clearInterval(time);
}) // 点击关闭定时器

❤️案例：倒计时
<span class="day">天</span>
<span class="hour">时</span>
<span class="minute">分</span>
<span class="second">秒</span>
var day = document.querySelector('.day')
var hour = document.querySelector('.hour');
var minute = document.querySelector('.minute');
var second = document.querySelector('.second');
var inputTime = +new Date('2022-10-1 0:0:0'); // 将需要计算的时间放在时间计算函数外，方便修改
time(); // 先调用一次函数，防止页面刷新存在空白期，这个函数需写在定时器上面
setInterval(time,1000); // 开启定时器
function time(){ // 倒计时时间函数
    var nowTime = +new Date();
    var times = (inputTime - nowTime)/1000;
    var d = parseInt(times / 60 / 60 / 24);
    d = d < 10? '0' + d : d;
    day.innerHTML = d;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10? '0' + h : h;
    hour.innerHTML = h;
    var m = parseInt(times / 60 % 60);
    m = m < 10? '0' + m : m;
    minute.innerHTML = m;
    var s = parseInt(times % 60);
    s = s < 10? '0' + s : s;
    second.innerHTML = s;
}

❤️案例：注册发送短信按钮禁用倒计时
var btn = document.querySelector('button');
var s = 10; // 定义剩下的秒数
var time = null;
btn.addEventListener('click',function(){
    btn.disabled = true; // 先禁用按钮
    time = setInterval(function(){ // 开启定时器
        if(s == 0){ // 剩下秒数为0时还原按钮
            clearInterval(time);
            btn.disabled = false;
            btn.innerHTML = '发送';
            s = 10; // 还原剩下秒数
        } else {
            btn.innerHTML = '在过'+ s +'秒后重试';
            s--;
        }
    },1000)
})

4. this指向问题

1. 全局作用域或者普通函数中，this指向全局对象window（定时器里面的this指向window）
console.log(this); //	this指向window
function fn(){console.log(this)}; fn(); //	this指向window
setInterval(function(){console.log(this)},1000); // this指向window

2. 方法调用时，谁调用this就指向谁
var o = {sayHi:function(){console.log(this)}}; o.sayHi(); // this指向o
var div = document.querySelector('div');
div.onclick = function(){console.log(this)}; // this指向div

3. 构造函数中this指向构造函数的实例
function Fun(){console.log(this)};  // 指向的是Fun
var fun = new Fun();

5. JS同步与异步

1. js是一个单线程语言，在同一时间只能做一件事，也就意味着所有任务需要排队，在前一个执行完后再执行下一个任务，会存在js执行的时间过长

2. 同步：在前一个任务结束后再执行后一个任务，同步任务都在主线程上，形成一个执行栈

3. 异步：同时进行多个任务，异步任务是通过回调函数实现的（异步分为三种类型），异步任务相关回调函数添加到任务队列中（也称为消息队列）

   1. 普通事件：如click/resize
   2. 资源加载：如load/error
   3. 定时器：setInterval/setTimeout

4. 两者本质区别：在各个流程上执行顺序不同

5. 执行过程

   1. 先执行执行栈中的同步任务
   2. 异步任务（回调函数）放入任务队列中
   3. 执行栈中所有同步任务执行完毕，再按次序执行任务列表中的异步任务

console.log(1);
setInterval(function(){console.log(2)},0);
console.log(3);
// 最终输出为：1、3、2

console.log(1);
document.onclick = function(){console.log(2)};
console.log(3);
setInterval(function(){console.log(4)},3000);
// 在3秒后点击事件，则输出1、3、4、2
// 在3秒内点击事件，则输出1、3、2、4

6. 主线程不断的重复获得任务、执行任务、在获取任务、再执行的过程称为事件循环（event loop）

6. location对象（页面链接内容）

location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以也称为location对象

1. URL

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

2. URL一般语法格式

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

组成	说明
protocol	通信协议，常用的http、ftp、maito等
host	主机（域名） www.itheima.com
port	端口号（可选），省略时使用方案的默认端口，如http的默认端口为80
path	路径，由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数，以键值对的形式，通过&符号分隔开
fragment	片段，#后面的内容，常见于链接/锚点

2. location对象的属性

location对象属性	返回值
location.href（重点）	获取或设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search（重点）	返回参数
location.hash	返回片段，#后面的内容，常见于链接/锚点

<button></button>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
  location.href = 'http://www.baidu.com';  // 点击按钮后跳转新的页面
  console.log(location.href); // 点击后输出当前链接（URL）
  console.log(location.search); // 点击后输出当前URL的参数
})

❤️案例：5s后自动跳转页面
var time = 5;
function newURL(){
  if(time == 0){
    location.href = 'http://www.baidu.com';
  }else{
    div.innerHTML = '将在'+time+'秒后跳转至首页';
    time--;
  }
}
newURL(); // 先执行一次函数，度过刷新页面的空白期
setInterval(newURL,1000);

❤️案例：两个页面之间传送数据
页面一：
<form action="2.html"> // 利用表单进行提交数据
	<span>用户名:</span>
	<input type="text" name="uname"> // 这里必须设置name，否则无法提取输入数据
	<button>登录</button>
</form> 
// 提交后会URL会有 ?uname='用户输入的用户名'；
页面二：
<div></div>
var div = document.querySelector('div');
var uname = location.search.substr(1); // 截取字符串，？号后的字符串全部提取出来
var arr = uname.split('='); // 利用分隔符转化为数组[uname,用户输入的用户名]
div.innerHTML = arr[1] + '欢迎来到这里';

3. location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面），可以后退页面
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或着F5，如果参数为true为强制刷新ctrl+F5

<button></button>
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
  location.assign('http://www.baidu.com'); // 跳转页面，可以存在后退功能
  location.replace('http://www.baidu.com'); // 跳转页面，不可以后退
  location.reload(); // 括号内为空或false，则为普通刷新；括号内为true，则为强制刷新
})

7. navigator对象（判断手机/电脑端页面）

// 判断手机端或电脑端，输出不同端口的网页
if((navaigator.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 = "";  // 电脑端页面地址
}

8. history对象

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是1前进1个页面，如果是-1后退1个页面