JavaScript中的BOM的构成、定时器、其他对象、执行机制

最新推荐文章于 2024-01-10 08:55:28 发布

01xm

最新推荐文章于 2024-01-10 08:55:28 发布

阅读量560

点赞数 2

分类专栏： JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/Bon_nenul/article/details/118002078

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

BOM

简介

BOM： 浏览器对象模型（Brower Object Model，BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM与DOM的区别：

DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。
BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。

BOM的构成：
在这里插入图片描述

window对象的常见事件

窗口加载事件

window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

// 方式 1
window.onload = function () {};
// 方式 2
window.addEventListener('load', function () {});

document.DOMContentLoaded ：加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

调整窗口大小事件

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数.

// 方式 1
window.onresize = function () {};
// 方式 2
window.addEventListener('resize', function () {});

定时器

在这里插入图片描述

注：
1.setTimeout(回调函数, 延迟的毫秒数) 时间可以省略，如果省略默认是零。延迟时间到了，就去调用这个函数，只调用一次，就结束这个定时器
2.setTiemval(回调函数, 延迟的毫秒数) 每隔这个时间段就去调用一次回调函数，会调用很多次，重复调用这个函数。
3.clearTimeout(定时器的ID) 取消由setTimeout()方法设定的定时器。
4.clearTimeval(定时器的ID )取消由setTiemval()设置的定时器。

【案例】3s后自动关闭广告

<body>
  <script>
    var timer = setTimeout(fn, 3000);
    function fn() {console.log('广告关闭了');}
  </script>
</body>

【案例】60s内只能发送一次短信

实现思路：
在页面中放一个文本框和一个“发送”按钮。
在文本框中输入手机号码，然后单击“发送”按钮，就可以发送短信。
在按钮单击之后，按钮上的文字会变为“还剩x秒再次单击”。

 var btn = document.querySelector('button');
    var time = 60;    // 定义剩下的秒数
    btn.addEventListener('click', function () {
      btn.disabled = true;  //按钮状态变为灰色 无法点击
      //此处添加timer定时器；
      var timer = setInterval(function () {
        if (time == 0) {
          clearInterval(timer);
          btn.disabled = false; //按钮状态变为正常 可以点击的
          btn.innerHTML = '发送';
        } else {
          btn.innerHTML = '还剩下' + time + '秒';
          time--;
        }
      }, 1000);
    })

在这里插入图片描述

JavaScript执行机制

线程

进程：程序的一次动态运行，有自己独立的内存空间。
线程：是进程的一个执行单位，一个进程可以分成若干个线程

JavaScript的执行机制是单线程的，即同一个时间只能做一件事情
这会导致JS执行时间过长，会造成页面渲染的不连贯，导致页面渲染加载堵塞。

同步和异步

为了解决上述问题，JS中出现了同步和异步

同步：所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：所谓异步，就是在做一件事件的同时，可以去处理其他的事情。

在这里插入图片描述

同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务： JS 的异步是通过回调函数实现的，异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列)

一般而言，异步任务有以下三种类型:

普通事件，如 click、resize 等
资源加载，如 load、error 等
定时器，包括setInterval、setTimeout 等

console.log(1);
setTimeout(function () {
  console.log(3);
}, 0);
for (var i = 0, str = ''; i < 900000; i++) {
  str += i;	 // 利用字符串拼接运算拖慢执行时间
}
console.log(2);

location对象

URL的组成
在这里插入图片描述
【案例】获取URL参数

//创建login.html登录页面：
<form action="index.html">
  用户名： <input type="text" name="uname">
  <input type="submit" value="登录">
</form>
//创建index.html首页：
<script>
console.log(location.search);  // 结果为：?uname=andy
    // 1. 去掉search中的问号“?”
    var params = location.search.substr(1);
    console.log(params); // 结果为：uname=andy
    // 2. 把字符串分割为数组
    var arr = params.split('=');
    console.log(arr); // 结果为：["uname", "andy"]
    var div = document.querySelector('div');
    // 3. 把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';
</script>

location常用属性
在这里插入图片描述
location的常用方法

<body>
	<button>点击</button>
	<script>
		var btn = document.querySelector('button')
		btn.addEventListener('click',function(){
			//记录浏览历史，所以可以实现后退功能
			location.assign('http://www.baidu.com')  //和href功能一样
			//不记录浏览记录，所以不可以实现后退功能
			location.replace('http://www.baidu.com')
			//页面重新加载
			location.reload() //如果参数为true 页面强制刷新
		})
	</script>
</body>