UI 라이브러리로서 모든 사람이 키트 코어를 배우고 API를 외우도록 할 계획은 없습니다. 이러한 종류의 후속 학습 방법은 전혀 의미가 없습니다. 오늘날, jQuery는 인기가 있고, 모든 사람이 JQ를 배우고, 내일 Seajs는 인기가 될 것이며, 모두가 Seajs를 부를 것입니다. 따라서 Kitjs에서는 JQ API를 완전히 시뮬레이션하는 JQ 사용자를 위해 구문 설탕 (suger.js)을 특별히 준비했습니다. 구현 외에도 인터페이스는 동일하며 모든 사람이 키트 구성 요소를 직접 변환하는 데 편리합니다. 물론, 순전히 기술 팬으로서, 기술이 이데올로기에 사용하는 것보다 기술이 어떻게 구현되는지 심층적 인 것을 이해하는 것이 훨씬 흥미 롭습니다. 물론 KPI 고려 사항에 대한 키트 구성 요소 코드 또는 KPI를 완료하기위한 보스의 프로젝트 보너스를 직접 표절하면 그러한 행동을 신경 쓰지 않습니다. 물을 마시고 우물을 파는 것을 잊지 말고 동료들과 물을 날 때 Kitjs를 홍보 할 수있는 한, 나는 당신에게 매우 감사합니다. 동시에 키트는 또한 아주 어린 도서관입니다. 지속적인 개발로 인해 몇 가지 버그 및 브라우저 호환성 문제가있어 불가피합니다. 나는 혼자이고 에너지가 제한되어 있습니다. 프론트 엔드 에서이 전쟁 시대에, 더 같은 생각을 가진 친구들은 그를 더 크게 만들고 함께 진전을 이룰 수 있습니다.
동시에 Kitjs 대화 상자 구성 요소가 오늘 출시되었으며 데모 주소는 http://xuduany.github.com/kitjs/kitjs/demo/dialog/demo.html입니다.
(i) 키트 디렉토리 형식
주제로 돌아가서 Kitjs에서 kit.js는 핵심 핵심 파일의 존재입니다. 여기에는 가장 일반적으로 사용되는 DOM 및 객체, 상속 작업 및 String.js, Math.js 등의 배치가 포함되어 있습니다. 각 독립적 인 JS 파일에는 클래스 생성자와 글로벌 오브젝트 인스턴스가 포함됩니다.
Kit.js를 예로 들어 $ KIT 클래스와 $ KIT 인스턴스 $ 키트가 포함됩니다 ($로 시작하는 것은 일반적으로 사용되는 변수와의 충돌을 피하는 것입니다).
기타 모든 유형은 $ kit.math 클래스 및 $ kit.math 인스턴스를 포함하여 Math.js와 같은 링크 방식의 $ 키트 및 $ 키트 인스턴스 인스턴스에 매달려있어 전 세계 범위에 오염이 두 개뿐입니다. 동시에 kit.js에서는 $ kit.ui라는 네임 스페이스를 정의합니다. 실제 디렉토리에서는 Kit.js와 동일한 레벨의 위젯 디렉토리를 사용하고 여러 초기 문자가있는 디렉토리는 연속으로 정렬됩니다.
위젯 디렉토리의 모든 디렉토리는 KITJS 구성 요소 디렉토리입니다. 각각의 독립적 인 JS 파일에는 독립 구성 요소 (비 인스턴스)에 대한 클래스 생성자 만 포함됩니다. CommonJS의 모듈 모드와 호환 될 수 있습니다 (CommonJS 및 AMD 변환의 모듈/1.1 사양을 준수 할 수 있습니다. 특정 변환 방법은 나중에 자세히 언급됩니다).
(ii) 키트 구성 요소의 기본 코드 템플릿, 주석은 JSDOC 사양을 준수합니다.
대화 상자 구성 요소를 예로 들어 보겠습니다. 각 구성 요소는 다음과 유사합니다.
우선, JSDOC의 의견, 어떤 클래스 @class declaration, @require xxx.js, 어떤 구성 요소가
(iii) 생성자 및 초기화 방법
각 클래스는 생성자를 표준 함수 (config) {} way로 정의합니다. 각 Kitjs 구성 요소의 생성자는 개인화 된 구성의 입력으로 구성 매개 변수를 기본적으로 보유합니다.
동시에 클래스 생성자에는 kitjs 구성 요소의 기본 구성을 저장하는 데 사용되는 정적 멤버 인 DefaultConfig 객체가 있습니다.
Kitjs 구성 요소를 사용하는 경우 가장 먼저해야 할 일은 새 인스턴스를 통해 새 인스턴스 객체를 초기화하는 것입니다. 이것은 단지 JS 구성 요소 객체를 초기화하기위한 것입니다. 아직 HTML이 없습니다. Init 메소드를 실행하고 HTML을 생성 한 다음 Doc에 추가해야합니다.이 방법은 영혼에 육체와 피를 붓는 것과 동등한 Doc에 추가해야합니다 ^_ ^.
일부 학생들은 왜 INIT 메소드를 생성자에 직접 배치하지 말고 별도로 출시하지 않습니까?
1. 상속 중에 부모 클래스를 인스턴스화해야하기 때문입니다. 어린이 계급이 부모 클래스에서 상속되면 아동 수업의 프로토 타입 객체가 상위 클래스의 새 인스턴스로 설정됩니다. INT의 초기화 방법이 생성자에 배치되면 부모 클래스의 HTML이 직접 실행되고 쓰레기 코드가 생성됩니다.
2 게으른 로딩으로 인해 초기화가 초기화 될 때 즉시가 아니라 적시에 HTML 코드를 실행해야합니다.
따라서 Kitjs 구성 요소를 사용하는 기본 방법은 다음과 같습니다
인스턴스화 후 INT 메소드를 실행합니다 (INIT 메소드는 리턴 코드 7을 사용하여 현재 구성 요소 개체를 반환합니다).
위 그림과 같이, 대화 상자의 모든 API 메소드는 프로토 타입에 매달려 있으며, 상속 및 프로토 타입 확장을 통해 인스턴스 객체로 전달됩니다.
$ kit.ui.dialog.yesorno 구성 요소의 생성자 코드를 관찰하십시오.
(iv) kitjs의 상속
그는 $ kit.inherit 메소드를 통해 $ kit.ui.dialog 객체와의 상속 관계를 선언했습니다. 여기, 물어보고 싶어하는 급우가있을 것입니다. 왜 그가 외부에 직접 쓰는 대신 생성자에 물려 받아야합니까?
그 이유는 :
1. KITJS는 프로토 타입 기반 상속 관계입니다
2. Kitjs 구성 요소를 사용하려면 구성 요소 개체를 인스턴스화해야합니다. 각 구성 요소는 새 인스턴스를 통해 생성자를 통해 생성됩니다.
그래서 나는 코드 생성자에 상속 관계를 실행하여 새로운 구성 요소를 인스턴스화 할 때 전류 구성 요소의 생성자의 상속 방법에 따라 상위 클래스의 멤버와 메소드를 단계별로 상속받을 것입니다.
자식 수업이 부모 클래스의 메소드를 수정 해야하는 경우, 부모 클래스의 상속 메소드를 무시하기 위해 아동 클래스 프로토 타입에서 동일한 이름의 메소드 만 정의하면됩니다.
이름 지정 측면에서 Kitjs는 다음과 같은 그림 $ kit.ui.dialog, $ kit.ui.dialog.yesorno와 같이, 하위 클래스는 부모 클래스 이름을 네임 스페이스로 계속 유지하고 체인을 유지합니다.
Kitjs 상속 구현도 매우 간단합니다
부모 클래스 객체를 인스턴스화하고, 부모 클래스 인스턴스의 모든 멤버를 서브 클래스 프로토 타입에 복사 한 다음 서브 클래스 프로토 타입 생성자를 서브 클래스 생성자로 재설정 한 다음 서브 클래스 생성자에 링크를 걸고 부모 클래스를 가리 킵니다. $ kit.inherit 메소드를 통해 서브 클래스 $ kit.ui.dialog.yesorno의 인스턴스화 프로세스에서, 존재하지 않는 부모 클래스 $ kit.ui.dialog의 모든 멤버를 상속 받고 정적 언어와 유사한 상속을 실현할 수 있습니다.
(v) 구성 파라미터 , 커플 링 분해/피부 제거 HTML 및 CSS?
키트 구성 요소 생성자는 맵 유형 매개 변수를 전달하는 데 익숙하며 항상 구성 요소를 개인화합니다. 키트 구성 요소가 초기화되면 사용자가 제출 된 구성 매개 변수와 함께 기본 기본 콘피드를 자동으로 덮어 내고 초기화를 시작합니다.
모든 구성 요소의 경우 HTML 구조의 변화와 CSS 스타일의 변화를 제거하는 것은 불가능합니다.
키트는이 커플 링을 구성 매개 변수 구성으로 분해합니다.
우선, HTML 템플릿 기술을 사용하십시오. KIT는 $ kit.newhtml 메소드를 사용하여 HTML 문자열을 직접 루팅하고 HTML DOM을 생성하고 문서 스트림을 삽입하여 옹호합니다.
따라서 구성 요소의 대략적인 HTML 컨텐츠를 추출하고 HTML 문자열 템플릿으로 캡슐화하여 구성 요소의 DefaultConfig에 저장합니다. 사용자가 HTML 템플릿을 수정 해야하는 경우 초기화 할 때 사용자 정의 구성을 사용하고 Default DefaultConfig에서 템플릿 필드를 대체하십시오.
HTML 템플릿 및 CSS의 커플 링 및 분해에서 키트는 JS 템플릿을 사용하여 클래스 이름을 분해하기 위해 트릭을 사용합니다.
init 메소드에서 $ kit.tpl로 $ {xxx}의 형태로 구성에서 HTML을 교체하십시오.
동시에 모든 스타일은 CSS로 설정됩니다.
전환 해야하는 여러 스킨 세트가있는 경우 초기화 중에 $ {CLS}에 해당하는 실제 클래스 이름을 지정하여 피부 대체 효과를 달성하여 템플릿의 클래스 이름을 수정하도록 선택할 수 있습니다.
(vi) 요약
기본적으로 $ kit.ui.dialog.yesorno 구성 요소의 코드 분석을 통해 kitjs의 구성 요소 구현 구조에 대한 대략적인 이해가 있습니다. 실제로 페이지 구성 요소를 설계하는 것은 어렵지 않지만 다양한 요구 사항에 적응할 수 있고 다양한 경우에 개발에 신속하게 변형되고 적응할 수있는 페이지 구성 요소를 설계하는 것은 어렵지 않습니다. 키트는 HTML 템플릿 및 CSS를 분할하고, 구성 매개 변수 및 기본 콘피드를 사용자 정의하고, 하위 클래스는 상속을 통해 상위 클래스의 속성과 메소드를 얻고 동시에 다양한 비즈니스 요구에 따라 관련 코드를 리팩토링하여 다양한 수준과 환경의 비즈니스 UI 구성 요소를 유연하게 충족시킬 수 있습니다.
Kitjs에는 기본 라이브러리 및 UI 라이브러리가 포함되어 있습니다.
기본 라이브러리 : 선택기 기능, DOM 운영 기능, 애니메이션 기능, DOM 이벤트 향상, 해시 트리 데이터 구조 증가, IO 기능, 로컬 스토리지 기능, 멀티 스레딩, 범위 등.
jQuery 작동 형식을 시뮬레이션하는 suger.js도 있습니다.
UI 라이브러리에는 다음이 포함되어 있습니다. 향상된 양식 요소, 팝업 레이어, 미디어 플레이어, 검증 프레임 워크, 폭포 흐름, 링키지, 슬라이드 쇼, 캘린더, 업로드 구성 요소, 템플릿 엔진 등이 포함됩니다.