vue --- > 2.0 编译的实现

初识

• 假设html中有如下dom:

<div id="app">
  <!-- 插值绑定 -->
  <p>{{name}}</p>
  <!-- 指令解析 -->
  <p l-text="name"></p>
  <p>{{age}}</p>
  <p>{{doubleAge}}</p>
  <!-- 双向绑定实现 -->
  <input type="text" l-model="name" />
  <!-- 事件处理 -->
  <button @click="changeName">嘿嘿</button>
  <!-- html内容解析 -->
  <div l-html="html"></div>
</div>
<script>
	const app = new Lz({
		el:'#app',
		data:{
			name: '栗子'
		}
	});
</script>

编译

• Lz类如下:

class Lz{
	constructor(options){
		// 将options保存下来
		this.$options = options;
		
		// 响应式数据
		this.$data = options.data;
		this.$el = options.el;
	
		new Compile(this.$el, this);
	}
}

• Compile类

class Compile{
	// el 是dom的id,
	// vm 是Lz的一个实例
	constructor(el , vm){
		this.$el = document.querySelector(el);				// 根据id获取dom元素
		this.$vm = vm;										// 保存lz实例
	
		if(this.$el){						    			// 若存在dom节点,则进行编译
			this.$fragment = this.node2Fragment(this.$el);	// 将获取的dom节点保存到内存中.提高效率
	
			this.compile(this.$fragment);					// 对内存中的数据数组进行解析
			
			this.$el.appendChild(this.$fragment);			// 将解析过后的结点追加到dom实例中去				
		}
	}
	
	// 输入dom元素, 输出dom数组
	node2Fragment(el){
		const frag = document.createDocumentFragment();		
		
		let child;
		while(child = el.firstChild){						
			frag.appendChild(child);
		}
		return frag
	}
}

compile函数的实现

compile(el) {
  const childNodes = el.childNodes;
  Array.from(childNodes).forEach(node => {
      // 类型判断
      if (this.isElement(node)) {
          // 元素
          // console.log('编译元素' + node.nodeName);
          // 查找 k-, @, :
          const nodeAttrs = node.attributes;
          Array.from(nodeAttrs).forEach(attr => {
              const attrName = attr.name; // 属性名
              const exp = attr.value; // 属性值
              if (this.isDirective(attrName)) {
                  // l-text
                  const dir = attrName.substring(2); // 拿出text

                  // 执行指令
                  this[dir] && this[dir](node, this.$vm, exp);
              }
              if (this.isEvent(attrName)) {

              }
          })
      } else if (this.isInterpolation(node)) {
          // 文本
          this.compileText(node);
      }

      // 递归子节点
      if (node.childNodes && node.childNodes.length > 0) {
          this.compile(node);
      }
  })
}