форматирование строк jQuery, которые должны занимать несколько строк

Question

Одна приятная вещь с jQuery заключается в том, что синтаксис (например, при объединении в цепочку) позволяет вашему сценарию охватывать несколько разрывов строк для простоты форматирования и удобства чтения.

Существует ли эквивалентный / предпочтительный метод при добавлении большой строки HTML?

Например, было бы неплохо сделать что-то вроде этого:

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

Это не работает, но есть ли что-то похожее на это, чтобы упростить чтение HTML, отформатированного в скрипте jQuery?

Answer 1

Добавить \ в конце каждой строки

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

Изменить 2016:

Если вы используете ES6 (ES2015), теперь вы можете использовать литералы шаблона .

Answer 2

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

Лучше всего загружать содержимое .append () как переменную, например:

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

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

Answer 3

Это можно сделать проще!

Не используйте "+" или "/".

Использовать литералы шаблона: `

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

Документацию по литералам шаблонов можно найти здесь .

---

Как прокомментировал @Geuis, это можно использовать только из es2015 / ES6 ( Могу ли я использовать литералы шаблона ).

Answer 4

Если вы используете jQuery и ваши строковые литералы будут html-элементами, вы также можете просто создать эти элементы прямо на странице и скрыть их, а затем ссылаться на эти элементы в DOM вместо того, чтобы печатать их как строки. Например, вы можете разместить это на своей странице:

<div id="myContent" style="display: none;">
    <div>
        <div>
            Hello World
        </div>
    </div>
</div>

А затем переписать свой код так:

$("#theObject")
.doSomething()
.append(
    $('#myContent').html();
);

В качестве альтернативы вы можете добавить сам фактический элемент DOM, если вам нужно только сослаться на него один раз, вместо того, чтобы каждый раз копировать его содержимое.

Answer 5

Нет элегантного способа представления красивой древовидной структуры HTML в Javascript с использованием строк. Вам просто придется использовать кучу конкатенации, которая всегда будет уродливой, и могу добавить, что она работает ужасно. Вот что я делаю:

1. Напишите мою разметку в моем любимом редакторе со всеми необходимыми пробелами
2. Сохраните его в том же месте, что и ваш файл JS, с тем же именем + ".txt", что и расширение
3. В моем редакторе есть функция поиска и замены с использованием RegEx, поэтому я выполняю замену всего на что-то вроде >[\s]*<
4. Скопируйте однострочный результат в мой файл Javascript в виде строковой переменной
5. Отменить замену в текстовом файле.

Это, конечно, означает, что каждый раз, когда вы меняете разметку, вам нужно будет заново выполнить замену и скопировать ее. Впрочем, я быстро привык к этой привычке. Кроме того, jQuery сможет обрабатывать это быстрее, потому что будет меньше символов для разбора.

Answer 6

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

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