我昨晚发现了一个非常棒的网站。这是网址:
警告:网站可能是 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 请求。存储特定“单元格”的新数据的事件？
有人对他们认为这是如何完成的有任何意见吗？
最佳答案
您可能大致是正确的。该站点知道您的视口(viewport)在哪里，并且仅以 16 个字符的“ block ”加载可见的部分。数据库仅保存 16 个带有 x 和 y 坐标的字符字符串。如果快速拖动，您可以看到它以 1x16 block 的形式更新。
至于发送，如果是我，我会缓存文本并且一次只发送一个 16 字符的“ block ”。每次发生编辑时，检查它是否与上一个编辑在同一 block 中。如果没有发送最后一个 block 并开始缓存新的 block 。
要使 View 保持最新，您可以通过使用 window.setInterval() 每隔几秒发送一个 ajax 请求，让它检查 View 区域中的更改。它可以发回一些 JSON 或仅包含发生变化的 block 的东西，可能在前几个字符中使用它们在网格中的位置进行编码。
我只是在这里挥手，我没有看过代码，但你是对的。这是一个迷人的网站。
编辑:更多细节...
查看 init() 函数(yourworld.js 中的第 906 行)。如果您想研究代码，那是最好的切入点。您可以在第 953 行看到编辑的工作原理。在 keydown 上，脚本聚焦一个隐藏的输入元素，该元素捕获文本。然后，他使用 setInterval 回调，每隔 10 毫秒从输入字段中获取第一个字符，然后将字段留空。如果有一个字符，那么它会被缓存在一个数组中并放入网格的事件单元格中。他在评论中说这是为了防止粘贴。
编辑数组每两秒发送一次(第 1017 行)。输入的每个字符都带有位置和时间戳。
fetchUpdates() 处理从服务器获取最新更新的单元格(第 383 行)。它包含一个 jQuery.ajax 请求，成功时回调一个函数，该函数进行必要的更改并在 1 秒后再次调用 fetchUpdates() setTimeout() 。
关于javascript - 这个极好的网站是如何构建的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3142046/