WebAPI—BOM04

BOM&＃xff1a;浏览器对象模型&＃xff0c;它提供了独立于内容而与浏览器窗口进行交互的对象&＃xff0c;其核心对象是window。BOM由一系列对象组成&＃xff0c;并且每个对象都提供了很多方法与属性。
BOM缺乏标准&＃xff0c;Javascript语法的标准化组织是ECMA&＃xff0c;DOM的标准化组织是W3C&＃xff0c;BOM最初是Netscape浏览器标准的一部分。

window对象常见的事件&＃xff1a;

• window.onload &＃61; function(){}或window.addEventListener(“load”,function(){});
  window.onload是窗口&＃xff08;页面&＃xff09;加载事件&＃xff0c;当文档内容完全加载完成会触发该事件&＃xff08;包括图像、脚本文件、CSS文件等&＃xff09;&＃xff0c;就调用的处理函数。有了window.onload就可以把JS代码写到页面元素的上方&＃xff0c;因为onload是等页面内容全部加载完毕&＃xff0c;再去执行处理函数。

• document.addEventListener(‘DOMContentLoaded’,function(){})

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

• window.onresize &＃61; function(){}或window.addEventListener(“resize”,function(){});
  window.onresize是调整窗口大小加载事件&＃xff0c;当触发时就调用的处理函数。

• 定时器&＃xff1a;window.setTimeout(调用函数,[延迟的毫秒数]); 这个window在调用的时候可以省略。如果延迟时间省略默认为0。
  window.clearTimeout(timeoutID):停止定时器
  window.setInterval(回调函数,[间隔毫秒数]); 这个window在调用的时候可以省略。如果间隔时间省略默认为0。
  window.clearInterval();停止间隔器

案例&＃xff1a;模拟短信发送&＃xff0c;点击发送以后禁用按钮&＃xff0c;并在n秒后解除禁用

let a &＃61; document.querySelector(&＃39;.a&＃39;);let b &＃61; document.querySelector(&＃39;button&＃39;);let time &＃61; 3;b.addEventListener(&＃39;click&＃39;, () &＃61;> {let c &＃61; setInterval(() &＃61;> {b.disabled &＃61; true;if (time &＃61;&＃61; 0) {b.disabled &＃61; false;b.innerHTML &＃61; &＃96;发送&＃96;;time &＃61; 3;clearInterval(c);} else {b.innerHTML &＃61; &＃96;还剩${time}秒发送&＃96;;}time--;}, 1000);});


JS执行机制&＃xff1a;

• 先执行执行栈中的同步任务
• 异步任务&＃xff08;回调函数&＃xff09;放入任务队列中
• 一旦执行栈中的所有同步任务执行完毕&＃xff0c;系统就会按次序读取任务队列中的异步任务&＃xff0c;于是被读取的异步任务结束等待状态&＃xff0c;进入执行栈开始执行。

Javascript语言的一大特点就是单线程&＃xff0c;也就是说某个时间只能做一件事&＃xff0c;这是因为Javascript这门脚本语言诞生的使命所致—Javascript是为处理页面中用户的交互&＃xff0c;以及操作DOM而诞生的&＃xff0c;比如我们对某个DOM元素进行添加和删除操作不能同时进行&＃xff0c;应该先进行添加&＃xff0c;后删除。
单线程就意味着所有任务需要排队&＃xff0c;前一个任务结束&＃xff0c;才会执行后一个任务&＃xff0c;这样所导致的问题是&＃xff1a;如果JS执行的时间过长&＃xff0c;这就会造成页面的渲染不连贯导致页面渲染加载阻塞的感觉。为了解决这个问题利用多核CPU的计算能力&＃xff0c;HTML5提出Web Worker标准&＃xff0c;允许Javascript创建多个线程&＃xff0c;于是JS中出现了同步和异步。
同步&＃xff1a;前一个任务结束后再执行后一个任务&＃xff0c;程序执行顺序与任务排列顺序是一致的同步的。
异步&＃xff1a;在做一件事的同时可以做其他的事情。

location对象&＃xff1a; &＃xff1a;window对象给我们提供了一个location属性用于获取或设置窗体的URL&＃xff0c;并且可以用于解析URL&＃xff0c;因为这个属性返回一个对象&＃xff0c;所以我们将这个属性也称为location对象。
URL:统一资源定位符&＃xff08;Uniform Resource Locator&＃xff0c;URL&＃xff09;是互联网上标准资源的地址&＃xff0c;互联网上每个文件都有一个唯一的URL&＃xff0c;它包含的信息指出文件的位置以及浏览器应该怎么处理它。
URL一般的语法格式为&＃xff1a;

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


location对象的属性&＃xff1a;

可以通过指定location.href跳转到新的页面地址。
数据在不同页面传递&＃xff1a;利用URL.search&＃xff0c;第一步去掉? 第二步利用&＃61;分隔符

<form action&＃61;"index.html">用户名&＃xff1a;<input type&＃61;"text" name&＃61;"uname"><input type&＃61;"submit" value&＃61;"登录"></form>


location对象的方法

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

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&＃61;"";//手机
}else{window.location.href&＃61;"";//电脑
}


history对象&＃xff1a; window对象给我们提供了一个history对象&＃xff0c;与浏览器历史记录进行交互&＃xff0c;该对象包含用户&＃xff08;在浏览器窗口中&＃xff09;访问过的URL&＃xff1a;