美文网首页
08 | 读JavaScript 高程

08 | 读JavaScript 高程

作者: cemcoe | 来源:发表于2020-06-07 21:10 被阅读0次

这一篇呢是第8章,主要涉及 BOM 的相关知识。

先来看BOM,即和浏览器相关地一些东西。

知识点:
1.BOM 中常用的 API 对象有哪些?这些对象都是用来干什么的?
2.窗口的尺寸问题?
3.history 对象?vue router

1.BOM 中常用的 API 对象有哪些?这些对象都是用来干什么的?

主要有这么些个对象:window location navigator screen history

先来看 window 对象,作为对象应该具有属性和方法,然而现实是,为了安全很多方法被浏览器禁用了,现在主要获取一些信息,即获取属性。

window 中有哪些我可能会用到的属性呢?

1.1 窗口的位置
想不想移动浏览器的窗口,出于安全考虑书中的 window.moveTo() 等已经被现代浏览器禁用。

那改变大小总行把,讲真,这部分真乱

1.2 窗口的大小

[window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight]

,你以为就完了?

在书中有句话是这样说的。

在 Chrome 中,outerWidth、outerHeight 与
innerWidth、innerHeight 返回相同的值,即视口(viewport)大小而非浏览器窗口大小。

但你试试就会发现,这四个值没有一样的。


时代的车轮

时代的车轮滚滚向前。

这么乱我不获取不行吗,还真不行,很多功能可能需要知道浏览器的宽度和高度,比如上拉加载更多的功能,不知道总高度,如何确定用户是否滑倒了底部?在做响应式布局时也需要这部分的信息。

书中还提到两个属性

document.documentElement.clientWidth, document.documentElement.clientHeight

和上面的放在一起看一下:


尺寸

这6个尺寸都代表什么?这些 API 用起来真难受,这里有篇 2009 年关于各种尺寸的文章。 JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度,这个东西用到时再查。

如果考虑到移动端可能情况更加的复杂。

1.3 打开窗口
好嘞,到目前为止,书中提到的方法均被浏览器禁止了,下面来试试打开窗口。

window.open

这个东西有什么应用场景呢?在用户登录时有的网站会 open 一个新窗口,在用户输入密钥后网站会将该输入用户信息的窗口直接关闭。无需用户的确认。

1.4 对话框
可以使用alert confirm() prompt() 但这些默认的对话框有点丑,用的场景不是很多。大家对美都是由追求的。


下面来看第二个对象 location,该对象存储当前窗口中加载文档的信息。


location

这里由和window.open()类似功能的代码。

location.assign('https://cemcoe.com')
location.href = 'https://cemcoe.com'

有些网站喜欢使用这些方法搞劫持。


下面是 navigator 和 screen 对象,略。


下面是 history 对象,这个对象可有点东西。在使用 Vue Router 中时,你一定会遇到它。在Vue Router mode history github 404 问题
这里已经提到过 history 了,这里不再重复。

小结:一个对象拥有属性和方法,但在BOM中的对象,因为早期的滥用,浏览器为了安全,禁止了一些方法,现在多是用来收集信息为其他编码活动做准备。

第9章是客户端检测,浏览器的兼容问题。略。


第10到12章是关于DOM的内容。下面来看一波。

相关文章

  • 08 | 读JavaScript 高程

    这一篇呢是第8章,主要涉及 BOM 的相关知识。 先来看BOM,即和浏览器相关地一些东西。 知识点:1.BOM 中...

  • 05 | 读JavaScript 高程

    这是第五章引用类型,这一章涉及引用类型的种类,各个类型身上的方法等相关内容。 主要知识点: 1.引用类型和类和对象...

  • 01 | 读 JavaScript 高程

    缘起 总感觉自己前端的知识体系不是很系统,打算读一下这本很多人推荐的书,从目录来看第三版有些东西在2020年可能已...

  • 02 | 读 JavaScript 高程

    今天来瞧一瞧第二章在 HTML中使用 JavaScript script 标签属性的变化 首先是 script 标...

  • 03 | 读JavaScript 高程

    这是第三章基本概念,这一章涉及变量,操作符,语句和函数等相关内容。 主要的知识点: ECMAScript 中究竟有...

  • 06 | 读JavaScript 高程

    这是第六章面向对象的程序设计,这一章涉及到一些概念和思想,也是 JavaScript 中很重要的知识点。需要注意的...

  • 04 | 读JavaScript 高程

    这是第四章基本概念,这一章涉及变量、作用域和内存问题等相关内容。主要知识点: 值类型和引用类型的区别是什么? 如何...

  • 07 | 读JavaScript 高程

    这是第七章函数表达式,这一章涉及函数预编译,闭包,作用域链内容。函数涉及内容繁多。 前情提要 02-1 | 读Ja...

  • 13 | 读JavaScript 高程 | 事件

    这一篇呢是第13章,内容是和事件相关。 事件可以看成是条件判断的一种条件,逻辑是某个元素发生了某个事情,我要做出相...

  • 20 | 读JavaScript 高程 | JSON

    第14至19章有特定的应用场景,这里先略过。先看第20章,跨度有点大,该章内容主要是对JSON这种数据格式的讲解。...

网友评论

      本文标题:08 | 读JavaScript 高程

      本文链接:https://www.haomeiwen.com/subject/mlehtktx.html