객체 지향 자바 스크립트 모범 사례? [닫은]


251

Javascript에서 큰 프로젝트를 코딩하고 있습니다. 해키 JS가 빠르게 읽을 수 없게되고이 코드를 깨끗하게하기를 원하기 때문에 마지막 것은 상당히 모험 이었다는 것을 기억합니다.

글쎄, 나는 lib를 구성하기 위해 객체를 사용하고 있지만 JS에서 것들을 정의하는 몇 가지 방법이 있는데, 범위, 메모리 관리, 네임 스페이스 등에 중요한 결과를 내포한다. EG :

  • 사용 var여부;
  • 파일 또는 (function(){...})()jquery 스타일로 항목을 정의합니다.
  • 사용 this여부;
  • function myname()또는 사용 myname = function();
  • 물체의 몸체에서 방법을 정의하거나 "시제품"을 사용하는 것;
  • 기타

그렇다면 JS에서 OO로 코딩 할 때 실제로 가장 좋은 방법은 무엇입니까?

학문적 설명은 여기서 실제로 기대되었습니다. 품질과 견고성을 다루는 한 책에 대한 링크는 따뜻하게 환영합니다.

편집하다 :

약간의 독서가 있지만 위의 질문에 대한 답변과 모범 사례에 여전히 관심이 있습니다.


2
제목이 "object oriented"인 경우는 "modern"으로 바꾸어야합니다.
viam0Zah

43
흠, 79 upvotes, 82 favs, 91 upvotes에 대한 답변 ... 그러나 이것은 건설적이지 않아 폐쇄되었습니다 ... 왜 ??
Brett Rossier

1
간단하고 자연스러운 구문으로 C ++ OOP 기능을 자바 스크립트로 이식하는 간단한 클래스를 작성했습니다. 내 답변보기 here : stackoverflow.com/a/18239463/1115652

14
이 유형의 질문은 항상 닫힙니다. 나는 그 이유를 이해하지만 중요한 질문이며 항상 인기가 있으며 (그리고 비슷한 질문이있을 때 항상 찾으므로) 누군가가 우리를 질문 할 적절한 장소로 안내 할 수 있는지 궁금합니다.
KP MacGregor

2
@BrettRossier 당신이 그것을 사용하지 않으면 힘은 무엇입니까? SO는 민주주의 펙킹 질서의 작동 방식에 대한 실시간 데모입니다. 확실히 일부 심리학자들은 그것을 조사하고 있습니다 ...

답변:


288

`var` 사용 여부

var명령문에 변수를 도입해야하며 , 그렇지 않으면 전역 범위에 도달합니다.

엄격 모드 ( "use strict";)에서 선언되지 않은 변수 할당이 발생ReferenceError 한다는 것을 언급 할 가치 있습니다.

현재 JavaScript에는 블록 범위가 없습니다. Crockford 학교는 함수 본문의 시작 부분에 var 문넣도록 가르치고 Dojo의 스타일 가이드는 모든 변수가 가능한 가장 작은 범위에서 선언되어야한다고 읽습니다 . 합니다 ( let문 및 정의 자바 스크립트 1.7에서 소개는 ECMAScript를 표준의 일부가 아닙니다.)

전체 범위 체인을 찾는 것보다 빠르기 때문에 정기적으로 사용되는 객체의 속성을 로컬 변수에 바인딩하는 것이 좋습니다. 최고의 성능과 낮은 메모리 소비를 위해 JavaScript 최적화를 참조하십시오 .

파일 또는`(function () {...}) ()`에있는 것들 정의하기

코드 외부에서 객체에 도달 할 필요가없는 경우 전체 코드를 함수 표현식으로 묶을 수 있습니다.이를 모듈 패턴이라고합니다. 성능상의 이점이 있으며 코드를 최소화하고 모호하게 할 수 있습니다. 전역 네임 스페이스를 오염시키지 않도록 할 수도 있습니다. JavaScript로 함수 랩핑 을 사용하면 측면 지향 동작을 추가 할 수도 있습니다. Ben Cherry에는 모듈 패턴에 대한 자세한 기사가 있습니다.

`this` 사용 여부

JavaScript에서 의사 클래식 상속을 사용하는 경우을 사용하는 것을 피할 수 없습니다 this. 어떤 상속 패턴을 사용하는지는 맛의 문제입니다. 다른 경우에는 "this"없는 JavaScript 위젯 에 대한 Peter Michaux의 기사를 확인하십시오 .

`function myname ()`또는`myname = function ();`사용

function myname()함수 선언이며 myname = function();variable에 지정된 함수 표현식 myname입니다. 후자의 형식은 함수가 일류 객체이며 변수와 마찬가지로 무엇이든 할 수 있음을 나타냅니다. 그들 사이의 유일한 차이점은 모든 함수 선언이 특정 범위에서 중요 할 수있는 범위의 최상위에 게양된다는 것입니다. 그렇지 않으면 동일합니다. function foo()속기 형태입니다. 호이 스팅에 대한 자세한 내용은 JavaScript 범위 지정 및 호이 스팅 기사를 참조하십시오.

객체의 본문에서 "프로토 타입"을 사용하여 메소드 정의

그것은 당신에게 달려 있습니다. JavaScript에는 의사 클래식, 프로토 타입, 기능 및 파트의 네 가지 객체 생성 패턴이 있습니다 ( Crockford, 2008 ). 각각의 장단점이 있습니다. 비디오 대화에서 Crockford를 보거나 Anon이 이미 제안한The Good Parts 를 얻으십시오 .

프레임 워크

JavaScript 프레임 워크를 선택하고 해당 규칙과 스타일을 연구하고 자신에게 가장 적합한 관행과 패턴을 찾으십시오. 예를 들어, Dojo 툴킷 은 다중 상속을 지원하는 객체 지향 JavaScript 코드를 작성할 수있는 강력한 프레임 워크를 제공합니다.

패턴

마지막으로, 일반적인 JavaScript 패턴 및 안티 패턴탐색하기 위한 블로그 가 있습니다 . JavaScript에 대한 코딩 표준이 있습니까? 라는 질문도 확인하십시오 . 스택 오버플로


1
"자바 스크립트에는 의사 클래식, 프로토 타입, 기능 및 파트라는 네 가지 객체 생성 패턴이 있습니다. 여기 장단점을 요약 해 주셔서 감사합니다.
BadHorsie

2
" letJavaScript 1.7에 도입 된 설명과 정의는 ECMAScript 표준의 일부가 아닙니다." 이제 ES6의 일부입니다.
Michał Perłakowski

13

이 질문을 한 후 읽거나 응용 프로그램에 넣은 내용을 적어 보겠습니다. 따라서 대부분의 답변은 위장관 RTMF의 위장에 속하기 때문에 좌절하지 않습니다. (제가 인정해야 할지라도 제안 된 책은 훌륭합니다).

Var 사용법

모든 변수는 JS의 상위 범위에서 이미 선언되어 있어야합니다. 따라서 새로운 변수를 원할 때마다 전역 변수를 인식하지 않고 조작하는 것과 같은 나쁜 놀라움을 피하기 위해 변수를 선언하십시오. 따라서 항상 var 키워드를 사용하십시오.

객체 make에서 변수를 private로 바꿉니다. 공용 변수를 선언하려면 this.my_var = my_value그렇게하십시오.

메소드 선언

JS에서는 메소드를 선언하는 수많은 방법입니다. OO 프로그래머에게는 가장 자연 스럽지만 효율적인 방법은 다음 구문을 사용하는 것입니다.

대상체 내부

this.methodName = function(param) {

/* bla */

};

재미있는 JS 범위로 인해 내부 함수가 "this"에 액세스 할 수 없다는 단점이 있습니다. Douglas Crockford는 "that"이라는 기존 로컬 변수를 사용하여이 제한을 무시할 것을 권장합니다. 그래서 그것은

function MyObject() {

    var that = this;

    this.myMethod = function() {

        jQuery.doSomethingCrazy(that.callbackMethod);

    };

};

자동 줄 끝에 의존하지 마십시오

JS는 ;잊어 버린 경우 줄 끝에 자동으로 추가하려고 합니다. 디버깅해야하는 오류가 발생하므로이 동작에 의존하지 마십시오.


8

먼저 프로토 타입 기반 프로그래밍 에 대해 읽어보고 어떤 종류의 야수를 다루고 있는지 살펴보고 MDC에서 자바 스크립트 스타일 가이드MDC에서 자바 스크립트 페이지를 . 또한 도구를 사용하여 코드 품질을 강제하는 것이 가장 좋습니다. JavaScript Lint 또는 기타 변형

OO를 사용하는 모범 사례는 코드 품질에 중점을 두는 것보다 패턴을 찾으려고하는 것처럼 들립니다. Google 검색 javascript 패턴jQuery 패턴을 .



5

나는 종종 내 자바 스크립트에 MooTools를 사용하는 유일한 사람처럼 느낍니다.

그것은 약자 M의 Y O bject O riented 도구, Mootools의.

나는 자바 스크립트에서 OOP를 취하는 것을 정말로 좋아합니다. jquery와 함께 클래스 구현을 사용할 수도 있으므로 jquery를 버릴 필요가 없습니다 (mootools가 모두 수행하지만).

어쨌든 첫 번째 링크를 잘 읽고 두 번째 링크는 mootools 문서에 대한 것입니다.

MooTools 및 상속

MooTools 클래스


오래된 습관에 맞도록 언어를 구부리는 것은 좋은 일이 아닙니다. C에서이 사람들과 비슷합니다. #을 사용하여 fortran처럼 보이게합니다. 언어의 작동 방식 (및 최상의 방법)을 배우고 너무 많이 방해하지 않는 방식으로 사용해야하지만 실제로 변경하지 마십시오.
e-satis

2
MooTools 객체 시스템은 매우 우아하며 코드를 체계적으로 정리 / 캡슐화하는 데 실제로 도움이된다고 생각합니다.
awesomo

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.