1、JS自定义方法将 __proto__:NodeList类型 → 类型__proto__:Array[0]
toArray(fakeArr){ //将假数组转为真数组,以假乱真
//创建模板编译工具TemplateCompiler
class TemplateCompiler{
//构造函数
//视图线索,全局vm对象
constructor(el,vm){
//缓存重要属性
this.el=this.isElementNode(el)?el:document.querySelector(el);
this.vm=vm;
//判断视图存在
if(this.el){
//编译工具要做的核心的三件事
var fragment = this.node2fragment(this.el); //1、把模板内容放入内存
//debugger; //断点测试
this.compile(fragment); //2、解析模板
this.el.appendChild(fragment); //3、把内存结果返回到页面中
}
}
//*************工具方法(自定义)*********************
isElementNode(node){
return node.nodeType === 1; //1元素节点,2属性节点,3文本节点
}
isTextNode(node){
return node.nodeType === 3;
}
toArray(fakeArr){ //将假数组转为真数组,以假乱真
return [].slice.call(fakeArr)
}
//*************核心方法*********************
//把模板放入内存,等待解析
node2fragment(node){
var fragment = document.createDocumentFragment(),child; //(1)、创建内存片段
//debugger; //断点测试
while(child = node.firstChild){ //(2)、把模板内容丢到内存,循环读取
fragment.appendChild(child);
}
return fragment; //(3)、返回
}
compile(parent){
var childNodes=parent.childNodes; //(1)、获取字节点
//(2)、遍历每一个节点
var arr = this.toArray(childNodes);
debugger;
//(3)、判断节点类型,属性节点(解析指令)、文本节点(解析指令),
//(4)、如果还有节点,继续解析
}
}