자바 스크립트 파일 이름 명명 규칙은 무엇입니까? [닫은]


283

파일 이름이 something-with-hyphens.js, camelCased.js 또는 다른 이름이어야합니까?

나는이 질문에 대한 답 찾을 수 없습니다 여기를 .


2
좋은 명명 규칙은 코드에서 해당 엔티티를 볼 때 파일 이름을 지정하는 것입니다. MyPlugin클래스에 갈 것입니다 MyPlugin.js. 는 MenuItem에 갈 것입니다 구성 요소 반작용 MenuItem.js. 다른 개발자는 'your-cool-module'을 요구 / 가져 오며 여러 기호를 사용하므로 이름을 지정하십시오 cool-module.js. –
Dan Dascalescu

1
이 게시물은 옵션 기반이 아닙니다. 실제로 중요합니다. 다음은 Google에서 만든 google.github.io/styleguide/jsguide.html#file-name 안내서 입니다. (Google JavaScript 스타일 가이드)
zwitterion

답변:


184

가능한 이름 지정 규칙 중 하나는 jQuery가 사용하는 이름 지정 체계와 유사한 것을 사용하는 것입니다. 보편적으로 채택되지는 않지만 꽤 일반적입니다.

product-name.plugin-ver.sion.filetype.js

여기서 product-name+ plugin쌍은 네임 스페이스모듈을 나타낼 수도 있습니다 . version하고는 filetype일반적으로 선택 사항입니다.

filetype파일의 내용과 관련이있을 수 있습니다. 종종 볼 수 있습니다 :

  • min 축소 된 파일
  • custom 사용자 정의 빌드 또는 수정 된 파일

예 :

  • jquery-1.4.2.min.js
  • jquery.plugin-0.1.js
  • myapp.invoice.js

31
나는 당신이 말한 것에 동의합니다. 그러나 현재 어려움을 겪고있는 한 가지가 있습니다. 'plugin'에 두 단어가 포함되어 있으면 어떻게됩니까? 점으로 구분합니까? jquery.myPlugin-1.0.0.js 또는 jquery.my.plugin-1.0.0.js 또는 jquery.my_plugin-1.0.0.js 또는 jquery.myplugin-1.0.0.js 또는 아마도 jquery.my-plugin- 1.0.0.js? 어쩌면 당신은 그것으로 예제를 완성 할 수 있습니다.
시장

4
무엇에 대한 AMD의 모듈? 파일 이름에 버전을 사용하는 경우 버전 번호가 변경되면 많은 파일을 변경해야합니다.
knut

3
@junior, 이것은 오래된 게시물이지만 빠른 검색 결과 jquery 플러그인이 특정 규칙을 따르지 않는다는 것이 밝혀졌습니다. (1) 단어를 함께 입력하고, (2) 척추를 사용하고, (3) 낙타를 사용하는 것은 거의 동등한 빈도로 사용됩니다.
bholben

일부 버전 관리 및 파일 시스템은 소문자로 된 단어와 대문자 또는 카멜 케이스 같은 단어 사이의 차이를 인식하는 데 문제가 있음을 잊지 마십시오 (예 : "ThisWord"는 일부 환경에서 "thisword"와 동일 함). camelCase 규칙을 사용할 때 명심해야 할 사항.
amypellegrini

@knut 버전 이름을 통해로드하지 말고 모듈 이름을 특정 버전 파일에 매핑하십시오.
dalore

132

자바 스크립트 파일은 CSS 파일이나 html 파일 또는 다른 유형의 파일과 비교하여 웹에서 실제로 고유하지 않으므로 Javascript 파일에 대한 특정 규칙을 알지 못합니다. 실수로 크로스 플랫폼 문제가 발생할 가능성을 낮추기 위해 할 수있는 몇 가지 "안전한"작업이 있습니다.

  1. 모든 소문자 파일 이름을 사용하십시오. 파일 이름에 대소 문자를 구분하지 않는 일부 운영 체제가 있으며 소문자를 모두 사용하면 일부 운영 체제에서 작동하지 않을 수있는 경우에만 다른 두 개의 파일을 실수로 사용하지 못하게됩니다.
  2. 파일 이름에 공백을 사용하지 마십시오. 이것은 기술적으로 작동하지만 파일 이름의 공백이 문제를 일으킬 수있는 많은 이유가 있습니다.
  3. 단어 구분 기호에는 하이픈이 적합합니다. 에서 various-scripts.js와 같이 공백이나 낙타 대신 여러 단어에 일종의 구분 기호를 사용하려면 안전하고 유용하며 일반적으로 사용되는 구분 기호가 하이픈입니다.
  4. 파일 이름에 버전 번호를 사용하는 것을 고려하십시오. 스크립트를 업그레이드하려면 브라우저 또는 CDN 캐싱의 영향을 계획하십시오. 장기 캐싱을 사용하는 가장 간단한 방법 (속도와 효율성을 위해)이지만 JS 파일을 업그레이드 할 때 즉각적이고 안전한 업그레이드는 배포 된 파일 이름 또는 경로에 버전 번호를 포함시키는 것입니다 (jQuery는 jquery-1.6.2.js에서 수행하는 것처럼) ) 그런 다음 파일을 업그레이드 / 변경할 때마다 해당 버전 번호를 변경 / 변경합니다. 이렇게하면 최신 버전을 요청하는 페이지가 캐시에서 이전 버전으로 제공되지 않습니다.

56

JavaScript 파일의 이름을 지정하는 공식적이고 보편적 인 규칙 은 없습니다 .

다양한 옵션이 있습니다 :

  • scriptName.js
  • script-name.js
  • script_name.js

모든 유효한 명명 규칙은 그러나,이다 나는 (그것이 어떤 JS 작동하지만, jQuery를 플러그인 용) jQuery를이 명명 규칙을 제안 선호

  • jquery.pluginname.js

이 명명 규칙의 장점 은 추가되는 전역 네임 스페이스 오염을 명시 적으로 설명 한다는 것 입니다.

  • foo.js 추가 window.foo
  • foo.bar.js 추가 window.foo.bar

버전 관리를 생략했기 때문에 메이저 버전과 마이너 버전 사이에 마침표가 포함 된 전체 이름 뒤에 하이픈으로 구분해야합니다.

  • foo-1.2.1.js
  • foo-1.2.2.js
  • ...
  • foo-2.1.24.js

10
에 대한 +1The beauty to this naming convention is that it explicitly describes the global namespace pollution being added.
Adrien

2
내 유일한 질문은 당신이 생성하는 파일이있는 경우 무엇을해야하는 것입니다 Foo또는 myFoo, 당신은 단순히 파일 이름을 것 Foo.js또는 myFoo.js각각?
세미콜론

13

링크의 질문은 파일 이름이 아니라 JavaScript 변수의 이름에 대해 이야기하므로 질문을하는 맥락에서 잊어 버리십시오.

파일명에 관해서는 순전히 선호와 취향의 문제입니다. camelCase 파일 이름을 처리 할 때처럼 Shift 키를 누르지 않아도되므로 하이픈으로 파일 이름을 지정하는 것이 좋습니다. 그리고 Windows와 Linux 파일 이름의 차이점에 대해 걱정할 필요가 없기 때문에 (Windows 파일 이름은 대소 문자를 구분하지 않고 XP를 통해 대소 문자를 구분하지 않습니다).

그래서 많은 사람들처럼 대답은 "의존적"또는 "그것은 당신에게 달려 있습니다."

따라야 할 규칙 중 하나는 선택한 규칙에서 일관성을 유지하는 것입니다.


6
하이픈 대 낙타 사례 추론에 +1.
cellepo

6

나는 일반적으로 소문자로 하이픈을 선호하지만 아직 언급되지 않은 한 가지는 파일 이름이 단일 모듈의 이름이나 그 안에 포함 된 인스턴스화 가능한 함수의 이름과 정확히 일치하는 것이 좋은 경우가 있다는 것입니다.

예를 들어, var knockoutUtilityModule = function() {...}knockoutUtilityModule.js라는 자체 파일 내에 선언 모듈이 선언되어 있지만 객관적으로 knockout-utility-module.js를 선호합니다.

마찬가지로 번들링 메커니즘을 사용하여 스크립트를 결합하고 있기 때문에 유지 관리를 위해 인스턴스화 가능한 함수 (템플릿 뷰 모델 등)를 자체 파일 C # 스타일로 각각 정의했습니다. 예를 들어 ProductDescriptorViewModel은 ProductDescriptorViewModel.js 내부에 존재합니다 (인스턴스 블 함수에는 대문자를 사용합니다).

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