关于javascript:jsBOM基础

浏览器对象模型 – Browser Object Model
Web 浏览器 裸露的所有对象组成的示意模型，当浏览器剖析文档时，它将创立一个 对象汇合，定义文档并具体阐明它如何显示。

浏览器创立的对象称为 文档对象 ，它是浏览器应用的更大的对象汇合的一部分，此浏览器 对象汇合 统称为浏览器对象模型或 BOM

window
location
navigator
screen
history

顶层对象 – 外围 ，其余对象都是该对象的子对象
双重身份

被复用为 ECMAScript 中的 Global 对象
浏览器窗口的 JavaScript 接口

Global
窗口
定时器
零碎对话框

通过 var 申明的所有全局变量和函数都会成为 window 对象的属性和办法

var a = 10;
var showA = () => { console.log(this.a); }
console.log(window.a); //10
window.showA() //10

let b = 20;
let showB = () => { console.log(b); }
console.log(window.b); //undefined
window.showB() //Uncaught TypeError

窗口关系
窗口地位和像素比
窗口大小
视口地位
导航与新窗口

top：顶层窗口，指向最外层窗口的 window
parent：父窗口 window

self：以后窗口，以后 window

// 单窗口
window === top //true
window === parent //true
window === self //true

screenLeft：窗口绝对于屏幕 左侧 的地位
screenTop：绝对于 顶部 的地位
moveTo(x,y)：挪动至 相对 坐标
moveBy(x,y)：绝对 以后地位的偏移
```
// 半屏
console.log(screenLeft);//953
console.log(screenTop); //30
```
有与 moveTo()与 moveBy()仅在 IE 上有成果，不再举例
devicePixelRatio：物理像素和逻辑像素的缩放系数

innerWidth：窗口内页面 视口宽度
innerHeight：窗口内页面 视口高度

document.documentElement.clientWidth/clientHeight 也示意视口大小
outerWidth：窗口宽度

outerHeight：窗口高度

console.log(innerHeight);//364
console.log(outerHeight);//1057

resizeTo(x,y)：设置窗口相对大小
resizeBy(x,y)：绝对原尺寸进行办法与放大

同样仅在 IE 上有成果，其余浏览器反对，但可能处于保护模式

下面介绍了两种获取可视区宽高的形式
当页面宽高较大，可视区产生 滚动 时，获取以后可视区的 地位

pageXOffset/scrollX：可视区绝对页面程度滚动的间隔 – 前者已 弃用

pageYOffet/scrollY：垂直滚动的间隔 – 前者已 弃用

console.log(pageXOffset);//200
console.log(scrollX);//200
console.log(pageYOffset === scrollY);//true

scroll(x,y)：滚动至 相对 坐标
scrollTo(x,y)：滚动至 相对 坐标

scrollBy(x,y)：绝对 以后地位的偏移量

参数能够是一个选项 对象，对滚动行为进行具体形容

// 平滑滚动到顶部
scrollTo({
  left: 0,
  top: 0,
  behavior: 'smooth'
})
// 向下滚动一页
scrollBy({
  left: 0,
  top: innerHeight,
  behavior: 'smooth'
})

behavior：

smooth：平滑滚动
instant：霎时滚动
auto：instant

open(url,name,fetures)：用指定名称将指定的资源加载到浏览器上下文，无名称关上新窗口
name
- 关上指定名称的窗口
- ‘_self’,’_blank’
- ‘_parent’ 在 parent 框架关上，无则等价于 ’_self’
- ‘_top’ 进入顶层浏览上下文，无则等价于 ’_self’
fetures
- height,width,top,left：新窗口的大小与地位
- fullscreen：是否窗口最大化 IE
- location：是否显示地址栏
- Menubar：是否显示菜单栏
- toolbar：是否显示工具栏
- status：是否显示状态栏
- resizable：是否能够拖动扭转新窗口大小
- scrollbars：是否在内容过长时滚动
布尔类型默认为no
open 返回以后窗口的 window，opener 返回关上该窗口的 window

close()：敞开窗口

// 在新窗口指导大小与地位关上资源
const newWin = open(
  'http://www.bilibili.com',
  '_blank',
  'height=400,width=400,top=0,left=0,resizable=yes'
)
// 敞开窗口
newWin.close()
newWin.closed //true

加载阶段 的 open()会被浏览器 拦挡，只容许用户手动增加窗口

setTimeout(func,delay,arg1…)：在指定工夫后执行
参数：arg 为 func 回调的默认参数
返回值，返回定时器 ID

//2000ms 后执行
let timer = setTimeout((...a) => {console.log(a);
}, 2000, 'a', 'b');
// 敞开定时器
clearTimeout(timer)

setInterval(func,delay,arg1…)：每隔一段时间执行一次
参数与返回值与 setTimeout 雷同，通过 clearInterval 勾销

间隔时间：每隔一段时间增加一个工作到执行队列中，浏览器不论何时开始要执行多久，在下一个工夫距离会再增加一个工作到执行队列，不论后面的工作是否执行
这意味着可能会呈现定时器增加了多个工作，最终同时执行没有距离的成果

alert()：正告窗
confirm()：确认窗 – 返回布尔值
prompt()：提醒对话框 – 返回字符串或 null
find()：查找页面内容 – 返回布尔值
print()：显示打印对话框

个别状况下咱们会本人写对话框，在款式与性能上更欠缺

window 与 document私有 属性：提供以后窗口中加载文档的信息，以及通常的导航性能

window.location === document.location //true

href：残缺 URL
origin：URL 源地址。只读
protocol：协定名
host：服务器名 + 端口号
hostnamr：服务器名
port：端口号
pathname：门路或文件名
hash：散列值，#后的值
search：query 参数
username：域名前指定的用户名
password：域名前指定的明码

location.search()返回 query 参数，须要对其拆分保留

// 应用字符串拆分与遍历的形式
function getQueryStringArgs() {let qs = location.search.length > 0 ? location.search.slice(1) : '';
    const args = {};
    for (const item of qs.split('&').map(i => i.split('='))) {let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}

decodeURIComponet 函数为解码函数，将编码的 URI 的转义序列转换为原字符

function getQueryStringArgs() {let qs = new URLSearchParams(location.search)
    const args = {};
    for (const item of qs) {let key = decodeURIComponent(item[0])
        let val = decodeURIComponent(item[1])
        if (key.length) args[key] = val
    }
    return args
}
console.log(getQueryStringArgs());

new URLSearchParams(query) 返回一个可迭代对象，以数据模式寄存 key-val
实例对象能够应用 get() set() delete()办法，相当于解决后返回一个 map 构造

assign(url)：批改浏览器地址，location 的其余地址属性会从新解析
replace(url)：替换浏览器地址

replace 与 assign 不同的是，replace 后原页面不会保留到会话历史中，相当于间接 替换
reload()：从新加载页面

用户代理的状态和标识，容许脚本查问它和注册本人进行一些流动
属性

connection：设施网络连接信息。只读
onLine：是否联网
deviceMemory：设施内存
hardwareConcurrency：逻辑处理器外围数，浏览器可并行最大工作线程数量
maxTouchPoints：最大关联触点数量
language[s]：浏览器主语言与偏好语言数组
mediaDevices：可用媒体设施
plugins：插件数组
userAgent：用户代理字符串
webdriver：浏览器是否被主动程序控制
storage：裸露相干 API
serviceWorker：裸露相干 API
permissions：裸露相干 API
mediaCapabilities：裸露相干 API
locks：裸露相干 API
credentials：裸露相干 API
geolocation：裸露相干 API – 以后设施地理位置

办法

registerProtocolHandler(scheme, url)

web 站点为本身注册 协定
requestMediaKeySystemAccess(keySystem,supportedConfigurations)

返回一个 promise，拜访特定媒体的密钥零碎，该零碎又可创立解密媒体流的密钥
sendBeacon(url, data)

向指定地址异步发送数据，只是简略字符串则向本地址与字符串拼接后的地址发送数据，胜利返回 true
share(data) data:url text title files

返回 promise，返回以后平台的共享机制，数据格式不正确 promise 为回绝状态
vibrate(pattern)

触发设施触动，不反对返回 false
pattern 为单个触动或触动数组

浏览器窗口里面的客户端显示器的信息

width：屏幕宽度
height：高度
availHeight：屏幕高度 – 零碎组件高度
availWidth：屏幕宽度 – 零碎组件宽度
availLeft：无零碎组件占用的屏幕最左侧像素
availTop：最顶部
colorDepth：屏幕色彩的位数
pixelDepth：屏幕位深
orientation：屏幕朝向

导航历史记录

length：历史记录数量
back()：回退一步
forward()：前进一步
go(n)：后退 / 后退 |n| 步，或指定地址，导航至最近的该地址

pushState(state,title,url)：向历史中增加一个状态
replaceState(state,title,url)：替换以后历史记录

当 pushState()时会触发 popstate 事件，它的事件对象的 state 属性蕴含 pushState 的第一个 state 参数

pushState()创立的 ” 假 ”URL 背地都对应这服务器上一个实在的物理 URL，否则单击刷新会导致 404 谬误
所有单页应用程序框架都必须通过服务器或客户端的某些配置解决这个问题

关于javascript:jsBOM基础

BOM

1 window 对象

1.1 Global 作用域

1.2 窗口

1.2.1 窗口关系

1.2.2 窗口地位和像素比

1.2.3 窗口大小

1.2.4 视口大小

1.2.5 导航与新窗口

1.2 定时器

1.3 零碎对话框

2 location 对象

2.1 查问字符串

2.2 location 上的办法

3 navigator 对象

4 screen 对象

5 history 对象

5.1 根本属性与办法

5.2 历史状态治理