浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之History对象的属性与方法


History对象是用来把网页浏览历史用类似栈的方式进行表示。

这定义听起来非常的抽象,其实History对象的作用就跟浏览器的前进和后退很像,我们来用几幅图来理解一下。首先我们先回顾一下浏览器的返回上一个页面跳转到下一个页面 这两个功能。在这里插入图片描述

就类似于上图的左边两个按键,大家是否感觉很熟悉呢?我们用一张动图感受一下

在这里插入图片描述

该动图展示的是页面1跳转到页面2,页面2跳转到页面3,然后可以通过浏览器的后退和前进按钮在这三个页面之间切换。

接下来我们来看一下它的实现原理,因为有些小伙伴可能不知道栈结构,这里我就拿两个没有盖子的杯子来举例,第一个杯子最上面的绿色块儿代表当前所在的页面

首先我们浏览器未做任何跳转页面操作时,这第一个杯子中有一个页面1,表示当前页面为页面1,第二个杯子为空

在这里插入图片描述

这时我们从页面1跳转到页面2,就会往第一个杯子中放入一个绿色块儿(页面2),此时页面2处于第一个杯子的最上方,表示当前页面为页面2,但第二个杯子仍为空

在这里插入图片描述

这时我们从页面2跳转到页面3,就会往第一个杯子中放入一个绿色块儿(页面3),此时页面3处于第一个杯子的最上方,表示当前页面为页面3,第二个杯子还是为空

在这里插入图片描述

现在我们使用浏览器的后退功能,也就是返回上一个页面,此时将页面3放到第二个杯子中,这时页面2就变成了第一个杯子中最上面的绿块儿了,所以此时处于页面2

在这里插入图片描述

现在我们再次使用浏览器的后退功能,也就是返回上一个页面,此时将页面2放到第二个杯子中,这时页面1就变成了第一个杯子中最上面的绿块儿了,所以此时处于页面1

在这里插入图片描述

我们再使用一下浏览器的前进功能,此时将第二个杯子最上面的绿块儿,也就是页面2,放到第一个杯子中,此时页面2又变成了第一个杯子中最上面的绿块儿,所以当前页面为页面2

在这里插入图片描述

我们再使用一下浏览器的前进功能,此时将第二个杯子最上面的绿块儿,也就是页面3,放到第一个杯子中,此时页面3又变成了第一个杯子中最上面的绿块儿,所以当前页面为页面3

在这里插入图片描述

好了,经过这样一番讲解,想必你已经对浏览器的前进和后退功能有了一个大概的了解了吧,那我们接下来就来了解一下History对象的三个方法。

二、History对象的引用


我们可以通过浏览器的全局对象window来引用History对象,像这样window.hisory ,也可以直接通过 history 来引用History对象。

window.hisory === history //返回 true

我们在浏览器的控制台中引用一下History对象,看看会返回什么

在这里插入图片描述

可以看到,返回的History对象中有许多的属性和方法,接下来我们就对这些属性和方法进行讲解。

三、History对象的方法


History对象一共有三种方法,他们分别是:

| 方法 | 描述 |

| — | — |

| back() | 加载前一个URL对应的页面 |

| forward() | 加载下一个URL对应的页面 |

| go() | 根据传入的参数加载某个URL对应的页面 |

这里我又把上面举过的例子拿了过来

在这里插入图片描述

总结一下,第一个杯子内最上面的绿块儿就代表当前页面,加载下一个URL对应的页面就是从第二个杯子的最上方拿一个绿块儿放到第一个杯子中;加载前一个URL对应的页面就是从第一个杯子的最上面拿一个绿块儿放到第二个杯子中。

  • back()

调用该方法不需要传递任何参数,直接调用即可。该方法会加载前一个URL对应的页面,相当于浏览器的后退功能。

//相当于执行了浏览器的后退功能

history.back()

动图展示

在这里插入图片描述

  • forward()

调用该方法不需要传递任何参数,直接调用即可。该方法会加载下一个URL对应的页面,相当于浏览器的前进功能。

//相当于执行了浏览器的前进功能

history.forward()

动图展示

在这里插入图片描述

  • go()

前两个方法都是加载上一个URL或下一个URL,相当于他们只能一次操作一个绿块儿,但 go() 方法允许一次性操作多个绿块儿。该方法需要传入一个整数作为参数,参数的规则为:

若传入一个正整数n,则表示加载接下来第n个URL,相当于执行了浏览器的前进功能n次;

若传入一个负整数n,则表示加载之前第n个URL,相当于执行了浏览器的后退功能n次;

若传入一个0,则表示刷新当前页面;

若省略该参数,效果跟传入0一样;

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/421624.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JDBC使用

7.2 创建JDBC应用 7.2.1 创建JDBC应用程序的步骤 使用JDBC操作数据库中的数据包括6个基本操作步骤: (1)载入JDBC驱动程序: 首先要在应用程序中加载驱动程序driver,使用Class.forName()方法加载特定的驱动程序&#xf…

【题解单调队列优化dp】划分

划分 分析: 首先,我们目光着眼于部分分 我们尝试用 O ( n 3 ) O(n^3) O(n3)的朴素dp去解决这个问题 f [ i ] [ j ] 表示划分到第 i 个位置,且上一个位置是 j 的最小运行时间是多少 f[i][j]表示划分到第i个位置,且上一个位置是j的…

erlang学习: Mnesia Erlang数据库3

Mnesia数据库删除实现和事务处理 -module(test_mnesia). -include_lib("stdlib/include/qlc.hrl").-record(shop, {item, quantity, cost}). %% API -export([insert/3, select/0, select/1, delete/1, transaction/1,start/0, do_this_once/0]). start() ->mnes…

自然语言处理系列六十九》搜索引擎项目实战》搜索框架技术选型

注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 自然语言处理系列六十九搜索引擎项目实战》搜索框架技术选型搜索…

(k8s)kubernetes 挂载 minio csi 的方式

一、安装Minio(Minio分布式集群搭建部署_minio集群最少几台-CSDN博客) 生成accessKeyID和secretAccessKey: 二、安装csi-s3插件(在k8s集群上) 首先我们把插件的yaml文件都下载下来,为了保证版本测试的一致性,我们下载…

828华为云征文|基于华为云Flexus云服务器X搭建jumpserver堡垒机软件

文章目录 ❀前言❀jumpserver堡垒机概述❀环境准备❀部署说明❀在线安装❀浏览器访问❀资产添加❀资产授权❀资产登录❀总结 ❀前言 近期华为云推出了最新的华为云Flexus云服务器X,这款云主机在算柔性算力做出了重大变革。华为云Flexus云服务器X基于擎天QingTian架…

QT设置闹钟超时播报

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTimerEvent> #include<QTime> #include<QTextToSpeech>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic…

一个基于Spring Boot 3、Vue 3 和 Element-Plus 的中后台管理框架,流畅、直观且功能强大

前言 当前市面上的中后台管理系统虽然种类繁多&#xff0c;但在实际使用中仍存在不少痛点&#xff0c;比如技术栈陈旧、性能低下、扩展性差等问题。开发者们常常需要花费大量的时间和精力去处理这些问题&#xff0c;而不是专注于业务逻辑本身。 那么&#xff0c;有没有一个框…

计算赎金信

给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1&#xff1a; 输入&#xff…

使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割

代码:lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation

HarmonyOS学习(十)——网络编程

文章目录 1、通过HTTP请求网络2、Web组件2.1、加载本地网页2.2、加载在线网页2.3、网页缩放2.4、文本缩放2.5、web组件事件以及状态说明2.6、处理页面导航 1、通过HTTP请求网络 官方API文档地址&#xff1a;HTTP数据请求-Network Kit数据传输能力-Network Kit&#xff08;网络…

Linux 下 C/C++ 程序编译的过程

目录 一、GCC 工具链二、编译过程1、预处理2、编译3、汇编4、链接 本文将介绍如何将 C/C 语言编写的程序转换成为处理器能够执行的二进制代码的过程&#xff0c;包括四个步骤&#xff1a;预处理&#xff08;Preprocessing&#xff09;编译&#xff08;Compilation&#xff09;汇…

Qt_自定义信号

目录 1、自定义信号的规定 2、创建自定义信号 3、带参数的信号与槽 4、一个信号连接多个槽 5、信号与槽的断开 结语 前言&#xff1a; 虽然Qt已经内置了大量的信号&#xff0c;并且这些信号能够满足大部分的开发场景&#xff0c;但是Qt仍然允许开发者自定义信号&#…

ARMxy嵌入式边缘计算控制器支持Linux OS应用于AIOT

人工智能与物联网&#xff08;AIoT&#xff09;的融合正深刻改变着各个行业。而在这一变革中&#xff0c;ARMxy 嵌入式控制器以其卓越的性能和对 Linux OS 的支持&#xff0c;成为了 AIoT 应用的关键推动力量。 一、ARMxy 嵌入式控制器的优势 强大的处理能力 ARMxy 嵌入式控制…

浮毛危害人体健康?希喂、安德迈、有哈宠物空气净化器吸毛测评

养宠之前了解清楚相关的知识&#xff0c;这既是对宠物负责&#xff0c;也是对我们自己负责。宠物最让铲屎官头疼的就是毛发问题&#xff0c;大量脱落的毛发会带来繁重的清理任务&#xff0c;同时飘在空中浮毛还是潜藏在身边的健康”杀手“。浮毛微小、质量轻&#xff0c;容易随…

opencv之图像轮廓(三)--凸包

文章目录 前言获取凸包凸缺陷几何学测试测试轮廓是否是凸形的点到轮廓的距离 形状场景算法比较轮廓轮廓的特征值宽高比ExtentSolidity等效直径&#xff08;Equivalent Diameter&#xff09;方向掩模和像素点使用Numpy函数获取轮廓像素点使用OpenCV函数获取轮廓点 最大值和最小值…

VR 尺寸美学主观评价-解决方案-现场体验研讨会报名

棣拓科技VR创新解决方案助力尺寸美学所见即所得! 诚邀各位行业专家莅临指导交流 请扫描海报二维码踊跃报名&#xff0c;谢谢 中国上海 2024.10.25 亮点介绍 1、通过精湛渲染技术&#xff0c;最真实展现设计效果&#xff0c;并通过VR设备一比一比例进行展现。 2、设置相关设…

ctfshow-PHP反序列化

web254 源码 <?php/* # -*- coding: utf-8 -*- # Author: h1xa # Date: 2020-12-02 17:44:47 # Last Modified by: h1xa # Last Modified time: 2020-12-02 19:29:02 # email: h1xactfer.com # link: https://ctfer.com //mytime 2023-12-4 0:22 */ error_reporting(0)…

谈谈PCIe VID、DID、SSID、SSVID背后的智慧

PCIe Vendor ID 想了半天还是觉得从“ID是什么”这个问题开始比较好。那么ID是什么&#xff1f;ID就是身份。那身份又是什么&#xff1f;身份就是一个合理存在&#xff0c;用于区分不同个体。为什么叫“合理存在”呢&#xff1f;如果国家不给你发身份证&#xff0c;你就是黑户…

[笔记]电参数测量的现有方案

1.关键字&#xff1a; 电参数测量 Electrical Parameter Measurement 2.相关信息搜集 》》电参数测量仪是如何测量电压电流相位差的&#xff1f;对于变频器那种比较毛的波形&#xff0c;也能测量&#xff1f; 电参数测量仪测量电压电流相位差的方法主要依赖于其内部的高精度…