Kitjs (http://xuduany.github.com/kitjs)는 Taobao를 떠난 후 2011 년 말에 만든 HTML5 프론트 엔드 위젯 라이브러리 세트입니다. 원래 목적은 휴대 전화에서 HTML 페이지 대화식 구성 요소를 사용하는 데 중점을 두는 것이 었습니다. 문자 그대로 키트와 마찬가지로, 비전은 몸집이 작고 실용적이며 직접 사용할 수 있으며 2 개 개발 된 구성 요소를 수행하는 것이 매우 편리 할 수 있습니다. 나중에 프로젝트가 커지고 커지고 구성 요소의 수가 확장됨에 따라 PC 브라우저 (IE6+, FF, Chrome Core Series 등)의 지원도 추가되었으며 더 이상 원래 휴대 전화 개발 분야에 국한되지 않았으며 공식적으로 전체 플랫폼으로 이동하기 시작했습니다. 따라서 최근에 모든 원본 모듈은 JSDOC 사양에 따라 업데이트되었으며 모든 사람이 사용할 수있는 점차 오픈 소스입니다.
모든 사람이 키트에 대한 기본적인 이해를 가질 수 있도록 Kitjs 계보를 먼저 넣어 봅시다.
어때? 당신이 그것을 볼 때 조금 어지럽습니까? 사실, 나는 그것을 볼 때 현기증이 느껴진다^_^. 간단히 말해서 Kitjs와 Dojo는 서로 비슷하며
1. kit.js가있는 JS 도구 모듈은 코어로서 키트 주변에서 확장되며 Dojo와 유사합니다.
2. kit.ui 네임 스페이스 아래의 구성 요소 모듈, dijit과 유사합니다.
3. Dojox와 같은 실험실 프로젝트도 있으며 여기에는 지정되지 않았습니다.
Kitjs 구성 요소에는 이전에 내 블로그에 게시 한 훌륭한 구성 요소가 있습니다.
오디오 플레이어
iPhone 효과의 탭
콤보 박스
3D 사진 앨범
달력
라이트 박스
등.
여전히 사용 중이거나 모든 사람이 사용할 수 있도록 점차 릴리스되는 더 나은 구성 요소도 있습니다. 모든 KITJS 구성 요소는 다음 비전을 충족합니다
1. 중국 사용자의 사용자 경험에 더 가까이있어
2. 중국 개발자의 의견과 문서에 더 가까이있어
3. 제공되지는 않지만 모든 사람이 필요로하는 시장의 기존 구성 요소를 제공하십시오.
4. 어셈블리를 용이하게하고 더 큰 위젯으로 합병하기에 충분히 세밀한 모듈
Kitjs 도구 모듈에서 모든 코드는 클래스 프로토 타입 확장을 기반으로하며 인스턴스화 된 글로벌 개체는 개발자가 사용할 수 있도록 제공됩니다. 모든 클래스 이름은 첫 번째 문자에서 자본화되며 모든 인스턴스 객체는 첫 번째 문자의 소문자입니다. 키트는 $ 문자로 시작하여 다른 클래스 라이브러리와의 구별을 용이하게합니다. 동시에 도구 모듈에서 모든 방법은 기능 프로그래밍 스타일로 작성됩니다. 동시에, 키트는 jQuery로 발전하는 데 익숙한 학생들에게 제공됩니다. Suger.js를로드하면 kitjs를 사용하여 jQuery 사용과 같은 코드를 작성할 수 있습니다. 메소드 이름과 사용법 방법은 jQuery와 정확히 동일합니다. 다음은 DOM Ready 이벤트의 예입니다
코드 사본은 다음과 같습니다.
$ 키트. $ (function ($) {
$ ( '. item', $ ( '#gallery')). 각 (function () {
$ (this) .css ({
상단 : $ kit.math.rand ($ ( '#gallery'). innerHeight ()) + 'px',
왼쪽 : $ kit.math.rand ($ ( '#gallery'). innerWidth ()) + 'px',
'-webkit-transform': '회전 (' + $ kit.math.rand (-40, 40) + 'deg)' '
});
}). Pushstack ( 'A.Kitlightbox'). 각 (function () {
새로운 $ kit.ui.lightbox ({{
EL : 이건
}). init ();
});
});
$ kit. $는 kitjs의 dom Ready 이벤트입니다. 익명 방법의 매개 변수 $는 내부 폐쇄로 전달됩니다. 이러한 방식으로 $는 $ kit. $ 대신 내부 클로저에서 직접 사용할 수 있습니다 (jQuery의 $ 선택기와 동일). 이런 식으로, 폐쇄의 모든 코드는 jQuery와 다르지 않습니다. 또한 jQuery 코드 및 Kitjs 코드의 포팅을 용이하게합니다.
이 기사는 Kitjs 프레임 워크 사용 안내서 시리즈의 첫 번째 기사입니다. Kitjs를 간단히 소개합니다. 우리는 앞으로이 훌륭한 프론트 엔드 UI 프레임 워크에 대해 더 많이 배울 것입니다.