专业编程基础技术教程

网站首页 > 基础教程 正文

前端系列教程-深入理解JavaScript中的BOM

ccvgpt 2024-07-29 13:29:21 基础教程 10 ℃

JavaScript的作用不仅仅局限于操作网页的内容和结构（DOM）。还有一个同样重要且常常被忽视的部分，那就是浏览器对象模型（BOM）。BOM代表着浏览器提供的一组对象，它们使得我们可以与浏览器本身进行交互,本节我们将从概念入手，深入学习BOM基础知识。

学习目标

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

I、BOM概述

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

前端系列教程-深入理解JavaScript中的BOM

II、window对象

window对象是浏览器的顶级对象，它是JS访问浏览器窗口的一个接口。是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法；

1.窗口加载事件

（1）窗口页面加载事件

window.onload = function(){}
window.addEventListener("load",function(){})

window.onload是窗口页面加载事件，当文档内容(包括css、图片)完全加载完成会触发该事件；

window.onload传统注册事件方式只能写一个，如果有多个，会以最后一个window.onload为准；如果使用addEventListener则没有限制；

（2）DOM加载

document.addEventListener('DOMContentLoaded',function(){})

只需要DOM加载完成，（不包括CSS、图片、flash等）即可触发，对于图片内容较多的的网站，可以加快相应速度；

2.调整窗口大小

window.onresize = function(){}
window.addEventListener('resize',function(){})

注意：

当窗口大小发生变化时，就会触发这个事件；

利用这个事件完成响应式布局，可以通过window.innerWidth获取当前屏幕的宽度；

3.定时器

window对象提供了两个非常好的定时器

  • setTimeout()
  • setInterval()

（1）setTimeout()定时器,该定时器在定时器到期后执行调用函数；

window.setTimeout(调用函数,[延迟的毫秒数]);

注意：

这个window调用的时候可以省略；

定时器里的调用函数可以直接使用函数名调用，也可以使用'函数名()'来调用；

页面中可能有很多定时器，通常给定时器添加标识符；

案例：5S自动关闭广告

setTimeout(callback,5000);
var div = document.querySelector('div');
function callback(){
    div.style.display = 'none';
}

停止定时器：timeoutID为定时器的标识符

window.clearTimeout(timeoutID);

（2）setInterval()定时器，重复调用一个函数，每隔一段时间，就会调用这个回调函数；

window.setInterval(调用函数,[延迟的毫秒数]);

案例：倒计时效果

var showHours = document.querySelector('.hour');
var showMinutes = document.querySelector('.minute');
var showSeconds = document.querySelector('.second');
// ? 注意：setInterval的回调函数带不了参数，故把输入时间作为全局变量写在了函数外面
var inputTime = +new Date('2023-06-01 19:00:00');
// 先调用一次这个函数，防止定时器刷新产生空白
countDown(); 
// 开启定时器
function countDown(){
    var nowTime = +new Date();
    var times = (inputTime - nowTime) / 1000;
    var s = parseInt(times % 60);
    s = s < 10 ? '0' + s : s;
    var m = parseInt(times / 60 % 60);
    m = m < 10 ? '0' + m : m;
    var h = parseInt(times / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    // 修改值
    showHours.innerHTML = h;
    showMinutes.innerHTML = m;
    showSeconds.innerHTML = s;
}
// ------ 刷新时间 ---------
window.setInterval(countDown,1000);

停止定时器：可以取消先前通过setInterval()建立的定时器；

window.clearInterval(intervalID);

案例：设置两个按钮，点击开始按钮开始定时器，点击停止按钮停止定时器；

var btn_start = document.querySelector('.start');
var btn_end = document.querySelector('.stop');
// 停止定时器需要ID，因此time1设置成全局变量；
var time1 = null;
function boom(){
    var date = new Date();
    console.log(date);
}

btn_start.addEventListener('click',function(){
    time1 = setInterval(boom,1000);
});
btn_end.addEventListener('click',function(){
    clearInterval(time1);
})

案例：发送短信按钮-设置10秒冷却时间

var btn = document.querySelector('button');
btn.addEventListener('click',countDown);
function countDown() {
    btn.disabled = true;
    // 定义冷却时间
    var i = 10; 
    // 给定时器命名，方便后续清除定时器
    var timer = setInterval(function(){
        if(i == 0){
            // 清除定时器，复原按钮
            clearInterval(timer);
            btn.disabled = false;
            btn.innerHTML = '发送';
        }else{
            btn.innerHTML = '还剩'+i+'s再次点击';
            i--;
        }   
    },1000);
}

4.this

this的指向在函数定义的时候是确定不了的，只有在函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向是那个调用它的对象；

注意：

（1）全局作用域中，普通函数中或者定时器中this指向全局对象window

（2）在方法调用中，谁调用this，this就指向谁；

（3）在构造函数中，this指向构造函数的实例；

III、JS执行机制

1. JS是单线程

JS是为处理页面中的用户交互以及操作DOM而诞生的，在同一时间只能做一件事情，也就是单线程；这样会导致的问题是：如果JS执行时间过长，就会造成页面渲染不连贯，导致页面渲染加载阻塞。

为了解决这个问题，利用多核CPU计算能力，H5提出Web Worker标准，允许JS脚本创建多个线程，于是JS中出现了同步和异步；

2.同步任务

同步任务都是在主线程上执行，形成一个执行栈；

3.异步任务

JS的异步是通过回调函数实现的，异步任务有以下三种类型：

（1）普通事件，如click、resize

（2）资源加载，load、error

（3）定时器：setInterval、setTimeout

异步任务放到任务队列(消息队列)中；

4.执行机制

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

IV、location对象

1.概念

window对象提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL，应为这个属性返回的是一个对象，故将这个属性称为location对象；

2.URL

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

URL的一般语法格式为：

protocal://host[:port]/path/[?query]#fragment

3.location对象的属性



案例：5S后自动跳转页面

var div = document.querySelector('div');
var time = 5;
var timer = setInterval(function(){
    if(time == 0){
        clearInterval(timer);
        location.href = 'http://www.bing.com';
    }else{
        div.innerHTML = '您将在'+time+'s内跳转到主页面';
        time--;
    }
},1000);

案例：获取URL参数

定义两个页面，登录页面login.html和主页index.html,登录页面输入用户名登录后会在主页显示，用户名欢迎您！

思路：login页面定义一个表单，name定义为uname，在action中把内容提交给index，index.html页面中通过location.search拿到字符串?uname=用户名,对该字符串进行分割和提取即可。

<div>用户登录</div>
    <div>
        <form action="index.html">
            <span>请输入用户名:</span>
            <input type="text" name="uname">
            <input type="submit" id="" value="登录">
        </form>
    </div>
var user = document.querySelector('span');
var res = location.search;
var uname = res.substr('1').split('=')[1];
console.log(uname);
user.innerHTML = uname;

4.location对象的方法


V、navigator对象

navigator对象包含了有关浏览器的信息，有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值；

VI、history对象

history对象与浏览器历史记录进行交互，记录用户访问过的URL


JavaScript中浏览器对象模型的知识就分享到这里，本文配套的源码和学习资源可以在https://gitee.com/yushengtan/jscode中获取；

下一节我们将继续介绍JavaScript中动画与特效的基础知识~

Tags：

猜你喜欢

最近发表
标签列表