window对象

概述

浏览器顶级对象window

变量的定义 

1. 作用域划分单位：script标签、function函数、for语句、switch语句、if语句、else语句
2. 相同作用域中的var变量、function xxx(){}：会声明提升；若发生同名，后者会覆盖前者
3. script标签作用域的var变量、function xxx(){}：会挂载到window对象上
4. 函数A作用域的var变量、function xxx(){}：会挂载到函数A上
5. node环境中：未声明就使用变量，会报错
6. 浏览器环境中：未声明就使用变量，会默认声明使用的变量，并挂载到window对象上

let和var

• for(){}大括号和小括号的var声明属于上层作用域
• for(){}大括号和小括号的let声明属于本次循环的for作用域

浏览器环境

• 严格模式下，this无具体指向，this==undefined
• 非严格模式下，this无具体指向，this==window

storage&cookie

持续时间

• 相同域名<=>相同cookie仓库<=>相同locaStroage仓库
• 相同标签页+相同域名<=>相同会话<=>相同sessionStorage仓库
• 浏览器关闭，清空所有sessionStroage仓库的数据
• 浏览器关闭，保留所有localStroage仓库的数据
• 浏览器关闭，根据浏览器隐私策略，决定cookie仓库的数据是否保留

API

• localStorage.setItem(key,value)
• localStorage.getItem(key)
• localStorage.removeItem(key)
• localStorage.clear()
• sessionStorage.setItem(key,value)
• sessionStorage.getItem(key)
• sessionStorage.removeItem(key)
• sessionStorage.clear()

IndexedDB

数据库操作

//有数据库，打开数据库；没有数据库，创建数据库
const result=window.indexedDB.open(数据库名, version)
result.onupgradeneeded=function(){}  //创建数据库、数据库version提升时调用
result.onsuccess=function(){}        //开启数据库成功，调用
result.onerror=function(){}          //开启数据库失败，调用

const result=window.indexedDB.deleteDatabase(数据表名)
result.onsuccess=function(){}
result.onerror=function(){}

//关闭数据库
db.close()

数据表操作

//创建数据表；
//配置项：主键名keyPath、autoIncrement主键自增
if(db.objectStoreNames.contains(表名)==false){
    db.createObjectStore(表名,配置项)
}

//删除数据表
db.deleteObjectStore(表名)

//创建索引
//配置项：unique、multiEntry、locale
表对象.createIndex(索引名,表中的属性名,配置项)

数据增删改查 

//事务模式有：readonly只读模式(默认)、readwrite读写模式
const 事务对象 = db.transaction([表名],事务模式)
const 表对象 = 事务对象.objectStore(表名)
const 索引对象 = 表对象.index(索引名)

//主键单个增删改查
const result = 表对象.add(数据对象)
const result = 表对象.delete(主键值)
const result = 表对象.put({主键:主键值,...})
const result = 表对象.get(主键值)
result.onsuccess = function(){}
result.onerror = function(){}

//主键多个删改查
表对象.clear()  //清空数据表
表对象.count()  //统计数据表的数据总数
表对象.getAll() //获取数据表所有数据

//主键遍历数据表
//IDBKeyRange默认开区间
//direction的取值：next、prev、nextunique、prevunique
const result = 表对象.openCursor(IDBKeyRange?,direction?)
result.onsuccess=function(event){
    const cursor=event.target.result
    if(cursor){
        console.log(cursor.key,cursor.value)
    }else{
        console.log("没有数据了")
    }
}

//索引查
索引对象.get(索引指定属性的属性值)     //如有多个，返回第一个
索引对象.getAll()
索引对象.getAll(索引指定属性的属性值)  //返回所有的索引指定属性的属性值
索引对象.openCursor()

location

url拆分

• 完整路径：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
• location.href：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
• location.protocol：http:
• location.host：127.0.0.1:5500
• location.hostname：127.0.0.1
• location.port：5500
• location.pathname：/index.html
• location.search：?name=Tom&age=11
• location.hash：#123；hash值的优先级大于search；#xxx起到锚记的作用

API

• location.reload()：页面刷新
• location.assign(url)：页面有记录的当前页面切换
• location.replace(url)：页面无记录的当前页面切换

URL方法

new URL("http://127.0.0.1:5500/index.html?name=Tom&age=11#123")的属性

• href：http://127.0.0.1:5500/index.html?name=Tom&age=11#123
• protocol：http:
• host：127.0.0.1:5500
• hostname：127.0.0.1
• port：5500
• pathname：/index.html
• search：?name=Tom&age=11
• hash：#123
• username：""
• password：""
• origin: http://127.0.0.1:5500

Blob

生成Blob对象

• let blob = new Blob(["Hello, world!"], { type: 'text/plain' });
• blob.size：Blob对象的大小(字节为单位)
• blob.type：Blob对象的MIME类型

创建Blob的URL引用

• let urlA=URL.createObjectURL(blob)
• let urlB=URL.createObjectURL(blob)
• 无法跨域使用Blob对象的URL

释放url引用

• 调用URL.revokeObjectURL(url)
• 页面关闭释放url引用
• 页面刷新释放url引用

释放Blob对象

1. 释放掉Blob的所有URL引用后
2. Blob对象会被当成垃圾回收

console

打印功能

• info、log：打印简略的一般信息
• dir：打印层级形式的一般信息，如：打印DOM元素对象的层级形式
• table：打印表格形式的一般信息
• assert(isTrue,errorMessage)：isTure未false，打印errorMessage错误信息
• debug：打印简略的详细信息
• warn：打印简略的警告信息
• error：打印简略的错误信息
• trace：打印堆栈调用信息
• clear：清空控制台

计时功能

• time(唯一标识)：开始计时
• timeEnd(唯一标识)：结束计时，并打印计时结果
• timeLog(唯一标识,说明内容)：结束计时，并打印计时结果和说明内容

计数功能

• count(唯一标识)：打印唯一标识的输出次数
• countReset(唯一标识)：重置唯一标识的输出次数

折叠功能

• group()：折叠分组起点，默认不折叠
• groupCollapsed()：折叠分组起点，默认折叠
• groupEnd：折叠分支终点

navigator

• clipboard：向剪贴板写入数据；从剪贴板读出数据
• geolocation：当前所处的地理位置
• appCodeName
• appName
• appVersion
• platform
• userAgent
• userAgentData
• language
• languages

mediaDevices

• getUserMedia({video:true,audio:true})：获取录制的音视频流
• getDisplayMedia({video:true,audio:true})：获取电脑屏幕&音频的音视频流

const userStream = await navigator
    .mediaDevices
    .getUserMedia({ 
        video: true, 
        audio: true 
})
userVideo.srcObject=userStream

const displayStream = await navigator
    .mediaDevices
    .getDisplayMedia({ 
        video: true, 
        audio: true 
})
displayVideo.srcObject=userStream

history

• back：加载历史记录的上一个页面
• forward：加载历史记录的下一个页面
• go(n)：加载历史记录的下n个页面
• pushState
• replaceState
• state
• scrollRestoration

RTCPeerConnection

• webrtc实现函数，能够实现实时视频功能
• 方式一：浏览器之间建立连接，浏览器互相发送视频流；适用个人会议
• 方式二：浏览器依靠服务器进行数据中转；适用万人直播

webkitSpeechRecognition

能够实现语言转文字

webassembly

后续将使用assemblyscript编写相关代码

screen

• window.screen.{width,height}：电脑屏幕的宽高
• window.screen.{availWidth,availHeight}：电脑应用窗口区域的宽高
• window.{innerWidth,innerHeight}：浏览器HTML区域的宽高
• window.{screenLeft,screenX,screenTop,screenY}：浏览器窗口左上角 相对 电脑屏幕左上角