javascript - 使用 PHP 和 JavaScript 更新 DOM 中的用户参与者列表，就像 GitHub Issues 所做的那样

Question

在我的项目管理应用程序中，我想显示一个 HTML 用户列表，其中包含已编辑任务记录的所有用户的缩略图头像。

我将此列表称为参与者列表，就像 GitHub 为 Issues 所做的那样。 GItHUb 显示按日期排序的用户缩略图列表，以显示最近参与 GitHub 存储库中某个问题的活跃用户。 我想在我的任务记录中重现此功能。

因此，当用户编辑任务记录时，他们将被添加到按最近事件排序的参与者列表中。它将在那里显示缩略图。如果用户已经在列表中并且他们进行了另一次编辑，则他们将不会被添加到列表中 2x。相反，如果它们尚未位于缩略图的排序顺序中的位置 1，它们将被移动到该位置!

下面的这个流程更详细地解释了它是如何运作的......

if(user is not in participant list){

    // Add user to DB for this Task record participant list with there Datetime and UserID of the update.
    // Then add there image to the participant list in front of the others at position number 1

}elseif(user is already in participant list){

    if(if user is in DOM HTML participant list at position number 1){

        // update DB participant list with Datetime for this user but do not update the DOM HTML

    }elseif( if user is not in position number 1){

        // update DB with Datetime for user in participant list and then also update the participant 
        // list DOM HTML to remove the users image and then re-add it at position number 1

    }

}

我将使用 PHP 处理用户在后端所做的编辑，因此我可以同时更新上次事件 DateTime 并将它们添加到数据库中的参与者列表 .

然后我想使用 JavaScript 在 DOM 中处理缩略图列表的添加、重新排序等功能。

因此，也许 PHP 可以返回一个 JSON 数据字符串，以指示用户是否需要在 DOM 列表中重新排序，或者如果用户还不存在则添加!

如果有人对如何实现它的 JavaScript 方面有任何想法，我愿意接受所有意见

---

更多流理论:

• 我的 PHP JSON 可以返回一个标志，指示用户头像是否已经在上一个列表中。如果不是，它将知道它需要添加用户，因为他根本不存在。
• PHP 标志还会指示在以前的参与者列表中已经使用并且需要更新其排序顺序的情况。这意味着删除 DOM HTML 中旧排序顺序位置中的先前缩略图并重新添加回位置 1
• 1 的想法是简单地让 PHP 返回整个列表的完整 HTML，所有用户每次都以正确的排序顺序排列，但这意味着即使用户不需要更改位置或添加，它也会更新.这也意味着要传输更多数据，但这是简单的途径，如果我不能从这个问题中得到更好的解决方案，我可能会这样做。
• 重新考虑。我的 PHP 还可以发回一个标志，指示不存在新的排序顺序更改或新用户添加，因此不要进行任何 DOM 更新。然后它只会在新用户添加到列表或以前的用户需要更新排序顺序的情况下发回新的用户列表。

Answer 1

关于您的思考过程的详细信息。我的方法是结合“流动理论”下的第三和第四个要点。清除整个列表并放入新列表将节省昂贵的 DOM 操作/逻辑。让 PHP 告诉您顺序是否更改会阻止任何不必要的 DOM 工作。

此类插入的最佳做法是创建一个 document fragment对于整个列表；您也可以使用模板引擎，但如果您不需要它来做其他任何事情，那就太过分了。