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。