whats jindo
DESCRIPTION
진도 소개TRANSCRIPT
1. Jindo Framework
2. 2.0.0 주요 특징
목차
1.Jindo Framework
Jindo Framework
3 / 14
Core DOM/BOM Wrapper
Native Object Wrapper
Utility
DOM/CSS Selector,Class
DOM, Form,Document, Window
Array, Date, Event,Function, String
Ajax, Cookie,JSON, Template
1.1 Core
Core
4 / 14
• $Jindo– 프레임워크 정보 및 각종 비교 메서드 .
• $– 아이디를 기반을 DOM 을 찾거나 생성하는 메서드 .
• $$– CSS 선택자를 이용하여 DOM 을 찾는 메서드 .
• $Class– 객체지향프로그래밍을 하는데 도움을 주는 기능 .
1.2 DOM, BOM Wrapper
DOM, BOM Wrapper#1
5 / 21
• $Element– DOM 을 쉽게 조작하도록 도와주는 DOM 의 확장 기능 .
• $Elementlist– 다수의 $Element 을 조작하는 기능 .
• $Form– Form 의 확장 기능 .
1.2 DOM, BOM Wrapper
DOM, BOM Wrapper#2
6 / 21
• $Document– Document 의 확장 기능 .
• $Window– Window 의 확장 기능 .
1.3 Native Object Wrapper
Native Object Wrapper#1
7 / 21
• $A– Array 의 확장 기능 .
• $Date– Date 의 확장 기능 .
• $Event– Event 의 확장 기능 .
1.3 Native Object Wrapper
Native Object Wrapper#2
8 / 21
• $Fn– Function 의 확장 기능 .
• $H– 해시 테이블의 확장 기능 .
• $S– String 의 확장 기능 .
1.4 Utility
Utility
9 / 21
• $Ajax– Ajax 통신을 쉽게 하도록 도와주는 기능 .
• $Cookie– 쿠키를 쉽게 조작하는 기능 .
• $Json– JSON 을 쉽게 사용하도록 하는 기능 .
• $Template– View 에 해당하는 HTML 을 별도로 관리하는 기능 .
10 / 21
2.0.0 주요 기능
Type Check
ExtractorMobile
2. 2.0.0 주요 기능
2.1 Type Check
2.1 Type Check
11 / 21
• 인자는 허용하는 타입만 가능 .• 타입에 대한 문제는 미리 확인 가능 .
2.2 Mobile
2.2 Mobile
12 / 21
• 모바일 최적화• 크기 개선• 모바일 특화 메서드
2.2 Mobile
모바일 최적화
13 / 21
Jindo
Jindo Compo-nent
Jindo Mobile
Component
Jindo
Jindo Compo-nent
Jindo Mobile
Component
Jindo MobileCore Frame-work
Components
Mobile 환경
~1.5.3 2.0.0~
2.2 Mobile
크기 개선
14 / 21
Jindo desktop jQuery 1.7.1 Jindo mobile0 kb
5 kb
10 kb
15 kb
20 kb
25 kb
30 kb
35 kb
40 kb
38
33
28
gzip 사이즈
24%
2.2 Mobile
모바일 특화 메서드
15 / 21
• $Element#preventTapHighlight– 모바일에서 delegate 사용시 하이라이트 문제 해결 .
• $Event#changedTouch$Event#targetTouch– touches 객체를 쉽게 사용 .
자세한 내용은 ( 링크참고)
2.3 Extractor
2.3 Extractor
16 / 21
사용한 진도만을 추출하여 최적의 진도파일을 만듦 .
2.3 Extractor
Extractor 동작 방법
17 / 21
function something(sId){$Element(sId).addClass("on");
}function something2(){
$A($$("li")).forEach(function(v){$Element(v).toggleClass("selected");
});}
서비스 코드
jindo.$Element = function(){....};jindo.$Element.prototype.addClass = function(){...};jindo.$Element.prototype.toggleClass = function(){...};jindo.$$ = function(){};jindo.$A = function(){};jindo.$A.prototype.forEach=function(){}
추출된 진도Extractor
2.3 Extractor
Extractor 효과
18 / 21
평균 추출된 크기는 전체의 40% 로 페이지의 로딩 성능을 개선함 .
+α Updater
+α. Updater( 곧 개발될 도구 )
19 / 21
진도 업데이트할 때 확인해야 할 체크포인트를 추출 .
+α Updater
Updater 동작 방법
20 / 21
function something(sId){$Element(sId).addClass("on");
}function something2(){
$A($$("li")).forEach(function(v){$Element(v).toggleClass("selected");
});}
서비스 코드 (some.js)
| 파일명 | 줄 번호 | 진도 메서드 | 타입 | 레벨 | 버전 | 변경 내용 || some.js | 2 | $Element#addClass | 버그 | 패치 | 2.0.1 | index 가 0 부터 나오는 문제 수정 || some.js | 4 | $$ | API 변경 | 마이너 | 2.0.3 | 두 번째 인자로 기준 엘리먼트 지정 |
체크할 목록 추출
Updater(v 2.0.0 -> v2.0.3)
+α Updater
Updater 효과
21 / 21
• 업그레이드 시 확인할 체크포인트를 추출 .– 에러에 대한 막연한 불안감 해소 .– 적은 비용으로 업데이트 .
