Firejune

John Resig씨가 ECMAScript를 중심으로 재미있는 다이어그램을 그렸네요. 2007년 말에 작성된 것이라 구글 크롬의 V8 등과 관계는 누락되어 있지만 ECMAScript의 영역을 한눈에 보여주고 있습니다. 멋지네요!

이 내용 역시 kangax씨가 작성한 것으로, Prototype 코드를 효율적으로 리팩토링한 예제입니다. 사실, 리팩토링이라기 보다는 Prototype의 유틸리티 함수의 활용법을 알리려는 것 처럼 보이네요.

반복 1

// 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);
})

반복 2

// 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