下图是我自己整理的 vue 的整体结构,
我们可以看出它整体分为三个部分: 核心代码, 跨平台相关和公用工具函数. 同时, 其架构是分层的, 最底层是一个普通的构造函数, 最上层是一个入口,
也就是一个完整的构造函数导出给用户使用, 在最底层和最顶层中间, 需要添加一些方法和属性, 而构造函数上一层的一些方法会最终添加到构造函数的 prototype 属性中,
再上一层的方法最终会添加到构造函数上, 这些方法叫作全局 API, 也就是说, 现在构造函数的 prototype 属性中添加方法后, 再向构造函数自身添加全局 API, 再往上一层是
与跨平台相关的内容, 在构建时, 首先会选择一个平台, 然后将特定与这个平台的代码加载到构建文件中, 再上一层包括两部分: 服务端渲染相关的内容和编译器相关的内容,
构建时会根据构建的目标文件来选择是否需要将编译器加载进来
vue 目录结构下有一个 dist 目录, 其下有很多不同的 vue.js 构建版本
如果构建只包含运行时代码的版本, 就不会将渲染层中编译器部分的代码加载出来了.
在构建文件时, 不同平台的构建文件会选择不同的入口进行构建操作.
其实整个程序结构还可以用另一种表现形式来展现, 因为下面三层的代码是与平台无关的核心代码, 上面三层是与平台相关的代码.
下图就是另一种表现形式, 看起来比较一目了然
不同的平台有不同的入口, 有一些特定与平台的代码会加载到这部分, 而底层的核心代码是通用的, 可以在任何平台下运行.
这里以构建 web 平台下运行的文件为例, 如果我们构建的是完整版本, 那么会选择 Web 平台的入口文件开始构建, 这个入口文件最终
会导出一个 Vue 构造函数, 在导出之前, 会向 Vue 构造函数中添加一些方法, 其流程是: 先向 Vue 构造函数的 prototype 属性上添加一些方法,
然后向 Vue 构造函数自身添加一些全局 API, 接着将平台特有的代码导入进来, 最后将编译器导入进来, 最终将所有代码同 Vue 构造函数一起导出去.
总结:
在架构设计中, Vue 大体可以分为: 核心代码, 跨平台相关与公用工具函数, 核心代码包含原型方法和全局 API, 可以在各个平台运行, 而跨平台相关的部分更多
的是渲染相关的功能, 不同平台下的渲染 API 是不同的, 以 Web 平台为例, Web 页面中的渲染操作就是操作 DOM, 所以在跨平台的 Web 环境下对 DOM 操作的 API
进行了封装, 这个封装主要与虚拟 DOM 对接, 而虚拟 DOM 中所使用的各种节点操作其实是调用跨平台层封装的 API 接口, 而 Weex 平台对节点的操作与 Web 平台并不相同.
文字过于多. 一定要有耐心, 仔细阅读哟.
来源: http://www.bubuko.com/infodetail-3316739.html