這個極好的網站是如何構建的？

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()。