在JavaScript/jQuery中管理用戶列表的最佳方法是什麼？

Question

我正在使用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 。只需要指向正確的方向真的...

Answer 1

解決這個問題的最簡單方法是重新呈現清單，只要它發生變化。但是，對於大型列表，這可能效率低下，您可以通過簡單地向每個元素添加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] 
); 

有一個great talk由Ryan佛羅倫薩整合反應生成現有的項目，而不是重新寫了這一切。