자바스크립트 개발시 지켜주면 좋은 팁

1. 단지 $ 축약형 하나만을 위해 Java Script Framework인 prototype.js(이하 프로토타입) 를
 쓸것인가....
  럭셔리한 Java Script Action을 위해 프로토타입 사용을 고민한 사람들이 있을것이다...
 이 소스는 약 200키로바이트로 얼마 안되어 보이지만 웹 브라우저와 클라이언트의 측면에서는
 대단히 무거운 소스이다.
   아래는 이 프레임웍에서 자주 사용되는 소스를 활용한 효과적인 팁중 하나이다.
 
  var $ = function(element) {
      return document.getElementById(elemelt);
  }
  위 소스는 프로토타입에서 단순히 $변수명 입력시에 객체를 리턴하기 위한 일부 기능을 소스로
  표현한 것이다 이 기능을 사용하기 위해서 위 소스를 직접 구현하여 사용하여도 된다.
    또는 아래와 같은 소스도 유용하다
  var $ = document.getElmentById;

2. innerHTML을 위해 길게 늘어쓴 String 연산
   Ajax또는 비동기 페이지를 위해 아래와 같은 소스를 사용한 경험들이 있을 것이다.

   var strHTML = "<div id='abcd'>";
   strHTML += "태그들";
   strHTML += "태그들";
   strHTML += "태그들";
   .....
   strHTML += "</div>";

   하지만 위 코드는 치명적인 단점이 있다(특히 IE에서) 왜냐하면 IE를 대표적으로 브라우저에서
  스트링 연산이 빠르지 않아 클라이언트의 부하가 늘수 있다는 것이다.
   아래는 이를 대처하기 위한 방법이다.
  var strHTML = new Array();
   strHTML.push(" 태그들 ");
   strHTML.push(" 태그들 ");
   strHTML.push(" 태그들 ");
   .....
   retrun strHTML.join("");

   위는 배열을 사용하여 배열에 추가하고 총합하여 리턴해주는 방식이다. 이 방식이 상위의
  스트링 연산의 방식보다 속도측면에서 개선할 수 있다고 한다.

3. Document 모델 보다는 DOM 형식의 ID로 찾기
   처음 또는 초보 개발자들은 document.(Form 이름).(컨트롤 이름).(속성) = "값"; 이런 방식으로
  구현해본 경험이 있을것이다.. 이는 W3C 표준에서는 document.getElementByID("ID 명").속성
  = "값" 과 같은 형태로 사용하기를 권장하고 있다.

4. Pseudo code 사용의 자제
   아래와 같은 코드를 대부분 사용해 본적이 있을 것이다.
   <a href ="javascript:goTo();">여기로 이동</a>
  
   위 사항 보다는 아래와 같은 방식을 추천한다.
 
   <a href="#" onclick="goTo();">여기로 이동</a>  또는
    <a href = "anyURL" onclick = "goTo();return false;">여기로 이동</a>
  
   이유는 코드 가독성 및 표준개발 가이드에 입각한 내용이라고 한다.

- 위 내용은 Daum Communication 구경택님의 자료를 바탕으로 했으며 저작권은 http://no7do.tistory.com/ 의 블로거 김도영과 구경택님에게 있음-