啃犀牛书——浏览器中的JS

犀牛书这里太杂了，我有点跟不上，先去看红宝书理顺一下了。

(面了很多次试，和面试官们的交谈中发现这一块蛮重要的，特来回看(实习时间这个事情真的难以在招聘者和应聘者间达成完美一致，真难受))

BOM

browser object model 浏览器对象模型，提供了与网页无关的浏览器功能对象，这些是可以与浏览器进行交互的对象。

BOM对象有很多↓

window

window对象是BOM的核心，表示浏览器的实例。window对象被复用为ES中的Global对象，又是浏览器窗口中的JS接口。（强烈建议自己F12输出看一下）

Global作用域

通过var声明的所有全局变量和函数都会变成window对象的属性和方法。

var saySth = () => {
    alert('Sth')
}
window.saySth()

var newVal = window.oldVal // undefined 虽然没有但是undefined

窗口关系

对象top始终指向最上层窗口，parent指向当前窗口的父窗口，self始终指向window(两者是同一个对象)。

多个窗口window对象可串联。

窗口位置与像素比

window对象的位置可以属性和方法来确定。

screenTop // 窗口相对于屏幕左侧和顶部的位置
screenLeft // 窗口相对于屏幕顶部的位置
moveTo(x, y) // 移动到(x, y)处
moveBy(x, y) // 向右移动x向下移动y(负值就是反方向的)
devicePixelRatio // 举例：分辨率此部分1920*1080转换到640*320的设备，此值为3

像素比：一个奇异的角度0.0213°，屏幕距离人眼一臂长时CSS像素越1/96英寸。

物理分辨率：硬件固有的分辨率

逻辑分辨率：算法得出的分辨率，是肉眼可以感知的分辨率，一般比物理分辨率小

窗口大小

确定浏览器窗口大小是一个基本操作。

let pageWidth = window.innerWidth, 
	pageHeight = window.innerHeight

if (typeof pageWidth !== 'number') {
    if (document.compateMode === 'CSSCompat') {
        pageWidth = document.documentElement.clientWidth
        pageHeight = document.documentElment.clientHeight
    } else {
        pageWidth = document.body.clientWidth
        pageHeight = document.body.clientHeight
    }
}

窗口缩放

window.resizeTo(100, 100) // 缩放到100*100
window.resizeBy(100, 50) // 缩放+100+50 => 200*150

视口位置

移动窗口

window.scrollBy(40, 100) // →40, ↓100

window.scrollTo(0, 0) // => (0, 0)
// ScrollToOptions字典写法
window.scrollTo({ // 顺滑移动到(100, 100)
    left: 100,
    top: 100,
    behavior: 'smooth'
})

导航与打开新窗口

我们可以这样弹出窗口：

window.open(URL, 窗口名, 特性字符串)
// URL：目的窗口地址
// 窗口名：如果第二参数不是已有窗口，则打开新窗口
// 特性字符串：用于指定新窗口的配置

// 特性用的时候去搜吧,这里提供几个比较基本的
resizable 是否可以拖动改变新窗口大小
top/left
height/width
// 基本用法如下：
let wroxWin = window.open('http://wrox.com', 
           		'wroxWindow',
           		'height=400, width=400, top=10, left=10, resizable=yes')

alert(window === wroxWin.opener) // => true 这个属性可以查看这个窗口的打开者

wroxWin.opener = null // 将打开者设置为空，使得标签独立通信，切断连接，无法恢复

我们需要一些安全限制：弹出窗口存在一些安全隐患，比如广告之类的。因此浏览器在优化的时候会对其做一些限制。

弹窗屏蔽程序：浏览器内置屏蔽弹窗的程序↓

// 检测弹窗是否被屏蔽
let blocked = false

try {
    let wroxWin = window.open(...)
    if (wroxWin === null) {
        blocked = true
    }                  
} catch(e) {
    blocked = true
}

if (blocked) {
    alert('nono')
}

定时器

setTimeout()：一定时间后执行代码

setInterval() ：每隔一段时间执行代码

// 基本使用方式
let timer = null
timer = setTimeout(() => alert('hh'), 1000)
clearTimeout(timer)

timer = setInterval(() => alert('hh'), 1000)
clearInterval(timer)

// 另一种使用方式，可对比查看
// 定时器
let num = 0, max = 10, timer = null
let incrementNumber = function() {
    num ++
    if (num >= max) {
        alert('done')
    } else {
        clearInterval(timer)
    }
}
timer = setInterval(incrementNumber, 500)
// 延时器
let num = 0, max = 10
let incrementNumber = function() {
    num ++
    if (num >= max) {
        alert('done')
    } else {
        setTimout(incrementNumber, 500)
    }
}
setTimeout(incrementNumber, 500)

系统对话框

alert confirm prompt 简单用法示例↓

alert('haha')
let confirm = confirm('确定？') // true/false
let result = prompt('吃啥？', '')

// 显示打印对话框
window.print()
// 显示查找对话框
window.find()

location

location对象是一个非常有用的BOM对象。同样可以输出一下看看。

以下是书中列出的一些属性值，具体再需要什么去MDN自己查

查询字符串

解析查询字符串

解析查询字符串，转换为查询属性对象

let getArgs = function() {
    let qs = location.search.length > 0 ? location.search : '' // 获取查询字符串
    let args = {} // 开辟空对象
    
    for (let item of qs.split('&').map(val => val.split('='))) { // 将每个属性和属性值拆分后成数组
        let name = decodeURIComponent(item[0]) // 键
        let value = decodeURIComponent(item[1]) // 值
        if (name.length) { // 存入查询属性对象中
            args[name] = value
        }
    }
    
    return args // 返回处理好的对象
}

URLSearchParams

这个接口提供了一组可以简化上述操作的api

let qs = location.search
let searchParams = new URLSearchParams(qs)

// 主要api
alert(searchParams.toString) // => ?后面的内容
searchParams.has('q') // true
searchParams.get('q') // ...
searchParams.set('p', 'haha') // 看这一个个的小方法，map起来了

// 此外，大多支持该接口的浏览器视其为可迭代对象
for (let item of searchParams) {
    console.log(item)
}
// ["q","javascript"] 这输出，能看出来这个数据类型是类似于map的
// ["num","10"]

操作地址

通过修改location对象修改地址。

location.assign('url地址') // 显示调用
window.location = 'url地址' // 诶嘿
location.href = 'url地址' // 最为常用！

// 另外，location这些属性被更改的时候也会修改当前的URL地址，并且重新加载
// 把 URL 修改为 http://www.wrox.com/WileyCDA/?q=javascript
location.search = "?q=javascript";
// 把 URL 修改为 http://www.somewhere.com/WileyCDA/
location.hostname = "www.somewhere.com";
// 把 URL 修改为 http://www.somewhere.com/mydir/
location.pathname = "mydir";
// 把 URL 修改为 http://www.somewhere.com:8080/WileyCDA/
location.port = 8080;

// hash修改后页面不会重新加载
// 把 URL 修改为 http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";

// 一种不会添加一条历史记录的更改URL方法
location.replace('url地址')

// 一种通过重新加载页面的方式修改url方法
location.reload() // 不传参数默认先从缓存里找
location.reload(true) // 强制从服务器找然后刷新

navigator

该对象是客户端标识浏览器的标准。（比较重要的一个是navigator.userAgent）

该对象提供一些属性和方法，通过这些属性方法，向我们传递浏览器信息↓，方便我们确定浏览器类型。

检测插件

自己去浏览器输出看看

注册处理程序

把一个网站注册为处理某种特定类型信息应用程序

navigator.registerProtocolHandler(协议名, URL)

screen

该对象展示的是客户端的能力信息。

history

这个对象虽然不会向用户暴露历史记录中URL地址，但是可以通过调用方法使得前进/回退等。

导航

history.go(-1) // 回退
history.go(1) // 前进
history.go(2) // 前进两次
history.go('wrox.com') // 跳转到最近的wrox.com页面
↓
history.back() // 后退
history.forward() // 前进

history.length // 如果是1说明当前是第一个页面

历史状态管理

HTML5中有对history对象增加一些方便状态管理的特性。

history.pushState(state对象, 新状态的标题, 可选的相对URL)

let state = { foo: 'bar' }
history.pushState(state, 'Title', 'baz.com') // 会添加一条新的历史记录
history.replaceState(...) // 而这个不会

好了！BOM就先到这里吧！

DOM

document object model 文档对象模型，是HTML XML文档的编程接口。表示由多层节点构成的文档，我们可以通过对DOM的获取操作来动态操作HTML。

DOM是现在真正实现跨平台、语言无关的表示操作网页的方式。