琐碎知识

摘要

一些偶尔看到的小知识汇总

# JavaScript全屏实现

原文地址 https://juejin.im/post/5f0705606fb9a07eaa40b7b7

相关 Event

fullscreenchange
- 全屏模式状态发生改变时触发
fullscreenerror
- 在不支持全屏模式的元素上请求全屏时触发

代码实现

let element = document.documentElement;
// 判断是否已经是全屏
// 如果是全屏，退出
if (document.fullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    console.log("已退出全屏！");
  } else {
    // 否则，进入全屏
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    console.log("已进入全屏！");
 }

注意

exitFullscreen 方法只存在于 document 对象上，而 requestFullscreen 可指定进入全屏的元素

可以使用第三方库 screenfull 更加简单地使用，也可以简单解决兼容性问题

# CSS3 object-fit 等属性

object-fit 是用于可替换元素的属性，比如 img，video 等标签。不兼容 IE

object-fit 有以下几个关键字（实际使用时需要先设置改元素的宽高），以 img 标签举例

fill
- 默认值，将图片充满外层 div，不保证保持原有比例
contain
- 在外层 div 的包裹中，保持原有尺寸比例，能够在该容器下看到正常比例图片，
cover
- 在外层 div 的包裹中，保持原有尺寸比例，但图片信息可能看不全
none
- 保持原有尺寸比例。同时保持替换内容原始尺寸大小，如果图片本身大于 div 宽度，相当于用这个 div 是这张图片的部分截图
scale-down
- 依次设置了 none 或 contain, 最终呈现的是尺寸比较小的那个。

更多的可以上 MDN 上看下大致用法，也可以看下张鑫旭大神的这篇文章

提及 object-fit 属性，还需要了解一下 object-position，两者配合使用，可以做出类似“剪裁”的功能，当然日常使用 object-fit 属性也只是为了让缩略图能够显示全：）

# CSS3 fit-content 等关键字

详解可以看张鑫旭大神的这篇文章

fit-content 关键字，目前被用于 CSS 中的 width 和 height 属性中。基本上移动端都可以使用，与之相关的还有 fill-available, max-content, min-conten，这几个关键字最大的作用，就是在原有的display水平不变的情况下拥有元素其他display值才有的特性

fit-content
- 宽度适应文案内容进行调整，不超出外部外部宽度
max-content
- 效果类似于 white-space: nowrap ，会不管外部宽度，会一直一行过去
min-content
- 采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
- 表示很困惑，大体的意思应该是，找出子元素中最大宽度的资源，以该宽度为当前的宽度
fill-available
- 上面三个关键字是针对 div 内部尺寸进行的调整，而 fill-available 是根据外部尺寸所做的调整
- 效果其实类似于 width:100%;

所以学 CSS 是真的会很混乱：）

# Typescript 常用小技巧

联合类型，交叉类型，类型守卫
enum，keyof，typeof
type [key in interface]