javascript - Comment dois-je optimiser le code que j'ai écrit pour convertir les données d'objets en nœuds DOM?

Question

Une brève introduction à l'idée :
ajax à l'objet, puis de l'enfant au parentcréez des objets, définissez des styles et ajoutez des niveaux.
Ensuite, le code ressemble à ceci :

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

C'est tout. . . Comment optimiser ?
La prise en charge frontale d'ES6 n'est pas idéale, donc les modèles de chaînes ne peuvent pas être utilisés et il est difficile d'ajouter un framework S'il est écrit en dur, que dois-je faire ?
Quels sont les inconvénients d'écrire de cette façon par rapport à la concaténation de chaînes puis directement innerHTML ?

Answer 1

Tout d'abord, la [programmation procédurale] utilisée par les humains JS pour maintenir le DOM est inférieure à la [programmation déclarative] de style modèle en termes de maintenabilité. Considérez une simple ligne de <p>xxx</p> 和一大坨 document.createElement('p')..., ils font toute la différence en termes de maintenabilité.

Alors, comment lier des données au HTML en utilisant une méthode similaire aux modèles de chaînes sans le sucre syntaxique d'ES6 ou de divers frameworks ? Voici une solution recommandée par l'auteur de jQuery :

Tout d'abord, vous pouvez créer un extérieur obscène <script> 标签装模板，注意这个模板本身对 JS 并没有任何依赖，也可以把模板放在 <body> en 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>

Lors du rendu des données, supprimez directement le texte HTML du modèle et utilisez JS pour effectuer un remplacement régulier :

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

Référez-vous à mon blog :
http://ewind.us/2016/js-rende...

Bien sûr, la réinitialisation complète d'innerHTML présente des risques en termes de performances. Mais si les données sont entièrement mises à jour, même si le code est écrit en JS natif, le nombre final d'opérations DOM est en fait le même que la réinitialisation directe d'innerHTML. Il y a plusieurs idées en ce moment :

1. React est né pour ce genre de problème. Considérez React comme votre innerHTML, réinitialisez tout à volonté, et React vous aidera à comparer et à mettre à jour le DOM si nécessaire. Ne serait-ce pas sympa ?

2. Vue peut trouver directement l'emplacement du DOM modifié via la collection de dépendances et le mettre à jour à la demande. Il n'utilise même pas de différence, et je ne sais pas quelle est sa hauteur.

3. Maintenir l'algorithme de comparaison (comme l'insertion uniquement à la fin) et les opérations DOM qui répondent aux besoins de l'entreprise. C'est peut-être le prélude à la naissance d'une nouvelle roue (

Answer 2

La structure est trop complexe, inélégante, une résistance purement physique, et le débogage est tout simplement un cauchemar. Il y aura trop de maintenance de code à l'avenir !
Il est recommandé d'utiliser un moteur de template JS front-end, par exemple : artTemplate, qui introduit simplement un fichier JS.

Answer 3

L'avantage le plus simple : plus rapide que innerHTML.
Lorsque vous ajoutez des centaines de ces structures à la fois, vous pouvez constater la différence de vitesse évidente