认识Vue源码（1）

一、预备知识

1、节点与节点类型

1. 如何获得元素节点

   var elementNode=document.querySelector('selector');
   var elementNodes=document.querySelectorAll('selector');
   

2. 如何获得属性节点（一个元素节点的html属性）

   var attrs=elementNode.attributes;   //返回elementNode的所有属性节点的集合
   var attr=elementNode.getAttrubuteNode('attrName');//返回elementNode指定的属性节点
   

3. 如何获得文本节点

   var subNode=elementNode.firstChild;   //返回元素节点的第一个子节点
   var subNode=elementNode.lastChild;   //返回元素节点的最后一个子节点
   

4. 如何获得所有的子节点：childNodes

   var temp=elementNode.childNodes;
   

5. 三大节点类型：nodeType
   三大节点：元素节点（<div></div>）、属性节点（title='标题'）、文本节点。
   节点的三大属性：nodeType、nodeName、nodeValue。
   返回节点的类型：元素节点–1、属性节点–2、文本节点–3

2、属性的特性：也叫作属性的“描述符”

属性：利用var声明的变量、对象的属性、对象的方法。
一个属性要么具备数据特性，要么具备访问器特性。

1. 属性的数据特性：枚举性、可写性、取值、可配置性。
   一个属性被创建出来之后，默认具备属性的数据特性。
   Vue实例中data数据区所有的变量都具备访问器特性，不具备数据特性。

2. 属性的访问器特性：枚举性可配置性、getter、setter。

   getter：当获取属性取值时执行的代码（get:function(){}）。
   setter：当设置属性取值时执行的代码（set:function(){}）。

   getter（可以拦截用户为变量的使用）和setter（可以拦截用户对变量的赋值）可以成功的实现数据拦截，例：

   //有两个window下的属性：a,x。实现x对a的响应。
   //修改x的值，a也变。
   //获取x的值，返回a的值。
   
   var a = 1000;
   Object.defineProperty(window,'x',{
   	enumberable:true,	//可枚举
   	configurable:true,	//可配置
   	get:function(){		//有人使用x变量了
   		return a;
   	},
   	set:function(newValue){		//有人为X变量赋新值了
   		a = newValue;
   		// console.log(newValue)
   	}
   })
   

3. 读取属性的特性：
   Object.getOwnPropertyDescriptor(对象,'属性');
Object.getOwnPropertyDescriptors(对象))

   var x=100,y=200,z='abc';
   var temp=Object.getOwnPropertyDescriptor(window,"x");
   console.log(temp);
   

4. 设置属性的特性：

   Object.defineProperty(对象,'属性',{描述符});
   Object.defineProperty(对象,{
   	属性:{描述符}
   	属性:{描述符}
   })
   

3、利用利用Object的方法遍历对象的可枚举属性

Object.keys(对象)：遍历对象的可枚举属性名，结果为数组。
Object.values(对象)：遍历对象的可枚举属性值，结果为数组。
Object.entries(对象)：遍历对象的可枚举属性名和属性值，结果为二维数组。

var obj = {a:100,b:200,c:300,d:400,e:'abC'}
console.log(Object.keys(obj))	//["a", "b", "c", "d", "e"]
console.log(Object.values(obj))		//[100, 200, 300, 400, "abC"]
console.log(Object.entries(obj))	//[["a", 100]["b", 200]["c", 300]["d", 400]["e", "abC"]]

4、ES6为数组新增的静态方法

Array.from()：将类数组和可遍历对象转换为数组。
我们这里用来遍历NodeList对象、NameNodeMap对象。

1. 类数组（长得像数组的对象like-array object）

   //对象的属性必须是整数，对象必须具备length属性。例：
   let obj={“0”:100,“1”:200,“2”:300,length:3}
   let array=Array.from(obj);
   

2. 可遍历对象（lterator）：可以使用for-of遍历的对象

   原生的可遍历对象：数组、字符串、Set、Map、NodeList、NameNodeMap

   for-in和for-of的区别：for-in用来遍历对象，for-of用来遍历可遍历的对象
   NodeList对象：DOM操作当中找到的包含多个标记的元素节点。
   NameNodeMap对象：DOM操作当中找到的属性节点的集合。
   A. 利用for-of遍历NodeList对象：

   let nodes = document.querySelectorAll('.box');	//[Object NodeList]
   for(let item of nodes){
   	console.log(item)
   }
   let temp = Array.from(nodes)
   console.log(temp)
   

   B. 利用for-of遍历NameNodeMap对象：

   <a href="#" title="链接" target="_blank" class="lj">超级链接</a>
   
   let ljNode = document.querySelector('.lj');
   let attrs = ljNode.attributes;
   console.log(attrs);
   for(let item of attrs){
   	console.log(item)
   }
   let temp = Array.from(attrs)
   console.log(temp)
   

5、ES6为字符串新增的方法

startWith(str)：判断字符串是否以指定的子串str开头。

//例：判断.lj元素节点的所有属性是属性还是指令。
<a href="#" title="链接" target="_blank" class="lj" v-text='wenben' v-ok='message'>超级链接</a>

let ljNode = document.querySelector('.lj');
let attrs = ljNode.attributes;
Array.from(attrs).forEach(item=>{
	if(item.nodeName.startsWith('v-')){
		console.log(item.nodeName + '是指令')
	}else{
		console.log(item.nodeName + '是属性')
	}
})

6、ES6类的书写方式

class 类名{
	constructor(){//构造函数（创建实例的同时自动执行的函数叫做构造函数,在构造函数例this是指向实例的）}
	方法名(){//方法}
}

//例：利用ES6类的书写方式定义Person类并创建p实例
class Person{
	constructor(name,sex,age){
		this.name = name;
		this.sex = sex;
		this.age = age;
	}
	showName(){
		return this.name;
	}
}
var p = new Person('小惜','女',21);	
console.log(p.showName())