相关基础知识点
// 可以让 任意函数/方法 成功临时指定成对象的方法进行调用 - call/apply
// 1. 根据伪数组生成 真数组
const lis = document.getElementsByTagName("li");
const arr = [].slice.call(lis);
const relArr = Array.from(lis); // ES6语法
// 2. node.nodeType // 得到节点类型
// 3. 给对象添加属性,指定 属性描述符:存取描述符 get(),set() - 数据描述符
Object.defineProperty(ojb, propertyName, {
get(){return this.firstNAme+"-"+this.lastNAme},
set(newVAlue){const names=newValue.split("-");this.firstNAme=names[0];this.lastNAme=names[1]},
})
// 4. Object.keys(obj); // 得到对象自身可枚举属性组成的数组
// 5. obj.hasOwnProperty("name") // 判断 obj 对象自身属性是否包含 name
// 6. DocumentFragment 文档碎片(高效更新多个节点)
内存中用来存储多个节点对象 的容器,不与任何 页面/页面节点 对应
思路: 先将节点复制到内存中,在内存中修改完后,一次性添加到页面中
// 1. 创建一个内存中 节点容器
const fragment = document.createDocumentFragment();
// 2. 取出 div 中所有节点,转移到 fragment 中
const div = document.getElementById("demo");
let child; // newPos = appendChild(child) 会将 child 从原来位置取下来,放到 newPos 的最后位置
while(child=div.firstChild){fragment.appendChild(child)}
// 3. 在内存中遍历修改
const nodes = fragment.children[0].childNodes;
Array.prototype.slice.call(nodes).forEach(node=>{
if(node.nodeType === 1){
node.textContent = "丘魔的兵"
}
})
// 4. 一次性添加到页面
div.appendChild(fragment);
在 git 上,有个开源项目,剖析了 vue 原理
数据代理
数据绑定