浅析weex之vdom渲染

点击查看全文

前言

前段时间进行了weex页面尝试, 页面滚动加载渲染得非常流畅, 让H5页面拥有了native般的体验。
如此之利器，让人非常想探一究竟，因此最近进行了js-framwork源码学习(weex开源地址：https://github.com/alibaba/weex)，希望能进一步了解其dom渲染机制。

一. 文件结构

weex代码结构如下，重点关注其js-framework实现。

    ├── weex-dev
      ├── android
      ├── ios
      ├── bin
      ├── doc
      ├── examples
      ├── src
      │  ├── components
      │  ├── h5-render
      │  ├── js-framework
      │  ├── README.md
      ├── test
      ├── website
      ├── index.html
      ├── package.json
      ├── webpack.config.js
      ├── README.md
      └── ...

阅读js-framework代码,我整理了一份思维导图。

framework.js是Instance创建的入口，可以从这个文件开始自顶向下地阅读代码，了解其工作原理。可以重点理解它的DOM结构，初始化过程，数据更新过程，下面我也将从这几个方面进行描述。

二. 主要类分析

1. DOM、Listener与EventManager

点击查看全文