jQuery标准和最佳实践

61

我目前负责在公司的 Web 开发人员社区中推广 jQuery 的使用。其中一部分涉及到进行课程讲解,另一部分则是传达标准和最佳实践。

如果您在谷歌搜索“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

4个回答

42

2
有趣的链接,谢谢。我意识到这个主题非常相似,但我仍然对那些处于类似位置的人的回应感兴趣。此外,标题在搜索时并不容易成为一个有用的链接,而随着时间的推移,这个链接可能会出现(并引用你现在添加的其他主题!) - James Wiseman
1
顺便说一句,我刚刚发现了一个有趣的链接(一个jQuery实验场)commadot.com/jquery 如果你跟着链接走,你可以学到很多东西... - adardesign
另外一个链接 http://lab.abhinayrathore.com/jquery-standards/ - FDisk

27

我个人开始采用一种类似于 jQuery 集合的 Apps Hungarian Notation,通过在这些变量前加上 $ 前缀。

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

我发现随着我的 jQuery 代码片段越来越多,将其存储为变量不仅有助于提升性能,而且有助于我跟踪哪些变量实际上是 jQuery 集合。


12

不显眼的JavaScript(分离标记和行为)

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

渐进增强

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

特性检测而非浏览器检测

撇开以上要点,我真的希望重点传达信息(打破先入为主的观念),即JavaScript是一种玩具语言。我见过太多认为这种方式的开发人员,一切都从那里开始走下坡路。您需要解释为什么JavaScript是一种非常强大的语言,以及为什么他们需要一个JS库(因为浏览器不一致),即使JS本身非常强大。

祝你好运。


1
Jason,不好意思,你能指出我在哪里写了jQuery与JavaScript的工作方式不同吗?实际上,我甚至没有在我的回答中提到jQuery。 - SolutionYogi
你真的认为"JavaScript是一个玩具语言"吗?还是这是一个打字错误? - Lie Ryan

2

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);
});

因为这会加速你的函数。


17
我不喜欢这个说法:“jQuery的工作方式与JavaScript的工作方式不同”。jQuery就是JavaScript。我会用另一种措辞:“使用原生JS代码进行DOM操作与使用jQuery JS代码进行DOM操作之间存在差异。” - SolutionYogi
3
除非它是真实的,我提到它们是一个意思,但 jQuery 抽象了很多你需要用 JavaScript 所做的繁琐操作。所以尽管你可以在 jQ 中混合使用 js,但它们并不相同,并且许多 JS 开发者尝试以编写 JS 代码的方式编写 JQ 代码。 - Jason
6
我非常了解jQuery和JavaScript的工作原理。我对这个句子的措辞有异议,我认为它读起来不够顺畅。 - SolutionYogi

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