javascript - Bagaimanakah saya harus mengoptimumkan kod yang saya tulis untuk menukar data objek ke nod DOM?

Question

Pengenalan ringkas kepada idea:
ajax ke objek, kemudian dari anak kepada ibu bapacipta objek, tetapkan gaya dan tambah tahap.
Kemudian kodnya kelihatan seperti ini:

function Activity(obj) {
  var activityContent = document.createElement('a');
  activityContent.innerHTML = obj.post.c;
  activityContent.className = 'activity-content';
  activityContent.style.overflow = 'hidden';
  activityContent.href = '/t/'+obj.tid+'#'+obj.pid;
  var activityTitleText = document.createElement('span');
  activityTitleText.innerHTML = obj.oc.t;
  activityTitleText.style.overflow = 'hidden';
  var activityTitle = document.createElement('p');
  activityTitle.className = 'activity-title';
  var activityTitleA = document.createElement('a');
  activityTitleA.appendChild(activityTitleText);
  activityTitleA.href = '/t/'+obj.tid;
  var activityInfo = document.createElement('span');
  activityInfo.className = 'activity-info';
  if(obj.forum) {
    var color = obj.forum.color || 'orange';
    var forum = document.createElement('a');
    forum.href= '/f/'+obj.fid;
    var forumText = document.createElement('span');
    forumText.className = 'activity-title-forum';
    forumText.style.backgroundColor = color;
    forumText.innerHTML = ' '+obj.forum.abbr+' ';
    forum.appendChild(forumText);
    activityTitle.appendChild(forum);
  }
  if(obj.toMyForum) {
    var color = obj.toMyForum.color || 'orange';
    var toMyForum = document.createElement('a');
    toMyForum.href= '/m/'+obj.toMyForum._key;
    var toMyForumText = document.createElement('span');
    toMyForumText.className = 'activity-title-forum';
    toMyForumText.style.backgroundColor = color;
    toMyForumText.innerHTML = ' '+obj.toMyForum.abbr+' ';
    toMyForum.appendChild(toMyForumText);
    activityTitle.appendChild(toMyForum);
  }
  if(obj.myForum) {
    var color = obj.myForum.color || 'orange';
    var myForum = document.createElement('a');
    myForum.href= '/m/'+obj.myForum._key;
    var myForumText = document.createElement('span');
    myForumText.className = 'activity-title-forum';
    myForumText.style.backgroundColor = color;
    myForumText.innerHTML = ' '+obj.myForum.abbr+' ';
    myForum.appendChild(myForumText);
    activityTitle.appendChild(myForum);
  }
  activityTitle.appendChild(activityTitleA);
  activityInfo.appendChild(activityTitle);
  activityInfo.appendChild(activityContent);
  var activityUser = document.createElement('p');
  activityUser.className = 'activity-user';
  activityUserA = document.createElement('a');
  activityUserA.href = '/activities/'+obj.uid;
  var activityUserAvatar = document.createElement('img');
  activityUserAvatar.className = 'activity-user-avatar';
  activityUserAvatar.src = '/avatar/'+ obj.uid;
  activityUserA.appendChild(activityUserAvatar);
  var username = document.createElement('a');
  username.href = '/activities/'+obj.uid;
  username.innerHTML = obj.user.username;
  activityUser.appendChild(activityUserA);
  activityUser.appendChild(username);
  var type;
  switch (obj.type) {
    case 1:
      type = 'Po';
      break;
    case 2:
      type = 'Re';
      break;
    case 4:
      type = 'Rc';
      break;
    default:
      type = 'X';
  }
  var activityType = document.createElement('p');
  activityType.className = 'activity-type';
  var activityTypeText = document.createElement('p');
  activityTypeText.className = 'activity-type-text';
  activityTypeText.innerHTML = type;
  var activityTypeDate = document.createElement('p');
  activityTypeDate.className = 'activity-type-date';
  activityTypeDate.innerHTML = moment(obj.time).fromNow();
  activityType.appendChild(activityTypeText);
  activityType.appendChild(activityTypeDate);
  var activity = document.createElement('p');
  activity.className = 'activity';
  activity.appendChild(activityType);
  activity.appendChild(activityUser);
  activity.appendChild(activityInfo);
  return activity;
}

Itu sahaja. . . Bagaimana untuk mengoptimumkan?
Sokongan bahagian hadapan untuk ES6 tidak sesuai, jadi templat rentetan tidak boleh digunakan, dan sukar untuk menambah rangka kerja Apakah yang perlu saya lakukan jika ia terpaksa menulis?
Apakah kelemahan menulis dengan cara ini berbanding dengan penggabungan rentetan dan kemudian secara langsung innerHTML?

Answer 1

Pertama sekali, [pengaturcaraan prosedur] yang digunakan oleh manusia JS untuk mengekalkan DOM adalah lebih rendah daripada [pengaturcaraan deklaratif] gaya templat dari segi kebolehselenggaraan. Pertimbangkan barisan ringkas <p>xxx</p> 和一大坨 document.createElement('p')..., mereka membuat perbezaan dunia dalam kebolehselenggaraan.

Jadi, bagaimana untuk mengikat data ke HTML menggunakan kaedah yang serupa dengan templat rentetan tanpa gula sintaks ES6 atau pelbagai rangka kerja? Berikut ialah penyelesaian yang pernah disyorkan oleh pengarang jQuery:

Pertama sekali, anda boleh membuat <script> 标签装模板，注意这个模板本身对 JS 并没有任何依赖，也可以把模板放在 <body> lucah di luar dalam HTML.

<script id="my-template" type="text/x-custom-template">
    <p class="xxx">
        <p class="yyy">%name%</p>
        <p class="zzz">%value%</p>
    </p>
</script>

Apabila memaparkan data, keluarkan terus teks HTML dalam templat dan gunakan JS untuk melakukan penggantian biasa:

var template = document.getElementById("my-template").innerHTML;
var html = template
            .replace(/%name%/, data['name'])
            .replace(/%value%/, data['value']);
// insert HTML...

Rujuk blog saya ini:
http://ewind.us/2016/js-rende...

Sudah tentu, menetapkan semula innerHTML sepenuhnya mempunyai risiko prestasi. Tetapi jika data dikemas kini sepenuhnya, walaupun kod itu ditulis dalam JS asli, bilangan akhir operasi DOM sebenarnya sama seperti menetapkan semula innerHTML secara langsung. Terdapat beberapa idea pada masa ini:

1. React dilahirkan untuk masalah seperti ini. Fikirkan React sebagai innerHTML anda, tetapkan semula semuanya sesuka hati, dan React akan membantu anda membezakan dan mengemas kini DOM mengikut keperluan, bukan?

2. Vue boleh mencari terus lokasi DOM yang diubah melalui pengumpulan kebergantungan dan mengemas kininya atas permintaan Ia tidak menggunakan perbezaan, dan saya tidak tahu berapa tingginya.

3. Kekalkan algoritma perbezaan (seperti memasukkan hanya pada penghujung) dan operasi DOM yang memenuhi keperluan perniagaan. Mungkin ia adalah permulaan kepada kelahiran roda baharu (

Answer 2

Strukturnya terlalu kompleks, tidak elegan, rintangan fizikal semata-mata, dan penyahpepijatan hanyalah mimpi ngeri akan terdapat terlalu banyak penyelenggaraan kod pada masa hadapan.
Adalah disyorkan untuk menggunakan enjin templat JS bahagian hadapan, cth: artTemplate, yang hanya memperkenalkan fail JS.

Answer 3

Kelebihan paling mudah: lebih pantas daripada innerHTML.
Apabila anda menambah beratus-ratus struktur ini sekaligus, anda boleh mengalami perbezaan kelajuan yang jelas