在JavaScript/jQuery中管理用户列表的最佳方法是什么

What is the best method to manage a user list in JavaScript/jQuery?

本文关键字：列表 最佳 方法 是什么 用户 管理 JavaScript jQuery      更新时间：2023-09-26

我正在使用socket.io构建聊天室应用程序，但我在理解保持聊天室用户列表更新的正确和最简单的方法方面遇到了问题。

当客户端加入聊天室时，它会发送用户列表，并使用以下代码更新用户列表面板：

  socket.on('names', function(channel,nicks){
    for (var nick in nicks) {
        $('#users').append('<li class="list-group-item" id="' + nick + '">' + nick + '</li>');
    }
  });

但目前它不考虑另一个用户何时加入或在这一点之后离开，因此从客户端加入的那一刻起，用户列表在整个持续时间内都是相同的。

当另一个用户加入或离开时会触发这些事件：

  socket.on('join', function(channel,nick){
    // need to add the user to the user list, sort the user list
    // alphabetically and then update the list group html
  });
  socket.on('part', function(channel,nick){
    // need to delete the user from the user list, sort the user list
    // alphabetically and then update the list group html
  });
  socket.on('quit', function(nick){
    // need to delete the user from the user list, sort the user list
    // alphabetically and then update the list group html
  });

我应该考虑什么来完成我在这里需要的东西？

我猜测，与其中继服务器响应并从中构建HTML，不如在客户端保留一个用户列表数组，根据服务器响应进行更新，然后从中重新构建HTML。只需要指向正确的方向真的。。。

解决此问题的最简单方法是在列表发生更改时重新渲染列表。然而，对于大型列表，这可能效率低下，并且您可以通过简单地向每个元素添加一个ID，然后使用它更新或删除它们来节省大量时间

使用jQuery，这个过程可能会变得有点复杂，因为您将在DOM中管理模型，而不是在代码中管理模型。但这绝对是可能的。

另一种方法是查看像React这样的库。

React要求您描述您的界面。然后，每当您更改模型时，它将负责重新渲染它。额外的好处是，它检查DOM的最后一个状态，并且只对已更改的位应用更新。

var UserList = React.createClass({
  getInitialState: function() {
    users: []
  },
  componentDidMount: function() {
    // set up socket listeners
    // every time you want to update the user list
    this.setState({ users: updatedVersionOfUsers });
  },
  render: function() {
    var users = this.state.users;
    // describe what this component should look like
    return (
      <ul>
        {users.map(function(user) {
          return (
            <li className='list-group-item'>{user}</li>
          );
        }}
      </ul>
    );
  }
})

现在，您所要考虑的就是确保模型（this.state.users）是最新的。只要你用this.setState更新它，React就会完成剩下的工作

您甚至可以将React与jQuery一起使用。只需找到您希望这个React组件位于其中的元素，并在那里进行渲染。

React.render(
  <UserList />,
  $('#someElement')[0]
);

Ryan Florence有一篇关于将React集成到现有项目中的精彩演讲，而不是全部重写。

相关文章：