Zepto 사용 중인 주의 점(회전)

http://chaoskeh.com/blog/some-experience-of-using-zepto.html
얼마 전에 회사 한 제품 의 HTML 5 터치 스크린 버 전 을 완 성 했 고 개발 에 Zepto(http://zeptojs.com/)이 유명한 DOM 조작 창고.왜 jQuery 가 아니 죠?jQuery 의 목 표 는 모든 주류 브 라 우 저 를 호 환 하 는 것 이기 때문에 대량의 코드 가 모 바 일 브 라 우 저 에 쓸모 가 없 거나 비효 율 적 이라는 것 을 의미한다.Zepto 는 모 바 일 브 라 우 저 만 을 위 한 것 이기 때문에 부피 가 작고 효율 이 높 습 니 다.더 중요 한 것 은 API 가 jQuery 를 완전히 모방 하기 때문에 학습 비용 도 낮 습 니 다.
그러나 개발 과정 에서 저 는 Zepto 가 아직 성숙 하지 않 은 것 을 발 견 했 습 니 다.그 중에서 크 거나 작은'구덩이'가 포함 되 어 있 고 jQuery 와 의 차이 가 현저 합 니 다.그래서 글 을 써 서 기록 하고 후세 사람들 에 게 도움 이 되 기 를 바 랍 니 다.본 고 를 작성 할 때 Zepto 버 전 은 1.0 정식 버 전 입 니 다.
Zepto 어디서 다운 받 아 요?
이 문 제 는 보기에 매우 어 리 석 어 보이 는데,홈 페이지 에서 다운로드 하면 되 잖 아!그런데 다운로드 링크 에 작은 글자 가 있 는 걸 발 견 했 나 요?
There are more modules; a list of all modules is available in the README.
여기 있어 요. README(https://github.com/madrobby/zepto#readme)Zepto 소스 코드 에는 14 개의 모듈 이 있 고 홈 페이지 에서 제공 하 는 표준 판 에는 7 개의 모듈 만 있다 는 것 을 놀 라 게 발견 할 수 있 습 니 다!그리고 모 바 일 개발 에 매우 중요 한 touch 모듈 이 포함 되 어 있 지 않 습 니 다(터치 이벤트 에 대한 지원 제공)!그래서 제 제안 은 홈 페이지 에서 다운로드 하지 말고 Github 에서 소스 코드 를 다운로드 한 후에 스스로 버 전 을 빌 드 하 는 것 입 니 다.그러면 적당 한 모듈 을 선택 할 수 있 습 니 다.예 를 들 어 내 가 선택 한 모듈 은 이렇게 몇 개 이다.

polyfill，zepto，detect，event，ajax，form，fx 이 7 개가 표준 판 에 포 함 된 모듈 입 니 다

fx_methods 이 모듈 이 있 으 면.show().hide()등 몇 가지 방법 으로 애니메이션 을 지원 할 수 있 습 니 다.예 를 들 어  .show('fast')

data jQuery 처럼 메모리 대상 으로 저장 하 는.data()방법 에 대한 완전한 지원 을 제공 합 니 다

assets img 요 소 를 제거 한 후 특수 처 리 를 하여 메모리 정리 에 사용 합 니 다

selector 더 많은 선택 기 지원,뒤에 언급 됩 니 다

touch 터치 이벤트 에 대한 지원,예 를 들 어 tap 이벤트

Node 에 대해 잘 모 르 시 면 제 버 전 을 다운로드 하 세 요(http://chaoskeh.com/uploads/attach/62c05f77cdc207687ead89abad1e9098.zip)
click 이벤트 말고 tap 로 대체
이 는 클릭 이벤트 가 200~300 ms 지연 되 어 있 기 때문에 더 빠 른 응답 을 위해 Zepto 가 제공 하 는 tap 이벤트 가 믿 기지 않 는 다 면 다음 코드 로 테스트 해 보 는 것 이 좋 습 니 다.

var t1,t2;
$('#id').tap(function () {
    t1 = Date.now();
});
$('#id').click(function () {
    t2 = Date.now();
    alert(t2 - t1);
});

Zepto 의 CSS 선택 기 지원
정중하게 일 깨 워 주다. 등등 jQuery 에서 자주 사용 하 는 선택 기,Zepto 는 지원 하지 않 습 니 다!이 유 는 간단 합 니 다.jQuery 는 자신 이 작성 한 sizzle 엔진 을 통 해 CSS 선택 기 를 지원 합 니 다.Zepto 는 브 라 우 저 를 통 해 직접 제공 합 니 다.  :text :checkbox :first  인터페이스이 인 터 페 이 스 는 표준 CSS 선택 기만 지원 하 며,위 에서 언급 한 것 은 jQuery 선택 기 확장(http://api.jquery.com/category/selectors/jquery-selector-extensions/)그래서 이 홈 페이지 를 자세히 보고 선택 기 에 주의 하 세 요.
물론 좋 은 소식 도 있 습 니 다.위 에서 언급 한 selector 모듈 입 니 다.이 모듈 이 있 으 면 지원 할 수 있 습 니 다. 부분 적 의 jQuery 선택 기 확장 은 다음 과 같 습 니 다.

:visible :hidden

:selected :checked

:parent

:first :last :eq

:contains :has

원소 의 치수 계산
우선 Zepto 는.inner Height().outer Width()등 네 가지 방법 이 없 으 며,그 다음으로'height()/.width()방법 도 완선 되 지 않 습 니 다.  document.querySelectorAll  jQuery 에 서 는 이러한 요 소 를 대상 으로 css 스타일 을 먼저 설정 합 니 다display:none  높이 와 폭 을 계산 한 후에 회복 하 다. https://github.com/jquery/jquery/blob/master/src/css.js#L460 만약 이런 특수 한 상황 이 발생 한다 면 jQuery 를 참고 하여 유사 한 방법 을 쓸 수 있다
.prop()방법의 함정
한 번 은 읽 기 전용 으로 텍스트 상 자 를 두 고 이 줄 을 썼 습 니 다.  position: "absolute", visibility: "hidden", display: "block"  결국 한사코 일 을 하지 않 고 한참 을 찾다 보 니 정확 한 표기 법 이 이러 하 다 는 것 을 알 게 되 었 다.  $('#text').prop('readonly', true)  ，만약 당신 이 뜻밖에도 둘 의 차 이 를 알 아 보지 못 한다 면,조용히 당신 에 게 알려 드 리 겠 습 니 다:대소 문자 에 주의 하 세 요!관련 문 서 를 뒤 져 보 니 속성 만 읽 는 정확 한 맞 춤 법 은 readOnly 였 으 나 jQuery 에 있 는 이전 코드 는 정상적으로 작 동 하기 때문에 jQuery 소스 코드 에서 찾 아 보 니 이런 부분 이 있 었 습 니 다. https://github.com/jquery/jquery/blob/master/src/attributes.js#L466

jQuery.each([
    "tabIndex",
    "readOnly",
    "maxLength",
    "cellSpacing",
    "cellPadding",
    "rowSpan",
    "colSpan",
    "useMap",
    "frameBorder",
    "contentEditable"
], function() {
    jQuery.propFix[ this.toLowerCase() ] = this;
});

여기 서도 볼 수 있 듯 이 jQuery 의 성숙 도 는 정말 뛰 어 넘 기 어렵다.왜냐하면 그 는 우 리 를 모두 버릇 이 나 빠 졌 기 때문이다........................................................... pull request(https://github.com/madrobby/zepto/pull/756)이런 머리 없 는 용법 을 좋아한다 면 지 지 를 댓 글로 표현 할 수 있 습 니 다(영어 로 기억 하 세 요).
애니메이션 효과
fx 가 없 었 다 면mehods 모듈 의 경우.show()방법 은 애니메이션 을 지원 하지 않 지만 이 모듈 이 있 으 면 애니메이션 의 지원 에 작은 문제 가 있 습 니 다.예 를 들 어 이런 HTML 등 입 니 다.
style="background:black;opacity:0.7;display:none"> test
하면,만약,만약...  $('#text').prop('readOnly', true)  ，그러면 애니메이션 이 완 성 된 후에 당신 이 본 것 은 반투명 요소 가 아니 라 전체 가 검 고 투명 하지 않 은 것 입 니 다.Zepto 의.show()애니메이션 은 매우 간단 하고 넓 은 변화 가 없 으 며 투명 도 를 0 에서 1 로 바 꾸 었 기 때문에 요소 에 원래 설 치 된 투명 도 는 대 체 됩 니 다.이 경우.show()대신.fadeIn()방법 으로 대체 할 수 있 습 니 다.
결어
여기 서 당신 은 내 가"Zepto 는 아직 성숙 하지 않다"고 말 하 는 이 유 를 이미 알 고 있다 고 믿 습 니 다.현재 그것 은 사실"사용 할 수 있다"고 말 할 수 있 을 뿐 jQuery 가"사용 하기 좋다"고 말 하 는 지경 에 이 르 지 못 했 습 니 다.마지막 으로 전체 HTML 5 터치 스크린 버 전의 전단 개발 에 대해 저 는 한 편 이 있 습 니 다. Slide(https://speakerdeck.com/edokeh/xin-zhan-html5-hong-ping-ban-kai-fa-zong-jie)정 리 를 했 습 니 다.본 고 는 그 중에서 Zepto 부분 에 대한 상세 한 논술 일 뿐 관심 이 있 는 것 은 가 볼 수 있 습 니 다.
by:http://xh.cjbuluo.com