bsSelector.js

PAEK, Seung-Hyun

- projectBS core committer- SHOU Communications

projectBS

projectBSbsJS

bsJS

var color = bs.Dom('#domID').S('border-radius', 5, '@width', 100, 'color', '#fff');

console.log(color) // "#fff“

var color = $('#domID').css({'borderRadius' : 5,'WebkitBorderRadius' : 5,'MozBorderRadius': 5

}).attr('width', 100).css('color');console.log(color) // "#fff"

'bsJS 에 독자적인 셀렉터를 갖고싶은

데 ..'

‘ 승현이 니가 만들면 되겠네 ~!!'

bsSelector

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

Selector processquery 의 tokenizer

요소 선택요소 순환요소 판정결과 반환

query = 'ul.toc li.tocline2‘;tokens = ['ul', '.toc', ' ', 'li', ‘.tocline2‘];

if(tokens[i].charAt(0) == '#') document.getElementById(query);else if(tokens[i].charAt(0) == '.') document.getElementByClassName(query);else document.getElementsByTagName('*');

‘CSS2 spec 은 기본아냐 ?'

‘CSS3 spec 도 하는김에 하지 ?'

‘CSS4 spec 도 &^&&^%&%'

일단 완성

Sizzle speed

jsPerf.com

getElementByIdgetElementsByTagName

getElementsByClass-Name

getElementsByNamequerySelectorAll

ID TAG CLASS NAME

2,096,567 1,876,875 1,841,273 1,575,123

17,090,351 8,920,145 8,285,463 8,031,034

19,384,745 16,661,97317,559,67

819,073,48

5

ID TAG CLASS

124,963 126,480 106,504

1,091,549

222,199 210,918

2,020,367

321,119 339,747

상황은 조금 나아졌지만…다음은 ???

JavaScript 는인터프리터 언어

인터프리터 ?

함수 호출을최소화

함수 호출을 최소화 한다

함수 호출을 최소화 한다

function Non function

16,830 54,080

49,063 49,436

51,524 52,066

네이티브메서드안심하지 말자

네이티브메서드라고 안심하지 말자

네이티브메서드라고 안심하지 말자

forEach for()

300 879

658 2,851

142 4,229

네이티브메서드라고 안심하지 말자

네이티브메서드라고 안심하지 말자

Function.bind obj.add()

39,188,564

79,601,156

658 2851

5,125,064473,773,6

57

LinkedListgetElementsByTagName

getElementsByClassName

var els = document.getElementByTagName(‘div’);

console.log(els.length);

var newEl = document.createElement(‘div’);

document.body.appendChild(newEl);

console.log(els.length);

반복의 제거

div

P[0] P[1] P[2]

element.childNodes;children.nodeType == 1;

VSelement.children

이런 사실들과알고리즘등을

고려하면서 재작성

이런 사실들과알고리즘등을

고려하면서 재작성

Sizzle Mootools-slick

bsSelector

함수개수 : 140 93 13

라인수 : 1,214 2,037 305

용량 : 60,335 37,935 13,485

그 결과

Chrome

IE

감사합니다 .ProjectBS

https://www.facebook.com/groups/bs5js/github bsJS

http://ligo.kr/i7github bsSelectorhttp://ligo.kr/o8