实现JavaScript语言解释器(一)

前言

对于大多数前端开发者来说JavaScript可谓是我们最熟悉的编程语言了,它十分强大可是有些语言特性却十分难以理解,例如闭包this绑定等概念往往会让初学者摸不着头脑。网上有很多诸如《你看完这篇还不懂this绑定就来砍我》之类的文章来为大家传道解惑。可是在我看来这些文章大多流于表面,你读了很多可能还是会被面试官问倒。 那么如何才能彻彻底底理解这些语言特性,从而在面试的时候立于不败之地呢?在我看来要想真的理解一样东西,最好的途径就是实现这样东西,这也是西方程序员非常喜欢说的learning by implementing。例如,你想更好地理解React,那么最好的办法就是你自己动手实现一个React。因此为了更好地理解JavaScript的语言特性,我就自己动手实现了一个叫做Simple的JavaScript语言解释器,这个解释器十分简单,它基于TypeScript实现了JavaScript语法的子集,主要包括下面这些功能:

React Hook测试指南

React为什么需要Hook中我们探讨了React为什么需要引入Hook这个属性,在React Hook实战指南中我们深入了解了各种Hook的详细用法以及会遇到的问题,在本篇文章中我将带大家了解一下如何通过为自定义hook编写单元测试来提高我们的代码质量,它会包含下面的内容:

  • 什么是单元测试
    • 单元测试的定义
    • 为什么需要编写单元测试
    • 单元测试需要注意什么
  • 如何对自定义Hook进行单元测试
    • Jest
    • React-hooks-testing-library
    • 例子

React Hook实践指南

React为什么需要Hook这篇文章中我们探讨了React开发团队为什么要为Function Component添加Hook的原因,在本篇文章中我将会为大家提供一份较为全面的React Hook实践指南,其中包括以下方面的内容:

React为什么需要Hook

自从React 16.8发布Hook之后,笔者已经在实际项目中使用Hook快一年了,虽然Hook在使用中存在着一些坑,但是总的来说它是一个很好的功能,特别是在减少模板代码和提高代码复用率这些方面特别有用。为了让更多的人了解和使用Hook,我决定写一系列和Hook相关的文章,本篇文章就是这个系列的第一篇,主要和大家聊一下React为什么需要Hook

进击的JAMStack

最近在研究JAMStack的一些相关内容,发现这的确是个好东西,所以想写一篇文章把这个概念分享给还不了解JAMStack的同学。本篇文章主要包含以下的内容:

  • 什么是JAMStack
  • JAMStack有什么优势
  • JAMStack适合什么应用
  • 我的个人思考

什么是JAMStack

概念

JAMStack中的JAM其实是三个词的缩写,它们分别是JavaScript, APIs以及Markdown。而Stack用中文的说法就是技术栈(Tech Stack),也就是我们在构建应用的时候具体使用到的技术的集合。举个例子,国外现在比较火的一个Stack叫做Mean Stack,它表示使用MongoDB + Express.js + AngularJS + Node.js这些技术来构建一个Web应用。因此用最通俗易懂的话来描述JAMStack就是:使用JavaScript,APIs和Markdown三种技术来构建Web应用。所以JAMStack是一种问题解决方案,而不是一个具体的实现。

接着我们再具体看一下JavaScript,APIs和Markdown这三种技术在JAMStack的世界中是起到什么作用的。

Yarn v2介绍

Yarn作为JavaScript生态的一个强大的依赖管理工具在今年1月24日的时候正式发布了v2版本。在本篇文章中,我将会为大家介绍以下内容:

备注:如果你想知道如何直接使用v2版本可以查看Getting Started,如果你想从v1版本迁移到v2版本可以查看Migrations

CSS in JS的好与坏

是什么

CSS-in-JS是一种技术(technique),而不是一个具体的库实现(library)。简单来说CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面,而不是独立为一些.css.scss或者less之类的文件,这样你就可以在CSS中使用一些属于JS的诸如模块声明,变量定义,函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。值得一提的是,虽然CSS-in-JS不是一种很新的技术,可是它在国内普及度好像并不是很高,它当初的出现是因为一些component-based的Web框架(例如React,Vue和Angular)的逐渐流行,使得开发者也想将组件的CSS样式也一块封装到组件中去以解决原生CSS写法的一系列问题。还有就是CSS-in-JS在React社区的热度是最高的,这是因为React本身不会管用户怎么去为组件定义样式的问题,而Vue和Angular都有属于框架自己的一套定义样式的方案。

本文将通过分析CSS-in-JS这项技术带来的好处以及它存在的一些问题来帮助大家判断自己是不是要在项目中使用CSS-in-JS。

窥探现代浏览器架构-四

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

到达合成线程的输入

这篇文章是探究Chrome内部工作原理的四集系列文章中的最后一篇了。在上一篇文章中,我们探讨了一下浏览器渲染页面的过程以及学习了一些关于合成线程的知识,在本篇文章中,我们要看一下当用户在网页上输入内容的时候,合成线程(compositor)做了些什么来保证流畅的用户体验的。

窥探现代浏览器架构-三

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

渲染进程里面发生的事

这篇文章是探究Chrome内部工作原理的四集系列文章中的第三篇。之前我们分别探讨了Chrome的多进程架构以及导航的过程都发生了什么。在本篇文章中,我们将要窥探一下渲染进程在渲染页面的时候具体都发生了什么事情。

渲染进程会影响到Web性能的很多方面。页面渲染的时候发生的东西实在太多了,本篇文章只能作一个大体的介绍。如果你想要了解更多相关的内容,Web Fundamentals的Performance栏目有很多资源可以查看。

窥探现代浏览器架构(二)

前言

本文是笔者对Mario Kosaka写的inside look at modern web browser系列文章的翻译。这里的翻译不是指直译,而是结合个人的理解将作者想表达的意思表达出来,而且会尽量补充一些相关的内容来帮助大家更好地理解。

导航的时候都发生了什么

这篇文章是探究Chrome内部工作原理的四集系列文章中的第二篇,在上一篇文章中我们探讨了不同进程或者线程是如何负责浏览器各个不同部分的工作的。在这篇文章中,我们将会深入了解每个进程和线程是如何沟通协作来为我们呈现出网站内容的。

让我们来看一个用户浏览网页最简单的情景:你在浏览器导航栏里面输入一个URL然后按下回车键,浏览器接着会从互联网上获取相关的数据并把网页展示出来。在本篇文章中,我们将会重点关注这个简单场景中网站数据请求以及浏览器在呈现网页之前做的准备工作 - 也就是导航(navigation)的过程。

一切都从浏览器进程开始

我们在上一篇文章CPU,GPU,内存和多进程架构中提到,浏览器中tab外面发生的一切都是由浏览器进程(browser process)控制的。浏览器进程有很多负责不同工作的线程(worker thread),其中包括绘制浏览器顶部按钮和导航栏输入框等组件的UI线程(UI thread)、管理网络请求的网络线程(network thread)、以及控制文件读写的存储线程(storage thread)等。当你在导航栏里面输入一个URL的时候,其实就是UI线程在处理你的输入。

UI,网络和存储线程都是属于浏览器进程的

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×