JavaScript는 권위있는 코딩 스타일 가이드가 없지만 대신 인기있는 코딩 스타일입니다.
코드 사본은 다음과 같습니다.
Google의 JavaScript 스타일 가이드 (이하 Google이라고 함)
http://google-styleguide.googlecode.com/svn/trunk/javaScriptGuide.xml
NPM 인코딩 스타일 (이하 NPM이라고 함)
https://npmjs.org/doc/coding-style.html
Felix의 node.js 스타일 가이드 (이하 Node.js라고 함)
http://nodeguide.com/style.html
관용적 인 JavaScript (이하는 관용학이라고 함)
https://github.com/rwldrn/iiomatic.js/
jQuery JavaScript 스타일 가이드 (이하 jQuery라고 함)
http://contribute.jquery.org/style-guide/js/
Douglas Crockford의 JavaScript 스타일 가이드 (Crockford라고 불리는) Douglas Crockford는 웹 개발 분야에서 가장 잘 알려진 기술 당국 중 하나이며 ECMA JavaScript 2.0 표준화위원회 회원입니다.
http://javaScript.crockford.com/code.html
물론 JavaScript 구문 검사기 JSLINT 및 JSHINT에는 몇 가지 기본 설정 선택이 있습니다. 문제는 대부분의 개발자가 팔로우 할 수있는 최고의 JavaScript 코딩 스타일은 무엇입니까? 아래의 6 개 스타일 가이드에서 합의 스타일을 찾아 봅시다.
1. 코드 스타일 비교
1.1 들여 쓰기
두 개의 공간, 더 이상 들여 쓰기, 탭 금파 : Google, NPM, Node.js, 관용
탭 계약 : jQuery
4 개의 공간 : 크록 포드
1.2 매개 변수와 표현 사이의 공간
소형 스타일 : Google, NPM, Node.js를 사용하십시오
다음과 같이 코드를 복사하십시오 : project.myclass = function (arg1, arg2) {
공간의 너무 많은 사용 : 관용, jQuery
다음과 같이 코드를 복사하십시오. for (i = 0; i <length; i ++) {
의견 없음 : Crockford
대부분의 가이드에서 개발자는 성명서가 끝날 때 공간을 갖지 않아야합니다.
1.3 코드 라인 길이
최대 80 자 : Google, NPM, Node.js, Crockford (코드 블록에서 2 개의 공간을 제외한 다른 계약은 기능 매개 변수를 첫 번째 함수 매개 변수의 위치와 정렬 할 수있게합니다. 다른 옵션은 4 개의 공백을 사용하여 2 대신 라인을 감싸는 것입니다.)
댓글 없음 : jQuery, 관용
1.4 세미콜론
암시 적 인서트에 의존하지 않고 항상 세미콜론을 사용하십시오 : Google, Node.js, Crockford
NPM 경우를 사용하지 마십시오. 경우에 따라 NPM
댓글 없음 : jQuery, 관용
1.5 댓글
JSDOC 컨벤션을 따르십시오 : Google, 관용
의견 없음 : NPM, Node.js, JQuery, Crockford
1.6 인용문
권장 단일 따옴표 : Google, Node.js
이중 인용문 : jQuery
댓글 없음 : NPM, 관용, Crockford
1.7 변수 선언
쉼표를 사용하지 않고 한 번에 하나씩 선언하십시오 : node.js
코드 사본은 다음과 같습니다.
var foo =”;
var bar =”;
한 번에 여러 개의 선언, 쉼표를 사용하여 줄 끝에서 분리하십시오 : 관용, jQuery
코드 사본은 다음과 같습니다.
var foo = "",
bar = "",
Quux;
줄의 시작 부분에서 쉼표를 사용하십시오 : NPM
댓글 없음 : Google, Crockford
1.8 브레이스
Google, NPM, Node.js, 관용, jQuery, Crockford의 개구부 브레이스 사용
다음과 같이 코드를 복사하십시오 : function thisiSblock () {
NPM 가이드는 코드 블록에 다음 줄을 포함해야 할 때 버팀대 만 사용한다고 말합니다. 그렇지 않으면 사용되지 않습니다.
1.9 글로벌 변수
Google, Crockford (Google은 글로벌 변수 명명 충돌이 디버그하기가 어렵고 두 프로젝트가 통합 될 때 까다로운 문제가있을 수 있다고 말합니다. 공통 JavaScript 코드의 공유를 용이하게하려면 충돌을 피하기 위해 규칙이 필요하다고 믿습니다.
댓글 없음 : 관용, jQuery, NPM, Node.js
2 명명 스타일
2.1 변수 명명
처음의 첫 번째 단어는 소문자이며, 나중에 모든 단어의 첫 글자는 대문자입니다 : Google, NPM, Node.js, 관용적
코드 사본은 다음과 같습니다.
var foo = "";
var fooname = "";
2.2 일정한 이름 지정
대문자 사용 : Google, NPM, Node.js
코드 사본은 다음과 같습니다. var cons = 'value';
댓글 없음 : jQuery, 관용, Crockford
2.3 기능 명명
처음의 첫 번째 단어는 소문자이며, 그 이후의 모든 단어의 첫 번째 문자는 대문자 (낙타)입니다. Google, NPM, 관용어, Node.js (긴 설명 기능 이름을 사용하는 것이 좋습니다).
코드 사본은 다음과 같습니다.
기능이 매우 낮습니다
함수 짧은 () ..
키워드 형식의 기능 이름 지정 :
코드 사본은 다음과 같습니다.
function isready ()
함수 setName ()
함수 getName ()
댓글 없음 : jQuery, Crockford
2.4 배열 명명
복수 형태 : 관용적 형태
코드 사본은 다음과 같습니다. var documents = [];
댓글 없음 : Google, JQuery, NPM, Node.js, Crockford
2.5 객체 및 클래스 이름 지정
다음 양식을 사용하십시오 : Google, NPM, Node.js
코드 사본은 다음과 같습니다.
var thisibject = 새로운 날짜;
댓글 없음 : jQuery, 관용, Crockford
2.6 기타 이름 지정
긴 파일 이름 및 구성 키에 All-Lower-Hyphen-CSS-Case 사용 : NPM
3. 위의 스타일에 따라 .jshintrc 파일을 구성합니다.
Jshint (http://www.jshint.com/)는 코드 스타일 관련 문제를 상기시키는 데 사용할 수있는 JavaScript 구문 및 스타일 점검 도구입니다. 그것은 일반적으로 사용되는 많은 편집자에 잘 통합 될 수 있으며 팀 코딩 스타일을 통합하기위한 훌륭한 도구입니다.
Jshint 문서를 통해 사용 가능한 옵션을 볼 수 있습니다 : http://www.jshint.com/docs/#options
다음은 위의 각 범주에서 첫 번째 스타일을 기반으로 .jshintrc 파일을 작성하는 것입니다. 프로젝트의 루트 디렉토리에 넣을 수 있으며 Jshint-Avare 코드 편집기는 프로젝트의 모든 코드 스타일을 통합합니다.
코드 사본은 다음과 같습니다.
{
"Camelcase": True,
"들여 쓰기": 2,
"undef": 사실,
"quotmark": 싱글,
"Maxlen": 80,
"후로": 사실,
"Curly": True
}
또한 JavaScript 파일에 다음 헤더를 추가해야합니다.
코드 사본은 다음과 같습니다.
/ * Jshint 브라우저 : True, JQuery : True */
node.js 파일에서 다음을 추가해야합니다.
코드 사본은 다음과 같습니다.
/ *jshint 노드 : true */
다양한 JavaScript 파일에 다음 문을 추가 할 수도 있습니다.
코드 사본은 다음과 같습니다.
'엄격한 사용';
이것은 Jshint와 JavaScript 엔진에 영향을 미치며 호환되지 않을 수 있지만 JavaScript는 더 빠르게 실행됩니다.
4. GIT를 커밋하기 전에 Jshint를 자동으로 실행합니다
모든 JS 코드가 .jshintrc에 정의 된 스타일과 일치하는지 확인하려면 .git/hooks/pre-commit 파일에 다음을 추가 할 수 있으며 새로 수정 된 파일을 프로젝트에 제출하려고 할 때 스타일 확인이 자동으로 수행됩니다.
코드 사본은 다음과 같습니다.
#!/bin/bash
# JavaScript 파일에서 jshint를 실행하려면 git hook를 사전 커밋합니다.
틀
# 테스트없이 절대적으로 커밋 해야하는 경우
# 사용 : git commit-no-Verify
filenames = ($ (git diff- 캐시드 --- 이름 전용 헤드)))
jshint &> /dev /null
[$? -ne 0];
그 다음에
echo "오류 : Jshint를 찾을 수 없습니다"
echo "설치 : Sudo npm install -g jshint"
출구 1
fi
"$ {filenames [@]}"의 i를 위해
하다
[[$ i = ~ /.js$]];
그 다음에
echo jshint $ i
jshint $ i
[$? -ne 0];
그 다음에
출구 1
fi
fi
완료