진도 소개

1. What’s Jindo2.0.0?
2012.04.03
전용우
이 문서는 나눔글꼴로 작성되었습니다. 설치하기

2. 목차
1. Jindo Framework
2. 2.0.0 주요 특징

3. 1.Jindo Framework 3 / 14
Jindo Framework
Core DOM/BOM Wrapper
DOM/CSS Selector, DOM, Form,
Class Document, Window
Native Object Wrapper Utility
Array, Date, Event, Ajax, Cookie,
Function, String JSON, Template

4. 1.1 Core 4 / 14
Core
• $Jindo
– 프레임워크 정보 및 각종 비교 메서드.
• $
– 아이디를 기반을 DOM을 찾거나 생성하는 메서드.
• $$
– CSS선택자를 이용하여 DOM을 찾는 메서드.
• $Class
– 객체지향프로그래밍을 하는데 도움을 주는 기능.

5. 1.2 DOM, BOM Wrapper 5 / 21
DOM, BOM Wrapper#1
• $Element
– DOM을 쉽게 조작하도록 도와주는 DOM의 확장 기능.
• $Elementlist
– 다수의 $Element을 조작하는 기능.
• $Form
– Form의 확장 기능.

6. 1.2 DOM, BOM Wrapper 6 / 21
DOM, BOM Wrapper#2
• $Document
– Document의 확장 기능.
• $Window
– Window의 확장 기능.

7. 1.3 Native Object Wrapper 7 / 21
Native Object Wrapper#1
• $A
– Array의 확장 기능.
• $Date
– Date의 확장 기능.
• $Event
– Event의 확장 기능.

8. 1.3 Native Object Wrapper 8 / 21
Native Object Wrapper#2
• $Fn
– Function의 확장 기능.
• $H
– 해시 테이블의 확장 기능.
• $S
– String의 확장 기능.

9. 1.4 Utility 9 / 21
Utility
• $Ajax
– Ajax통신을 쉽게 하도록 도와주는 기능.
• $Cookie
– 쿠키를 쉽게 조작하는 기능.
• $Json
– JSON을 쉽게 사용하도록 하는 기능.
• $Template
– View에 해당하는 HTML을 별도로 관리하는 기능.

10. 2. 2.0.0 주요 기능 10 / 21
2.0.0 주요 기능
Type Check
Mobile Extractor

11. 2.1 Type Check 11 / 21
2.1 Type Check
• 인자는 허용하는 타입맊 가능.
• 타입에 대한 문제는 미리 확인 가능.

12. 2.2 Mobile 12 / 21
2.2 Mobile
• 모바일 최적화
• 크기 개선
• 모바일 특화 메서드

13. 2.2 Mobile 13 / 21
모바일 최적화
Mobile 환경
Jindo Jindo
Jindo Jindo
Components Mobile Mobile
Component Component
Component Component
Core Framework Jindo Jindo Jindo Mobile
~1.5.3 2.0.0~

14. 2.2 Mobile 14 / 21
크기 개선
40 kb 24%
38
30 kb 33
28
20 kb
10 kb
0 kb
Jindo desktop jQuery 1.7.1 Jindo mobile
gzip사이즈

15. 2.2 Mobile 15 / 21
모바일 특화 메서드
• $Element#preventTapHighlight
– 모바일에서 delegate사용시 하이라이트 문제 해결.
• $Event#changedTouch
$Event#targetTouch
– touches객체를 쉽게 사용.
자세한 내용은 (링크참고)

16. 2.3 Extractor 16 / 21
2.3 Extractor
사용한 진도맊을 추출하여
최적의 진도파일을 맊듦.

17. 2.3 Extractor 17 / 21
Extractor 동작 방법
서비스 코드
function something(sId){
$Element(sId).addClass("on");
}
function something2(){
$A($$("li")).forEach(function(v){
$Element(v).toggleClass("selected");
});
}
추출된 진도
jindo.$Element = function(){....};
Extractor jindo.$Element.prototype.addClass = function(){...};
jindo.$Element.prototype.toggleClass = function(){...};
jindo.$$ = function(){};
jindo.$A = function(){};
jindo.$A.prototype.forEach=function(){}

18. 2.3 Extractor 18 / 21
Extractor 효과
평균 추출된 크기는 전체의 40%
로 페이지의 로딩 성능을 개선함.

19. +α Updater 19 / 21
+α. Updater(곧개발될 도구)
진도 업데이트할 때 확인해야 할
체크포인트를 추출.

20. +α Updater 20 / 21
Updater 동작 방법
서비스 코드(some.js)
function something(sId){
$Element(sId).addClass("on");
}
(v 2.0.0 -> v2.0.3) Updater
function something2(){
$A($$("li")).forEach(function(v){
$Element(v).toggleClass("selected");
});
}
체크할 목록 추출
| 파일명 | 줄 번호 | 진도 메서드 | 타입 | 레벨 | 버전 | 변경 내용 |
| some.js | 2 | $Element#addClass | 버그 | 패치 | 2.0.1 | index가 0부터 나오는 문제 수정|
| some.js | 4 | $$ | API 변경 | 마이너 | 2.0.3 | 두 번째 인자로 기준 엘리먼트 지정|

21. +α Updater 21 / 21
Updater 효과
• 업그레이드 시 확인할 체크포인트를 추출.
– 에러에 대한 막연한 불안감 해소.
– 적은 비용으로 업데이트.

22. dev.naver.com/projects/jindo
이 문서는 나눔글꼴로 작성되었습니다. 설치하기