数据绑定

动态绑定数据

1. 建立元素 利用动态建立DOM方法 动态建立DOM对象
   • DOM回流(reflow):在页面中某个元素的插入 删除 位置 大小发生变化 那么会从新计算其余元素的位置 这样很是消耗性能
   • DOM重绘（repaint）:当页面中的元素背景 字体颜色发生变化时 那么浏览器须要对其进行从新绘制 这种现象称为重绘

for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    ul.appendChild(newLi);
}
复制代码

2. 利用文档碎片 一个经过DOM API建立的临时存放DOM元素的容器

let frg = document.createDocumentFragment();  //建立文档碎片
for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    frg.appendChild(newLi);
}
ul.appendChild(frg);
frg = null; //当插入后 释放frg内存

复制代码

3. 拼接字符串 + innerHTML

let str = '';
for(let i = 0;i <ary.length; i ++){
    let cur = ary[i];
    str +='<li>' + 'name' + cur.name + 'age:' + cur.age + '</li>';
}
console.log(str);
ul.innerHTML = str;
复制代码

4. 模板字符串

let p = ``;
for(let i = 0;i<arr.length;i++){
    let num = arr[i];
    p +=`<li>
    <strong>name:${num.name}</strong>
      <strong>age:${num.age}</strong>
    </li>`
}
ul.innerHTML = p;
复制代码