知识共享许可协议

Vitual DOM 的内部工作原理

原文:The Inner Workings Of Virtual DOM

Preact VDOM 工作流程图

Preact VDOM 工作流程图

虚拟DOM (VDOM,也称为 VNode) 是非常神奇的,同时也是复杂难懂的。 ReactPreact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以,我就想到自己动手写一篇。

注:这是一篇很长的博客。为了让内容更容易理解,我添加了很多图片。这也导致这篇博客看上去更长了。

在这篇博客中,我是基于 Preact 的代码和 VDOM 机制来介绍的。因为 Preact 代码量更少,你在以后也可以不费力地自己看看源码。但是我觉得绝大部分的概念也同样适用于 React。

我希望读者通过这篇博客可以更好地理解虚拟DOM,并期待你们可以为 React 和 Preact 等开源项目提供贡献。

在这篇博客中,我会通过一个简单的例子来仔细地介绍虚拟DOM的每个场景,给大家虚拟DOM是如何工作的。特别地,我会介绍以下内容:

  1. Babel 和 JSX
  2. 创建 VNode – 单个虚拟 DOM 元素
  3. 处理组件和子组件
  4. 初始渲染和创建 DOM 元素
  5. 再次渲染
  6. 删除 DOM 元素
  7. 替换 DOM 元素
阅读全部

React Native Code Push iOS

最近研究了下 React Native 的 Code Push 热更新,先来 iOS 版本~

阅读全部

How you create your own Native Bridge - JSVM and the first adventure

原文地址:https://medium.com/@kureevalexey/how-to-create-your-own-native-bridge-bfa050e708fc#.ykryuzmun

JSVM and the first adventure

JSVM and the first adventure

What do you know about JavaScript engines? Did you ever try to embed one? In this chapter I’m going to guide you through the dark spooky forest of hosted objects, virtual machines, interpreters and other evil spirits that we call JavaScript engines.

你之前对 JS 引擎是否有过了解?有没有试着在自己的项目里面嵌入一个 JS 引擎玩玩儿?在这篇文章里面,我会给你一些指引,以便可以顺利通过含有 Hosted Objects, Virtual Machines, Interpreters 以及一些其它稀奇古怪玩意儿的『魔法森林』。(不太准确

I know that it may look scary, but don’t forget that a journey of a thousand miles starts with a single step. In our case it’ll be a step into code parsing. At this stage our JavaScript source is getting converted to a structure called abstract syntax tree (AST). There are many different techniques to parse your code (LL(k), LR(k) etc) and convert it to AST, but for the sake of simplicity I want to keep it out of this article.

我知道这听起来很疯狂,不过我们要牢记『千里之行,始于足下』。对我们来说,第一步就是代码解析,也就是把原始的 JS 代码转化成抽象语法树(AST)的表示形式。业界已经有很多不同的方案可以把原始代码转化成抽象语法树,例如 LL(k), LR(k) 等等,不够为了简单起见,这篇文章里面我不会涉及相关的内容。

阅读全部

如何编写自己的 Native Bridge

原文地址:How you create your own Native Bridge

和很多人一样,在我弄清楚 React Native 的实现机制之前,其实已经在实际项目中用过一段儿时间了。不过在我学习 React Native 实现机制的过程中,逐渐开始给这个项目贡献代码,最终成为核心开发者中的一员。

尽管如此,这个项目中的 Native Bridge 对我来说还是很神秘的,它到底是通过什么『魔法』打通了 JavaScript 和 Objective C 这两种不同编程语言之间的边界。正因为缺少对这部分内容的了解,才促使我花了一些时间做了这些调研,然后把我的理解通过这几篇文章分享给大家。

毋庸置疑,在没有一个对项目清晰的规划设计之前就写代码是没有任何意义的。架构设计对于软件开发来说是很重要的一步,我会讲解整个思考过程,详细解释我们做的一些决策以及背后的原因。

阅读全部

前端 IoC 理念入门

背景

近几年,前端应用(WebApp)正朝着大规模方向发展,在这个过程中我们会对项目拆解成多个模块/组件来组合使用,以此提高我们代码的复用性,最终提高研发效率。

在编写一个复杂组件的时候,总会依赖其他组件来协同完成某个逻辑功能。组件越复杂,依赖越多,可复用性就越差,我们可以借助软件工程中优秀的编程理念来提高复杂组件的可复用性,以下将详述其中之一的依赖倒置理念。

什么是 IoC

IoC 全称 Inversion of Control,中文术语为依赖倒置(反转),包含两个准则:

  1. 高层次的模块不应该依赖于低层次的模块,他们都应该依赖于抽象。

  2. 抽象不应该依赖于具体实现,具体实现应该依赖于抽象

其背后的核心思想还是:面向接口编程。

我们用一个例子来说明:我们要实现一个列表 A,能够加载一系列的信息并展示,

于是很自然的我们遵守职责单一功能,将展示和加载两个逻辑拆分成2个类:

阅读全部

前端开源项目持续集成三剑客

开发业务代码的时候,我们总能发现一些通用的功能。这时候,作为一个在互联网时代富有分享精神的程序员,就会想要把项目开源出去,让更多的小伙伴去使用,偶尔可能会有大神评论,能学到很多。 在 GitHub 上, README 是最先让人看到的,一些应用广泛的项目的 README ,除了非常详细的文字介绍,还常常会带有很多小徽章,比如 Vue 的这个 README 的开头:

Vue

Vue

这些徽章 (badage) 展示了代码的测试覆盖率构建状态在各个浏览器中的运行情况,这会让项目显得更加专业和有说服力。本文以笔者集齐了一套徽章的亲身经历,总结了过程中的主要流程和一些踩到的坑,欢迎大家补充,让我们的项目流行起来!

阅读全部