입사 예정인 회사의 과제 테스트에서 제출한 자바스크립트 라이브러리입니다. 그냥 두기에는 아까워서 이렇게 공유드립니다. 본 라이브러리는 DOM Selector, Manipulation, Event 등의 기능을 제공합니다. 사용 방법은 jQuery와 동일하며, 관련 설명은 아래 프레젠테이션을 참고하시면 됩니다. [본문] - http://youngman.kr/?p=1432 [데모] - http://test.youngman.kr/script/exam/core/

1. Code
Review
Core.
DOM
Manipula0on
and
Event

2. core/sel.js
jSelector
||
__
• 셀렉터 구문이 그룹인지 싱글인지 체크하여 별도 처리
• 셀렉터 구문은 “,” 유무로 체크
• 외부에서
“jSelector”
또는 “__”로 함수 호출
var
result
=
__(“#sel1,.sel2,…”);
console.log(result);
//
Array

3. core/sel.js
jSelectorNode
• 셀렉터 구문 타입에 따른 분기 처리
• 속성일 경우에는 내부적으로 “jParser”
함수를 호출
var
result
=
[
__(“selector”),
__(window),
…
];
console.log(result);

4. core/sel.js
jParser
• 셀렉터 구문 타입이 속성일 경우 처리되는 함수
• 속성 이름과 값이 일치하는 모든 엘리먼트를 검색
• 하위 노드가 없을 때까지 재귀 호출
var
result
=
__(“[name=value]”);
console.log(result);

5. core/lib.js
jEventProxy
• 이벤트 발생시 등록된 리스너 함수의 매개변수로 전달되는 객
체의 크로스브라우징 처리를 위한 프록시 함수
• “jHelper.fn.bind” 함수 내부에서 사용

6. core/lib.js
jHelper
||
$$
• 내부적으로 셀렉터의 결과 값을 얻어오고,
DOM
관련 함수
(jQuery 확장 함수와 비슷한 개념)에 접근할 수 있는 객체를 생
성하여 리턴하는 Wrapping
함수
var
items
=
__(selector);
return
new
jHelper.fn.init(items);

7. core/lib.js
jHelper.fn
• DOM 생성, 변경, 이벤트 등의 기능을 제공하는 함수들을 포함
하며 관련 함수를 외부에서 추가할 수 있는 객체
• “jHelper.fn.custom
=
func<on()
{
}”
형태로 외부에서 구현 가능
jHelper.fn
=
jHelper.prototype
=
{
constructor:
jHelper,
init:
funcJon()
{
…
},
…
};

8. core/lib.js
jHelper.fn.init
• “jHelper.fn.init”의 프로토타입을 “jHelper.fn”으로 할당하였으므
로 “new”
키워드를 통해 생성된 객체는 “jHelper.fn”
객체에 정
의된 모든 맴버를 참조할 수 있음
var
jHelper
=
funcJon(selector)
{
var
items
=
__(selector);
return
new
jHelper.fn.init(items);
};
jHelper.fn
=
jHelper.prototype
=
{
…
};
jHelper.fn.init.prototype
=
jHelper.fn;

9. core/lib.js
Object
rela0ons
jHelper
jHelper.fn
Init
(Func0on)
(Object)
(Func0on)
__proto__
__proto__
__proto__
prototype
prototype
prototype
fn
constructor
init
…

10. Conclusion
셀렉터와 엘리먼트 목록을 처리하는 로직을 완전히 분리하여 구
현함으로써 상호 간의 독립성을 갖출 수 있다.
또한 jQuery의 객체 생성 모델을 기본 컨셉으로 정함으로써 보다
쉽게 기능을 확장할 수 있다는 장점이 있다.