Monday, October 10, 2011

[Javascript] Facebook History Manager 분석 (2)

저번 포스트에서 initialization 하는 부분 까지 봤습니다.
다른 부분들을 util 들이라고 보시면 되고, 그 다음 중요한 부분인 go 부분을 살펴보고 마무리 할까 합니다.

go 는 parameter로 c, e, f를 받아오는데요.
우선 History를 지원하는 최신 Browser의 경우는 입력된 c를 이용하여 이동을 하게 됩니다.(history back 같이) 이는 제일 간단히 가고 싶은 url로 이동하게 됩니다. h 등을 설정하고 하는 부분이 있는데요. 이 부분은 Facebook의 url에 관련되어있기 때문에 자신이 하고자하는 형태에 다라 변경 해줄 수 있습니다.

이제 지원하지 않는 Browser의 경우를 살펴보도록 하겠습니다.
ie 8 이하의 Browser의 경우엔 이미 만들어 놓은 iframe의 변화를 살펴야 하기 때문에 750ms 마다 url을 체크 하여, 변화가 있을 경우 그 url을 이용하여 사용자의 url을 변경 시킵니다.
그 외 Hash event를 지원하는 Browser의 경우는 변화에 따라 Hash를 분석하여 url을 변경 시켜줍니다.

위와 같이 전체적인 로직은 간단합니다.
이대로 마무리하면 재미가 없을 것이라 생각 되기 때문에, Facebook 개발자들이 작성한 재밌는 Point를 살펴보도록 하겠습니다.

먼저 "#!" 이 부분인데요. Twitter에서도 이 방식을 택했습니다. 왜 그런지는 정확히는 모르겠지만, 코드 상으로 볼때는 2중으로 검증을 하기 위해서가 아닐까 합니다. 기존의 라이브러리들은 대다수 # 만으로 구분을 하곤 했는데, 잘 못 되는 경우를 좀 더 보기 위해서 해놓은 의도적인 행위가 아닐까 합니다.  동료 분이 찾아주신 바에 의하면 크롤링이 가능한 Hash처리였네요. 공부가 부족했습니다.^_^ (참고 링크) 우선 #으로 뒤에 부분을 분리 후 !가 맞는지를 check하고, !는 확인 후 삭제 하여 의미 없게 처리가 됩니다.

그리고, 불필요한 double go back(?)을 방지하기 위한 팁으로 업데이트가 될 때마다, Lastchanged 시간을 기록하여 방지를 하고 있습니다. 이것이 이론적으론 한 400ms인가 봅니다. 이렇게 많이 check하고 있네요.

그 외에엔 시간을 들여서 오류가 나지 않도록 하는 Code들이라 찬찬히 읽어보시면 되지 않을까 합니다.^_^ 전 그럼 빠른 시간 내에 jQuery Ajax History를 작성하여 공개할 수 있도록 하겠습니다.

그럼~

No comments:

Post a Comment