jQuery插件或CSS3？

Question

一旦您开始使用jQuery库（或其他JS库），处理许多“简单”任务时，您将面临以下3种开发方法的困境：

• 使用CSS3
• 使用CSS3和jQuery混合，即使用jQuery添加在CSS中定义的类
• 使用可用的jQuery插件-通常会智能地选择本机CSS或另一种解决方案。

关于以下类型的CSS3增强功能，是否应始终使用插件方法？

• 圆角
• 旋转物品
• 简单动画/过渡
• 透明颜色
• 圆角
• 文本阴影框阴影
• 多个背景

我不太关心性能，但更关心开发速度和长期维护。我还需要支持IE6和Mac。因此，我认为jQuery /插件是最好的选择，但如果您有任何更好的经验，请分享。

如果有很多插件，人们会将它们合并成一个下载文件吗？

谢谢

迈克

---

mkoistinen的回答促使我写下这篇文章，但是它太长了，无法作为评论。

我认为这种决定取决于您的项目需求。 在大多数情况下，我认为您是完全正确的，插件可能会过度使用。 特别是对于具有良好HTML、CSS和JavaScript技能的经验丰富的“前端工程师”。

在我的情况下，我们有很多不同的人参与其中，技能范围广泛，不同的团队/第三方/离岸， 交付一个具有内容和表单的复杂站点。

jQuery插件提供了：

• 对于那些能力较弱的人来说，学习曲线更低
• 在业务的不同部分中重复使用
• 可访问性很重要
• 主题滚动支持也很重要
• 我们有一些表单可以使用大部分小部件
• 得到jQuery团队（如果您正在使用.net，则还有Microsoft）的支持

话虽如此，这并不是一个明确的决定。 我认为随着我们获得经验，我们将不得不摸索。

我们团队中有些人喜欢jQuery Tools http://flowplayer.org/tools/index.html，它看起来很好，并且占用空间较小，但我认为我们实际上想要jQuery UI中的大部分附加功能。

- MikeyB_Leeds

---

你忘了 JavaScript 真正擅长的一件事 - 为旧浏览器提供 CSS3 选择器支持。但是，真正的渐进增强才是王道，因为如果你认为文字阴影和圆角是网站的重要组成部分，那么你做错了什么。 - Yi Jiang

是的，你说得对，能够使用支持旧浏览器的jQuery CSS3选择器确实是一个真正的优势。 此外，jQuery还有一些帮助选择器，这些选择器不太可能成为CSS3规范的一部分。例如，用于文本框的:text。 如果你还没有看到它，http;//html5boilerplate.com 提供了一些关于渐进增强和其他常规技巧的绝佳提示。-谢谢 - MikeyB_Leeds

Answer 1

虽然我非常喜欢jQuery，但我并不是插件的铁粉（当然有些插件确实很棒）。主要是因为它们通常是“一刀切”的解决方案，会增加整体下载文件大小和代码复杂性。

举个例子，最近我看了一些jQuery拖放库，发现它们都做得很好，但是非常庞大。在某些情况下，压缩后的文件大小超过300K。最终，我只用不到200行JS代码（有注释）编写了自己需要的功能，并将其包含在我的现有代码库中。它能满足所有人的拖放需求吗？可能不行，但我不需要让客户的用户承受我没有使用的代码负担。

对我来说，jQuery很重要，因为它可以平衡浏览器的不一致性等问题。这对我和我的客户都很重要，并且可以加快开发速度，所以很容易证明其必要性。但有些其他插件并不总是可以以同样的方式证明其必要性。

- mkoistinen

---

我在我的问题中添加了一条关于这个答案的评论——它太长了，不适合作为评论。谢谢你提供的信息。 - MikeyB_Leeds

Answer 2

你应该遵循渐进增强的方法论。

在HTML上方添加CSS，用CSS实现可以做到的事情。例如：圆角等。 然后再添加jQuery，只用它来实现jQuery能做到的事情。 最后使用jQuery改变CSS3以提高用户体验。

这意味着即使JavaScript关闭，您仍然可以获得酷炫的CSS3功能。

另一个考虑因素是，您应该使用特性检测而不是浏览器测试来分叉您的代码，以创建跨浏览器代码。有一些关于特性检测的文章在alistapart和网络上。

- skyfoot

---

谢谢，我认为这种方法可能会给您最快的渲染页面，但是您仍然需要深入了解CSS3选择器。我并不真的关心没有JavaScript，他们可以使用“基本”版本。我希望通过使用插件来简化“怪癖”（http://www.quirksmode.org/），从而完成繁重的工作，但有时候并没有简单的捷径。 - MikeyB_Leeds

Answer 3

圆角-使用 CSS。 对于 Explorer，请使用 CSS3Pie。

 -moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
behavior: url(/PIE.htc);

旋转-使用 CSS。 对于 Explorer，请使用其自定义 filter() CSS。

-moz-transform: rotate(45deg);  /* FF3.5+ */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

简单动画/过渡-使用 JQuery。（CSS 动画尚未被广泛支持）

透明颜色-使用 CSS。 对于 Explorer，请使用 filter()。

filter: alpha(opacity=90);
opacity: 0.9;

圆角-见上文 ;)

文本阴影框阴影-对于 Explorer，请使用 CSS3Pie，与圆角相同。

多个背景-同样，CSS； 对于 Explorer，请使用 CSS3Pie。

所以，经过这一切，我们得出的结论是：除了微软的IE浏览器外，大多数浏览器都支持您所需的大部分功能。对于IE浏览器，请获取CSS3Pie插件。

- Spudley

---

谢谢CSSPie，看起来非常不错。我还没有决定要提供什么样的IE6体验，但是当您需要将IE6浏览器呈现为其他浏览器时，CSSPie提供了一个很好的选择。我正在查看http://www.modernizr.com/，但它并没有添加任何功能。 - MikeyB_Leeds

@Mikey：没错，CSS3Pie非常棒。它使得支持IE7/8变得更加容易。但是我会说不要被支持IE6所束缚；这根本不值得。尽力让它工作，但不要为了让它看起来好看而费心，除非它是你的核心受众（在这种情况下，我真的很同情你！）。IE6用户已经习惯了看起来不太一样的网站。 - Spudley

幸运的是，IE6不是我们的核心受众。对于那些需要在IE6、IE7和IE*上进行测试的人，我对http://www.my-debugbar.com/wiki/IETester印象非常深刻。 - MikeyB_Leeds

Answer 4

首先，我建议采用渐进增强的方式，因为这样可以让你在禁用JavaScript的情况下拥有一个不错的外观。

其次，我建议不要为所有功能使用插件，而是使用Modernizr Library。 Modernizr允许您对CSS3功能保持非常好的控制，并且它具有非常直观的语法，使学习曲线降低。

- Moses

Answer 5

永远不要使用jquery。jquery将document.getElementById("blah")转换为$("#blah")，从而使解析查询多了一步，降低了性能。放弃吧.. jquery已经过时了。 既然每个人都在使用它并不意味着你也必须使用。自己探索dom，你会发现更有趣和有知识的。

尽可能使用纯css，否则使用强大的knockoutjs将数据与ui分离。

- Arun Aravind