2010-06-29 5 views
4

나는 어젯밤에 단순히 굉장한 웹 사이트를 발견했다. 여기에 URL는 다음과 같습니다이 멋진 사이트는 어떻게 구성되어 있습니까?

http://yourworldoftext.com/

경고 : 사이트 NSFW 수 있습니다.

그리고이 사이트가 어떻게 구성되는지 즉시 생각하게되었습니다. 페이지 소스에서 살펴보면 훨씬 공개,하지만 난 방화범에 보면이 같은 테이블을 많이 볼 수 없습니다 다음 tilecont DIV 반복하고 전체 페이지를 따라 바둑판 식으로 배열

<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> 

을하고, 내부 테이블은 그 DIV의 전체 너비와 높이를 차지합니다. 그런 다음 테이블 안의 각 <tr>은 한 행으로 16 <td>이 각 행을 구성하여 각 문자를 구성합니다.

Firebug를 설치했다면 페이지로 드래그하여 직접 볼 수 있습니다.

나는이게 꽤 똑똑하다고 생각했지만 데이터베이스 나 다른 것에 어떻게 저장 될지 고민 할 생각이 없다. JS 파일을 조사해 보았습니다. 솔직히 말해서 거기에 많은 것들이 있습니다. 저장되지 않았거나 저장되지 않은 것과 관련이 없습니다. 데이터베이스에 AJAX 요청을 할 때마다 keyUp 이벤트를 저장하는 것으로 가정합니다. 특정 "세포"에 대한 새로운 데이터?

누구나 어떻게 생각하는지 입력 할 수 있습니까?

+1

OMG, 이것은 내 CPU 시간을 먹습니다! –

+0

하하, 저에게 나쁘지는 않습니다. 사용 된 메모리는 200k에 불과합니다 : P –

+6

그 사이트의 내용은 NSFW라고 경고 했어야합니다. – BoltBait

답변

2

대충 옳을 것입니다. 사이트는 뷰포트의 위치를 ​​알고 있으며 16 개의 "청크"로 보이는 부분 만로드합니다. DB는 단지 16 개의 char 문자열을 x와 y 좌표로 저장합니다. 빨리 드래그하면 1x16 블록으로 업데이트됩니다.

전송에 관해서는, 나라면 텍스트를 캐쉬하고 한 번에 하나의 16 char "chunk"만 보냅니다. 편집이 발생할 때마다 마지막 청크와 동일한 청크에 있는지 검사합니다. 마지막 덩어리를 보내지 않으면 새로운 덩어리를 캐싱하기 시작하십시오.

보기를 최신 상태로 유지하려면 window.setInterval()으로 매 몇 초마다 ajax 요청을 보내서보기 영역의 변경 사항을 확인할 수 있습니다. 처음 몇 문자에서 그리드의 위치에 따라 인코딩 된 변경 사항이있는 청크를 사용하여 JSON 또는 무언가를 다시 보낼 수 있습니다.

나는 여기 손을 흔드는 데, 나는 코드를 보지 않았지만, 당신 말이 맞습니다. 그 매혹적인 사이트.

EDIT : 더 상세히 ...

체크 아웃 init() 함수 (yourworld.js 라인 906). 코드를 연구하기를 원한다면 가장 좋은 입장입니다. 편집은 953 행에서 어떻게 작동하는지 볼 수 있습니다. keydown에서 스크립트는 텍스트를 잡는 숨겨진 입력 요소에 초점을 맞 춥니 다. 그런 다음 그는 setInterval에 콜백을 사용하여 10ms마다 입력 필드의 첫 번째 문자를 가져온 다음 필드를 비 웁니다. char가 있으면 배열에 캐시되고 그리드의 활성 셀에 놓입니다. 그는 덧글에서 붙여 넣기를 방지하기위한 것이라고 말했습니다.

편집 배열은 2 초마다 전송됩니다 (줄 1017). 입력의 각 문자는 위치와 타임 스탬프와 함께 전송됩니다.

fetchUpdates() 서버 (라인 383)에서 새로 업데이트 된 셀을 가져 오는 작업을 처리합니다. 필요한 변경을 수행하는 함수에 대한 성공시 콜백을 포함한 jQuery.ajax 요청을 포함하며 1 초 후에 fetchUpdates()을 다시 호출합니다. setTimeout().

+0

좋은 설명, 고마워. :) –

+0

코드를 확인한 후 세부 정보를 추가하여 편집했습니다. – jasongetsdown

관련 문제