luoleiself's blog

popover

用来指定一个元素为弹出框元素, 弹出框元素通过 display: none 被隐藏，直到通过调用/控制元素(即带有 popovertarget 属性的 button 或者 type="button" 的 input) 或 HTMLElement.showPopover() 调用打开。

当打开时，弹出框元素将出现在所有其他元素之上，即在顶层上，并且不会受到父元素的 position 或 overflow 样式的影响。

属性

• popover 指定元素为弹框出框元素

  • auto, 默认值, 可以在弹出框之外的区域进行选择或(Esc 键), 以达到 轻触关闭 的目的
  • manual, 手动模式, 不能 轻触关闭 或自动关闭, 必须通过声明式的 button 或 js 控制
  • hint, 提示模式, 在弹出框显示时不会自动关闭自动型弹出框, 但会关闭其他提示型弹出框, 并且会对关闭请求做出响应

• popovertarget 指定控制弹出框元素的 id，在 button 或 type="button" 的 input 元素上使用

• popovertargetaction 指定弹出框元素的行为

  • toggle, 默认值, 切换弹出框
  • hide, 隐藏弹出框
  • show, 显示弹出框

1
2
3
4
5
6
7
8

<button popovertarget="myPopover" popovertargetaction="show">
  Show Popover
</button>
<button popovertarget="myPopover" popovertargetaction="hide">
  Hide Popover
</button>

<div id="myPopover" popover>popover content</div>

手动控制弹出框

1
2
3

<button popovertarget="my-popover" popovertargetaction="toggle">Toggle Popover</button>

<div id="my-popover" popover="manual">Popover content</div>

方法

• HTMLElement.showPopover() 手动打开弹出框
• HTMLElement.hidePopover() 手动关闭弹出框
• HTMLElement.togglePopover() 手动切换弹出框

MessageChannel

允许创建一个新的消息通道, 并通过它的两个 MessagePort 属性发送数据

• port1 只读属性
• port2 只读属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// 处理 port1 收到的消息
channel.port1.onmessage = function(e) {
  output.innerHTML = e.data;
};

iframe.addEventListener("load", iframeLoaded, false);
function iframeLoaded() {
  // 把 port2 传给 iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

// 在 iframe 中...
window.addEventListener('message', (evt) => {
  const messagePort = evt.ports?.[0];
  messagePort.postMessage('Hello from the iframe!');
})

accent-color

为某些元素所生成的用户界面控件设置了强调色

• auto 表示用户代理所选颜色, 应匹配平台的强调色(若有)
• <color> 指定用作强调色的颜色

1
2
3
4
5
6
7

<input type="checkbox" checked/>
<input type="radio" />
<style>
  input {
    accent-color: #74992e;
  }
</style>

Grid

CSS Grid 是一个用于 web 的二维布局系统, 网格是由一系列水平及垂直的线构成的一种布局模式, 根据网格, 可以将内容按照行和列的格式进行排版.
CSS Grid 布局 和 Flexible 布局的主要区别在于 CSS Flexible 是为了一维布局服务的(沿横向或纵向), 而 CSS Grid 是为二维布局服务的(同时沿着横向和纵向)

辅助属性

• 网格轨道, 网格布局中使用 grid-template-rows 和 grid-template-columns 属性定义的网格上的行和列, 网格轨道是网格上任意两条相邻线之间的空间.
• fr 单位, 新的长度单位, 表示网格容器中占用的轨道
• minmax(min, max), 函数为一个行/列的尺寸设置了取值范围, 例如 minmax(100px, auto) 表示尺寸至少为 100px, 如果内容尺寸大于 100px 则会根据内容自动调整
• repeat(count, value), 表示轨道列表的重复片段, 允许以更紧凑的形式写入大量显示重复模式的列或行
  • repeat(auto-fill/auto-fit, minmax(200px, 1fr)) 根据可用空间动态调整轨道列数, 每列的最小宽度为 200px, 最大为 1fr
  • auto-fill 创建尽可能多的轨道(即使这些轨道是空的), 并且不会合并多余的轨道
  • auto-fit 创建尽可能多的轨道, 并且会合并多余的轨道, 使得内容能够填充整个容器

属性列表

• grid-template-rows

• grid-template-columns

• grid-template-areas

• grid-auto-flow

• grid-auto-rows

• grid-auto-columns

• grid-gap/gap

  • grid-column-gap
  • grid-row-gap

• grid-area

  • grid-row
  • grid-column

• place-content 简写属性

  • align-content 设置 flex 布局和 grid 布局交叉轴上内容项之间和周围分配空间
  • justify-content 设置 flex 布局和 grid 布局主轴上的对齐方式

• place-items 简写属性

  • align-items 设置所有子元素在交叉轴上的对齐方式
  • justify-items 设置所有盒中的项目沿适当轴线对齐到每个盒子

• align-self 设置子元素在交叉轴上的对齐方式, 覆盖 align-items 的值

• justify-self 设置单个盒子在其布局容器适当轴中的对齐方式

  阅读全文 »

BroadcastChannel

该接口代理了一个命名频道, 可以让同源下的任意浏览上下文订阅它, 它允许同源的不同浏览器窗口(非 chrome 和 qq 浏览器这种方式), tab 页, frame 或者 iframe 下的不同文档之间相互通信,
通过触发一个 message 事件, 消息可以广播到所有监听了该频道的 BroadCastChannel 对象.

• 构造函数

  • channelName, 表示通道名称的字符串, 对于相同的来源下的所有浏览上下文, 一个名称只对应一个通道

1

const bc = new BroadcastChannel(channelName);

EventSource

当不使用 HTTP/2 时, 服务器发送事件(SSE)受到打开连接数(6)的限制, 这个限制是针对浏览器的. 每个浏览器的所有标签页中对相同域名的连接数最多支持 6 个(chrome 超过 6 个自动断开连接, firefox 超过 9 个自动断开连接)

当使用 HTTP/2 时, 最大并发 HTTP 流的数量是由服务器和客户端协商的(默认为 100)

Server-Sent Events 服务器发送事件

Web 内容与服务器发送事件通信的接口, 通信方向是单向的, 数据消息只能从服务器发送到客户端. 如果接收消息中有一个 event 字段, 触发的事件与 event 字段的值相同, 如果不存在 event 字段, 则将触发通用的 message 事件

• url, 表示远程资源的位置

• configuration, 可选, 一个对象

  • withCredentials, 标识 CORS 是否包含凭据, 默认为 false

• 不支持恢复连接, 连接中断后无法从 端点 继续, 只能重新开始新的连接, 之前的上下文可能会丢失

• 要求服务器保持高可用的长连接, 服务器必须一直保持一个稳定、不中断的 SSE 长连接, 否则通信就中断

• 服务器只能通过 SSE 发送消息, 服务器无法在已有的请求之外, 主动的发消息给客户端, 除了通过专门的 /sse 通道

消息格式

数据以 文本流(text/event-stream) 的形式从服务器发送到客户端, 每一行数据都必须以 换行符(\n) 结束, 每条消息以两个 换行符(\n\n) 结束

• event 自定义事件类型(可选), 不使用默认触发 message
• id 消息 ID, 用于断线重连定位
• retry 重连间隔(毫秒)
• data 数据内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const sse = new EventSource(url, configuration);
/**
 * 没有 event 字段时触发
 * event: message
 * id: someid
 * data: user data
 */
sse.onmessage = function (e) {
  console.log(e);
};

/*
 * 触发 notice 事件回调
 *
 * event: notice
 * id: someid
 * data: useful data
 */
sse.addEventListener('notice', (e) => {
  console.log(evt);
});

Web Component

Web Component 是一套不同的技术, 允许创建可重用的定制元素(它们的功能封装在代码之外)并且在 web 应用中使用它们

• Custom element(自定义元素): 一组 JavaScript API, 允许自定义元素及其行为, 然后在用户界面中按照需要使用它们
• Shadow DOM(影子 DOM): 一组 JavaScript API, 用于将封装的 “影子”DOM 树附加到指定元素(与页面 DOM 分开呈现)并控制其关联的功能. 通过这种方式, 可以保持自定义元素的功能私有, 这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突
• HTML template(HTML 模板): <template> 和 <slot> 元素可以编写不在呈现页面中显示的标记模板. 然后它们可以作为自定义元素结构的基础被多次重用

自定义元素

==封装== ==重用==

创建自定义元素, 扩展浏览器中可用的元素集

类型

• 自定义内置元素, 继承自标准的 HTML 元素, 例如 HTMLImageElement, HTMLParagraphElement
• 独立自定义元素, 继承自 HTML 元素基类 HTMLElement, 必须从头实现它们的行为

实现自定义元素

使用 ES6 中的类实现一个自定义元素, 该类可以扩展 HTMLElement 或者其它定制的接口

• 在构造函数中设置初始化状态和默认值, 注册事件监听器, 创建一个影子根(shadowRoot)
• 在构造函数中不能检查元素的属性或子元素, 不能添加新的属性或子元素

Element.insertAdjacentElement(position, element)

将一个给定的元素节点插入到相对于被调用元素的给定的一个位置, 执行成功返回插入的元素, 失败则返回 null

• position 表示相对于该元素的位置
  • ‘beforebegin’ 在该元素本身的前面
  • ‘afterbegin’ 只在该元素中, 在该元素中的第一个子元素前面
  • ‘beforeend’ 只在该元素中, 在该元素中的最后一个子元素的后面
  • ‘afterend’ 在该元素本身的后面
• element 要插入的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

<script>
  // 只有当节点处于 DOM 树中且有一个父节点时 beforebegin 和 afterend 才会生效
  beforeBtn.addEventListener('click', () => {
    const tempDiv = document.createElement('div');
    tempDiv.style.backgroundColor = randomColor();
    if (activeElem) {
      activeElem.insertAdjacentElement('beforebegin', tempDiv);
    }
    setListener(tempDiv);
  });

  afterBtn.addEventListener('click', () => {
    const tempDiv = document.createElement('div');
    tempDiv.style.backgroundColor = randomColor();
    if (activeElem) {
      activeElem.insertAdjacentElement('afterend', tempDiv);
    }
    setListener(tempDiv);
  });
</script>

Performance

Performance 接口可以获取当前页面中与性能相关的信息, 它是高级能力 Timing API 的一部分, 同时也融合了 Timeline API, Navigation Timing API, User Timing API, Resource Timing API

该类型的对象可以通过调用只读属性 window.performance 获取

只读属性

• navigation: 获取在指定的时间段内发生的操作相关信息, 包含页面的加载刷新、发生了多少次重定向等

• timing: 表示包含延迟相关的性能信息

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  performance.timing; // { // "connectStart": 1685528410085, // "navigationStart": 1685528410083, // "secureConnectionStart": 0, // "fetchStart": 1685528410085, // "domContentLoadedEventStart": 1685528410878, // "responseStart": 1685528410185, // "domInteractive": 1685528410417, // "domainLookupEnd": 1685528410085, // "responseEnd": 1685528410186, // "redirectStart": 0, // "requestStart": 1685528410087, // "unloadEventEnd": 0, // "unloadEventStart": 0, // "domLoading": 1685528410189, // "domComplete": 1685528410896, // "domainLookupStart": 1685528410085, // "loadEventStart": 1685528410897, // "domContentLoadedEventEnd": 1685528410878, // "loadEventEnd": 1685528410897, // "redirectEnd": 0, // "connectEnd": 1685528410085 // }

• memory: 非标准属性, 表示基本内存使用情况的对象

• timeOrigin: 表示性能测量开始时的时间的高精度时间戳

IntersectionObserver

之前通常要使用事件监听, 并且需要频繁调用 Element.getBoundingClientRect() 方法以获取相关元素的边界信息, 并使用事件通知的方式同步进行计算, 可能造成性能问题

IntersectionObserver 接口提供了一种异步观察目标元素与祖先元素或顶级文档视口(viewport)交叉状态的方法
当一个 IntersectionObserver 对象被创建时, 其被配置为监听根中一段给定比例的可见区域, 一旦 IntersectionObserver 被创建, 则无法更改其配置, 所以一个给定的观察者对象只能用来监听可见区域的特定变化值, 但是, 可以在同一个观察者对象中配置监听多个目标元素

• 交叉状态触发是成对出现的, 就像 mouseenter 和 mouseleave 事件一样, 有进入状态在未来某一时刻肯定会有移出状态
• 在非交叉区域内的操作不会触发, 和 scroll 事件的触发是有区别的

应用范围

• 图片懒加载, 当图片滚动到可见区域时才进行加载
• 内容无限滚动, 用户滚动到接近内容底部时直接加载更多而无需用户操作翻页
• 检测广告的曝光情况, 为了计算广告收益, 需要直到广告元素的曝光情况
• 在到达可见区域时执行任务或播放动画

触发时机

通常只需要关注文档最接近的可滚动祖先元素的交集更改, 如果元素不是可滚动元素的后代, 则默认为设备视窗
如果要观察相对于根元素的交集, 则指定根元素为 null

• 每当目标元素与设备视窗或者其他指定元素发生交集的时候执行, 设备视窗或者其他元素被称为根元素或根
• Observer 第一次监听目标元素时