jQuery编码约定

Question

我一直在寻找一些jQuery编码约定，但确实找到了完整的列表。

例如，我应该如何命名html标记的ID，我喜欢第一个，因为它混淆了我的CSS约定，但是会给我带来一些不便吗？

<div id="comment-list"></div>
<div id="commentList"></div>
<div id="CommentList"></div>

并且，单引号或双引号是$（'＃obj'）还是$（“＃obj”）首选？

另外，假设我使用一个全局文件，如果我要使用其他js库，是否应该用以下代码替换所有代码，以避免$符号冲突？

(function ($) {
   $(document).ready(function () {
     ...
   });
})(jQuery);

我应该使用更多的js文件还是将所有内容都放在一个全局文件中？

等。遵循哪些使您在大型项目上使用jQuery编码更容易的约定？

Answer 1

我总是使用您首选的CSS约定-并在这些元素上使用jQuery而没有任何问题。 关于单引号/双引号-仅当值包含HTML标记时才使用单引号。 即

$("#el").html('<div class="wrap">Hey!</div>');

我注意到您在回答问题后更新了问题。

对于多库冲突，您可以在兼容模式下使用这些库。 例如：

var $j = jQuery.noConflict();
$j(document).ready(function () {
   $j("body").css('background', 'red');
});

至于使用单个/多个文件，实际上归结为整洁与性能。

每个新的.js文件将需要对服务器的额外请求，从而降低您的网站速度。 但是，如果要编写5000行代码来完成许多不同的事情，则可以考虑将它们组织在多个文件中。

但是，在这些情况下，我更喜欢在开发环境中将脚本分开，然后将它们组合到一个global.js文件中，然后将其最小化以进行生产。

HTH，Marko

Answer 2

在HTML，XML，CSS和URL中，多词名称通常是“破译”的（单词之间用破折号分隔）。 在这些情况下，对自己的多词名称进行反串处理最符合上下文。

<div id="comment-list">...</div>

在JavaScript中，单引号和双引号是相同的。 选择最自然的方式，但要保持一致。

您应该清晰地编写代码-包含多个文件。 在开发和测试中，请使用多个文件。 对于生产（和暂存站点），您可以串联并缩小JavaScript和CSS文件。 最佳实践是利用辅助函数来编写指向这些脚本和样式表的HTML链接，但这种方法足够聪明，可以在开发和测试中使用多个文件，在生产中使用已处理的文件。

<%= javascript "jquery", "jquery-ui", "application", "users-page" %>

Answer 3

我通常在类名中使用-s，在ID中使用_s。