API / DOM

浏览器特性

  • 当控制台报错时，IE9会停止执行JS。当打开控制台时会执行后续JS

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Blob传输数据种类之一

  • Blob 表示一个不可变、原始数据的类文件对象。document.querySelector('input[type="file"]').files[0];webSocket支持的传输数据之一
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Channel Messaging API

  • 让属于同一文件下不同浏览环境的js进行通信（例如IFrame和页面之间，两个worker之间等）

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

DataTransfer自由拖动对象

  • 自由拖放操作生成的

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Event

  • 事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。
  • 每个事件都是继承自Event 类的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。
  • 事件处理函数可以附加在各种对象上，包括 DOM元素，window 对象 等。当事件发生时， event 对象就会被创建并依次传递给事件监听器。
  • 不支持冒泡的事件
UI事件
    load
    unload
    scroll
    resize（大小调整)
焦点事件
    blur
    focus
鼠标事件
    mouseleave
    mouseenter
  • 默认行为默认在对应事件后执行。
  • 在IE/Opera中，是window.event，而在Firefox中，是event
  • 事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，而在Opera中则两者都支持。
  • .onclick方法element.onclick = function(e){...}
    • 处理事件时，处理函数内this关键字引用的是当前元素
    • 事件对象参数(e)仅非IE浏览器可用
    • 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
  • addEventListenerelement.attachEvent('onclick', function(){...}
    • 第3个参数设置：false (冒泡) 或 true (捕获)；
    • 在事件处理函数内部，this关键字引用当前元素；
    • IE不支持
    • 事件执行顺序依据函数添加顺序
    • 通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，并且移除时传入的参数必须与添加时传入的参数一样
  • attachEvent方法element.attachEvent('onclick', function(){...}
    • IE仅支持事件捕获的冒泡阶段触发；
    • 运行在全局作用域，事件监听函数内的this关键字指向了window对象
    • 事件对象仅存在与window.event参数中；
    • 事件必须以ontype的形式命名，比如，onclick而非click；
    • 事件执行顺序和添加顺序相反
  • removeEventListener解除事件，ie不可用element.removeEventListener('click', function(e){...},false)
  • detachEvent解除事件，ie可用element.detachEvent('onclick', function(){...}

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

File文件对象

  • 在Gecko（一种开源排版引擎）中，特权代码（？）可以创建代表任何本地文件的File对象，而无需用户交互
  • File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

FileList文件列表对象

  • 一个 <input> 元素上选择文件后返回的，包含多个File文件对象

FormData

  • 用以将数据编译成键值对。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

  • FormData的最大优点就是我们可以异步上传一个二进制文件

  • new FormData (form? : HTMLFormElement)

    • form (可选)一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.

  • append(DOMString name, Blob value, optional DOMString filename);给当前FormData对象添加一个键/值对

    • name字段名称.
    • value字段值.可以是blob或者一个字符串,如果全都不是,则该值会被自动转换成字符串.formData.append("accountnum", 123456); //数字123456会被立即转换成字符串 "123456"
    • filename(可选) 指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob".如果你将一个Blob对象作为字段值添加到一个FormData对象中,则在使用Ajax将这个FormData对象提交到服务器上时,提交数据中代表对应文件的文件名的"Content-Disposition"字段的值可能会因浏览器的不同而不同

  • 如果FormData对象是通过表单创建的，则表单中指定的请求方式会被应用到方法open()中 。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

History

  • 允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。

属性

  • length：返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。
  • scrollRestoration：允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
  • state：返回一个表示历史堆栈顶部的状态的值。（只有当使用history.pushState和history.replaceState改变history时才会有这个指）

方法

  • back()：前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1)（当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。）

  • forward()：在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1).（当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。）

  • go()：通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页.（同样不报错）

  • history.pushState(stateObj, "page 2", "bar.html");：用来代替现在通过#写入history的方法

    • 参数1位传递的参数值，有640k的大小限制
    • 参数2：标题
    • 参数3：替换当前URL的URL名，虽然URL被替换了，但是不会向服务器请求新的页面，而是沿用上一个页面
    • 会触发window.popstate事件（每当活动的历史记录项发生变化时），并把参数1赋值给state
    • history的前进后退依然有效，并且都会触发popstate事件，也会给state赋予当前页面的值
    • vue中IE9不支持这个方法，所以采用#的方式管理history
    • 绝对不会触发 hashchange 事件（锚点变更事件），即使新的URL与旧的URL仅哈希不同也是如此。
    • 当页面通过历史重新加载时不会触发popstate事件，但是依然能拿到state的值

  • replaceState()：按指定的数据，名称和URL(如果提供该参数)，更新历史栈上最新的入口。好像是依然会创建历史记录，但是前进后退都进不到这个路径

HTMLCanvasElement

  • 用来操作一个canvas元素布局和呈现的属性和方法
  • mozGetAsFile()生成一个File文件对象

HTMLIFrameElement

  • 用于操作内联frame元素的布局和展示。提供了除 HTMLElement 之外的一些特殊属性和方法（当然也包括了继承自 HTMLElement 的部分）

属性

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Location

  • 表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的Location
  • window.location 只读属性，返回一个 Location 对象，其中包含有关文档当前位置的信息。但是你仍然可以赋给它一个 DOMString，window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com'的同义词 。也等同于location.assign("http://www.example.com")

属性

  • Location 接口不继承任何属性，但是实现了那些来自 URLUtils 的属性（？）
  • href：包含整个URL的一个DOMString
  • protocol：包含URL对应协议的一个DOMString，最后有一个":"。例如：http:
  • host：包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。例如：www.runoob.com（不稳定）
  • hostname：包含URL域名的一个DOMString。
  • port：包含端口号的一个DOMString。
  • pathname：包含URL中路径部分的一个DOMString，开头有一个“/"。例如/jsref/prop-loc-pathname.html不包括#和？及之后的参数
  • search：包含URL参数的一个DOMString，开头有一个“?”。
  • hash：包含块标识符的DOMString，开头有一个“#”。
  • username：包含URL中域名前的用户名的一个DOMString。例如在https://anonymous:flabada@developer.mozilla.org/中返回anonymous
  • password：包含URL域名前的密码的一个 DOMString。例如在https://anonymous:flabada@developer.mozilla.org中返回flabada
  • origin：包含页面来源的域名的标准形式DOMString。例如https://developer.mozilla.org并非只读？IE不能识别？

方法

  • Location没有继承任何方法，但实现了来自URLUtils的方法。
  • assign()：加载给定URL的内容资源到这个Location对象所关联的对象上。
  • location.reload(true);强制从服务器重新加载当前页面
  • location.replace('http://example.com')和assign的区别在于，replace不会入栈history
  • toString()：返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

MessageChannel

  • Channel Messaging API的Channel Messaging接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。

属性

  • MessageChannel.port1：返回channel的port1.
  • MessageChannel.port2：返回channel的port2.

构造函数

  • MessageChannel()：返回一个带有两个MessagePort属性的MessageChannel新对象。

例子

  • 使用MessageChannel深度复制Obj，支持undefined 和循环引用对象，不支持函数
function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

var obj = {a: 1, b: {
    c: b
}}

(async () => {
  const clone = await structuralClone(obj)
})()

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

URLSearchParams 处理 URL 的查询字符串

  • 指URL中？部分独立为一个对象

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

WebSocket（全双工）

  • WebSocket / WebSockets 提供了用于创建和管理 WebSocket（全双工） 连接，以及可以通过该连接发送和接收数据的 API。

Web Workers API

  • 在与主线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在独立的线程中执行费时的处理任务，从而允许主（通常是UI）线程不被阻塞/放慢。

Worker（后台任务）

  • 运行者 Worker 接口是Web Workers API 的一部分，代表一个后台任务，它容易被创建并向创建者发回消息。
  • 运行者能够依序产生新（嵌套）的运行者，只要这些运行者有同源（origin）的父页面（注意：Blink暂时不支持嵌套运行者）。
  • 运行者还能够使用 XMLHttpRequest 实现网络 I/O 操作， 只不过 XMLHttpRequest上的 responseXML 与 channel 两个属性值始终返回 null。

window

  • 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档
  • 此接口继承自 AbstractView 接口。一些额外的全局函数、命名空间、对象、接口和构造函数与 window 没有典型的关联，但却是有效的，它们在 JavaScript参考 和 DOM参考 中列出。
  • 在标签浏览器（比如Firefox）中，每个标签具有自己的 window 对象。但有一些方法，如 window.resizeTo 和 window.resizeBy 之类的方法会作用于整个窗口而不是 window 对象所属的那个标签。

setTimeout

  • setTimeout(function[,delay,param1, ..., paramN]
    • delay：延迟的毫秒数，如果省略该参数，delay取默认值0。
    • param1, ..., paramN：附加参数，一旦定时器到期，它们会作为参数传递给function 或 执行字符串。IE9 及更早的 IE 浏览器不支持向延迟函数传递额外参数的功能。
  • 返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时。
  • 由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致，这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象，严格模式下为 undefined，这和所期望的this的值是不一样的。使用call方法也没用。
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qq3279338858/p/9242643.html