PAEK, Seung-Hyun
- projectBS core committer- SHOU Communications
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 에 독자적인 셀렉터를 갖고싶은
데 ..'
‘ 승현이 니가 만들면 되겠네 ~!!'
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 도 &^&&^%&%'
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
감사합니다 .ProjectBS
https://www.facebook.com/groups/bs5js/github bsJS
http://ligo.kr/i7github bsSelectorhttp://ligo.kr/o8