“前端微周刊”每周更新一次，为前端开发者提供一些技术相关资讯及文章。

微信搜索订阅“前端微志”公众号。

📰 资讯

Midway Serverless 发布 2.0，一体化让前端研发再次提效

Midway Serverless 2.0发布，带来了更好的用户体验和开发效率，这个版本主打应用函数一体，前端和后端一体。

v2.0 还带来了一些新能力：

• 装饰器统一（精简配置文件）
• 工具链统一（应用和函数复用工具链）
• 单元测试（纯Web的测试方法）
• Web模式（部署至任意服务器）

Gitlab：默认分支由master改为main

Gitlab宣布加入Git组织，并将新repo的初始化分支由master改为main。能修改Git仓库的初始化分支这个功能，是在Git 2.28.0这个版本开始支持的，而Git支持这个能力，是由社区反馈而来。

整个故事的源头是2020年的黑人弗洛伊德遭白人警察“跪杀”，让整个美国社会更加关注少数族裔的不平等对待问题。而后，开发者社区内开始讨论Git的master和slave等主要概念命名，包含了政治不正确的引导，最终社区的讨论结果，决定了命名的变更。

GitHub从2020年10月1日起，就开始实行将默认分支由master改为main的变更，不过可以通过设置再改回去。

TC39中的提议：Temporal 进入Stage 3

TC39中的提议Temporal进入到第三阶段（Candidat候选阶段），该提议的初衷是为了优化JavaScript中日期和时间API的使用体验。因为Date对象一直是一个痛点，所以社区才有了Moment.js和Day.js这些好用的工具库出现。

Temporal是一个全局对象，属于最高级命名空间（如Math），给ECMAScript语言带来更现代化的Date/Time的API，并解决一些Date的问题。

想要了解该提议详细的API信息，可以看官方的Temporal提议文档。

掘金编辑器新改版上线

掘金新版编辑器上线 主要更新内容有：

• 支持常用快捷键顶部快速获取
• 支持行内公式和块级公式
• 支持Merida图表
• 支持各种主题样式及100多种代码高亮样式

📖 文章

Webpack 基石 tapable 揭秘

tapable是一个流程管理工具，它在webpack的构建流程中，起到非常重要的作用，它可以很好地管理插件的运行。

tapable主要创建一些钩子函数，并通过串行的方式管理执行它们，并拿到最终执行的结果。文中详细介绍了多种钩子类的实现及其用法，值得一读。

CSS Grid Cheat Sheet Illustrated in 2021🎖️

文中很系统地讲解了CSS Grid的属性及其效果展示，非常多形象生动的卡通图更加帮助理解。

content-visibility: the new CSS property that boosts your rendering performance

content-visibility是Chromium 85中新增的属性，它可能是提升页面加载性能影响最大的CSS属性之一。

它主要是让UA跳过元素包括布局（layout）和绘制（painting）的渲染工作，直到这个元素真被需要的时候才开始渲染。正因为这样，初始加载时，在视图区域之外的元素不会被渲染，才使得初始化渲染速度更快。

在浏览器支持方面，content-visibility最开始是依托于CSS Containment这个标准的，而这个属性目前只在Chromium 85中支持。

Digging Into CSS Logical Properties

CSS Logical Properties（CSS逻辑属性）是CSS的一个模块，它定义逻辑映射到物理属性以控制布局。比如：我们可以通过在HTML标签上定义dir属性来控制内容的显示方向是由左向右（LTR）还是由右向左（RTL），默认的展示方向是由左向右。

文中对不同场景进行深入地分析与讲解，可以帮助你很好地理解CSS逻辑属性的实际用途。

🛠 工具、插件

TroisJS：ThreeJS + VueJS 3 + ViteJS

TroisJS 是一个基于ThreeJS、VueJS 3和ViteJS封装的3D特效框架，它将WebGL的语法封装成API以及Vue组件，开发者可以很方便地创建出3D特效的页面。

git-notify：使用git commit发布消息

git-notify 是一个git命令小工具，它可以让你将git commit内容当做一个类似“系统消息”的方式发送出去，主要有人在项目的当前分支执行git pull命令，则命令行中会自动显示你发布的这条消息，效果见上图。

而要使用这个工具，只需在执行git commit命令时，添加git-notify:前置即可。如：

git commit -m 'git-notify: NEW DEVELOPMENT ENVIRONMENT ...'

这个小工具的执行原理很简单，它很好地利用了git hook的机制，通过hook去做一些处理显示信息等。

StorySet：免费可自定义插画网站

StorySet上面的这些插画是矢量的，且可免费用于个人和商业项目中，种类风格多样，可扩展性强。

🥅 代码片段

JSON.parse(text[, reviver])

JSON.parse函数常被用来将一个JSON字符串转换为对应的JavaScript对象的值。很多人应该不知道其实parse函数可以接收第二个参数，这个参数是一个函数，它被用来自定义parse转换对象时的逻辑，每个对象的属性都会调用这个函数。

这个函数接收两个参数，分别是对象的属性（key）和该属性对应的数值（value）。

// 过滤所有以“__”开头的属性
JSON.parse(`
  "foo": 42,
  "__internal": 1.643
`, (key, value) => {
  if (key.startsWith('__')) {
    return undefined;
  }
  return value;
})

window.scroll：新的scroll API，可实现平滑滚动

window.scroll是一个还在Working Draft状态下的规范，不过主流浏览器都已支持这个API，它可以接受参数behavior为smooth使页面平滑滚动。

// scroll to top
const scrollToTop = () => {
  try {
    // 新API
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  } catch (e) {
    // 兼容老的浏览器
    window.scrollTo(0, 0);
  }
}

让文字根据同级图片尺寸自适应宽度

实现代码如下：

<div class="box">
  <img>
  <h1>Lorem ipsum dolor ..</h1>
</div>

其样式如下：

.box {
  display: inline-block;
}
h1 {
  width: 0;
  min-width: 100%;
}

这段代码主要做了两件事：

1. 让父容器自适应宽度，根据内容的宽度来填充；
2. 给h1标签设置宽度为0，则它不会给父容器贡献宽度，则父容器的宽度由图片的宽度决定，再设置min-width: 100%让h1标签自适应父容器的宽度。

设置input type="range"的样式

要改变range输入框的样式，需要使用到浏览器内置伪类标签来设置。下面列出主要浏览器修改这种样式的示例代码：

/* You need to take care of the compatibility */
/* For firefox ::-moz-range-thumb */
/* For IE ::-ms-thumb */
input[type="range"] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-appearance: none;
  width: 600px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 40px;
  width: 30px;
  border-radius: 10px;
  background: #440a67;
  cursor: pointer;
  margin-top: -10px;
}

/* ::-moz-range-track for firefox */
/* For IE ::-ms-track */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #ff7171;
  height: 20px;
  border-radius: 10px;
}

Array.prototype.at

在JavaScript中，可以对数组或字符串使用负数作为索引，负数的索引是从数组或字符串的末尾往前数对应的位置。

Array.prototype.at方法可以获取数组中对应索引的值，接收数字作为参数，该API目前处于Stage 3的状态，还没有完全被主流浏览器实现。

const items = ["🌯", "🍕", "🍔", "🍰"];

console.log(items[0] === items.at(0));
console.log(items[items.length - 1] === items.at(-1));
console.log(items.at(-1)); // 🍰
console.log(items.at(-2)); // 🍔