前端精读周刊

setState 是 React 框架最常用的命令，它是用来更新状态的，这也是 React 框架划时代的功能。 通过 how-does-setstate-know-what-to-do 这篇文章，可以解开这个秘密。 setState 函数是在 React.Component 组…

“一带一路” 正在积极推动中国的国际化进程，前端网站也面临着前所未有的国际化挑战。那么怎么才能积极响应 “一带一路” 战略，推动网站的国际化工作呢？可以先从国际化布局开始考虑。 本周精读的文章是：new-css-logical-properties，通过一种新的 CSS 技术，…

词法、语法、语义分析概念都属于编译原理的前端领域，而这次的目的是做 具备完善语法提示的 SQL 编辑器，只需用到编译原理的前端部分。 经过连续几期的介绍，《手写 SQL 编译器》系列进入了 “智能提示” 模块，前几期从 词法到文法、语法，再到构造语法树，错误提示等等，都是为 “…

htm 是 preact 作者的新尝试，利用原生 HTML 规范支持了类 JSX 的写法。 className -> class。 标签引号可选（回归 html 规范）：<div class=foo>。 支持 HTML 模式的注释：<div><!-- don't delete …

虽然现在 Css Module 与 Css-in-js 更流行，但使用它们会导致过分依赖 滥用 class 做唯一定位，违背了 Css 选择器的初衷。 本期精读的文章是：attribute-selectors-splicing-html-dna-css，带你重新理解强大的 Cs…

上周的 精读《React Hooks》 已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是知识，而用的是技能，看别人的用法就像刷抖音一样（哇，饭还可以这样吃？），你总会有新的收获…

React Hooks 是 React 16.7.0-alpha 版本推出的新特性，想尝试的同学安装此版本即可。 React Hooks 要解决的问题是状态共享，是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产…

重回 “手写 SQL 编辑器” 系列。这次介绍如何利用缓存优化编译器执行性能。 可以利用 Frist 集 与 Match 节点缓存 这两种方式优化。 如图所示，只要构建好了 First 集，不论这个节点的路径有多长，都可以以最快速度判断节点是否不匹配。如果节点匹配，则继续深度遍…

本周精读的文章是 why-using-reduce-to-sequentially-resolve-promises-works，讲了如何利用 reduce 实现 Promise 串行执行。 在 async/await 以前 Promise 串行执行还是比较麻烦的，希望根据这篇…

本周精读的文章是 speedy-introduction-to-web-workers，是一篇 Web Workers 快速入门的文章，借精读这篇文章的机会，谈谈对 Web Workers 的理解与运用。 高效。 并行。 因为浏览器是单线程的，任何大量耗时的 JS 任务都会卡住…

很高兴这一期的话题是由 epitath 的作者 grsabreu 提供的。 前端发展了 20 多年，随着发展中国家越来越多的互联网从业者涌入，现在前端知识玲琅满足，概念、库也越来越多。虽然内容越来越多，但作为个体的你的时间并没有增多，如何持续学习新知识，学什么将会是个大问题。 …

特性。 稳定性。 性能。 包生态。 社区。 学习曲线。 文档。 工具。 发展历史。 团队。 兼容性。 趋势。 下面总结一下作者的观点。 当你调研一个 JS 库，功能当然是最重要的，就好比 React 的用于开发 UI 界面非常方便，这是流行起来的一部分因素。 但同时 React…

前端精读《手写 SQL 编译器系列》 介绍了如何利用 SQL 生成语法树，而还有一些库的作用是根据语法树生成 SQL 语句。 除此之外，还有一种库，是根据编程语言生成 SQL。sqorn 就是一个这样的库。 可能有人会问，利用编程语言生成 SQL 有什么意义？既没有语法树规范，…

syntax-parser 是完全利用 JS 编写的词法解析+语法解析引擎，所以完全支持在浏览器、NodeJS 环境执行。 它可以帮助你快速生成 词法解析器，亦或进一步生成 语法解析器，将字符串解析成语法树，语法解析器还支持下一步智能提示功能，输入光标位置，给出输入推荐。 1.…

每当项目进入联调阶段，或者提前约定接口时，前后端就会聚在一起热火朝天的讨论起来。可能 99% 的场景都在约定 Http 接口，讨论 URL 是什么，入参是什么，出参是什么。 有的团队前后端接口约定更加高效，后端会拿出接口定义代码，前端会转换成（或自动转成）Typescript …

编译器除了生成语法树之外，还要在输入出现错误时给出恰当的提示。 比如当用户输入 select (name，这是个未完成的 SQL 语句，我们的目标是提示出这个语句未完成，并给出后续的建议： ) - + % / * . ( 。 语句错误。 文法未完成。 给出错误提示的第一步是判断…

重回 “手写 SQL 编辑器” 系列。之前几期介绍了 词法、文法、语法的解析，以及回溯功能的实现，这次介绍如何生成语法树。 表示允许任意长度的 selectStatement 由 ; 号连接，selectList 的写法也同理。 matchWord 表示匹配任意单词。 这个文法…

对时序数据的处理有两种方式，如图所示，右边是 SQL，左边是自定义查询语言，也称为 NoSQL，处于中间地带的称为 SQL-LIKE 语言。 本文通过对比 SQL 阵营的 TimescaleDB 与 NoSQL 阵营的 InfluxDB，试图给出一些对比。 TimescaleD…

上回 精读《手写 SQL 编译器 - 语法分析》 说到了如何利用 Js 函数实现语法分析时，留下了一个回溯问题，也就是存档、读档问题。 我们把语法分析树当作一个迷宫，有直线有岔路，而想要走出迷宫，在遇到岔路时需要提前进行存档，在后面走错时读档换下一个岔路进行尝试，这个功能就叫回…

接着上周的文法介绍，本周介绍的是语法分析。 以解析顺序为角度，语法分析分为两种，自顶而下与自底而上。 自顶而下一般采用递归下降方式处理，称为 LL(k)，第一个 L 是指从左到右分析，第二个 L 指从左开始推导，k 是指超前查看的数量，如果实现了回溯功能，k 就是无限大的，所以…