지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Dojo Javascript 프로그래밍 표준 JavaScript 작성 표준화 - 기본 지식

Dojo Javascript 프로그래밍 표준 JavaScript 작성 표준화 - 기본 지식

WBOY
풀어 주다： 2016-05-16 16:32:49
원래의
1283명이 탐색했습니다.

머리말

좋은 JavaScript 작성 습관의 장점은 자명합니다. 오늘날 Bingo는 모든 사람에게 Dojo Javascript 프로그래밍 사양을 권장합니다. 이는 모든 사람이 이 사양에서 Javascript를 작성하는 방법을 배울 수 있도록 권장됩니다. 번역해주신 i.feelinglucky님께 감사드립니다.

서문

가독성을 향상시키는 경우 본 가이드를 위반하는 것은 허용됩니다.

모든 코드는 다른 사람이 쉽게 읽을 수 있도록 작성되어야 합니다.

빠른 읽기 참고자료

핵심 API 다음 스타일을 사용하세요.

结构 规则 注释
模块 小写 不要使用多重语义（Never multiple words）
类 骆驼
公有方法 混合 其他的外部调用也可以使用 lower_case()，这样的风格
公有变量 混合
常量 骆驼 或 大写
구조

규칙

댓글

结构 规则
私有方法 混合，例子：_mixedCase
私有变量 混合，例子：_mixedCase
方法（method）参数 混合，例子：_mixedCase, mixedCase
本地（local）变量 混合，例子：_mixedCase, mixedCase

모듈 소문자 여러 단어를 사용하지 마세요 수업 낙타 공개 메소드 믹싱 다른 외부 호출에서도 이 스타일인 lower_case()를 사용할 수 있습니다 공개 변수 믹싱 상수 낙타 또는 자본 다음은 필수는 아니지만 권장되는 사항입니다. _mixedCase
개인 변수 혼합, 예: _mixedCase
메소드 매개변수 혼합, 예: _mixedCase, MixedCase
로컬(로컬) 변수 혼합, 예: _mixedCase, MixedCase


명명 규칙

1. 변수 이름은 소문자여야 합니다.
2. 클래스 이름 지정은 낙타 이름 지정 규칙을 사용합니다. 예:

계정, 이벤트 핸들러

3. 상수는 객체(클래스) 또는 열거형 변수 앞에 선언되어야 합니다. 열거형 변수는 실제 의미를 가지고 이름을 지정해야 하며 해당 멤버는 낙타식 명명 규칙을 사용하거나 대문자를 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

var NodeTypes = {
요소: 1,
문서: 2
}

4. 약어는 대문자 이름을 변수 이름으로 사용할 수 없습니다.

getInnerHtml(), getXml(), XmlDocument
5. 메소드의 명령은 동사 또는 동사구여야 합니다:

obj.getSomeValue()
6. 공용 클래스의 이름은 혼합 이름(mixedCase)을 사용하여 지정해야 합니다.
7. CSS 변수는 해당 변수와 동일한 공개 클래스 변수를 사용하여 이름을 지정해야 합니다.
8. 전용 클래스의 변수 속성 멤버는 혼합 이름(mixedCase)으로 명명되어야 하며 앞에 밑줄(_)이 와야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

var MyClass = 함수(){
var _buffer;
this.doSomething = 함수(){
};
}

9. 변수가 비공개로 설정된 경우 앞에 밑줄을 추가해야 합니다.

this._somePrivateVariable = 진술;

10. 범용 변수는 해당 이름과 일치하는 유형 이름을 사용해야 합니다.

setTopic(topic) // 변수 topic은 Topic 유형의 변수입니다
11. 모든 변수명은 반드시 영문명을 사용해야 합니다.
12. 변수의 범위가 더 넓은 경우(큰 범위) 전역 변수를 사용해야 하며 이 경우 클래스의 멤버로 설계할 수 있습니다. 반면, 범위가 작거나 변수가 비공개인 경우 간결한 단어 명명을 사용하세요.
13. 변수에 자체적인 암시적 반환 값이 있는 경우 유사한 방법을 사용하지 마세요.

getHandler(); // getEventHandler() 사용을 피하세요

14. 공용 변수는 모호한 단어 의미를 피하기 위해 자체 속성을 명확하게 표현해야 합니다. 예:

마우스이벤트 핸들러
, MseEvtHdlr이 아닙니다.
이 규칙에 다시 한 번 주의를 기울이시기 바랍니다. 그렇게 하면 얻을 수 있는 이점은 매우 분명합니다. 표현이 정의하는 의미를 명확하게 표현할 수 있습니다. 예:

dojo.events.mouse.Handler // dojo.events.mouse.MouseEventHandler 대신

15. 기본 클래스의 이름을 확장하여 클래스/생성자의 이름을 지정할 수 있으므로 기본 클래스의 이름을 정확하고 빠르게 찾을 수 있습니다.
이벤트핸들러
UIEventHandler
마우스이벤트핸들러
기본 클래스는 해당 속성을 명확하게 설명한다는 전제 하에 이름을 짧게 지정할 수 있습니다.
​MouseUIEventHandler와 반대되는 MouseEventHandler.

특수 명명 규칙

"get/set"이라는 용어는 개인 변수로 정의되지 않는 한 필드와 연결되어서는 안 됩니다.
"is" 앞에 오는 변수 이름은 부울 값이어야 하며 마찬가지로 "has", "can" 또는 "should"일 수 있습니다.
변수 이름으로 "계산"이라는 용어는 계산된 변수를 참조해야 합니다.
변수명에서 "찾기"라는 용어는 검색이 완료된 변수를 의미합니다.
변수 이름으로 "초기화" 또는 "초기화"라는 용어는 인스턴스화된(초기화된) 클래스 또는 기타 유형의 변수를 참조해야 합니다.
UI(사용자 인터페이스) 제어 변수는 이름 뒤에 제어 유형이 있어야 합니다(예: leftComboBox, TopScrollPane).
컬렉션의 이름을 지정하려면 복수형을 사용해야 합니다.
"num" 또는 "count"로 시작하는 변수 이름은 일반적으로 숫자(객체)입니다.
반복되는 변수에는 "i", "j", "k" 등의 이름을 가진 변수를 사용하는 것이 좋습니다.
보충 용어에는 가져오기/설정, 추가/제거, 생성/삭제, 시작/중지, 삽입/삭제, 시작/종료 등과 같은 보충 단어를 사용해야 합니다.
축약 가능한 이름에는 약어를 사용합니다.
모호한 부울 변수 이름을 사용하지 마세요. 예:
isNotError, isNotFound는 불법입니다
오류 클래스의 경우 변수 이름 뒤에 "Exception" 또는 "Error"를 추가하는 것이 좋습니다.
메서드가 클래스를 반환하는 경우 이름은 반환하는 내용을 나타내야 하며, 프로시저인 경우 수행하는 작업을 나타내야 합니다.

파일

들여쓰기에는 공백 탭 4개를 사용하세요.
편집기가 파일 태그를 지원하는 경우 코드를 더 쉽게 읽을 수 있도록 다음 줄을 추가하세요.

// vim:ts=4:noet:tw=0:
번역 참고 사항: 외국인은 VIM 편집기를 더 많이 사용하므로 이 기사를 따르도록 선택할 수 있습니다.

코드 접기는 완전하고 논리적으로 보여야 합니다.

코드 복사 코드는 다음과 같습니다.

var someExpression = 표현식1
표현식2
식3;

var o = someObject.get(
식1,
표현식2,
식3
);

참고: 표현식과 변수 선언의 들여쓰기는 일관되어야 합니다.
참고: 함수 매개변수는 명시적으로 들여쓰기되어야 하며 들여쓰기 규칙은 다른 블록과 일치해야 합니다.

변수

  1. 변수가 NULL 유형이더라도 변수를 사용하려면 먼저 선언하고 초기화해야 합니다.
  2. 변수는 모호할 수 없습니다.
  3. 관련된 변수 세트는 동일한 코드 블록에 배치되어야 하며, 관련 없는 변수 세트는 동일한 코드 블록에 배치되어서는 안 됩니다.
  4. 변수는 최소 수명을 유지하도록 노력해야 합니다.
  5. 루프/반복 변수 사양:
    1. 루프 제어 블록만 있는 경우 FOR 루프를 사용해야 합니다.
    2. 루프 변수는 루프가 시작되기 전에 초기화되어야 합니다. FOR 루프를 사용하는 경우 FOR 문을 사용하여 루프 변수를 초기화합니다.
    3. "do ... while" 문은 허용됩니다.
    4. "break" 및 "continue" 문은 여전히 ​​허용됩니다(그러나 주의하시기 바랍니다).
  6. 조건식
    1. 복잡한 조건식은 최대한 피해야 하며, 필요한 경우 임시 불리언 변수를 사용할 수 있습니다.
    2. 명목 케이스는 "if" 부분에 넣고 예외는 "if" 문의 "else" 부분에 넣어야 합니다.
    3. 조건식의 블록은 피해야 합니다.
  7. 기타
    1. 매직넘버를 피하려고 노력하세요. 매직넘버는 상수로 대체되어야 합니다.
    2. 부동 소수점 변수는 소수점 이하 한 자리(0이라도)를 지정해야 합니다.
    3. 부동 소수점 변수는 0이더라도 실수부를 지정해야 합니다(앞에 0을 사용하세요).

레이아웃

차단

일반적인 코드 조각은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

동안(!isDone){
doSomething();
isDone = moreToDo();
}

IF 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

if (someCondition){
진술;
} else if (someOtherCondition){
진술;
} 그 밖의 {
진술;
}

FOR 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

for (초기화, 조건, 업데이트){
진술;
}

WHILE 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

동안 (!isDone) {
doSomething();
isDone = moreToDo();
}

DO … WHILE 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

하세요 {
진술;
} while(조건);

SWITCH 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

스위치(조건) {
사례 ABC:
진술;
// 실패
사례 DEF:
진술;
휴식;
기본값:
진술;
휴식;
}

TRY … CATCH 문은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다.

시도해보세요 {
진술;
} 잡기(예) {
진술;
} 드디어 {
진술;
}

한 줄 IF – ELSE, WHILE 또는 FOR 문에도 괄호가 있어야 하지만 다음과 같이 작성할 수 있습니다.
if(조건){문 }
while(조건){문 }
for(초기화; 조건; 업데이트){ 문 }

공백

  1. 연산자는 공백으로 구분하는 것이 좋습니다(삼항 연산자 포함).
  2. 다음 키워드를 구분하기 위해 공백을 사용하지 마세요.
    • 휴식
    • 잡다
    • 계속
    • 하세요
    • 그밖에
    • 드디어
    • 를 위해
    • 함수(익명 함수인 경우, 예: var foo = function(){}; )
    • 만약
    • 반품
    • 스위치
    • 이것
    • 시도해보세요
    • 무효
    • 그동안
    • 함께
  3. 다음 키워드는 공백으로 구분해야 합니다.
    • 케이스
    • 기본값
    • 삭제
    • 함수(선언인 경우, 예: function foo(){}; )
    • 인스턴스
    • 새로운
    • 던지기
    • 유형
    • 변수
  4. 쉼표(,)는 공백으로 구분하는 것이 좋습니다.
  5. 콜론(:) 공백을 사용하여 구분하는 것을 권장합니다.
  6. 끝부분의 점(.)은 공백으로 구분하는 것을 권장합니다.
  7. 점(.) 앞에 공백을 사용하지 마세요.
  8. 함수 호출 및 메서드에서는 공백을 사용하지 않습니다. 예: doSomething(someParameter) // doSomething(someParameter) 대신
  9. 논리 블록 사이에는 빈 줄을 사용하세요.
  10. 문장을 쉽게 읽을 수 있도록 정렬하는 것이 좋습니다.

메모

  1. 저키 코드 주석을 추가할 필요가 없습니다. 먼저 다시 작성 그들.
    2. 모든 댓글에는 영어를 사용해주세요.
    3. 해결된 솔루션부터 아직 개발되지 않은 기능까지, 댓글은
  3. 코드와 관련이 있어야 합니다.
    4. 많은 수의 변수 선언 후
  4. 는 뒤에 주석이 와야 합니다.
    5. 댓글에서는 코드 스니펫, 특히 다음 코드 스니펫의 유용성을 설명해야 합니다.
    6. 댓글
  6. 모든 줄에 를 추가할 필요는 없습니다.

문서화

다음은 몇 가지 기본 기능 또는 개체 설명 방법을 제공합니다.

요약: 이 기능이나 개체의 목적을 간략하게 설명하세요

설명: 이 함수 또는 클래스에 대한 간략한 설명
반환: 이 함수가 반환하는 내용을 설명합니다(반환 유형은 포함하지 않음)
기본 기능 정보

코드 복사 코드는 다음과 같습니다.
함수(){
// 요약: 머지않아 우리는 뉴저지 전체를 통치할 만큼 충분한 보물을 갖게 될 것입니다.
// 설명: 아니면 그냥 새 룸메이트를 구할 수도 있습니다.
// 보세요, 당신은 그를 찾으러 갑니다. 그는 당신에게 소리를 지르지 않습니다.
// 내가 하려고 하는 건 그 사람을 웃게 만들고 노래를 불러주는 것뿐이에요
// 그 사람 주위에서 춤을 추면 그는 그냥 나에게 누워 있습니다.
// 냉동실에 카니발이 있으니 냉동실에 들어가라고 하더군요.
// 반환: 보세요, 바나나라마 테이프입니다!
}

객체 함수 정보

반환 값 설명 없음

코드 복사 코드는 다음과 같습니다.

{
// 요약: 딩글, 레인보우 머신을 투입해보세요!
// 설명:
// 말해두지만, 나도...오 마이 갓-그 광선이었으면 좋겠다.
// 그렇게 나오네요. 속도를 조정하고 싶을 수도 있습니다.
// 정말 골치 아픈 일이었는데, 그렇지 않아요
// 아직은 너무 멀기 때문에 채찍질이라고 말하고 싶습니다.
// 그런데 보험에 가입하셨죠?
}

함수 선언

어떤 경우에는 함수 호출과 선언이 보이지 않습니다. 이 경우 함수에 명령을 추가할 수 있는 방법이 없습니다(프로그램이 호출할 수 있도록). 이러한 상황이 발생하면 클래스를 사용하여 함수를 캡슐화할 수 있습니다.

참고: 이 방법은 함수에 초기화된 매개변수가 없는 경우에만 사용할 수 있습니다. 그렇지 않은 경우 무시됩니다.

코드 복사 코드는 다음과 같습니다.

도장.선언(
"푸",
null
{
// 요약: 휴, 정말 편안하네요, Frylock.
// 설명:
//수천년 전, 새벽이 오기 전
// 우리가 아는 사람에게는 산타클로스 경이 있었습니다.
// 투박하고 무의미한 장난감을 만드는 유인원 같은 생물
// 공룡 뼈를 침팬지 같은 생물에게 던집니다
// 행동에 상관없이 손이 오그라들었습니다
// 전년도.
// 반환: Carl이 우주의 Elfin Elders에게 경의를 표하지 않는 한.
}
);

매개변수



  1. 간단한 유형
    단순 유형 매개변수는 함수 매개변수 정의에서 직접 주석을 달 수 있습니다.
    [cc lang="javascript"]함수(/*String*/ foo, /*int*/ bar)...
    변수 유형 매개변수
    ​ 참고할 수 있는 몇 가지 수식어는 다음과 같습니다.
    ? 선택적 매개변수
    ...면 매개변수의 범위가 불확실하다고 합니다
    배열
    function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...
    전역 매개변수 설명
    설명을 추가하려면 초기화 블록으로 이동하면 됩니다.
    기본 정보 형식은 *키* 설명 필드(*키* 설명문)
    매개변수 및 변수의 형식은 다음과 같습니다. *key* ~*type*~ 설명 필드(*key* ~*type*~ 설명 문장)
    참고: *키워드* 및 ~*유형*~은 문자와 숫자를 사용하여 표현할 수 있습니다.

    코드 복사 코드는 다음과 같습니다.

    함수(foo, bar) {
    // foo: 문자열
    // 첫 번째 매개변수로 사용됩니다
    // 바: 정수
    // 두 번째 매개변수로 사용됩니다
    }

    변수

    인스턴스 변수, 프로토타입 변수, 외부 변수의 선언이 일관되므로 변수를 선언하고 수정하는 방법은 다양합니다. 구체적인 정의와 위치 지정은 처음 나타나는 변수의 이름, 유형, 범위 및 기타 정보를 나타내야 합니다.

    코드 복사 코드는 다음과 같습니다.

    함수 foo() {
    // myString: 문자열
    // 회: int
    // myString을 인쇄할 횟수
    // 구분 기호: 문자열
    // myString*
    사이에 출력할 내용 this.myString = "자리 표시자 텍스트";
    this.times = 5;
    }
    foo.prototype.setString = 함수(myString) {
    this.myString = myString;
    }
    foo.prototype.toString = function() {
    for(int i = 0; i < this.times; i ) {
    dojo.debug(this.myString);
    dojo.debug(foo.separator);
    }
    }
    foo.separator = "=====";

    객체의 변수 주석

    은 객체 값 및 메소드와 동일한 방식으로 표시되어야 합니다. 예를 들어 선언할 때

    코드 복사 코드는 다음과 같습니다.

    {
    // 키: 문자열
    // 간단한 값
    키: "값",
    // 키2: 문자열
    // 또 다른 간단한 값
    }

    반환값

    함수는 동시에 여러 가지 (유형) 값을 반환할 수 있으므로 각 반환 값 뒤에 반환 유형 설명을 추가해야 합니다. 라인 내에서 주석을 작성할 수 있습니다. 모든 반환 값이 동일한 유형인 경우 반환 유형을 표시하고, 다른 반환 값이 여러 개 있는 경우 반환 유형을 "혼합"으로 표시합니다.

    코드 복사 코드는 다음과 같습니다.

    함수() {
    if (arguments.length) {
    return "인수를 전달했습니다." // 문자열
    } 그 밖의 {
    false를 반환합니다. // 부울
    }
    }

    의사 코드(논의 예정)

    함수나 클래스에 이 함수나 클래스에 대한 기능 프로세스 설명을 추가해야 하는 경우가 있습니다. 이렇게 할 계획이라면 /*========(= 문자는 5번 이상 나타나는 것이 바람직함)을 사용할 수 있는데, 이는 코드에 이런 것들을 추가하지 않아도 된다는 장점이 있습니다(주석: 원저자의 아마도 코드 관리 시스템을 의미할 것입니다).

    /*======, =====*/에 아주 긴 댓글이 있을 것으로 보입니다. 기능 조정이 완료된 후 삭제 여부를 고려하시면 됩니다.

    코드 복사 코드는 다음과 같습니다.

    /*=====
    module.pseudo.kwArgs = {
    // URL: 문자열
    //파일 위치
    URL: "",
    // mime 유형: 문자열
    // 텍스트/html, 텍스트/xml 등
    mime 유형: ""
    }
    =====*/

    함수(/*module.pseudo.kwArgs*/ kwArgs){
    dojo.debug(kwArgs.url);
    dojo.debug(kwArgs.mimeType);
    }

    원본 링크: http://dojotoolkit.org/developer/StyleGuide
    번역자: i.feelinglucky{at}gmail.com, http://www.gracecode.com

관련 라벨：
javascript 프로그래밍 표준
원천：php.cn
이전 기사：js_javascript 기술의 json 객체에 대한 자세한 소개 다음 기사：마우스 호버 표시 보조 메뉴 effect_jquery의 jquery 구현
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿