JavaScriptファイル名の命名規則とは何ですか?[閉まっている]


283

ファイルの名前は、something-with-hyphens.js、camelCased.jsなどの名前にする必要がありますか?

この質問に対する答えはここでは見つかりませんでし


2
コードでそのエンティティを確認できるように、ファイル名に名前を付けることをお勧めします。MyPluginクラスはで行くだろうMyPlugin.jsMenuItem中に行くのコンポーネントリアクトMenuItem.js。他の開発者は 'your-cool-module'を要求/インポートし、そこから複数のシンボルを使用するので、それに名前を付けcool-module.jsます。–
Dan Dascalescu 2018

1
この投稿はオプションベースではありません。実際、それは重要です。ここに、Googleが作成したガイドがあります-google.github.io/styleguide/jsguide.html#file-name。(Google JavaScriptスタイルガイド)
zwitterion

回答:


184

可能な命名規則の1つは、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
私はあなたが言ったことに同意します。しかし、私が現在苦労していることが1つあります。「プラグイン」に2つの単語が含まれている場合はどうなりますか?それらをドットで区切りますか?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?たぶん、あなたはそれであなたの例を完了することができます、ありがとう!
2012

4
AMDモジュールについてはどうですか?ファイル名にバージョンを使用する場合、バージョン番号が変更されると、多くのファイルを変更する必要があります。
knut 14年

3
@junior、これは古い投稿ですが、簡単なバウワー検索により、jqueryプラグインが特定の規則に従っていないことがわかります。(1)単語を一緒に押す、(2)spine-caseを使用する、(3)camelCaseを使用する、すべてがほぼ同等の頻度で使用されているようです。
bholben 2014年

一部のバージョン管理とファイルシステムでは、小文字の単語と、大文字またはキャメルケースの同じ単語の違いを認識するのに問題があることを忘れないでください(例:「ThisWord」は、一部の環境では「thisword」と同じです)。camelCaseの規則を使用する際に注意する点。
amypellegrini、2015

@knutあなたはバージョン名を介してロードすべきではありませんが、モジュール名を特定のバージョンファイルにマッピングします。
ダロア

132

JavaScriptファイルは、CSSファイルやHTMLファイルなど、他の種類のファイルとは異なり、Web上で固有のものではないため、JavaScriptの特定の規則については知りません。あなたが誤ってクロスプラットフォームの問題に遭遇する可能性を低くすることができるいくつかの「安全な」ことがあります:

  1. すべて小文字のファイル名を使用します。 ファイル名の大文字と小文字を区別しないオペレーティングシステムがいくつかあり、すべて小文字を使用すると、一部のオペレーティングシステムでは機能しない場合のみ異なる2つのファイルを誤って使用することがなくなります。
  2. ファイル名にスペースを使用しないでください。 これは技術的には機能させることができますが、ファイル名にスペースが含まれていると問題が発生する理由はたくさんあります。
  3. 単語の区切り文字としてハイフンは使用できます。 のように、スペースやキャメルケースの代わりに、ある種のセパレータを複数の単語に使用したい場合various-scripts.js、ハイフンは安全で便利な、一般的に使用されるセパレータです。
  4. ファイル名にバージョン番号を使用することを検討してください。 スクリプトをアップグレードする場合は、ブラウザーまたはCDNキャッシュの影響を計画します。(速度と効率のために)長期キャッシュを使用する最も簡単な方法ですが、JSファイルをアップグレードするときの即時かつ安全なアップグレードは、デプロイされたファイル名またはパスにバージョン番号を含めることです(jQueryがjquery-1.6.2.jsで行うように) )そして、ファイルをアップグレード/変更するたびに、そのバージョン番号をバンプ/変更します。これにより、新しいバージョンを要求するページがキャッシュから古いバージョンを提供されないことが保証されます。

56

JavaScriptファイルに名前を付けるための、公式で普遍的な規則はありません。

いくつかのさまざまなオプションがあります。

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

すべて有効な命名規則ですが、はjQuery推奨の命名規則(jQueryプラグイン用ですが、どのJSでも機能します)好みます。

  • 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
+1 The beauty to this naming convention is that it explicitly describes the global namespace pollution being added.、気づかなかった
Adrien Be

2
私の唯一の質問は、Fooまたはを作成するファイルがある場合はどうすればよいですかmyFoo、単にファイルに名前を付けるFoo.jsか、myFoo.jsそれぞれですか
セミコロン

13

あなたが与えたリンクの質問は、ファイルの名前付けではなく、JavaScript変数の名前付けについて話しているので、質問するコンテキストではそれを忘れてください。

ファイルの命名に関しては、それは単に好みと好みの問題です。キャメルケースのファイル名を扱うときのように、Shiftキーを押す必要がないため、ハイフンを使用してファイルに名前を付けることをお勧めします。WindowsとLinuxのファイル名の違いを気にする必要がないため(Windows XPではファイル名の大文字と小文字は区別されません)。

多くの場合と同様に、答えは「依存する」または「それはあなた次第」です。

従うべき1つのルールは、選択した規則に一貫性を持たせることです。


6
ハイフンとキャメルケースの推論の+1。
cellepo 2014

6

私は一般的に小文字のハイフンを好みますが、まだ言及されていないことの1つは、ファイル名を単一のモジュールまたはその中に含まれるインスタンス化可能な関数の名前と正確に一致させるとよい場合があることです。

たとえば、var knockoutUtilityModule = function() {...}kockoutUtilityModule.jsという名前の独自のファイル内で宣言された公開モジュールがありますが、客観的にはknockout-utility-module.jsを好みます。

同様に、私はバンドルメカニズムを使用してスクリプトを結合しているので、保守性を高めるために、インスタンス化可能な関数(テンプレートビューモデルなど)をそれぞれ独自のファイル(C#スタイル)で定義しています。たとえば、ProductDescriptorViewModelは、独自のProductDescriptorViewModel.js内にあります(インスタンス化可能な関数には大文字を使用しています)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.