html5 pushState 를 활용한 pjax

link : https://github.com/defunkt/jquery-pjax

안녕하세요. 

공부하다 혼자알기 아까워 공유합니다. 

pjax 는 쉽게말해 ajax의 history 관리 때문에 hash (#) 등을 활용해서 작업하던걸 

똑똑한 외국인이 HTML5 에서 지원하는 pushState 를 활용하여 합쳐진기술 입니다. 

친절하게 github 에도 있네요. 

블로그에 적어놓은거 수정해서 글좀 다듬었으니 천천히 읽으세요~ 

틀린거 있으면 알려주세요. 

넵 ㄳ 

[초보를 위한 간단설명] 

ajax = 비동기 자바스크립트 + XML 

hash bang = ajax 사용시 history 관리가 안되는 문제를 해결하기 위해 썼던 수단. 

pushState = html5 에서 지원하는 history 관리용도의 API (pushState, replaceState ) 

pjax = pushState + ajax 

[상세설명] 

##AJAX 

Asynchronous Javascript And XML (비동기 자바스크립트와 XML) 

기존 기술을 효율적으로 사용하도록 표준화 한것. 

핵심은 재로드 하지않고 일부만 갱신하여 웹서버와 데이터를 교환하는것. (대역폭의 낭비를 최소화 한다) 

설명 

    - 인터넷 표준을 기반으로 함. 

    - javascript/DOM (정보의 상호작용) 

    - CSS (데이터 스타일) 

    - XML, XSLT (데이터 전송포맷으로 사용), XMLhttpRequest 객체 (서버와 비동기적으로 데이터를 교환), JSON 

      JSON RPC로 데이터를 교환/조작함. 

이를 활용한 프레임워크 

    - prototype , jQuery, jQuery UI, dojo, YUI 등 

##Hash-Bang (#!) 

페이지 갱신없이 URL 을 변경하기위해 사용됨. (주로 SPA 를 만들기위해 사용됨.) 

twitter 에서 한때 사용된 기술. 

# 뒤의 부분을 fragment identifier 라고 부름. (#!dfdsafasdf) 

문제점 및 오류. 

    - javascript app 이기에, 스크립트에 오류 발생시 전혀 이용할 수 없음. 

    - 검색엔진. 

        - 구글링 가능 (_escaped_fragment_ 변환) 

        - SEO 불가. 

        - 크롤러는 HTTP 1.1 과 URL스펙 (RFC-2396)을 따름. 

        - 페이지 내의 스크립트를 실행하지 않기에 사이트의 컨텐츠를 가져갈 수 없음. 

        - 이는 Zombie , PhantomJS 등을 활용하여 크롤러 요청시 미리 Static 한 HTML 페이지를 리턴하여 적용 할 수 있다. 

        - 이는 서버측 코딩부담도 줄여주고, 오래된 브라우저에서도 대처가 가능하다. 

        - 참고 : http://funnygangstar.tistory.com/183 

    - 캐시문제. 

        - 중계서버가 이를 다룰 방법이 없기에 모든 트래픽을 다뤄야함. 

        - 리퍼러에 fragment identifier 가 넘어오지 않기에, 리퍼러를 보고 방문자 원글 추적이 불가능함. 

##PushState ? 

HTML5 의 History API. ( http://html5.clearboth.org/history.html  ) 

사파리 크롬 파폭 등 크로스브라우징 지원. 

참고링크 : http://www.slipp.net/wiki/display/SLS/pushstate 

    - history.pushState 를 이용하여 페이지의 성격과 명칭지정. 이동값 전달 및 내용변경이 가능하다. 

    - 다시 페이지로 오게 됐을때엔 history.replaceState 를 활용하여 함수 설정 가능하다. 

##PJAX ( https://github.com/defunkt/jquery-pjax ) 

    - HTML5 의 pushState + AJAX . 

    - 뒤로가기, 검색인덱스생성 불가능한 ajax 의 한계를 극복함. 

    - hash bang 의 URL hack 을 쓰지않고 URL 전환처리 가능. 

    - jQuery 버전으로 만들어져 있음. 

    - jQuery 1.8 이상부터 지원함. 

    - $(document).pjax(select , object) 

    - $(document).pjax(select , container ,object) 

    - EVENT 로는 click, submit, beforeSend, success, timeout, error, complete 등 

      ajax 에서 쓰이는 기능 외에 일부 요소를 갖고있음. 

    - meta tag 내에 pjax 버전등을 명시하여 검색엔진에도 활용 가능함. 

    - html5 가능 브라우져 : pjax 형태로 페이지 전환가능. 

    - 기타 브라우져 : 일반 페이지 이동하듯 처리됨.

execCommand("CreateLink") 새창 띄우기

execCommand("CreateLink") 새창 띄우기 

이걸로 삽질하시는 분들이 많을것 같아 올려봅니다... 

저두 지금 삽질하다가 클리어 했네요.... 

------------------------------------------------------ 

기존 

-> 

function createLink() { 

Editor.focus(); 

Editor.document.execCommand("CreateLink"); 

} 

수정 

-> 

function createLink() { 

var EdRange = Editor.document.body.createTextRange(); 

EdRange.execCommand('CreateLink'); 

if (EdRange.parentElement().tagName=='A') { 

var href = EdRange.parentElement().href; 

var data = EdRange.text; 

EdRange.execCommand('UnLink'); 

EdRange.pasteHTML(''+data+''); 

} 

} 

---------------------------- 

제가 검색을 해봤는데 

var EdRange = Editor.document.selection.createRange(); 

이 내용이 아주 많고 에러가납니다. (IE11기준) 

IE11에선 createRange()가 호환이 이제 안된다고 해서 알아보니 

var EdRange = Editor.document.body.createTextRange(); 

이걸로 고치라고 해서 고쳤더니 되네요. 

도움되길.. 저만 삽질했나.ㅠ

[ ▼ 참고 Source ]

function createLink() {
    var EdRange = Editor.document.body.createTextRange();
    EdRange.execCommand('CreateLink');

    if (EdRange.parentElement().tagName=='A') {
        var href = EdRange.parentElement().href;
        var data = EdRange.text;
        EdRange.execCommand('UnLink');
        EdRange.pasteHTML('<a href="'+href+'" target="_blank">'+data+'</a>');
    }
}

첨부파일 : 

archive.zip

jQuery 기반 숫자관련 플러그인.

- removeText: 숫자제외 텍스트 제거. 

- numberFormat: 3자리 마다 콤마 표시. 

- onlyNumber: 위의 모든 기능 포함. 

소스와 예제는 파일첨부하였습니다.

Javascript parseInt 버그 "08", "09"

프로젝트하면서 야구 시간표 때문에 달력을 만든 적이 있습니다. 

유독 8일과 9일에서만 에러가 나더군요. 다른데는 다 괜찮은데 

일부 스마트폰에서 그런 에러가 발생하는겁니다. 

문자열 "07"까지는 7로 잘 변환이 되지만 

문자열 "08","09"만 0으로 변환이 되는 

이상한 버그가 있습니다. 

이게 대다수에서는 8, 9로 잘 변환이 되지만 

일 부 기기에서만 0으로 변환이 됩니다. 

해결방법은 앞에 "0" 제거하고 변환하시면됩니다. 

끗

[협찬] http://phpjs.org/ 

function intval(mixed_var, base){ 

var type = typeof(mixed_var); 

if(type==='boolean'){ 

return (mixed_var)? 1: 0; 

} else if(type==='string'){ 

tmp = parseInt(mixed_var, base || 10); 

return (isNaN(tmp) || !isFinite(tmp))? 0: tmp; 

} else if(type==='number' && isFinite(mixed_var)){ 

return Math.floor(mixed_var); 

} else{ 

return 0; 

} 

}

Link1 http://seogi1004.github.io/jui

Link2 https://github.com/seogi1004/jui/releases

- removeText: 숫자제외 텍스트 제거. 

- numberFormat: 3자리 마다 콤마 표시. 

- onlyNumber: 위의 모든 기능 포함. 

소스와 예제는 파일첨부하였습니다.

archive.zip

===========================================

http://www.phpschool.com/link/tipntech/64665 

음수와 소수점까지 어느정도 처리하는 버전.