• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[JavaScript Library] - Simple jQuery
 

[JavaScript Library] - Simple jQuery

on

  • 6,469 views

입사 예정인 회사의 과제 테스트에서 제출한 자바스크립트 라이브러리입니다. ...

입사 예정인 회사의 과제 테스트에서 제출한 자바스크립트 라이브러리입니다.
그냥 두기에는 아까워서 이렇게 공유드립니다.

본 라이브러리는 DOM Selector, Manipulation, Event 등의 기능을 제공합니다.
사용 방법은 jQuery와 동일하며, 관련 설명은 아래 프레젠테이션을 참고하시면 됩니다.

[본문] - http://youngman.kr/?p=1432
[데모] - http://test.youngman.kr/script/exam/core/

Statistics

Views

Total Views
6,469
Views on SlideShare
2,534
Embed Views
3,935

Actions

Likes
2
Downloads
11
Comments
1

11 Embeds 3,935

http://youngman.kr 2746
http://www.okjsp.pe.kr 639
http://www.okjsp.net 406
http://okjsp.pe.kr 127
http://okjsp.net 7
http://flex.okjsp.pe.kr 3
http://aaa.okjsp.pe.kr 2
http://flex.okjsp.net 2
http://blog.naver.com 1
http://www.wiki.okjsp.net 1
http://www.new.okjsp.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hello

    my name is miss Naomi female single never married ,i became interested when i saw your profile.please for more about me email me( naomi_eden1@yahoo.com ),so that i will send you my picture,also i have good thing to share whit you,
    thanks yours regard
    ( Naomi ).

    reply to naomi_eden1@yahoo.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [JavaScript Library] - Simple jQuery [JavaScript Library] - Simple jQuery Presentation Transcript

    • 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),  …   ];   console.log(result);    
    • core/sel.js  jParser  •  셀렉터 구문 타입이 속성일 경우 처리되는 함수  •  속성 이름과 값이 일치하는 모든 엘리먼트를 검색  •  하위 노드가 없을 때까지 재귀 호출     var  result  =  __(“[name=value]”);   console.log(result);    
    • 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의 객체 생성 모델을 기본 컨셉으로 정함으로써 보다쉽게 기능을 확장할 수 있다는 장점이 있다.