我昨晚发现了一个网站,简直太棒了.这是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文件,但说实话,那里有很多东西,我要么不知道也不知道它是如何存储的等等.我假设它在每个存储的keyUp事件上向数据库发出一个AJAX请求.该特定“细胞”的新数据？
任何人都有任何关于他们认为这样做的意见？
最佳答案 你可能粗略正确.该站点知道您的视口所在的位置,并且只加载16个字符“块”中可见的部分. DB只保存带有x和y坐标的16个字符串.如果快速拖动,您可以看到它以1×16块更新.
至于发送,如果是我,我会缓存文本,一次只发送一个16个字符“块”.每次编辑发生时,检查它是否与最后一个块在同一块中.如果没有发送最后一个块并开始缓存新块.
为了使视图保持最新,您可以通过使用window.setInterval()每隔几秒发送一次ajax请求来检查视图区域中的更改.它可以发回一些JSON或者只有具有变化的块的东西,可以用它们在前几个字符中的网格中的位置进行编码.
我只是在这里挥手,我没看过代码,但你是对的.这是一个迷人的网站.
编辑：更多细节……
查看init()函数(yourworld.js中的第906行).如果你想研究代码,这是最好的入口点.您可以在第953行查看编辑的工作原理.在keydown上,脚本会聚焦一个捕获文本的隐藏输入元素.然后他使用setInterval上的回调来每隔10ms从输入字段中获取第一个字符,然后将该字段留空.如果有一个char,那么它会被缓存在一个数组中并放入网格中的活动单元格中.他在评论中说这是为了防止粘贴.
每两秒发送一次编辑(第1017行).输入的每个字符都带有位置和时间戳.
fetchUpdates()处理从服务器获取新更新的单元格(第383行).它包含一个jQuery.ajax请求,其中一个函数成功回调,进行必要的更改,并在1秒setTimeout()后再次调用fetchUpdates().
