Pull to refresh

Организуем древовидные комментарии к статьям c помощью JavaScript

Reading time2 min
Views9.9K
Сразу оговорюсь, что не являюсь профессиональным web-разработчиком, а занимаюсь этим just for fun, а также для саморазвития.
Потребовалось реализовать в моих разработках возможность комментирования. Простые структуры комментариев меня уже не интересуют, поэтому захотелось древовидности.
На первых порах старался реализовать ее самостоятельно, но потом решил обратиться к ресурсам интернета за чертежами изобретенных колес )))

Наиболее интересные ресурсы, попашиеся мне на глаза (1, 2, 3, 4), можно почитать для общего развития.
Как правило, большинство предлагаемых идей требуют существенных изменений имеющихся баз данных и логики работы приложения.
Поэтому решил заняться изобретением колеса своей оригинальной формы. К сожалению, у меня не получилось обеспечить стабильную и правильную работу по выводу древовидных коментариев только лишь с помощью серверных скриптов и баз данных. Но получилось по другому…
Идея пришла, как всегда внезапно. Для вывода полноценного дерева комментариев потребовались (в моем случае):
  • Таблица в MySQL со следующими именами полей: id (int), parent (int), author (text), comment (text). Первое поле — уникальный id комментария, второе — parent — id комментария родителя, третье — author — имя комментирующего, четвертое — comment — собственно сам комментарий.
  • PHP
  • Браузер с включенным JavaScript и знающий о DOM. О DOM почитать можно здесь: http://javascript.ru/start/dom/intro

Как получать данные из таблиц БД говорить небуду, перейду сразу к php-функции вывода комментария (в упрещенном виде):

function show_comment($id,$parent,$author,$comment) {
echo "<div id='comment$id'>$author: $comment</div>";
}


О передаваемых параметрах можно догодаться, взглянув на предложенную структуру таблицы.
Затем, вызывая эту функцию для каждого комментария из БД, передадим этот список (неупорядоченный!) браузеру.
Теперь самое интересное. Браузер сам в состоянии расставить комменатрии в «дерево». Для этого необходимо вызвать javascript-функцию на стороне пользователя, передав ей два параметра — id комментария, и parent — id комментария-«родителя»:

document.getElementById("comment"+parent).appendChild(document.getElementById("comment"+id));


Если же комментарий не имеет родителя (parent=0), то он будет являться корневым.
Таким образом, комментрии будут расставлены в дерево браузером пользователя, что снизит нагрузку с сервера и упростит структуру БД и серверных скриптов. Но при этом возрастает нагрузка на браузер, так что приходится выбирать…
Tags:
Hubs:
-2
Comments33

Articles