前端周报第 19 期

精选

JavaScript Proxy 实战指南

ES6 新引入了 Proxy 对象，它不仅能用在元编程上，还支持了 Vue3.0 新的响应式原理，但除此之外我们对 Proxy 的了解甚少。本文作者揭开 Proxy 的神秘面纱，用简单易懂的代码示例，介绍它的用法、优劣点和适用场景。

教程

Webpack 是怎样运行的?（一）

Webpack 生成的文件，实现了类似 CommonJS 的模块加载机制，不同模块会被 __webpack_exports__ 和 __webpack_require__ 关联起来实现模块化调用。

Webpack 是怎样运行的?（二）

接着上一篇，Webpack 为了实现异步加载模块，动态插入模块脚本，在全局维护 window.webpackJsonp 数组管理异步模块。

JavaScript 整洁之道 - 一些最佳实践

怎样的代码才是好的代码？作者从代码的整洁度，代码是否易于理解的角度提出了一些最佳实践。

深入 display：双值语法

为了更好的理解 display 的各个值的含义和区别，作者引出了 display 的双值语法，比如 display: flex; 实际上应该理解为 display: block flex;，说明该元素具有块级元素的特性，而 flex 会影响它子元素的排列布局。

深入 display：生成盒子

作者主要介绍了 display: none; 和 display: contents;，两者的区别和特点。

工具&资源

Water.css

一个可以直接应用在简单网页上的 css 库，引入后提供简洁美观的默认样式。

AST Explorer

在线将代码(比如: JavaScript) 解析成 AST 的工具。

await-timeout

基于 Promise 实现的定时器(setTimeout)。

sync-dotenv

Node 应用可使用 .env 文件控制环境变量，这个工具可以帮你自动同步到 .env.example 文件。

---

如果你喜欢这篇文章，请关注我，我会持续输出更多原创且高质量的内容。

原文链接：前端周报第 19 期