recursal/MDN huggingface dataset:
DOMRect
=======

一个 **`DOMRect`** 代表一个矩形。

`DOMRect` 表示的盒子的类型由返回它的方法或属性指定。例如，WebVR API 的 `VREyeParameters.renderRect` (en-US) 指定了头戴式显示器的一只眼睛应该呈现的影像所在的 canvas 的视口。

它继承自它的父类，`DOMRectReadOnly`。

DOMRectReadOnly

DOMRect构造函数
----

`DOMRect()`

创建一个新的 `DOMRect` 对象。

属性
--

`DOMRect` 从其父类 *`DOMRectReadOnly`* 继承属性。不同之处在于它们不再是只读的。

`DOMRectReadOnly.x` (en-US)

`DOMRect` 原点的 x 坐标。

`DOMRectReadOnly.y` (en-US)

`DOMRect` 原点的 y 坐标。

`DOMRectReadOnly.width` (en-US)

`DOMRect` 的宽度。

`DOMRectReadOnly.height` (en-US)

`DOMRect` 的高度。

`DOMRectReadOnly.top` (en-US)

返回 `DOMRect` 的顶坐标值（与 `y` 具有相同的值，如果 `height` 为负值，则为 `y + height` 的值）。

`DOMRectReadOnly.right` (en-US)

返回 `DOMRect` 的右坐标值（与 `x + width` 具有相同的值，如果`width` 为负值，则为 `x` 的值）。

`DOMRectReadOnly.bottom` (en-US)

返回 `DOMRect` 的底坐标值（与 `y + height` 具有相同的值，如果 `height` 为负值，则为 `y` 的值）。

`DOMRectReadOnly.left` (en-US)

返回 `DOMRect` 的左坐标值（与 `x` 具有相同的值，如果 `width` 为负值，则为 `x + width` 的值）。

静态方法
----

`DOMRectReadOnly.fromRect()` (en-US)

创建一个具有指定位置和尺寸的新 `DOMRect` 对象。

规范
--

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMRect |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

更多
--

* `DOMPoint`
IDBCursor
=========

IndexedDB API 中的 `IDBCursor` 接口表示一个游标，用于遍历或迭代数据库中的多条记录。

游标有一个源，指示需要遍历哪一个索引或者对象存储区。它在所属区间范围内有一个位置，根据记录健（存储字段）的顺序递增或递减方向移动。游标使应用程序能够异步处理在游标范围内的所有记录。

你可以在同一时间拥有无数个游标。你总会获得表示给定游标的同样的 `IDBCursor` 对象。在基础索引或对象存储上执行操作。

方法
--

`IDBCursor.advance` (en-US)

设置光标向前移动位置的次数。

`IDBCursor.continue` (en-US)

将游标按它的方向移动到下一个位置，到其健与可选健参数匹配的项。

`IDBCursor.delete` (en-US)

返回一个 `IDBRequest` 对象，并且在一个单独的线程中，删除游标位置记录，而不改变游标的位置。这个可以用作删除一些特定的记录。

`IDBCursor.update` (en-US)

返回一个 `IDBRequest` 对象，并且在一个单独的线程中，更新对象存储中当前游标位置的值。这个可以用来更新特定的记录。

属性
--

`IDBCursor.source` (en-US) 只读 

返回一个游标正在迭代的 `IDBObjectStore` 或者 `IDBIndex` 。这个方法永远不会返回一个空或者抛出异常，即使游标当前正在被迭代，已迭代超过其结束，再或者其事务没有处于活动状态。

`IDBCursor.direction` 只读 

返回光标遍历方向。请查看 常数 中可能的值。

`IDBCursor.key` 只读 

返回记录中游标位置的有效主键。如果游标在区间之外，将会设置成 `undefined`。游标主键可以是任意的数据类型（data type）。

`IDBCursor.primaryKey` (en-US) 只读 

返回游标当前有效的主键。如果游标当前正在被迭代或者已经在迭代在区间范围外，将会被设置成 `undefined` 。游标主键可以是任意的时间类型（data type）。

常量
--

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**警告：** 这些常量不再被支持。你应该使用字符串常量。(Firefox bug 891944)

* `NEXT`: `"next"` :游标展示所有记录，包括重复的记录。它从主键区间下届开始逐步上升（按键的顺序单调递增）。
* `NEXTUNIQUE` : `"nextunique"` : 游标展示所有记录，不包括重复的记录。如果同一个主键存在重复的记录，只有第一条迭代记录被取出。它从主键区间的下界开始逐步上升
* `PREV`: `"prev"` : 游标展示所有记录，包括重复的记录。它从主键区间上界开始逐步往下移动（按主键的顺序单调递减）
* `PREVUNIQUE`: `"prevunique"` :游标展示所有记录，不包括重复的记录。如果主键存在重复记录，只有第一个迭代记录被取出。它从主键区间上界开始逐步往下移动。
示例
--

在这个简单的代码片段中，我们创建了一个事务和检索一个对象存储，之后使用一个游标遍历存储对象中所有的记录。游标不是必须使用主键来选则数据库，我们可以把它全部拿出来。同时需要注意在每次循环遍历中，你可以在当前记录下的游标对象中使用 `cursor.value.foo` 抓取数据。对于完整的工作示例，请查看我们的 IDBCursor example (在线查看示例)。


```js
function displayData() {
  var transaction = db.transaction(["rushAlbumList"], "readonly");
  var objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = function (event) {
    var cursor = event.target.result;
    if (cursor) {
      var listItem = document.createElement("li");
      listItem.innerHTML = cursor.value.albumTitle + ", " + cursor.value.year;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # cursor-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)
NamedNodeMap
============

**`NamedNodeMap`** 接口表示属性节点 `Attr` 对象的集合。尽管在 `NamedNodeMap` 里面的对象可以像数组一样通过索引来访问，但是它和 `NodeList` 不一样，对象的顺序没有指定。

`NamedNodeMap` 对象是即时的 (*live*)，因此，如果它内部包含的对象发生改变的话，该对象会自动更新到最新的状态。

**备注：** 尽管被称为 `NamedNodeMap`，但这个接口不是用来处理节点对象 (`Node`)，而是用来处理属性节点对象 (`Attr`)，属性节点原来是一种特殊的节点 (`Node`)，仍然在某些实现环境（浏览器）中有效。

属性
--

*该接口没有继承任何属性。*

`NamedNodeMap.length` (en-US) 只读 

返回映射 (map) 中对象的数量。

方法
--

*该接口没有继承任何方法。*

`NamedNodeMap.getNamedItem()`

返回一个给定名字对应的属性节点（`Attr`）。

`NamedNodeMap.setNamedItem()` (en-US)

替换或添加一个属性节点（`Attr`）到映射（map）中。

`NamedNodeMap.removeNamedItem()` (en-US)

移除一个属性节点（`Attr`）。

`NamedNodeMap.item()` (en-US)

返回指定索引处的属性节点（`Attr`），或者，当索引超出或等于属性节点的数量时，返回 `null`。

`NamedNodeMap.getNamedItemNS()` (en-US)

根据给定的命名空间参数和 name 参数返回一个 `Attr` 对象。

`NamedNodeMap.setNamedItemNS()` (en-US)

替换、添加给定命名空间参数和 name 参数的 `Attr` 对象。

`NamedNodeMap.removeNamedItemNS()` (en-US)

删除给定命名空间参数和 name 参数的 `Attr` 对象。

规范
--

| Specification |
| --- |
| DOM Standard # interface-namednodemap |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

相关链接
----

* `Element.attributes`
FileSystemDirectoryHandle
=========================

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

File System API 的 **`FileSystemDirectoryHandle`** 接口提供指向一个文件系统目录的句柄。

这个接口可以通过 `window.showDirectoryPicker()`、`StorageManager.getDirectory()` (en-US)、`DataTransferItem.getAsFileSystemHandle()` (en-US) 和 `FileSystemDirectoryHandle.getDirectoryHandle()` 这些方法访问。

FileSystemHandle

FileSystemDirectoryHandle实例属性
----

*从父接口 `FileSystemHandle` 继承属性。*

实例方法
----

*从父接口 `FileSystemHandle` 继承方法。*

常规方法：

`FileSystemDirectoryHandle.getDirectoryHandle()`

返回一个 `Promise`，会兑现一个调用此方法的目录句柄内指定名称的子目录的 `FileSystemDirectoryHandle`。

`FileSystemDirectoryHandle.getFileHandle()`

返回一个 `Promise`，会兑现一个调用此方法的目录句柄内指定名称的文件的 `FileSystemFileHandle`。

`FileSystemDirectoryHandle.removeEntry()`

如果目录句柄包含一个名为指定名称的文件或目录，则尝试异步将其移除。

`FileSystemDirectoryHandle.resolve()`

返回一个 `Promise` 对象，会兑现一个包含从父目录前往指定子条目中间的目录的名称的数组。数组的最后一项是子条目的名称。

异步迭代器方法：

`FileSystemDirectoryHandle.entries()`

返回一个新的迭代 `FileSystemDirectoryHandle` 对象内每个条目的键值对的异步迭代器。

`FileSystemDirectoryHandle.keys()`

返回一个新的迭代 `FileSystemDirectoryHandle` 对象内每个条目的键的异步迭代器。

`FileSystemDirectoryHandle.values()`

返回一个新的迭代 `FileSystemDirectoryHandle` 对象内每个条目的句柄的异步迭代器。

`FileSystemDirectoryHandle[@@asyncIterator]()`

默认情况下返回 `entries` 函数。

示例
--

### 返回目录句柄

下面的示例返回一个指定名称的目录句柄，如果对应的目录不存在则创建。


```js
const dirName = "directoryToGetName";

// 假设我们有一个目录句柄：'currentDirHandle'
const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true });
```

### 返回文件路径

下面的异步函数使用 `resolve()` 来查找被选择文件相对于指定目录句柄的路径。


```js
async function returnPathDirectories(directoryHandle) {
  // 通过显示文件选择器来获得一个文件句柄
  const [handle] = await self.showOpenFilePicker();
  if (!handle) {
    // 如果用户取消了选择或者打开文件失败
    return;
  }

  // 检查文件句柄是否存在于目录句柄的目录中
  const relativePaths = await directoryHandle.resolve(handle);

  if (relativePaths === null) {
    // 不在目录句柄中
  } else {
    // relativePaths 是一个包含名称的数组，指示相对路径

    for (const name of relativePaths) {
      // 打印数组的每个元素
      console.log(name);
    }
  }
}
```

### 返回目录中所有文件的句柄

下面的示例会递归地扫描一个目录，以返回目录中每个文件的 `FileSystemFileHandle` 对象：


```js
async function\* getFilesRecursively(entry) {
  if (entry.kind === "file") {
    const file = await entry.getFile();
    if (file !== null) {
      file.relativePath = getRelativePath(entry);
      yield file;
    }
  } else if (entry.kind === "directory") {
    for await (const handle of entry.values()) {
      yield\* getFilesRecursively(handle);
    }
  }
}
for await (const fileHandle of getFilesRecursively(directoryHandle)) {
  console.log(fileHandle);
}
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemdirectoryhandle |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
ReadableStreamDefaultReader
===========================

Stream API 的 **ReadableStreamDefaultReader** 接口表示一个用于读取来自网络提供的流数据（例如 fetch 请求）的默认 reader。

`ReadableStreamDefaultReader` 可以用于读取底层为任意类型源的 `ReadableStream`（这与 `ReadableStreamBYOBReader` (en-US) 不同，后者仅可以和*底层为字节源*的可读流一起使用）。

然而，请注意，零拷贝传输仅支持自动分配缓冲区的底层字节源这一种底层源。换句话说，流必须同时指定构造函数中的 `type="bytes"` 和 `autoAllocateChunkSize`。对于任何其他底层源，流将始终使用来自内置队列的数据满足读取请求。

构造函数
----

`ReadableStreamDefaultReader()`

创建和返回一个 `ReadableStreamDefaultReader()` 对象实例。

实例属性
----

`ReadableStreamDefaultReader.closed`

返回一个 promise，该 promise 在流关闭时兑现，如果流抛出错误或 reader 的锁被释放，则拒绝。此属性使你能够编写响应流过程结束时执行的代码。

实例方法
----

`ReadableStreamDefaultReader.cancel()`

返回一个 `Promise`，当流被取消时兑现。调用该方法表示消费者对该流失去兴趣。提供的 `reason` 参数将会传递给底层源，其可能使用它，也可能不使用它。

`ReadableStreamDefaultReader.read()`

返回一个 promise，提供对流内部队列中下一个分块的访问权限。

`ReadableStreamDefaultReader.releaseLock()`

释放读取这个 stream 的锁。

示例
--

在下面的示例中，创建自定义 `Response`，将从其他资源获取的 HTML 片段流式传输到浏览器。

它展示了一个 `ReadableStream` 和一个 `Uint8Array` (en-US) 组合使用的例子。


```js
fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // The following function handles each data chunk
      function push() {
        // "done" is a Boolean and value a "Uint8Array"
        return reader.read().then(({ done, value }) => {
          // Is there no more data to read?
          if (done) {
            // Tell the browser that we have finished sending data
            controller.close();
            return;
          }

          // Get the data and send it to the browser via the controller
          controller.enqueue(value);
          push();
        });
      }

      push();
    },
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});
```

规范
--

| Specification |
| --- |
| Streams Standard # default-reader-class |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Stream API 概念
* 使用可读流
* `ReadableStream`
* WHATWG Stream Visualiser，用于可读、可写和转换流的基本可视化。
* Web-streams-polyfill 或 sd-streams——polyfill
caches
======

全局的 **`caches`** 只读属性返回与当前上下文紧密相关的 `CacheStorage` 对象。此对象激活了诸如存储用于离线使用的资源，并生成对请求的自定义响应等功能。

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

值
-

一个 `CacheStorage` 对象。

示例
--

以下示例展示了你在 service worker 上下文中应该如何运用 cache 对资源进行离线存储。


```js
this.addEventListener("install", function (event) {
  event.waitUntil(
    caches.open("v1").then(function (cache) {
      return cache.addAll([
        "/sw-test/",
        "/sw-test/index.html",
        "/sw-test/style.css",
        "/sw-test/app.js",
        "/sw-test/image-list.js",
        "/sw-test/star-wars-logo.jpg",
        "/sw-test/gallery/",
        "/sw-test/gallery/bountyHunters.jpg",
        "/sw-test/gallery/myLittleVader.jpg",
        "/sw-test/gallery/snowTroopers.jpg",
      ]);
    }),
  );
});
```

规范
--

| Specification |
| --- |
| Service Workers # self-caches |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* Service Worker
* Web Worker
* `CacheStorage`
* `Cache`
GainNode
========

**`GainNode`** 接口表示音量的变化。它是一个 `AudioNode` 音频处理模块，在输出前使用给定*增益*应用到输入。一个 `GainNode` 始终只有一个输入和一个输出，两者拥有同样数量的声道。

增益是一个无单位的值，会对所有输入声道的音频进行相应的增加（相乘）。如果进行了修改，则会立即应用新增益，从而在结果音频中产生奇怪的“咔嗒”声。为了防止这种情况发生，请不要直接更改值，而应在 `AudioParam` 接口上使用指数插值方法。

![The GainNode is increasing the gain of the output.](/zh-CN/docs/Web/API/GainNode/webaudiogainnode.png)

EventTarget

AudioNode

GainNode

|  |  |
| --- | --- |
| 输入的数量 | `1` |
| 输出的数量 | `1` |
| 声道计数模式 | `"max"` |
| 声道数 | `2`（在默认计数模式下不生效） |
| 声道混频 | `"speakers"`（扬声器） |

构造函数
----

`GainNode()` (en-US)

创建并返回一个新的 `GainNode` 对象。作为代替的方法，你可以使用工厂方法 `AudioContext.createGain()` (en-US)，参见创建 AudioNode。

属性
--

*从其父类 `AudioNode` 继承属性。*

`GainNode.gain` 只读 

是一个 a-rate `AudioParam`，表示应用的增益量。必须设置 `AudioParam.value` (en-US) 或者使用 `AudioParam` 的方法来改变增益效果。

方法
--

*无具体方法；所有方法继承自父类 `AudioNode`*。

示例
--

参见 `BaseAudioContext.createGain()` (en-US) 以获取示例代码，其展示了如何使用 `AudioContext` 来创建一个 `GainNode`。

规范
--

| Specification |
| --- |
| Web Audio API # GainNode |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 使用 Web Audio API
DOMPoint
========

DOMPoint 对象表示坐标系中的 2D 或 3D 点;它包括三维度的坐标值以及可选的透视值。DOMPoint 基于 DOMPointReadOnly，但允许更改其属性值。

通常，正 x 分量表示原点右侧的位置，正 y 分量从原点向下，正 z 分量从屏幕向外延伸 (换言之，朝向用户)。

Constructor
-----------

`DOMPoint()`

Creates and returns a new `DOMPoint` object given the values of zero or more of its coordinate components and optionally the `w` perspective value. You can also use an existing `DOMPoint` or `DOMPointReadOnly` or a `DOMPointInit` (en-US) dictionary to create a new point by calling the `DOMPoint.fromPoint()` (en-US) static method.

Methods
-------

*`DOMPoint` inherits methods from its parent, `DOMPointReadOnly` (en-US).*

`fromPoint()` (en-US)

Creates a new mutable `DOMPoint` object given an existing point or a `DOMPointInit` (en-US) dictionary which provides the values for its properties.

Properties
----------

*`DOMPoint` inherits properties from its parent, `DOMPointReadOnly` (en-US).*

`DOMPoint.x` (en-US)

The x coordinate of the `DOMPoint`.

`DOMPoint.y` (en-US)

The y coordinate of the `DOMPoint`.

`DOMPoint.z` (en-US)

The z coordinate of the `DOMPoint`.

`DOMPoint.w` (en-US)

The perspective value of the `DOMPoint`.

Examples
--------

In the WebVR API, `DOMPoint` values are used to represent points in the coordinate space that the user's head mounted display exists in. In the following snippet, the position of the VR HMD can be retrieved by first grabbing a reference to the position sensor's current state using `PositionSensorVRDevice.getState()` (en-US), then accessing the resulting `VRPositionState` (en-US)'s `position` (en-US) property, which returns a `DOMPoint`. Note below the usage of `position.x`, `position.y`, and `position.z`.


```js
function setView() {
  var posState = gPositionSensor.getState();

  if (posState.hasPosition) {
    posPara.textContent =
      "Position: x" +
      roundToTwo(posState.position.x) +
      " y" +
      roundToTwo(posState.position.y) +
      " z" +
      roundToTwo(posState.position.z);
    xPos = -posState.position.x \* WIDTH \* 2;
    yPos = posState.position.y \* HEIGHT \* 2;

    if (-posState.position.z > 0.01) {
      zPos = -posState.position.z;
    } else {
      zPos = 0.01;
    }
  }

  /\* ... \*/
}
```


**备注：** See our positionsensorvrdevice demo for the full code.

Specifications
--------------

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMPoint |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `DOMRect`
* `DOMMatrix`
MediaSession
============

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Media Session API (en-US) 的 **`MediaSession`** 接口允许页面为标准媒体交互提供自定义行为。

属性
--

`MediaSession.metadata` (en-US)

指向一个 `MediaMetadata` (en-US) 的实例，其包含富媒体的元数据。该数据将用于平台显示。

`MediaSession.playbackState` (en-US)

展示当前 mediasession 是否处于播放状态。有效值为`"none"`, `"paused"`, `"playing"`.

方法
--

`MediaSession.setActionHandler()`

设置一个监听 mediasession 动作 (如 play 或者 pause) 的事件句柄。浏览方法页以获取所有动作的列表。

例子
--

下面的例子创建了一个新的 media session，并且给其绑定了一些动作句柄：


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Podcast Episode Title",
    artist: "Podcast Host",
    album: "Podcast Name",
    artwork: [{ src: "podcast.jpg" }],
  });
  navigator.mediaSession.setActionHandler("play", function () {});
  navigator.mediaSession.setActionHandler("pause", function () {});
  navigator.mediaSession.setActionHandler("seekbackward", function () {});
  navigator.mediaSession.setActionHandler("seekforward", function () {});
  navigator.mediaSession.setActionHandler("previoustrack", function () {});
  navigator.mediaSession.setActionHandler("nexttrack", function () {});
}
```


下面例子为暂停和播放设置了事件句柄：


```js
var audio = document.querySelector("#player");
audio.src = "song.mp3";

navigator.mediaSession.setActionHandler("play", play);
navigator.mediaSession.setActionHandler("pause", pause);

function play() {
  audio.play();
  navigator.mediaSession.playbackState = "playing";
}

function pause() {
  audio.pause();
  navigator.mediaSession.playbackState = "Paused";
}
```

规范
--

| Specification |
| --- |
| Media Session # the-mediasession-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
服务器发送事件
=======

通常来说，一个网页获取新的数据通常需要发送一个请求到服务器，也就是向服务器请求的页面。使用服务器发送事件，服务器可以随时向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上以 *事件 + 数据* 的形式来处理。

**备注：** 此特性在 Web Worker 中可用

**备注：** Firefox 不能在 service worker 正常支持服务器发送事件（但支持在 Dedicated Worker 和 Shared Worker 中使用）。参见 Firefox bug 1681218。

概念与使用
-----

要了解如何使用服务器发送事件，请参阅我们的文章使用服务器发送事件。

接口
--

`EventSource`

定义了所有处理与服务器连接、接收事件/数据、处理错误、关闭连接等功能的特性。

示例
--

* 使用 PHP 语言的简单 SSE 示例
规范
--

| Specification |
| --- |
| HTML Standard # server-sent-events |

参见
--

### 工具

* Mercure：一个建立在 SSE 之上的实时通信（发布——订阅）协议
* 用于 Node.js 的 EventSource polyfill
* Remy Sharp 的 EventSource polyfill
* Yaffle 的 EventSource polyfill
* Rick Waldron 的 jquery 插件
* intercooler.js 声明性的 SSE 支持
### 相关主题

* 从服务器获取数据
* JavaScript
* WebSocket
### 其他资源

* 一个使用服务器发送事件的、类似 Twitter 的应用程序，代码存放在这里：Github。
* HTML5 和服务器发送事件
Vibration API
=============

大多数现代移动设备包括振动硬件，其允许软件代码通过使设备摇动来向用户提供物理反馈。Vibration API 为 Web 应用程序提供访问此硬件（如果存在）的功能，如果设备不支持此功能，则不会执行任何操作。

振动描述
----

振动被抽象成【开 - 关】脉冲的模式，且可以具有变化的长度。?参数可以是单个整数，表示持续振动的毫秒数 (ms)；或可由多个整数组成的数组，达到振动和暂停循环的效果。只要单一 `window.navigator.vibrate()` (en-US) 函式即可控制振动。

### 一个单次振动

你可以通过指定单个值或仅由一个值组成的数组来一次振荡振动硬件：


```js
window.navigator.vibrate(200);
window.navigator.vibrate([200]);
```


以上两个例子都可以使设备振动 200 ms.

### 振动模式

一组数值描述了设备振动并且不振动的交替时间段。数组中的每个值都将转换成一个整数，然后交替解释为设备应该振动的毫秒数和不振动的毫秒数。例如：


```js
window.navigator.vibrate([200, 100, 200]);
```


这会使设备振动 200 ms，然后暂停 100 ms，然后再次振动设备 200 ms。

你可以根据需要设定多个振动/暂停对，数组的值可以是偶数或奇数个；值得注意的是，由于振动在每个振动周期结束时自动停止，因此你不必提供最后一个值去暂停，换句话说，数组长度只需要设置奇数个。

### 停止振动

当调用 `Navigator.vibrate()` 的参数为 `0`、空数组，或包含全 0 值的数组时会取消任何正在进行中的振动。

### 持续振动

一些基于 setInterval 和 clearInterval 操作将允许你创建持续的振动：


```js
var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
  navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
  // Clear interval and stop persistent vibrating
  if (vibrateInterval) clearInterval(vibrateInterval);
  navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
  vibrateInterval = setInterval(function () {
    startVibrate(duration);
  }, interval);
}
```


当然上面的代码片段没有考虑到振动参数为数组情况; 基于阵列的持久性振动将需要计算数组项的和，并基于该数量创建周期（可能具有额外的延迟）。

规范
--

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Navigator.vibrate()`
MIDIAccess
==========

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Web MIDI API (en-US) 的 **`MIDIAccess`** 接口提供查询 MIDI 输入和输出设备的列表以及获取这些设备的使用权限。

属性
--

`MIDIAccess.inputs` (en-US) 只读 

返回 `MIDIInputMap` (en-US) 的实例，以提供对任何可用的 MIDI 输入端口的访问权限。

`MIDIAccess.outputs` (en-US) 只读 

返回 `MIDIOutputMap` (en-US) 的实例，以提供任何可用的 MIDI 输出端口的访问权限。

`MIDIAccess.sysexEnabled` (en-US) 只读 

一个布尔型的属性，指明系统是否对现有的 MIDIAccess 实例支持。

### 事件处理程序

`MIDIAccess.onstatechange` (en-US)

当添加新的 MIDI 端口或者一个存在的端口状态发生改变时被调用。

例子
--

规范
--

| Specification |
| --- |
| Web MIDI API # midiaccess-interface |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLStyleElement
================

**`HTMLStyleElement`** 接口表示 `<style>` 元素。它从 `HTMLElement` 和 `LinkStyle` (en-US) 中继承属性和方法。

这个接口不允许修改包含其中的 CSS（大多数情况下）。如果需要修改 CSS，前往关于使用动态样式的信息查看在 DOM 中用于修改特定 CSS 属性的对象。

属性
--

*Inherits properties from its parent, `HTMLElement`**, and implements `LinkStyle` (en-US)**.*

`HTMLStyleElement.media` (en-US)

Is a `DOMString` representing the intended destination medium for style information.

`HTMLStyleElement.type` (en-US)

Is a `DOMString` representing the type of style being applied by this statement.

`HTMLStyleElement.disabled` (en-US)

Is a `Boolean` (en-US) value representing whether or not the stylesheet is disabled (true) or not (false).

`LinkStyle.sheet` (en-US) 只读 

Returns the `StyleSheet` object associated with the given element, or `null` if there is none

`HTMLStyleElement.scoped` (en-US) 
非标准

已弃用

Is a `Boolean` (en-US) value indicating if the element applies to the whole document (`false`) or only to the parent's sub-tree (`true`).

方法
--

*No specific method; inherits properties from its parent, `HTMLElement`**, and `LinkStyle` (en-US)**.*

规范
--

| Specification |
| --- |
| HTML Standard # htmlstyleelement |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* The HTML element implementing this interface: `<style>`.
* Using dynamic styling information (en-US) to see how to manipulate CSS.
CSSValueList
============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

The **`CSSValueList`** 接口继承自 `CSSValue` 接口，提供一个经过排序的 CSS 值的抽象集合。

一些属性允许在它们的语法中使用空的列表。这时，these properties take the `none` identifier. So, an empty list means that the property has the value `none`.

The items in the `CSSValueList` are accessible via an integral index, starting from 0.

属性
--

*从它的父接口 `CSSValue` 继承属性。*

`CSSValueList.length` 只读 

一个 `unsigned long` 数值，表示此列表中 `CSSValues` 的个数。

方法
--

`CSSValueList.item()` (en-US)

This method is used to retrieve a `CSSValue` by ordinal index. The order in this collection represents the order of the values in the CSS style property. If index is greater than or equal to the number of values in the list, this returns `null`.

规范
--

该特性最初在 DOM Style Level 2 中定义，但从那时起已从标准化工作中移除。

它已被现代、不兼容的 CSS 类型对象模型 API (en-US) 取代，该 API 已被标准化。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `CSSPrimitiveValue` (en-US)
* `CSSValue`