[JavaScript Library] - Simple jQuery

Code
Review

Core.
DOM
Manipula0on
and
Event

core/sel.js

jSelector
||
__

•  셀렉터 구문이 그룹인지 싱글인지 체크하여 별도 처리

•  셀렉터 구문은 “,” 유무로 체크

•  외부에서
“jSelector”
또는 “__”로 함수 호출

var
result
=
__(“#sel1,.sel2,…”);

console.log(result);
//
Array

core/sel.js

jSelectorNode

•  셀렉터 구문 타입에 따른 분기 처리

•  속성일 경우에는 내부적으로 “jParser”
함수를 호출

var
result
=
[

__(“selector”),
__(window),
…

];


core/sel.js

jParser

•  셀렉터 구문 타입이 속성일 경우 처리되는 함수

•  속성 이름과 값이 일치하는 모든 엘리먼트를 검색

•  하위 노드가 없을 때까지 재귀 호출

var
result
=
__(“[name=value]”);


core/lib.js

jEventProxy

•  이벤트 발생시 등록된 리스너 함수의 매개변수로 전달되는 객
체의 크로스브라우징 처리를 위한 프록시 함수

•  “jHelper.fn.bind” 함수 내부에서 사용

core/lib.js

jHelper
||
$$

•  내부적으로 셀렉터의 결과 값을 얻어오고,
DOM
관련 함수
(jQuery 확장 함수와 비슷한 개념)에 접근할 수 있는 객체를 생
성하여 리턴하는 Wrapping
함수

var
items
=
__(selector);

return
new
jHelper.fn.init(items);

core/lib.js

jHelper.fn

•  DOM 생성, 변경, 이벤트 등의 기능을 제공하는 함수들을 포함
하며 관련 함수를 외부에서 추가할 수 있는 객체

•  “jHelper.fn.custom
=
func<on()
{
}”
형태로 외부에서 구현 가능

jHelper.fn
=
jHelper.prototype
=
{

constructor:
jHelper,

init:
funcJon()
{
…
},

…

};

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;

core/lib.js

Object
rela0ons

jHelper
jHelper.fn
Init

(Func0on)
(Object)
(Func0on)

__proto__
__proto__
__proto__

prototype
prototype
prototype

fn
constructor

init

…

Conclusion

셀렉터와 엘리먼트 목록을 처리하는 로직을 완전히 분리하여 구
현함으로써 상호 간의 독립성을 갖출 수 있다.

또한 jQuery의 객체 생성 모델을 기본 컨셉으로 정함으로써 보다
쉽게 기능을 확장할 수 있다는 장점이 있다.

[JavaScript Library] - Simple jQuery

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to [JavaScript Library] - Simple jQuery (20)

[JavaScript Library] - Simple jQuery