前言
前段时间进行了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