我写的这段把对象数据变为DOM节点的代码该怎么优化?
简单介绍下思路: 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('div');
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('div');
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('div');
activityType.className = 'activity-type';
var activityTypeText = document.createElement('div');
activityTypeText.className = 'activity-type-text';
activityTypeText.innerHTML = type;
var activityTypeDate = document.createElement('div');
activityTypeDate.className = 'activity-type-date';
activityTypeDate.innerHTML = moment(obj.time).fromNow();
activityType.appendChild(activityTypeText);
activityType.appendChild(activityTypeDate);
var activity = document.createElement('div');
activity.className = 'activity';
activity.appendChild(activityType);
activity.appendChild(activityUser);
activity.appendChild(activityInfo);
return activity;
}
辣不辣? 就这种玩意儿。。。咋优化呢? 前端对ES6的支持不理想,所以字符串模板不能用,又不好添加框架,硬写的话,应该怎么做? 这样写对比字符串拼接然后直接innerHTML有什么劣势?
6 回复
我现在做的就是直接拼字符串来做的, 也没用到es6,, 感觉比这个稍微看的清楚些, 你这样append , 都不知道最终返回的是个什么
@liujavamail 是的呀。。。关键是一旦要求改。。。。画美不看,所以提出来看看大家有啥好主意没
这个时候就显示出jQuery的用处了…
@DevinXian jquery怎么用呢?
@lzszone jquery可以节省很多代码呀,不过使用模板引擎更方便吧
不管优不优化 我都会先加上空行和注释 =。=