javascript - How should I optimize the code I wrote to convert object data into DOM nodes?

Question

Briefly introduce the idea:
ajax to the object, and then From child to parent Create objects in sequence, set styles, and add levels.
Then the code looks like this:

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;
}

Just this kind of thing. . . How to optimize?
The front-end support for ES6 is not ideal, so string templates cannot be used, and it is difficult to add a framework. If it is hard-written, what should be done?
What are the disadvantages of writing like this compared to string concatenation and then directly innerHTML?

Answer 1

First of all, the [procedural programming] used by JS humans to maintain the DOM is inferior to the template style [declarative programming] in terms of maintainability. Consider a simple line of <p>xxx</p> and a big document.createElement('p').... There is a world of difference in maintainability.

So, how to bind data to HTML using a method similar to string templates without the syntax sugar of ES6 or various frameworks? Here is a solution that jQuery author once recommended:

First of all, you can make a clumsy <script> tag in HTML to install the template. Note that this template itself does not have any dependence on JS. You can also put the template outside <body>.

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

When rendering data, directly take out the HTML text in the template and use JS to do regular replacement:

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

Refer to this blog of mine:
http://ewind.us/2016/js-rende...

Of course, fully resetting innerHTML has performance risks. But if the data is fully updated, even if the code is written in native JS, the final number of DOM operations is actually the same as directly resetting innerHTML. There are several ideas at this time:

1. React was born for this kind of problem. Think of React as your innerHTML, reset it all at will, and React will help you diff and update the DOM as needed. Wouldn't it be nice?

2. Vue uses dependency collection to directly find the location of the changed DOM and update it as needed. It doesn’t even use diff, and I don’t know how advanced it is.

3. Maintain the diff algorithm (such as inserting only at the end) and DOM operations that meet business needs. Maybe it’s the prelude to the birth of a new wheel (

Answer 2

The structure is too complex, inelegant, purely physical resistance, and debugging is simply a nightmare. There will be too much code maintenance in the future!
It is recommended to use a front-end JS template engine, eg: artTemplate, which just introduces a JS file.

Answer 3

The simplest advantage: faster than innerHTML.
When you add hundreds of these structures at once, you can experience the obvious speed difference