Origin of Ray

一起探索互联网的秘密

上一篇文章分析 Babel 编译流程的时候,提到 Babel 会将 JS 代码转换成 AST(抽象语法树)。这种行为是一种通用的行为,无论什么编程语言都会将源代码解析成 AST,AST 不是 Babel 特有的,更不是 JS 特有的

为什么要这么做呢?原始的 JS 文件是计算机是无法理解的,计算机也很难直接修改 JS 代码,但是转换成 AST 后,由于 AST 本质上是一组表示程序结构的对象,我们可以通过修改这个对象,间接的实现修改代码的目的。chrome V8 引擎也是这么做的,比起 Bable 更进一步的是,V8 引擎会编译 AST 生成字节码。

Parser的过程分为两步,第一步,词法分析,也就是编译原理中的有限状态机,将一段代码拆分为一个个Token,第二步,语法分析,将Token数组,转换为AST树。

这次我就看一下源码,简单分析一下这个过程。

阅读全文 »

最近接触了一点关于Babel的知识,产生了一些兴趣,于是就打算看一看Babel的原理,然后总结学习下,这东西太复杂了,就分多个博客来写吧,这篇博客主要讲两件事,第一,简单描述下Babel的工作流程,第二,简单介绍下Babel的项目结构,也就是微内核模式。

阅读全文 »

这周的工作中,有一个需求需要我去在前端生成一个决策树,于是去考察了很多开源的方案,下面这是我一开始调研的图表,大家可以看一下,根据自己的选择去挑自己合适的,最终我选的是G6。

其实G6的文档已经算是非常不错的了,那我写这篇博客的目的主要有两点:

  • 根据自己的使用体验,重新组织成我习惯记忆的方式,方便以后自己查看。
  • 总结一下使用过程中踩的几个小坑。

这里吐槽一句,G6对于TypeScript实在是太不友好了,所有的属性都是可选的,有时候写下来一堆问号

阅读全文 »

最近对如何开发一个VsCode的插件比较感兴趣,于是特意去读了一些插件的开发文档,主要看的是一个中文翻译的文档,不过这个文档并不全,基本属于重点功能的罗列,但是用来入门是挺好的,不过如果想要深入,还是要去看英文的文档

大部分内容都比较简单,主要就是配置,就可以生效,我这次主要想总结的是如何开发一个全新的语言插件,也就是说,如果你想定义一门新类似JSX的语言,如果提供VsCode的支持,比如语法高亮,代码片段,标签自闭和,错误提示,自动补全等等。

阅读全文 »

这几个周算是把慕课上400大洋买的关于React最佳工程实践的课程听的七七八八了,剩下的主要就是两部分,一部分是一些交互的优化,还有一点点关于性能的优化,这两部分我感觉不是很急,可以在我的工作中去慢慢体会。

我目前在react方面的当务之急是,我只学了实践,但是很多东西我都不知道为什么要这样写,比如为什么要setState才能更新,hook是如何生效的,react fiber是什么等等,不了解这些,我感觉自己的react还浮在半空中,没有比较好的落地,所以下一步的计划就是去了解一下原理,至于是否要去阅读源码,下一步再说。

这篇博客的主要内容是读了一下几位国内外大佬的博客,先对react的fiber有个大概的了解

阅读全文 »

在接触Redux的内容时,不免接触了一些它的配套工具,一时之间被这些工具搞得有些混乱,不知道哪个是哪个,他们各自的作用与联系。这篇文章就来简单记录下我的查询结果。

首先说一下这几个工具,redux,redux-thunk,redux-toolkit,react-redux。

阅读全文 »

目前,跑在浏览器端的web IDE产品越来越多,按照他们的功能特性来做划分的话,目前的web IDE可以分为两种,一种是将本地IDE的功能基本原封不动的迁移到了web端的IDE,像是目前最流行的前端IDE VS Code,借助于云+容器化的能力,在浏览器端VS Code拥有着跟本地IDE几乎完全一样的功能;还有一种web IDE则更多的聚焦于 页面开发与实时的代码解析、编译、预览的呈现,代码打包构建的实现则并不局限于在服务端(如基于Docker容器等)实现,部分的产品实现了 基于浏览器端的代码编译、打包、构建、运行的功能,而这一切在我们原来的开发体系里是只有基于 本地IDE+Node本地构建、本地服务+浏览器访问预览才有的能力。此类产品的代表是CodeSandbox,codepen,StackBlitz,JSFiddle等。

也就是说前者只是将代码的编辑放在了web段,其实背后借助了云去做代码的存储,项目的编译打包运行等,这种方式下,我们最后得到的和本地开发并无区别,对我们的区别只是不用特地下个编辑器了。

后者则是将一部分的编译打包功能以及最终的运行放在了浏览器,且由于浏览器的限制,其所能支持的应用大小是有限制的(PS:最近遇到一个问题,看错误应该是代码大小超过了500K,留个坑,留待以后解决,嘿嘿)

阅读全文 »

Hook 的发展历程

React 团队从一开始就很注重 React 的代码复用性

他们对代码复用性的解决方案历经:Mixin, HOC, Render Prop,直到现在的 Custom Hook

所以 Custom Hook 并不是一拍脑门横空出世的产物,即使是很多对 Custom Hook 有丰富开发经验的开发者,也不了解 Hook 到底是怎么来的,以及在 React 里扮演什么角色

不理解这段设计思路是无法深刻的理解 Custom Hook 的,今天我们就一起来学习一下

阅读全文 »

最近开始看一些关于react的知识,不可避免的接触到了redux。

去看了看他的文档,就来简单总结下。

注意,原大部分内容已经过时了,因为react更新了hook,我接下来回去研究下react-redux针对hook做了哪些改进,再来重新解释,不过本博客大部分内容是讲的原生的redux,还可以放心食用。

阅读全文 »
0%