簡單介紹下想法：
ajax到對象，然後從子到父依序建立對象，設定樣式，新增層級。
然後程式碼長這樣：
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;
}就這種玩意兒。 。 。咋優化呢？
前端對ES6的支援不理想，所以字串模板不能用，又不好加框架，硬寫的話，該怎麼做？
這樣寫比較字串拼接然後直接innerHTML有什麼劣勢？
代言2017-06-12 09:30:43
首先，JS 人肉維護 DOM 的【過程式設定】在可維護性上是劣於模板風格的【聲明式程式設計】的。考慮一行簡單的 xxxdocument.createElement('p')...，它們在可維護性上有天壤之別。
那麼，怎樣在沒有 ES6 或各種框架語法糖的情況下，採用類似字串模板的方式，將資料綁定到 HTML 呢？這裡有一個 jQuery 作者曾經推薦的方案：
首先可以在 HTML 裡搞個猥瑣的
