JavaScriptを使用して記事のツリーコメントを整理します

私はプロのウェブ開発者ではないことをすぐに予約しますが、楽しみのためだけでなく自己開発のためにもそれをしています。
私の開発でコメントの可能性を実装する必要がありました。 単純なコメント構造には興味がなくなったため、 ツリービューが必要でした。
最初は自分で実装しようとしましたが、その後、発明されたホイールの描画のためにインターネットリソースに頼ることにしました )))

私の目に留まった最も興味深いリソース( 1、2、3、4 )は、一般的な開発のために読むことができます。
原則として、提案されたアイデアのほとんどは、既存のデータベースとアプリケーションのロジックを大幅に変更する必要があります。
そのため、私は車輪の元の形を発明し始めることにしました 。 残念ながら、サーバースクリプトとデータベースのみを使用して、ツリーのようなコメントの派生に関する安定した正しい作業を提供することができませんでした。 しかし、それは異なって判明しました...
いつものように、アイデアが生まれました。 本格的なコメントツリーを表示するには、それが必要でした(私の場合)。

理由なしにデータベーステーブルからデータを取得する方法は、コメント出力のphp関数(禁止形式)に直接進みます。

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


提案されたテーブル構造を見ると、送信されたパラメータを確認できます。
次に、データベースからのコメントごとにこの関数を呼び出して、このリスト(順不同!)をブラウザーに渡します。
今から楽しい部分です。 ブラウザ自体は、「ツリー」にコメントを配置できます。 これを行うには、ユーザー側でjavascript関数を呼び出して、コメントIDと親-「親」コメントのIDの2つのパラメーターを渡す必要があります。

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


コメントに親がない場合(親= 0)、コメントがルートになります。
したがって、コメントはユーザーのブラウザによってツリーに配置され、サーバーからの負荷が軽減され、データベースとサーバースクリプトの構造が簡素化されます。 しかし、これはブラウザの負荷を増加させるので、選択する必要があります...

Source: https://habr.com/ru/post/J49668/


All Articles