Web APIs学习【三】（BOM对象，JS执行机制）

其他 2020-10-26 09:14:13 阅读次数: 0

文章目录

1.BOM浏览器对象模型

1.1 BOM概述

1.1.1什么是BOM

  • BOM(Browser Object Model)即浏览器模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其对象核心是window
  • BOM由一系列相关的对象构成，并且每个对象都提供了很多的方法与属性
  • BOM缺乏标准（js有ECMA DOM有W3C），由厂商在各自浏览器上定义
  • BOM把浏览器当作一个对象来看

1.1.2 BOM的构成

  • BOM 比 DOM 更大 它包含 DOM
    window（document，location，navigation，screen，history）

  • window 对象是浏览器的顶级对象，它具有双重角色

    • 它是 JS 访问浏览器窗口的一个接口

    • 它是一个全局对象，定义在全局作用域中的变量，函数都会变成 window 对象的属性和方法在调用的时候可以省略 window ，前面学习的对话框都属于 window 对象方法 如 alert()、prompt()等

注意：window 下的一个特殊属性 window.name， 不要随意定义name变量

1.1.3 BOM和DOM对比

BOM

  • 浏览器对象模型
  • 把浏览器当作一个对象来看待
  • BOM的顶级对象是window
  • BOM学习的是浏览器窗口交互的一些对象
  • BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

DOM

  • 文档对象模型
  • DOM 把文档当作一个对象来看待
  • DOM的顶级对象是document
  • DOM主要学习的是操作页面元素
  • DOM是W3C标准规范

1.2 window对象的常用事件

1.2.1 窗口加载事件

  • window.onload 窗口加载事件，当文档内容完全加载会触发该事件（包括图像、flash、CSS)
  • DOMContentLoaded 当DOM加载完成时触发（不包括图片，flash,css等）
  • window.onload 传统注册事件方式只能写一次，如果有多个，以最后一个为准，但使用addEventListener 则没有限制
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.addEventListener('load', function () {
     
     
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
     
     
        alert('button clicked');
      })
    })
    window.addEventListener('load', function () {
     
     
      alert('load 触发');
    })
    document.addEventListener('DOMContentLoaded', function () {
     
     
      alert('DOMContentLoaded 触发');
    })
    // alert DOMContentLoaded 触发 => alert load触发 => 点击按钮 => alert button clicked
  </script>
</head>
<body>
<button>click</button>
</body>

1.2.2 调整窗口大小事件

  • window.onresize 是调整窗口大小加载事件
  • 只要窗口大小发生变化就会触发
  • window.innerWidth当前屏幕的宽度，可利用来完成响应式布局
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
     
     
      height: 200px;
      width: 200px;
      background-color: #ff4af4;
    }
  </style>
  <script>
    window.addEventListener('load', function () {
     
     
      var div = document.querySelector('div');
      window.addEventListener('resize', function () {
     
     
        console.log('resize');
        if (window.innerWidth <= 800) {
     
     
          div.style.display = 'none'
        } else {
     
     
          div.style.display = 'block'
        }
      })
    })
  </script>
</head>
<body>
<div></div>
</body>
  • 调整页面大小会让方框出现/消失

1.3 定时器

1.3.1 setTimeout() 定时器

  • window.setTimeout(调用函数, delay)
  • 调用函数可以直接写函数，或者写函数名，或字符串’调用函数()’
  • 延迟时间不写默认为0
<body>
<script>
  var callback = function(){
     
     
    console.log('callback');
  };
  var timer1 = window.setTimeout(callback, 2000);
  var timer2 = window.setTimeout(callback, 8000);
    
  // => callback(打开页面2s后) callback(打开页面8s后)
</script>
</body>
  • 回调函数
    • setTimeout() 里的调用函数我们也叫做回调函数
    • 这个函数需要等待时间，时间到了才调用，所以叫回调函数（回调意思就是回头调用）
    • document.addEventListener(‘click’, fn) 里面的函数也是回调函数

1.3.2 停止setTimeout()定时器

  • window.clearTimeout(timoutID) 取消先前调用的setTimeout()定时器
<body>
<button>stop setTimeout</button>
<script>
  var btn = document.querySelector('button');
  var callback = function () {
     
     
    console.log('callback 调用');
  };

  var timer = window.setTimeout(callback, 2000);
  btn.addEventListener('click', function () {
     
     
    clearTimeout(timer);
  })
  // => 点击按钮则不再打印callback 调用
</script>
</body>

1.3.3 setInterval() 定时器

  • 和setTimeout()调用方法极其相似，但功能不一样，此定时器每隔一次设置时间就调用一次回调函数
<body>
<script>
  window.setInterval(function () {
     
     
    console.log('callback');
  }, 1000)
</script>
</body>

image-20201008115449596

1.3.4 停止setInterval()定时器

  • window.clearInterval(intervalID);
  • intervalID 是定时器的标识符
<body>
<button class="stop">stop</button>
<button class="begin">begin</button>
<script>
  var begin = document.querySelector('.begin');
  var stop = document.querySelector('.stop');
  let timer = null;

  begin.addEventListener('click', function () {
     
     
    timer = setInterval(function () {
     
     
      console.log('setInterval');
    }, 1000)
  })

  stop.addEventListener('click', function () {
     
     
    clearInterval(timer)
  })
</script>
</body>

image-20201010223633803

点击begin开始循环打印，点击stop结束循环打印

1.3.5 this

一般情况下，this指向调用它的对象

个人认为：当用this的时候外面有一层函数，那么这个‘它’指的是这个函数

1.3.5.1 全局作用域中
  • 全局作用域或者普通函数中this指向全局对象window（定时器里的this也指向window）
<script>
  window.console.log(this);
  
  function f() {
     
     
    console.log(this);
  }
  window.f();
  
  window.setTimeout(function () {
     
     
    console.log(this);
  })
  // => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
  // => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
  // => Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
</script>
1.3.5.2 方法调用中
  • 方法调用中谁调用this指向谁
<script>
  var object = {
     
     
    f : function () {
     
     
      console.log(this);
    }
  }
  object.f();

  document.addEventListener('click', function () {
     
     
    console.log(this);
  })
  // => {f: ƒ}
  // => #document
</script>
1.3.5.3构造函数中
  • 构造函数中this指向构造函数的实例
<script>
  function Fun() {
     
     
    console.log(this);
  }
  let fun = new Fun();
  // => Fun
</script>

1.4 JS执行机制

1.4.1 JS是单线程

JavaScript 语言一大特点是单线程，同一个时间只能做一件事。单线程意味着所有的任务都需要排队，前一个任务结束后一个任务才能开始。这样会造成页面不连贯。

1.4.2 同步与异步

为了解决问题，利用多核CPU，HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中有了同步和异步。

  • 同步: 前一个任务执行完再执行后一个任务
  • 异步: 在做一件事的时候可以去处理其他事
1.4.2.1 同步任务
  • 同步任务都在主线程上执行，形成执行栈
1.4.2.2 异步任务
  • JS异步任务通过回调函数实现
  • 一般而言，异步任务有三种类型
    1. 普通事件 click resize等
    2. 资源加载 load error等
    3. 定时器 setTimeout setInterval

异步任务相关回调函数添加到任务队列（消息队列）中

<script>
  console.log(1);
  setTimeout(function () {
     
     
    console.log(2);
  })
  console.log(3);
  // => 1 3 2
</script>

image-20201011175552341

1.4.3 JS执行机制

  1. 先执行执行栈中的同步任务
  2. 异步任务（回调函数）放入任务队列中
  3. 一旦执行栈中所有同步任务执行完毕，系统就会按次序读取任务队列的异步任务，被读取的异步任务结束等待状态，进入执行栈开始执行

image-20201011180143459

  • 事件循环

  • 由于主线程不断重复获得任务，执行任务，再获取任务，再执行，这种机制被称为事件循环（解释就是执行栈的任务执行完毕，系统就会按次序读取任务队列的异步任务，异步任务也执行完毕了，又再看看消息队列有没有异步任务，有又再执行，执行完又看。。）

<script>
  console.log(1);

  document.onclick = function () {
     
     
    console.log('click');
  }
  console.log(2);
  setTimeout(function () {
     
     
    console.log(3);
  }, 3000)
  // => 1 2 3
</script>
  • document.onclick = fn 这个语句先写进异步进程处理，点击事件发生，fn进入消息队列
  • setTimeout(fn, 3000) 先写进异步进程处理，3s到了fn才写进消息队列

image-20201011181326207

1.5 location对象

1.5.1 什么是location对象

  • window 对象给我们提供了一个location属性用于获取或设置窗体的url，并且可以解析url。因为这个属性返回的是一个对象，我们将这个属性也叫做location对象

1.5.2 url

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

image-20201012162234794

1.5.3 location 对象的属性

  • location.href 获取或设置整个url
  • location.host 返回主机（域名） www.baidu.com
  • location.port 返回端口号（如果没有则返回空字符串）
  • location.pathname 返回路径
  • location.search 返回参数
  • location.hash 返回片段

1.5.4 location对象的方法

  • location().assign() 转跳页面,可以回退
  • location().replace() 转跳页面，不可回退
  • locaton().reload() 刷新页面，如果参数为true则强制刷新（ctrl+f5）

1.6 navigator 对象

  • navigator 对象包含有关浏览器的信息，常用userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值，以转跳不同的页面（比如手机网页打开手机商场页面，电脑端打开电脑端商场页面）

1.7 history 对象

1.7.1 history对象方法

  • history.back() 后退
  • history.forward() 前进
  • history.go() 参数为正则前进，参数为负则后退

猜你喜欢

转载自blog.csdn.net/qq_43249043/article/details/109106251
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022