JS-WebAPIs- Window对象(五)

这篇具有很好参考价值的文章主要介绍了JS-WebAPIs- Window对象(五)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

• BOM(浏览器对象模型)

  • BOM(Browser Object Model ) 是浏览器对象模型

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • window对象是一个全局对象,也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window 

• 定时器-延时函数

  • JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
  • 语法:

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript 

  • setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
  • 清除延时函数: 

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • 注意点 

Ø 延时器需要等待,所以后面的代码先执行

Ø 每一次调用延时器都会产生一个新的延时器

  • 两种定时器对比:执行的次数

Ø 延时函数: 执行一次

Ø 间歇函数:每隔一段时间就执行一次,除非手动清除

• JS执行机制

经典面试题

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。 这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之 后再删除。

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

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

同步

  • 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同 步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

异步

你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事 情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

他们的本质区别: 这条流水线上各个流程的执行顺序不同。

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript 

事件循环 

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop ) 

• location对象

  • location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分
  • 常用属性和方法:

Ø href 属性获取完整的 URL 地址,对其赋值时用于

Ø search 属性获取地址中携带的参数,符号 ?后面部分

Ø hash 属性获取地址中的啥希值,符号 # 后面部

Ø reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新

  • href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • search 属性获取地址中携带的参数,符号 ?后面部分 

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • hash 属性获取地址中的哈希值,符号 # 后面部分 

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

  • 后期vue路由的铺垫,经常用于不刷新页面,显示不同页面,比如 网易云音乐 
  • reload 方法用来刷新当前页面,传入参数 true 时表示强制刷

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

 

• navigator对象

  • navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息
  • 常用属性和方法:

• 通过 userAgent 检测浏览器的版

// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()

上面的代码可以检测我们的设备是电脑还是手机,然后根据设备类型跳转到不同的主页

• histroy对象

  • history 的数据类型是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退、历史记 录等

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

 history 对象一般在实际开发中比较少用,但是会在一些 OA 办公系统中见到。

JS-WebAPIs- Window对象(五),js,javascript,开发语言,ecmascript

案例: 

5秒自动跳转

知识点:使用location对象直接进行页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  span {
    color: red;
  }
</style>
<body>
  
  <a href="http://www.baidu.com"><span>5</span>秒钟后跳转到百度首页</a>

  <script>
    const a = document.querySelector('a')
    let num = 5
    let timerId = setInterval(function(){
      num--;
      a.innerHTML = `<span>${num}</span>秒钟后跳转到百度首页`
      //如果num === 0则停止定时器,并跳转页面
      if(num === 0){
        clearInterval(timerId)
        location.href = 'http://www.baidu.com'
      }
    },1000)

  </script>
</body>
</html>

 ............文章来源地址https://www.toymoban.com/news/detail-812102.html

到了这里,关于JS-WebAPIs- Window对象(五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript:js数组/对象遍历方法

    一、js遍历方法 序号 方法 描述 1 for 使用最基本的for循环可以遍历数组 2 for of for...of语句用来遍历可迭代对象(包括数组、Set、Map、字符串等),它可以替代传统的for循环和forEach()方法。for...of循环每次迭代都将返回一个值,而不是索引。 3 for in for...in语句用来遍历对象的可

    2024年02月09日
    浏览(56)
  • 【前端|Javascript第5篇】全网最详细的JS的内置对象文章!

    前言 在当今数字时代,前端技术正日益成为塑造用户体验的关键。我们在开发中需要用到很多js的内置对象的一些属性来帮助我们更快速的进行开发。或许你是刚踏入前端领域的小白,或者是希望深入了解内置对象的开发者,不论你的经验如何,本篇博客都将给你详细的讲解

    2024年02月12日
    浏览(114)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(65)
  • 前端开发:JS中向对象中添加对象的方法

    在JS中向对象中添加对象的操作方法大概有三种:直接添加、使用扩展运算符…、 Object.assign()方法。 1、直接添加 直接在对象A中添加需要的键值对内容,具体示例如下所示: 2、使用扩展运算符… 使用扩展运算符…实现对象中添加对象是比较常用的方式,具体示例如下所示:

    2024年02月11日
    浏览(56)
  • 细说JavaScript BOM之window常用子对象

    一、location location翻译过来就是位置的意思,打开浏览器窗口大家可以看到导航栏上有一个URL地址。 location常用对象属性 属性 描述 search 设置或返回从问好(?)开始的URL hash 设置或返回从#后面开始的URL protocol 设置或返回当前URL的协议 host 设置或返回主机名和当前URL的端口号

    2024年01月19日
    浏览(47)
  • c、c++、java、python、js对比【面向对象、过程;解释、编译语言;封装、继承、多态】

    目录 内存管理、适用 区别 C 手动内存管理:C语言没有内置的安全检查机制,容易出现内存泄漏、缓冲区溢出等安全问题。 适用于系统级编程 C++ 手动内存管理:C++需要程序员手动管理内存,包括分配和释放内存,这可能导致内存泄漏和指针错误。 适用于游戏引擎和系统级编

    2024年02月08日
    浏览(76)
  • [从零开发JS应用] 如何在VScode中配置Javascript环境,常见的调试方法有哪些?

    记录环境配置:本文配置的环境主要针对单独JS文件的断点调试,主要是为了调试LeetCode里面的代码。 首先在官网下载对应的版本:https://nodejs.org/en/ 开始安装,可以自定义选择安装路径。 这里 选择Add Path ,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以

    2024年02月04日
    浏览(56)
  • PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库,由 Mozilla 开发并且持续维护

    最近新项目需要处理 PDF,研究了 PDf.js 之后觉得很不错,于是写篇文章推荐给大家。 PDF.js 的功能和它的名字一样简单,是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着,没错,就是那个开

    2024年01月21日
    浏览(53)
  • 使用JavaScript和Vue.js框架开发的电子商务网站,实现商品展示和购物车功能

    引言: 随着互联网的快速发展和智能手机的普及,电子商务行业正迎来一个全新的时代。越来越多的消费者选择网上购物,而不再局限于传统的实体店。这种趋势不仅仅是改变了消费者的习惯购物,也给企业带来了巨大的商机。为了不断满足消费者的需求,电子商务网站需要

    2024年02月15日
    浏览(59)
  • Vue,js 监听window窗口尺寸变化

    1.监听window窗口变化 VueJs 监听 window.resize 方法,同时窗口拉伸时会频繁触发resize函数,导致页面性能 卡顿 ,可以搭配setTimeout来提升性能 在mounted中挂载resize方法 watch 监听 data中或props传递的数据

    2024年02月11日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包