本文主要是介绍Moon系列之Moon初探，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
本系列文章产生的主要初衷是它是阅读Vue源码之前的过渡，旨在了解Moon实现类似Vue API的思想与具体实现，相信对于现在的我来说具有一定的启发作用。
具体分析
本篇文章主要是分析Moon具体组成以及Moon整个逻辑流程。
首先说一下Moon结构组成，整个IIFE包裹，考虑实现了CommonJs规范环境等情况，具体代码如下：
(function(root, factory) {if(typeof module === "undefined") {root.Moon = factory();} else {module.exports = factory();}
}(this, function() {"use strict";// 具体代码
});
而在factory函数中代码结构从功能上主要分为如下几个部分：
- 工具方法部分
- Observer部分
- compiler部分
- Moon实例以及原型方法部分
- Moon构造函数属性和方法部分
- 默认指令部分
具体将下面导图，如下：
Moon.js整个逻辑流程是从Moon构造函数开始的，下面就具体分析Moon构造函数完整的执行流程，具体如下：
上面的执行流程实际上就是new Moon(options)中options中的处理以及相关属性的添加，主要的处理有：
- data的处理(组件数据中心)
- computed的处理(计算属性的处理)
- methods的处理
- hooks的处理(hooks中是生命周期函数)
- 等等
Moon中提供的生命周期，从初步分析来看，提供了init、mounted、destory，提供的默认指令在组织结构中可见目前是6个。
之后会结合moon项目来分析整个流程，Moon中实现了虚拟DOM，在之后的文章中会具体来理解虚拟DOM的概念。
结束语
在分析Moon.js中，最直观的收获有两点：
- computed相关的问题，在Vue项目模块中，你在HTML等其他地方调用computed，例如:this.barStyle，为什么是这么用，在Moon.js我看到了思想思路，它会将computed中的内容添加到data中并执行将结果保存在cache对象中，所以computed就是普通变量的使用以及缓存的实现
- data相关的问题，从Moon中的实现可知，为什么Vue中data的写法会有如下形式的：
data() {return {// 变量};
}
这篇关于Moon系列之Moon初探的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
