2022 前端新增特性

一心只想回农村
63 阅读6分钟

2022 前端新增特性

css新增特性

1.aspect-ratio 为元素设置宽高比

.img_container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

用于防止图片加载后对页面布局的影响，亦可用于媒体查询。

2.新的 CSS 伪类函数 :is() 和 :where()

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如，如果您想对标题中的 标签进行颜色调整，我们应该都写过这样的代码：


h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

现在，我们可以使用 :is() 缩减代码并提高其可读性：


:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

:is() 作为一个伪类函数，其接收选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素，:where() 伪类函数与其功能相同，仅仅选择器权重不同，下面是几个例子：

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}
​
/* in the middle */
article :is(header,footer) > p {
  color: gray;
}
​
/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}
​
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}
​
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}
​
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

3.容器查询

容器查询@container类似于媒体查询@media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。

有关容器查询的属性一共有三个，分别是container-type、container-name、container。

container-type：标识一个作为被查询的容器，取值范围为size、inline-size、block-size、style、state

container-name：被查询的容器的名字

container：container-type和container-name的简写

使用方法:

首先需要使用container-type或者container属性指定一个元素作为被查询的容器。然后使用@container进行容器查询。

当父元素的尺寸大于300的时候，a标签的背景颜色发生变化。


<template>
    <div id="app">
      <div>
          <button @click="add" id="add">+</button>
          <button @click="sub" id="sub">-</button>
        </div>
        <div class="demo">
          <a>我的背景色会随着demo元素的宽度而变化</a>
        </div>
    </div>
</template>
​
<style>
.demo {
  width: 200px;
  height: 200px;
  background: red;
  container: inline-size;
}
​
@container (inline-size > 300px) {
  a {
    background: green;
  }
}
</style>

4.级联层

一般情况下我们会采用优先级更高的样式名来进行覆盖（或ID选择器或嵌套很多层），有时候又不得不应用!important ，这样很容易造成样式的混乱，不好管理。

级联层的诞生就是为了解决上述问题，它可以让CSS样式按照我们定义好的级联顺序展示，起到控制不同样式间的优先级的作用。

多个级联层的优先级顺序为越写在后面的优先级越高。


<template>
    <div id="app">hello world</div>
</template>
​
<style>
    #app {
      width:100px;
      height: 100px;
    }
    // 创建一个名为 A 的级联层
    @layer A {
      div {
        background-color: red;
      }
    }
</style>
// --------------------------------------------------
@layer A, B, C;
​
@layer A {
  div {
    background-color: red;
  }
}
​
@layer B {
  #app {
    background-color: blue;
  }
}
​
@layer C {
  div {
    background-color: green;
  }
}

5.颜色函数

color-mix()

color-mix()可以在给定的色彩空间内将两个颜色混合成一个 。

它接收3个参数，第一个参数为指定的插值方法，第二个和第三个参数为需要混合的颜色值。


color-mix(in lch, purple 50%, plum 50%)
color-mix(in lch, purple 50%, plum)

color-contrast()

color-contrast() 用来查找颜色列表中与给定的颜色（一般为背景色）相比较，对比度最高的颜色并将其输出。

功能符号：color-contrast( <color> vs <color>#{2,} )

<color>是任何有效color的。

<color>#{2,}是一个逗号分隔的颜色值列表，用于与第一个值进行比较。

6.伪类选择器:has

:has()选择器也可以叫做父类选择器，它接受一个选择器组作为参数。有了它，我们可以给有匹配子元素的父类应用一些样式


a:has(span) // 只会匹配包含 span 子元素的 a 元素：

7.accent-color

accent-color属性可以在不改变浏览器默认表单组件基本样式的前提下重置表单组件的颜色。目前支持的HTML元素有：

  • <input type=”checkbox”>
  • <input type=”radio”>
  • <input type=”range”>
  • <progress>

8.媒体查询

媒体查询不是一个新概念，这次在语法上进行了优化。原来通过max-width和min-width来实现的现在可以通过数学运算符>=、<=来实现。相比与原来的写法，新的语法更容易理解一些。比如要实现750px以下屏幕的样式，原来需要应用@media (max-width: 750px)，现在可以直接写成@media (width <= 750px)。

同样，数学运算符的写法也适用于上面介绍的容器查询@container中。


// 原写法
@media (max-width: 750px) {
    …
}
@media (min-width: 750px) { 
        … 
}
@media (min-width: 375px) and (max-width: 750px) { 
        … 
}
// 新写法
@media (width <= 750px) {
    …
}
@media (width >= 750px) { 
        …
}
@media (375px <= width <= 750px) { 
        …
}

JS新增特性

1.at()

.at() 方法可以用于我们读取索引处的元素，并且可以接受负数来对给定数据类型从末尾位置往前读取。

支持此功能的数据类型有：

  • String
  • Array
  • 以及所有的类数组类型数据例如 Unit8Array 等

  const arr = ['apple', 'orange', 'grapefruit', 'pear'];
  const str = 'abcdefg';
  console.log(arr.at(0)) // apple
  console.log(arr.at(-2)) // grapefruit
  console.log(str.at(0)) // a
  console.log(str.at(-2)) // f

小结: .at()方法和数组以及字符串的[]方法类似,只是支持了索引为负数进行获取和类数组数据类型获取

2.await运算符可以在顶级使用

不需要搭配async使用

  1. 延迟当前模块 和 父模块的执行，直到我们await 的模块加载完成
  2. 模块可以在运行时来确定关系
  3. 可以使用模块版本备用，保证模块加载顺利

3.Class使用#实现私有属性和方法

4.Class 使用static实现静态属性

这个方法我之前已经使用了，但是一直没有去成为标准 。

5.使用in可以对私有属性进行检查

6.Object.hasOwn()

在ES2022中在Object上新增了hasOwn 方法，判断对象本身（不含原型链上）是否存在某个属性，它是Object.prototype.hasOwnProperty的进化版

Object.hasOwn()方法可以更好的检查对象本身是否有某个属性。

7.正则表达式/d修饰符

正则表达式 有/i /g /m /gi /ig修饰符, 释义如下：

  • /i: 匹配忽略大小写
  • /g：输入字符串中查找所有可能的匹配，返回的结果可以是多个。如果不加/g最多只会匹配一个
  • /m：多行匹配（匹配换行符两端的潜在匹配）
  • /gi：忽略大小写查找所有可能的匹配
  • /ig：忽略大小写查找所有可能的匹配

最新的 /d 修饰符是用来表示想要匹配字符串的开始和结束索引信息。

8.error.cause

ES2022 新增了error.cause 来规范化错误的抛出和收集,这里其实是 在我们实例化Error的时候，将错误原因以参数形式传入，让我们可以不用处理error数据的过程。


try {
  const result = 1;
  result = 2;
} catch (error) {
  throw new Error('Assignment to constant variable.', {cause: error})
}

参考文章

https://juejin.cn/post/7103409377821851662
https://juejin.cn/post/7122879274641522695
avatar
文章
阅读
粉丝