JavaScript 之BOM基础

JavaScript 之 BOM 基础

Target

• 什么是BOM
• 浏览器的顶级对象 window
• 页面加载事件以及注意事项
• 两种定时器函数及区别
• JS执行机制
• 使用location对象完成页面之间的跳转
• 知晓navigator对象涉及的属性
• 使用history提供的方法实现页面刷新

一. BOM概述

1. BOM提供了独立于内容而与浏览器窗口进行交互的对象 和 属性.BOM没有标准, 兼容性较差, 以下为兼容性较好的内容

2. BOM的顶级对象为window, DOM包含于BOM中

   window 中的主要对象有:
   

3. window对象的双重角色:

   • window对象 是JS访问浏览器窗口的入口;

   • 在JS中, 定义在全局作用于中的变量, 函数都会变成window 对象的属性和方法, 例如:

     var num = 10;
     console.log(num); <=> console.log(window.num);
     

     全局的属性和方法, 在调用时可省略window, 如:

     window.alert(); <=> alert();
     window.prompt(); <=> prompt();
     

4. window对象下有一个特殊的属性, window.name, 默认内容为空. 因此在JS未声明name属性直接调用时, 是调用的window对象的name属性.

二. window 对象常见的事件

1. 窗口加载事件:

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

   当文档内容(包括: 图像, 脚本文件, CSS等) 加载完成后触发该事件.

   • 两者区别:

     window.onload 是传统注册事件方式, 如果有多个时, 以最后一个为准; window.addEventListener() 方式则没有限制.

   • DOMContentLoaded 事件:

     // 仅当DOM加载完成时触发, 不包括css, 图片, flash等, IE9以上支持
     document.addEventListener("DOMContentLoaded",function(){});
     

     使用场景:
     当页面图片等资源太多,消耗网络带宽太大时, 使用 load 初始化时需要等待图片等资源加载完成才能初始化, 在此期间用户无法通过JS进行交互; 此时可采用 DOMContentLoaded 事件在DOM加载后完成初始化

2. 调整窗口大小事件:

   // 窗口大小发生变化时触发
   window.onresize = function(){
       
   }
   //或者
   window.addEventListener("resize", function(){
       
   });
   

   window.innerwith: 获取当前屏幕的宽度

3. 定时器:

   window对象提供了2个非常好用的方法:

   • setTimeout(): 延迟指定的时间后, 执行回调函数

     // 三种调用方法:
     setTimeout(function(){},[延迟毫秒数]);
     setTimeout(callback, [延迟毫秒数]);
     setTimeout('callback()', [延迟毫秒数]);
     

     页面中用到多个定时器时, 通过变量名区分:

     var time1 = setTimeout(callback1,1000);
     var time2 = setTimeout(callback2,2000);
     

   • setInterval(): 每隔指定的时间周期, 执行回调函数, 调用方法 和 区分定时器与上面相同.

     使用场景:

     • 轮播图, 时间倒计时, 间隔指定的时间可以再次点击发送短信. 在执行倒计时时, 限制性一次回调函数, 防止第一次刷新页面后有空白.

4. 清除定时器:

   • clearTimeout(timeoutID), 或者 window.clearTimeout(timeoutID);
   • clearInterval(intervalID), 或者 window.clearInterval(intervalID);

三. this 和 执行队列

1. this指向:

   • 全局作用于或者普通函数中的 this 指向全局对象 window 对象;
   • 定时器中的 this 也指向 window 对象;
   • 构造函数中的 this 指向 new 出来的对象;
   • 其他情况 this 指向调用者.

2. 理解 JS 执行队列:

   JS代码 在执行时, 将任务分为两大部分:

   • 主线程的同步任务
   • 回调函数的异步任务.异步任务执行时被放到回调函数的异步任务中. 一般异步任务有三种类型:
     • 普通事件, 如: click, resize等;
     • 资源加载, 如: load, error等;
     • 定时器, 如: setInterval(), setTimeout()等.

   JS 在执行时, 限制性主线程执行栈, 遇到回调函数 先将回调函数放到异步队列中. 当主线程任务执行完成后, 再依次执行异步队列中的任务(这里指立即执行的回调函数). 点击事件等回调函数, 事件触发后才写入回调函数中被执行. 由于线程不断的重复获得任务, 执行任务, 这种机制称为 事件循环.

四. window对象常用属性

1. location 对象:

   window 对象的一个属性, 用于获取或设置窗体的URL.

   1. URL 的组成:

      组成	说明
      协议	http, 或者 https等
      host	主机, 域名或IP
      port	端口号
      path	路径
      query	携带的参数
      fragment	片段, #号后面的内容, 常见于链接锚点

   2. 常用的属性:

      属性	返回值
      location.href	获取或设置整个URL, 常用语页面跳转
      location.host	返回主机名(域名)
      location.port	返回端口号, 没有写端口号返回空串
      location.pathname	返回路径
      location.search	返回参数
      location.hash	返回片段

   3. 常用的方法:

      方法名	返回值
      location.assign()	和href一样, 可以跳转页面, 也称重定向页面, 会记录历史, 可以后退页面
      location.replace()	替换当前页面, 因为不记录历史, 所以不能后退
      location.reload(参数)	重新加载页面, 相当于刷新按钮 或 f5. 若参数为true,表示强制刷新 ctrl + f5

2. navigator 对象:

   该对象包含浏览器的 信息, 最常用的事 userAgent, 该属性可以返回由客户机发送服务器的 user-aget 头部的值.

   使用场景:

   服务器可以通过该字段识别是 PC端浏览器 和 移动端浏览器, 进而相应不同的页面.

   if(navigator.userAgent.match(xxx){
      window.location.href = "移动端页面地址";
      }else{
       window.location.href = "PC端页面地址";
   	}
   }
   

3. history 对象:

   该对象包含用户在浏览器窗口中访问过的URL.

   方法	作用
   back()	后退
   forward()	前进
   go(参数)	正数表示前进, 负数表示后退.