前端週報第 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 期