태그 : (203) | 전체태그
  • Prototype에 대하여...
  • 카테고리 : Javascript    2007/11/13 09:58
  • 당신은 Prototype에 대하여 얼마나 잘 알고 있나요?

    위 글을 보고 몇자 적어봅니다.
    알고 있는 부분은 빼고 나중에 참고하여 적을것들에 대해서만 적어둡니다.
    //바르지 못한 방법:
    Event.observe('myContainer', 'click', doSomeMagic);

    //적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
    $('myContainer').observe('click', doSomeMagic);

    흠.. 전자를 사용하였는데.. 논쟁의 여지가 있는줄에 대해서는 알지 못하였다.


    //바르지 못한 방법:
    $$('div.collapsed').each(function(el){
        el.observe('click', expand);
    })
    //적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
    $$('div.collapsed').invoke('observe', 'click', expand)


    //바르지 못한 방법:
    $$('input.date').invoke('observe', 'focus', onFocus);
    $$('input.date').invoke('observe', 'blur', onBlur);
    //적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
    $$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

    //바르지 못한 방법:
    $('productTable').innerHTML =
        $('productTable').innerHTML +
        '<tr><td>' + productId + ' '
        + productName + '</td></tr><tr><td>'
        + productId + ' ' + productPrice +
        '</td></tr>'
    //적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
    var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
    $('productTable').insert(
        rowTemplate.evaluate({
            id: productId,
            name: productName,
            price: productPrice
        }))
    )



    흠..
    invoke, new Template의 경우 지금까지 사용하지 않았었군요.
    상당히 편리한 메소드이군요..


    그외에 것들

    $(nextmonth).addClassName('calcontrol');
    $(nextmonth).addClassName('calnextmonth');
    $(nextmonth).observe('click',this.nextmonth);

    위의 firejune님이 소개한 곳에도 나오지만....
    아래와 같이 편하게 추가가능하군요.
    $(nextmonth).addClassName('calcontrol calnextmonth').observe('click', this.nextmonth);




    var left1 = $('left1');
    // creating array of strings and iterating over them
    $w('learn play grow join').each(function(s){
        left1.removeClassName(s);
    });

    나 같은 경우...
    'learn|play|grow|join'.split('|').each(function(s) {}); 로 사용했는데... $w를 사용하였군요.
    어느게 더 나은 결과를 보여줄지는 테스트를 해봐야겠군요..



    틀린경우
    $('someLink').observe('click', function(){doSomething(); returnfalse; })

    옳은 경우
    $('someLink').observe('click', function(e){e.stop(); doSomething(); })

    흠.. 글쿤요.. return false; 가 오난 e.stop();으로 이벤트를 종료시키는군요... 흠... 흠흠..

     
  • 트랙백 0 : 덧글 0
  • 심심해 ㅡ,.ㅡ;;;
  • 카테고리 : 주저리주저리    2007/11/06 14:36


  • 아무 이유 없이 들어보자. ㅡ.ㅡ;;
    계속 듣다 보면 중독된다.


    으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이 으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
    으하하하하하 멍충이
  • 트랙백 0 : 덧글 0
1 / 2 / 3 / 4 / 5 ... 다음