mise en forme des chaînes jQuery qui devraient s'étendre sur plusieurs lignes

Une belle chose avec jQuery, c'est que la syntaxe (comme lors de la série) permet à votre script pour s'étendre sur plusieurs sauts de ligne pour la facilité de mise en forme et la lisibilité.

Est-il un équivalent/méthode préférée lorsque l'on est l'ajout d'une grande chaîne de HTML?

Par exemple, il serait bien de faire quelque chose comme ceci:

 $("#theObject")
    .doSomething()
    .append("
        <div>
             <div>
                  Hello World
             </div>
        </div>
    ")

Qui ne fonctionne pas, mais est-il quelque chose qui ressemble à ça pour le rendre plus facile à lire HTML formaté à l'intérieur d'un script jQuery?

source d'informationauteur DA. | 2009-11-12

formatting jquery

31

Ajouter un \ à la fin de chaque ligne
```
$("#theObject").doSomething()
.append("
    <div>\
         <div>\
              Hello World\
         </div>\
    </div>\
")
```
Modifier 2016:

Si vous utilisez ES6 (ES2015), vous pouvez maintenant utiliser modèle de littéraux.

 $("#theObject")
.doSomething()
.append(
    "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>"
);

Ce serait la meilleure pratique pour charger votre .append() contenu dans le var, comme suit:

var append_me =
     "<div>"
         +"<div>"
              +"Hello World"
         +"</div>"
    +"</div>";

$("#theObject").doSomething().append(append_me);

4

Si vous utilisez jQuery, et votre littéraux de chaîne vont être des éléments html, vous pourriez tout aussi bien créer ces éléments directement sur la page et de les cacher, alors faire référence à ces éléments dans le DOM au lieu de taper comme des chaînes de caractères. Par exemple, vous pouvez le mettre sur votre page:
```
<div id="myContent" style="display: none;">
    <div>
        <div>
            Hello World
        </div>
    </div>
</div>
```
Et réécrire votre code comme ceci:
```
$("#theObject")
.doSomething()
.append(
    $('#myContent').html();
);
```
Vous pouvez également ajouter les DOM élément lui-même si vous avez seulement besoin de faire référence à la fois, au lieu de copier son contenu à chaque fois.
3

Cela peut être fait plus facile!

N'utilisez pas le "+" ou le "/".

Utiliser un modèle de littéraux: `
```
$("#theObject").doSomething()
.append(`
    <div>
         <div>
              Hello World
         </div>
    </div>
`)
```
De la Documentation sur le modèle des littéraux peuvent être trouvés ici.

@Geuis commenté, ce ne peut être utilisé à partir de es2015/ES6 (Puis-je utiliser le modèle de littéraux).
1

Il n'y a pas de manière élégante de représenter une belle HTML structure de l'arbre en Javascript à l'aide de cordes. Vous aurez simplement à utiliser un tas de concaténation, qui est toujours va être laid, et pourrais-je ajouter qu'il effectue terriblement. C'est ce que je fais:
1. Écrire mes marques dans mon éditeur de texte favori avec tous les espaces que je veux
2. De l'enregistrer dans le même endroit que votre fichier JS, avec le même nom + ".txt", comme l'extension
3. Mon éditeur a trouver et remplacer avec des RegEx, donc je ne replace-tous avec quelque chose comme >[\s]*<
4. Copier l'un doublé suite à mon fichier Javascript comme une variable de chaîne
5. À l'annulation de la remplacer sur le .fichier txt
Cela suppose, évidemment, que chaque fois que vous modifiez le balisage, vous aurez besoin de re-faire le remplacer et de la copier. Je suis entré dans cette habitude assez rapidement, cependant. En outre, jQuery sera en mesure de traiter plus rapidement parce qu'il y aura moins de caractères à analyser.

var str  = '<div>';
str += '<div>';
str += 'Hello World';

$("#theObject")
    .doSomething()
    .append(str)

Vous devez vous connecter pour publier un commentaire.