
John Resig씨가 ECMAScript를 중심으로 재미있는 다이어그램을 그렸네요. 2007년 말에 작성된 것이라 구글 크롬의 V8 등과 관계는 누락되어 있지만 ECMAScript의 영역을 한눈에 보여주고 있습니다. 멋지네요!
Rev. 2.73
John Resig씨가 ECMAScript를 중심으로 재미있는 다이어그램을 그렸네요. 2007년 말에 작성된 것이라 구글 크롬의 V8 등과 관계는 누락되어 있지만 ECMAScript의 영역을 한눈에 보여주고 있습니다. 멋지네요!
이 내용 역시 kangax씨가 작성한 것으로, Prototype 코드를 효율적으로 리팩토링한 예제입니다. 사실, 리팩토링이라기 보다는 Prototype의 유틸리티 함수의 활용법을 알리려는 것 처럼 보이네요.
// before
function hideall() {
hidediv('dropdown1');
hidediv('dropdown2');
hidediv('dropdown3');
hidediv('dropdown4');
hidediv('dropdown5');
hidediv('dropdown6');
hidediv('dropdown7');
}
// after
$R(1, 7).each(function(n) {
hidediv('dropdown' + n);
})
// before
function resetnotes() {
$('left1').removeClassName('learn');
$('left1').removeClassName('play');
$('left1').removeClassName('grow');
$('left1').removeClassName('join');
}
// after
// storing element's reference for faster access
var left1 = $('left1');
// creating array of strings and iterating over them
$w('learn play grow join').each(function(s){
left1.removeClassName(s);
})
// another solution
Element.addMethods({
removeClassName: Element.Methods.removeClassName.wrap(function() {
var args = $A(arguments), proceed = args.shift(), element = $(args.shift());
if (args.length > 1) {
// this is our modified behavior (only if more than 1 argument was passed)
element.className = element.className.replace(new RegExp("\s*(" + args.join('|') + ")\s*"), '');
return element;
}
// and this is a default one
return element.proceed();
})
})
// before
if (typeof this.prevbutton == 'object') {
$(prevmonth).appendChild(this.prevbutton);
} else {
$(prevmonth).update(this.prevbutton);
}
// after
$(prevmonth)[typeof(this.prevbutton) == 'object' ? 'appendChild' : 'update'](this.prevbutton);
// before
$(nextmonth).addClassName('calcontrol');
$(nextmonth).addClassName('calnextmonth');
$(nextmonth).observe('click',this.nextmonth);
// after
$(nextmonth).addClassName('calcontrol calnextmonth').observe('click', this.nextmonth);
요런 코드들은 눈에 자주 밟혀야 써먹습니다. ^^;
kangax씨가 2007년 9월에 작성한 내용입니다. "with" 명령문(Statements)으로 자바스크립트 성능을 향상시키는 방법에 대하여 다루고 있습니다. 아래의 코드를 실험해 보십시오.
Foo = {
Bar: {
Baz: {
Qux: {
Quux: function(){}
}
}
}
}
// Plain call
console.time('test');
for (var i = 0; i < 100000; ++i) {
Foo.Bar.Baz.Qux.Quux();
}
console.timeEnd('test'); // 562 ms
// "with" outside the loop
console.time('test');
with(Foo.Bar.Baz.Qux) {
for (var i = 0; i < 100000; ++i) {
Quux();
}
}
console.timeEnd('test'); // 359 ms
// with inside the loop
console.time('test');
for (var i = 0; i < 100000; ++i) {
with(Foo.Bar.Baz.Qux) {
Quux();
}
}
console.timeEnd('test'); // 1891 ms
// aliasing
console.time('test');
for (var i = 0, q = Foo.Bar.Baz.Qux.Quux; i < 100000; ++i) {
q();
}
console.timeEnd('test'); // 422 ms
Comments