jQuery 标准和最佳实践 [关闭]

Posted 2023-02-21

【中文标题】jQuery 标准和最佳实践 [关闭]

【英文标题】：jQuery Standards and Best Practice [closed]

【发布时间】：2010-11-17 18:02:38

【问题描述】：

我目前负责将 jQuery 的使用推广到我们公司内的 Web 开发人员社区。其中一部分涉及展示课程，但另一部分涉及交流标准和最佳实践。

如果您在 Google 上搜索“jQuery 最佳实践”，您可能会在搜索结果中找到以下内容。 http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/ http://www.artzstudio.com/2009/04/jquery-performance-rules/

这些很有帮助，我从中发现了很多有用的信息。然而，我真正感兴趣的是来自经验丰富的 jQuery 开发人员和那些可能发现自己处于与我相似位置的人的最佳实践的任何提示、陷阱、意见等。任何好的链接也将不胜感激。

编辑：

在我自己的页面上添加了 jQuery 编码标准部分：

http://www.jameswiseman.com/blog/?p=48

【参考方案1】：

您可以在 ***.com 上找到这个热门话题

jQuery pitfalls to avoid

一个接一个非常有趣的有用提示。

以下是我在书签中找到的更多内容：

http://paulirish.com/2011/11-more-things-i-learned-from-the-jquery-source/ http://jquery.open2space.com/ http://thetoptenme.wordpress.com/2008/08/19/the-complete-guide-for-jquery-developer-reblog/ http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

【讨论】：

有趣的链接，谢谢。我意识到这个话题非常相似，但是我仍然对来自与我相似立场的人的反应感兴趣。此外，标题在搜索时不适合提供有用的链接，而随着时间的推移，它很可能会弹出（现在您已经添加了另一个主题！）

顺便说一句，我刚刚找到了一个有趣的链接（一个 jQuery 实验游乐场）commadot.com/jquery，如果你一个接一个地去链接，你可以学到很多东西......

另一个链接lab.abhinayrathore.com/jquery-standards

【参考方案2】：

我个人开始做的是一种用于 jQuery 集的 Apps Hungarian Notation，通过在这些变量前面加上 $

var someInt = 1;
var $someQueryCollection = $( 'selector' );

我发现随着我的 jQuery sn-ps 的增长，这变得非常宝贵，不仅在促进将 jQuery 集存储为变量，而且帮助我跟踪哪些变量实际上是 jQuery 集.

【参考方案3】：

不显眼的 JavaScript（标记和行为分离）

在过去，将点击处理程序放在标记中是很常见的。现在建议您不要在标记中编写 JS 代码，而是通过 DOM 事件包含它。

渐进式增强

如果用户使用符合标准的浏览器和/或启用了 javascript，他们将获得更好的体验。网站/Web 应用程序即使使用较旧的浏览器或禁用了 JS，仍然可以访问。

特征检测而非浏览器检测

撇开以上几点，我将真正专注于传达 JavaScript 是一种玩具语言的信息（打破先入为主的观念）。我见过太多这样想的开发人员，一切都从那里走下坡路。你需要向他们解释 JavaScript 如何是一种非常强大的语言，以及为什么他们需要一个 JS 库（因为浏览器的不一致），尽管 JS 本身非常强大。

祝你好运。

【讨论】：

Jason，对不起，你能指出我在哪里写的 jQuery 与 JavaScript 的工作方式不同吗？事实上，我什至没有在我的回答中提到 jQuery。

你真的认为“JavaScript 是一种玩具语言”还是一个错字？

【参考方案4】：

jQuery 的工作方式与 JavaScript 的工作方式不同，尽管它们是一回事。 jQuery 适用于 CSS 选择器，例如类名和元素的 id。要在 jQuery 中选择一个项目，您可以：

$("#yourID") or $(".yourClass") or $("div") or $("#yourID p") etc

您将获得页面上符合您条件的所有元素的集合。然后，您可以对所有这些元素执行您的操作，而无需任何形式的循环。记住这一点很重要：

$(".yourClass").click(function()
    //do stuff
);

将影响所有附有.yourClass 的项目。一个提示：如果你要访问$(this)，你应该把它保存为一个局部变量：

$(".yourClass").click(function()
    var $this = $(this);
);

因为它会加快你的功能。

【讨论】：

-1。我不喜欢这种说法“jQuery 的工作方式与 JavaScript 的工作方式不同”。 jQuery 是 JavaScript。我会说它是“用于 DOM 操作的 vanilla JS 代码与用于 DOM 操作的 jQuery JS 代码之间存在差异。”

....除了它是真的。我提到它们是相同的，但是 jQuery 抽象了很多你需要用 JavaScript 做的废话。因此，虽然您可以在 w/jQ 中混合 js，但它们的工作方式并不相同，并且许多 JS 开发人员尝试以与编写 JS 代码相同的方式编写 JQ 代码。

我彻底了解了 jQuery 和 JavaScript 的工作原理。我对句子的措辞持反对意见，恕我直言，它读起来不正确。