когда допустимо выводить HTML-код из Javascript?

Question

Я прочитал кусок кода Javascript, где программист добавил что-то похожее на это:

html = " 
        <div class='hidden-context-menu'>
          <ul><li><a class='select-all'>All</a></li>
              <li><a class='select-none'>None</a></li>
               ...
               ...
               ...
          </ul>
        </div>
 "

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

output_html(html);

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

Такая практика поощряется или ее следует рассматривать как неправильный подход?

Answer 1

Вывод HTML таким способом может привести к большому количеству головной боли в будущем, по той же причине, по которой CSS должен быть внешним: его труднее найти, смешивать с несвязанным кодом и часто приводить к ненужному повторению.Если фреймворк, который вам сказали использовать, требует этого, или если бывший разработчик загадил код в нем, на самом деле не так уж много можно сделать.

---

Редактировать: следующий код будетвыполнять ту же функцию, и в будущем ею будет легче манипулировать:

var div = document.createElement("div");
div.className = "hidden-context-menu";

var ul = document.createElement("ul");

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-all";
li.appendChild(a);
ul.appendChild(li);

var li = document.createElement("li");
var a = document.createElement("a");
a.className = "select-none";
li.appendChild(a);
ul.appendChild(li);

div.appendChild(ul);

И, кстати, как сказал вышеприведенный плакат, Javascript не должен быть единственным механизмом для вывода HTML;за это должна отвечать HTML-страница!Однако в приложениях «webappy» это нормально.

Answer 2

Я бы сказал, что полагаться на Javascript для генерации вашего HTML, вероятно, плохая идея.Что, если у пользователя отключен Javascript в браузере?

Я думаю, что более распространенным является поиск HTML, генерируемого серверным скриптом, таким как PHP.Получившаяся страница, полученная клиентом, будет такой же, какой она была бы, если бы PHP не использовался, а разработчик просто многократно набирал HTML.

Answer 3

Какой абсолютно ужасный код ... они должны были использовать лучшее имя переменной, чем 'html'.

Что касается неправильного подхода - в некоторых браузерах есть проблемы с прямой модификацией, если это страница XHTML.Если он не генерируется динамически, вам лучше вставлять его вместе с остальным HTML и использовать CSS, чтобы скрывать / показывать его при необходимости.

Для функциональности типа раскрывающегося меню я обычно оставляю этопоказывается с исходным CSS, но затем JavaScript скрывает его при загрузке страницы - таким образом, если JS выключен, они просто имеют полностью расширенные меню, а не доступ к вещам более низкого уровня.Если вы сделаете так, чтобы раздел manu, связанный с текущей страницей, был расширен, вам не нужно этого делать, это просто означает, что больше кликов будет переходить на каждую страницу, чтобы добраться до контента, который они ищут.

В вашем случае, поскольку для якорей нет «href», я предполагаю, что эти элементы работают только при включенном JavaScript, поэтому я действительно не вижу проблем с его вставкой через JS.(а что касается вставки HTML вместо выполнения по элементам ... если это HTML, а не XHTML, у меня нет проблем со вставкой строки, так как я считаю, что ее легче поддерживать ... и будет ли она на самом деле в файле HTML, я говорю, что есть еще больше причин сохранять его как строку HTML)