Javascript 좋은 프로그래밍 스타일의 간단한 예?

Question

나는 자바 스크립트로 고심하고있다. 내 문제의 대부분은 언어에 대한 이해가 부족하여 발생하지 않습니다. 대신, 좋은 문제는 프로그래밍/코드 조직 스타일이 무엇인지 이해하는 것입니다.

예를 들어 페이지에서 다른 엔티티 (양식, 텍스트 영역, 표 등)를 가져와 사용자 트리거 또는 Ajax 이벤트에 따라 수정해야합니다.

첫 번째 아이디어는 각 엔티티에 대해 하나의 클래스를 정의하고 이러한 클래스의 프로토 타입에 메소드를 정의한 다음 암시 적으로 또는 새로 인스턴스화 할 때 특정 HTML ID에 바인딩하는 클래스를 인스턴스화하고 이벤트 사이에 핸들러를 등록하는 것이 었습니다 및 메서드 호출. 즉, 일종의 "QT 스타일"입니다. 나는 그것이 사소한 것이 아니라는 것을 곧 알았다. 객체 메소드를 콜백으로 직접 등록 할 수는 없지만 클로저에 랩핑해야합니다.

또 다른 생각은 콜백 함수, 객체가없는 콜백 함수를 선언하고 각 콜백이 전역 변수 그리고 DOM에서. 빠르고 더럽고 소란스럽지 않습니다. 그것은 귀하의 페이지가 이벤트가 내부적으로 처리되는 큰 객체 일 것입니다.

내가 생각할 수있는 모든 해결책은 도구를 과도하게 잘못 사용했다는 느낌을 받았다. 결국 프로그래밍 경험에 자바 스크립트 코드가 거의 없었기 때문에 편안함을 느끼지 못했습니다. 경험 한 모든 언어와 매우 다릅니다. 내가 다운로드 한 첫 번째 항목을 엿보는 것은 현재의 "좋은 자바 스크립트 습관"으로 "압축"및/또는 난독 화 및/또는 "최신"이 아닌 시간 낭비가 될 수 있으므로, 강력하고 깨끗한 웹 페이지와 관련 자바 스크립트 코드를 사용하여 적절한 프로그래밍/코드 레이아웃 스타일을 빠르게 얻을 수 있습니다.

(저는 jQuery를 사용하고 있지만 제 질문은 그와는 독립되어 있습니다. 그럼에도 불구하고 jQuery를 사용한 예가 선호 될 것입니다.)

Answer 1

나는 JavaScript apps를 this question에 어떻게 만들 었는지 보여주는 예가 있습니다. 요약은 다음과 같습니다.

• 각 싱글 톤 개체에 대해 하나의 파일을 만듭니다. 코드에서 ajax 중간 레이어와 ui 인터페이스를 별도의 파일에 저장하십시오.
• 일반적으로 프로젝트에서 3 개의 레이어에 대한 글로벌 싱글 톤 객체를 만듭니다. GUI, 백엔드 및 응용
• 백엔드 객체 외부의 아무 곳에서나 순수한 아약스를 사용하지 마십시오. 백엔드 오브젝트의 서버 측 페이지에 URL을 저장하고 해당 URL을 사용하여 서버에 접속하는 함수 하나를 작성하십시오.
• 오류 및 예외를 클라이언트에보고 할 수있는 서버에 JSON 클래스가 있습니다. Backend 객체에서 반환 된 JSON 객체에 오류가 있는지 확인하고 GUI 클래스의 serverError 함수를 호출하여 사용자 (또는 개발자)에게 오류를 표시합니다.

Answer 2

Douglas Crockford의 JavaScript: The Good Parts에서 JavaScript를 작성하는 법을 배웠습니다. 그는 a lot도 stuffonline입니다. check out 일 수 있습니다.

내 기본 스타일은 클래스 작성을위한 JavaScript의 메커니즘을 삭제하고 클로우 징 및 개체 리터럴 표기법으로 "개체"를 만들어 Scheme과 비슷한 방식으로 다루는 것입니다. (Scheme에 대한 배경이 있는지 확실하지 않은 경우,이 접근법은 당신에게 덜 자연스럽게 느껴질 수 있습니다.) 어떻게하는지에 대한 더 자세한 설명은 Crockford가 짧은 에세이 here을 가지고 있습니다.다음은 간단한 예입니다.

var pezDispenser = (function() { 
    var amount = 20; 
    return { 
     dispense: function() { 
      if (amount > 0) } 
       amount -= 1; 
       alert('delicious pez!'); 
      } else { 
       alert('no more pez!'); 
      } 
     } 
    }; 
}()); 

pezDispenser.dispense(); 

나는 이것을 매우 강력하고 유연한 접근 방식으로 생각했습니다.

크록 포드는 언어 here 및 here에 대한 일반적인 스타일 가이드가 있습니다.

희망이 도움이됩니다.

Answer 3

이 질문은 꽤 오래 전입니다.

하지만이 페이지를 좋아 : 42 Javascript best practices (Opera)