JavaScript文件的命名规范是什么?

364

文件名应该采用带连字符的命名方式something-with-hyphens.js、驼峰式命名camelCased.js或其他什么样式?

我在这里没有找到答案。


5
一个好的命名规范是将文件名命名为代码中出现的实体名称。例如,MyPlugin 类应该放在 MyPlugin.js 中,MenuItem React 组件应该放在 MenuItem.js 中。其他开发人员将需要导入你的模块并从中使用多个符号,因此将其命名为 cool-module.js - Dan Dascalescu
3
这篇文章并非选项式的,事实上它非常重要。在这里,您可以看到由谷歌制作的指南 - https://google.github.io/styleguide/jsguide.html#file-name 。(谷歌JavaScript风格指南) - IgorAlves
一个约定要么存在,要么不存在。问题并不是在问“你喜欢用什么命名方式?”我投票支持重新开放。 - Adrian Maire
5个回答

236

一种可能的命名约定是使用类似于jQuery使用的命名方案。虽然它并不普遍被采用,但它相当常见。

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

其中product-nameplugin的组合也可以表示一个命名空间模块。通常情况下,versionfiletype是可选的。

filetype可以代表文件内容类型的相对值。常见的有:

  • min表示压缩文件
  • custom表示自定义或修改后的文件

例如:

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

37
我同意你所说的。但是我目前遇到一个问题:如果 “插件” 包含两个单词呢?用点号分隔它们吗?例如 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?也许你可以在示例中补充这一点,谢谢! - mayrs
4
AMD 模块怎么样?如果在文件名中使用版本号,当版本号更改时就必须修改很多文件。 - knut
3
@junior,这是一篇旧文章,但快速进行 bower 搜索 发现 jQuery 插件没有遵循任何特定的约定。看起来将单词拼在一起、使用连字符式命名法、以及使用驼峰式命名法都被大致相同的频率使用。 - bholben
不要忘记,一些版本控制和文件系统可能无法识别小写单词与相同单词的大写或驼峰式写法之间的区别(例如:“ThisWord”在某些环境中与“thisword”相同)。在使用驼峰式命名约定时需要注意这一点。 - amypellegrini
@knut,你不应该通过版本名称加载,而是将模块名称映射到特定版本文件。 - dalore

178

我不知道有关于JavaScript文件的特定约定,因为它们在Web上与CSS文件、HTML文件或任何其他类型的文件相比并没有什么独特之处。以下是一些"安全"的措施,可以尽量避免跨平台问题的发生:

  1. 使用全小写文件名。 有一些操作系统对文件名大小写不敏感,使用全小写可以防止在某些操作系统上意外使用大小写不同但只有一个字母不同的两个文件。
  2. 文件名中不要使用空格。 虽然技术上可以实现,但是文件名中包含空格可能会导致很多问题。
  3. 连字符可用作单词分隔符。 如果您想使用某种分隔符来表示多个单词,而不使用空格或驼峰式表示(如 various-scripts.js),则连字符是一种安全、有用且常用的分隔符。
  4. 考虑在文件名中使用版本号。 当您想要升级脚本时,请考虑浏览器或CDN缓存的影响。实现长期缓存(以提高速度和效率)并进行即时和安全的升级的最简单方法是在部署的文件名或路径中包含版本号(就像jQuery在jquery-1.6.2.js中使用的那样),并在升级/更改文件时提高/更改该版本号。这将确保没有请求更新版本的页面从缓存中获取旧版本。

78

没有官方的、通用的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

16
+1 表示赞同“这种命名规范之美在于明确描述了所添加的全局命名空间污染”。我以前从未注意到这一点。 - Adriano
2
我的唯一问题是,如果你有一个创建 FoomyFoo 的文件,你会分别简单地将文件命名为 Foo.jsmyFoo.js 吗? - semicolon

24
您提供的链接中讨论的是JavaScript变量的命名,而不是文件命名,因此请忽略该内容。至于文件命名,这纯粹是一种偏好和口味。我更喜欢用连字符来命名文件,因为这样我就不必按shift键,就像使用驼峰式文件名时那样; 而且我不必担心Windows和Linux文件名之间的差异(至少在XP之前,Windows文件名不区分大小写)。因此,像许多问题一样,答案是“取决于情况”或“由你决定”。您应遵循的一个规则是选择的约定要保持一致。

12
对于连字符和驼峰命名法的理由,我给予加分。 - cellepo

9
我通常更喜欢使用小写连字符,但是还有一件事情没有提到,那就是有时候文件名与其中一个单独模块或可实例化函数的名称完全匹配会很好。
例如,我有一个声明为var knockoutUtilityModule = function() {...}的揭示模块,它在自己的文件中命名为knockoutUtilityModule.js,虽然客观上我更喜欢knockout-utility-module.js。
同样地,由于我正在使用打包机制来组合脚本,我已经开始按照C#的风格为每个可实例化函数(模板视图模型等)定义单独的文件,以保证可维护性。例如,ProductDescriptorViewModel位于其自己的ProductDescriptorViewModel.js文件中(我使用大写字母表示可实例化函数)。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接