Pengenalan ringkas kepada idea:
ajax ke objek, kemudiandari 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?