这个极好的网站是如何构建的？

Question

昨晚我发现了一个网站，简直太棒了。这里的网址：

http://yourworldoftext.com/

警告：网站可能是NSFW。

它让我马上想到这个网站是如何构建的。考虑看看页面的源代码并没有透露太多，但如果我看它在Firebug我看到这样的很多表：

<div class="tilecont" style="top: 994px; left: 1320px;"> 
    <table width="100%" cellspacing="0" cellpadding="0" border="0"> 
     <tbody> 
      <tr> 
       <td>A</td> 
       <td>L</td> 
       <td>L</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      <tr> 
      <tr> 
       <td>Y</td> 
       <td>O</td> 
       <td>U</td> 
       <td>R</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      <tr> 
      <tr> 
       <td>B</td> 
       <td>A</td> 
       <td>S</td> 
       <td>E</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      <tr> 
    </table> 
</div> 

的tilecont DIV重复和沿整个页面平铺，和表格内部占据了该DIV的整个宽度和高度。然后，表格里面的每个<tr>都是一排，其中有16个<td>的那一行组成每个字符。

这很难解释，如果你安装了Firebug，你可以简单地将它拖拽到页面上看看。

我认为这是非常聪明的，但我不知道如何将它存储在数据库或其他东西？我试图通过JS文件，但老实说，有很多东西在那里，我要么不知道或不相关的如何存储等我假设它正在向存储的每个keyUp事件上的数据库的AJAX请求该特定“细胞”的新数据？

任何人有任何关于他们如何认为这是完成的输入？

Answer 1

你可能大致正确。该网站知道你的视口的位置，只用16个字符“块”加载可见的部分。该数据库只保存16个char字符串和一个x和y坐标。如果快速拖动，您可以在1x16块中看到更新。

至于发送，如果是我，我会缓存文本，一次只发送一个16个字符“块”。每次编辑时都检查它是否与最后一个块位于相同的块中。如果不发送最后一个块并开始缓存新块。

要使视图保持最新状态，您可以通过每012秒发送一次ajax请求与window.setInterval()来检查视图区域的更改。它可以发回一些JSON或者只是有变化的块，或许在前几个字符中用它们在网格中的位置进行编码。

我只是在这里挥手，我没有看过代码，但你说得对。它是一个迷人的网站。

编辑：更多细节...

退房的init()功能（在yourworld.js线906）。如果你想研究代码，这是最好的入口点。您可以在953行看到编辑的工作原理。在​​上，脚本将焦点隐藏输入元素以捕获文本。然后他使用setInterval上的回调函数每10ms从输入字段中获取第一个字符，然后空白该字段。如果有字符，它会缓存在一个数组中，并放入网格中的活动单元格中。他在评论中说这是为了防止粘贴。

编辑数组每两秒发送一次（第1017行）。输入的每个字符都与位置和时间戳一起发送。

fetchUpdates()处理从服务器获取新更新的单元格（第383行）。它包含jQuery.ajax请求，成功时回调函数进行必要的更改，并在1秒钟后再次呼叫fetchUpdates()setTimeout()。