我昨晚发现了一个简直棒极了的网站。这是URL：
警告：网站可能是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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>Y</td>
<td>O</td>
<td>U</td>
<td>R</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>B</td>
<td>A</td>
<td>S</td>
<td>E</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
</table>
</div>
重复tilecont DIV并沿整个页面平铺，内部表格占据该DIV的整个宽度和高度。然后，表格中的每个<tr>都是一行，在该行内有16 <td>个，以构成每个字符。
很难解释，如果您安装了Firebug，只需将其拖到页面上即可自行查看。
我认为这非常聪明，但我无法解决它如何存储在数据库中的问题？我试过查看JS文件，但说实话，那里有很多东西，我要么不知道也不知道它是如何存储的等等。我假设它在每个{{1}上向数据库发出一个AJAX请求存储特定“单元”的新数据的事件？
任何人都有任何关于他们认为这样做的意见？
答案 0 :(得分：2)
你可能粗略正确。该站点知道您的视口所在的位置，并且只加载16个字符“块”中可见的部分。 DB只保存带有x和y坐标的16个字符串。如果你快速拖动，你可以看到它以1x16块更新。
至于发送，如果是我，我会缓存文本，一次只发送一个16个字符“块”。每次编辑发生时，检查它是否与最后一个块在同一块中。如果没有发送最后一个块并开始缓存新块。
要使视图保持最新，您可以通过window.setInterval()每隔几秒发送一次ajax请求，检查视图区域中的更改。它可以发回一些JSON或者只有具有变化的块的东西，可以用它们在前几个字符的网格中的位置进行编码。
我只是挥手在这里，我没有看过代码，但你是对的。这是一个迷人的网站。
编辑：更多细节......
查看init()功能（yourworld.js中的第906行）。如果你想研究代码，这是最好的入口点。您可以在第953行查看编辑的工作原理。在keydown上，脚本会聚焦一个捕获文本的隐藏输入元素。然后他使用setInterval上的回调来每10ms从输入字段中获取第一个字符，然后将该字段空白。如果有一个char，那么它会被缓存在一个数组中并放入网格中的活动单元格中。他在评论中说这是为了防止粘贴。
每两秒发送一次编辑（第1017行）。输入的每个字符都带有位置和时间戳。
fetchUpdates()处理从服务器获取新更新的单元格（第383行）。它包含一个jQuery.ajax请求，其中一个函数成功回调，进行必要的更改，并在1秒fetchUpdates()后再次调用setTimeout()。