feat: vdom diff algorithm

Author: Rain120

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 1.0.0 (2020-03-05)
+# 1.0.0 (2020-03-20)
 
 
 ### Bug Fixes

docs/.vuepress/utils/alias.js

@@ -2,7 +2,7 @@
  * @Author: Rainy
  * @Date: 2020-01-31 11:42:43
  * @LastEditors: Rainy
- * @LastEditTime: 2020-03-04 22:17:41
+ * @LastEditTime: 2020-03-19 17:25:45
  */
 
 const alias = {
@@ -25,6 +25,9 @@ const alias = {
   'debounce': '防抖',
   'throttle': '节流',
 
+  // vdom-diff
+  'vdom-diff': '实现React/Vue DOM Diff算法',
+
   // es6
   'es6': 'ECMAScript 6(ES6)',
   'promise': '手写Promise',

docs/zh/vdom-diff/README.md

@@ -0,0 +1,66 @@
+## 原理
+
+
+
+### 先序深度遍历
+
+- 先中后序遍历 -> 遍历根节点的顺序
+
+    - 先序 -> 根, 左, 右
+
+    - 中序 -> 左, 根, 右
+
+    - 后序 -> 左, 右, 根
+
+- 深度(DFS)遍历 -> 从根节点出发, 沿着左子树方向进行纵向遍历, 直到找到叶子节点为止。然后回溯到前一个节点, 进行右子树节点的遍历, 直到遍历完所有可达节点为止。
+
+- 广度(BFS)遍历 -> 从根节点出发, 在横向遍历二叉树层段节点的基础上纵向遍历二叉树的层次。
+
+![dom-diff-alogrithm.png](~@images/src/vdom-diff/images/dom-diff-alogrithm.png)
+
+## Demo
+
+[Link](https://rain120.github.io/vdom-diff-algorithm/)
+
+<iframe name='demo' src='https://rain120.github.io/vdom-diff-algorithm/' width="100%" height="500px" frameborder="0" />
+
+## 实现代码
+
+[Link](https://github.com/Rain120/vdom-diff-algorithm/tree/master/src)
+
+**index.d.ts**
+
+<<< @/src/vdom-diff/src/index.d.ts
+
+**utils.ts**
+
+<<< @/src/vdom-diff/src/utils.ts
+
+**render.js**
+
+<<< @/src/vdom-diff/src/render.js
+
+**diff.ts**
+
+<<< @/src/vdom-diff/src/diff.ts
+
+**patch.ts**
+
+<<< @/src/vdom-diff/src/patch.ts
+
+
+## 参考
+
+[React Diffing 算法](https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm)
+
+[React's diff algorithm - Christopher Chedeau](https://calendar.perfplanet.com/2013/diff/)
+
+[React Dom Diff](https://sekaiamber.github.io/react-dom-diff/)
+
+[virtual-dom](https://github.com/Matt-Esch/virtual-dom)
+
+[How to write your own Virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)
+
+[Under-the-hood-ReactJS](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
+
+[babel-plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/)

src/vdom-diff/README.md

@@ -0,0 +1,147 @@
+## 原理
+
+### 通过 JavaScript对象来描述真实DOM
+
+**我们通过@babel/plugin-transform-react-jsx 这个babel插件来完成这一步**
+
+#### Example
+
+**React**
+
+**In**
+
+```jsx
+const profile = (
+  <div>
+    <img src="avatar.png" className="profile" />
+    <h3>{[user.firstName, user.lastName].join(' ')}</h3>
+  </div>
+);
+```
+
+**Out**
+```jsx
+const profile = React.createElement("div", null,
+  React.createElement("img", { src: "avatar.png", className: "profile" }),
+  React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
+);
+```
+更多详情请移步 [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/)
+
+或者你也可以通过 `ES6`的`class`关键字来来描述`DOM`, 例子如下:
+
+```js
+class Element {
+  type: string;
+  props: Object<any>;
+  children: Array<any>;
+
+  constructor(type: stirng, props: Object<any>, children: Array<any>) {
+    this.type = type;
+    this.props = props;
+    this.children = children;
+  }
+}
+```
+
+### 渲染真实DOM
+
+#### [createElement()](./src/patch.js)
+
+The javascript virtual dom renders to the HTML real dom.
+
+```js
+if (isString(node)) {
+    return document.createTextNode(node + '');
+  }
+  const el = document.createElement(node.type);
+  setProps(el, node.props || {});
+  node.children &&
+    node.children.map(createElement).forEach(el.appendChild.bind(el));
+
+  return el;
+```
+
+### [Diff twice virtual dom](./src/diff.js)
+
+```js
+function diff(oldNode, newNode) {
+  if (!oldNode) {
+    return { type: CREATE, newNode };
+  }
+
+  if (!newNode) {
+    return { type: REMOVE };
+  }
+
+  if (changed(oldNode, newNode)) {
+    return { type: REPLACE, newNode };
+  }
+
+  if (oldNode.type !== newNode.type) {
+    return {
+      type: UPDATE,
+      props: diffProps(oldNode.props, newNode.props),
+      children: diffChildren(oldNode.children, newNode.children)
+    };
+  }
+}
+```
+
+### [Patch twice virtual dom](./src/patch.js)
+
+```js
+function patch(parent, patches, index = 0) {
+  if (!patches) {
+    return;
+  }
+  const el = parent.children[index];
+
+  switch (patches.type) {
+    case CREATE: {
+      const { newNode } = patches;
+      const newEl = document.createElement(newNode);
+      return parent.appendChild(newEl);
+    }
+    case REMOVE: {
+      return parent.removeChild(el);
+    }
+    case REPLACE: {
+      const { newNode } = patches;
+      const newEl = createElement(newNode);
+      return parent.replaceChild(newEl, el);
+    }
+    case UPDATE: {
+      const { props, children } = patches;
+      patchProps(el, props);
+      children.forEach((child, idx) => {
+        patch(el, child, idx);
+      });
+    }
+  }
+}
+```
+
+### 先序深度遍历
+
+![dom-diff-alogrithm.png](./images/dom-diff-alogrithm.png)
+
+## Demo
+
+[Link](https://rain120.github.io/vdom-diff-algorithm/)
+
+## 参考
+
+[React Diffing 算法](https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm)
+
+[React's diff algorithm - Christopher Chedeau](https://calendar.perfplanet.com/2013/diff/)
+
+[React Dom Diff](https://sekaiamber.github.io/react-dom-diff/)
+
+[virtual-dom](https://github.com/Matt-Esch/virtual-dom)
+
+[How to write your own Virtual DOM](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060)
+
+[Under-the-hood-ReactJS](https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS)
+
+[babel-plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/)

src/vdom-diff/images/dom-diff-alogrithm.png

@@ -0,0 +1,76 @@
+import {
+  CREATE,
+  REMOVE,
+  REPLACE,
+  UPDATE,
+  SET_PROP,
+  REMOVE_PROP
+} from './utils';
+
+import { Node, AnyObject, AnyArray } from './index';
+
+function changed(node1: Node | any, node2: Node | any): boolean {
+  return (
+    typeof node1 !== typeof node2 ||
+    node1.type !== node2.type ||
+    (typeof node1 !== 'string' && node1 !== node2)
+  );
+}
+
+function diffProps(oldProps: AnyObject, newProps: AnyObject): AnyArray {
+  const patches: AnyArray = [];
+  const props: AnyObject = Object.assign({}, oldProps, newProps);
+  Object.keys(props).forEach(key => {
+    const oldValue: any = oldProps[key];
+    const newValue: any = newProps[key];
+
+    if (!newValue) {
+      patches.push({
+        type: REMOVE_PROP,
+        name,
+        value: oldValue
+      });
+    } else if (!oldValue || oldValue !== newValue) {
+      patches.push({
+        type: SET_PROP,
+        name,
+        value: newValue
+      });
+    }
+  });
+  return patches;
+}
+
+function diffChildren(oldChildren: AnyArray, newChildren: AnyArray): AnyArray {
+  const patches: AnyArray = [];
+  const patchesLength: number = Math.max(newChildren.length, oldChildren.length);
+
+  for (let i = 0; i < patchesLength; i++) {
+    patches[i] = diff(oldChildren, newChildren);
+  }
+  return patches;
+}
+
+function diff(oldNode: Node | any, newNode: Node | any): AnyObject | undefined {
+  if (!oldNode) {
+    return { type: CREATE, newNode };
+  }
+
+  if (!newNode) {
+    return { type: REMOVE };
+  }
+
+  if (changed(oldNode, newNode)) {
+    return { type: REPLACE, newNode };
+  }
+
+  if (oldNode.type !== newNode.type) {
+    return {
+      type: UPDATE,
+      props: diffProps(oldNode.props, newNode.props),
+      children: diffChildren(oldNode.children, newNode.children)
+    };
+  }
+}
+
+export { changed, diffProps, diffChildren, diff };

src/vdom-diff/src/diff.ts

@@ -0,0 +1,11 @@
+export interface Node {
+    type: string;
+    props: AnyObject;
+    children: Array<Node>;
+}
+
+export type AnyObject = {
+    [propName: string]: any;
+}
+
+export type AnyArray = unknown[];