compile.js源码分析

判断元素，将模板中的变量替换成数据（文档碎片），然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。

```javascript
function Compile(el, vm) {
   
    this.$vm = vm; //this Compile的实例  $vm 是MVVM的实例 (vm)
    // el  ==  "#app"  判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通,
    //如果不是 则根据选择器 去查找对应的元素 然后保存
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);

    //确定元素是否真正存在
    if (this.$el) {
    //#app
        this.$fragment = this.node2Fragment(this.$el);

        this.$vm.$options.beforeMounted && this.$vm.$options.beforeMounted();
        this.init();
        this.$el.appendChild(this.$fragment);

        this.$vm.$options.mounted && this.$vm.$options.mounted();
    }
}

Compile.prototype = {
   
    /**
     * node to fragment 把节点转换成文档碎片
     * @param el
     * @returns {DocumentFragment}
     */
    node2Fragment: function(el) {
   
        var fragment = document.createDocumentFragment(), //文档碎片
            child;

        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
   
            fragment.appendChild(child);
        }

        return fragment;
    },

    /**
     * 初始化
     */
    init: function() {
   
        //解析所有层次的元素节点
        this.compileElement(this.$fragment);
    },

    /**
     * 解析html元素
     * @param el 元素
     */
    compileElement: function(el) {
   
        //初始化数据,保存所有子节点   保存this
        var childNodes = el.childNodes,
            me = this;

        //对所有子节点进行递归遍历
        [].slice.call(childNodes).forEach(function(node) {
   
            //text节点的文本内容
            var text = node.textContent