Question

一旦你开始使用jQuery库（或者您选择的另一个JS库）对于许多“简单”任务，您面临着三种开发方法的困境：

使用CSS3
使用CSS3和jQuery的混合，即使用jQuery
使用可用的jQuery插件 - 通常在本机CSS或其他解决方案之间进行智能选择。

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

圆角落
旋转的东西
简单的动画/过渡
透明色
圆角落
文字阴影框阴影
多个背景

我不太关心表现，但更关心速度开发和长期维护。我还需要支持IE6和Mac。所以我一直在想jQuery /插件，但如果你知道更好，请分享你的经验。

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

由于

麦克

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

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

在我的情况下，我们有很多不同的人参与，技能范围广，不同的团队/第三方/离岸，提供包含内容和表格的复杂网站。

jQuery插件提供：

较低能力的学习曲线
跨业务的不同部分重用
可访问性很重要
主题滚轮支持也很重要
我们有可以使用大部分小部件的表单
来自jQuery团队的支持（如果您使用.net，则为Microsoft）

那就是说，这不是一个切割和干燥的决定。我认为，随着经验的积累，我们将不得不感受到自己的方式。

我们的一些团队喜欢jQuery Tools http://flowplayer.org/tools/index.html - 它看起来不错，占地面积更小，但我认为我们实际上需要jQuery UI中的大部分附加功能。

Answer 1

虽然我非常喜欢jQuery，但我并不是“插件”的忠实粉丝（尽管其中一些很棒）。主要是因为它们通常是“一种解决方案适合所有”类型的东西，它为整个下载和我编写的代码的复杂性增加了大量文件大小。

例如，我最近查看了jQuery的一些拖放库，发现它们都做得很好，但是很大。在某些情况下> 300K缩小。我最终在JS的不到200行（注释）中写了我需要的东西，我只是将其包含在我现有的代码库中。它能满足每个人的拖放需求吗？可能不是，但我不需要用我不使用的代码来衡量这些客户的客户。

jQuery对我很重要，因为它可以平衡游戏领域（浏览器的不一致性等）。这对我和我的客户来说非常重要，并且可以加速整体开发，因此很容易证明这一点。其他一些插件并不总是以同样的方式合理。

Answer 2

您应该遵循渐进式增强方法。

在你的html上添加css以获取css可以做的事情。例如圆角等然后只在jquery可以做的事情上添加jquery的东西。然后使用jquery更改css3以改善UX。

这意味着关闭javascript后你仍然可以获得酷炫的css3功能。

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

Answer 3

圆角 - 使用CSS。对于资源管理器，请使用CSS3Pie。

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

旋转的东西 - 使用CSS。对于资源管理器，请使用其自定义过滤器（）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。对于资源管理器，请使用filter（）。
```
filter: alpha(opacity=90);
opacity: 0.9;
```
圆角 - 见上文;）
文字阴影框阴影 - 对于资源管理器，根据圆角使用CSS3Pie。
多个背景 - 再次，CSS;对于资源管理器，请使用CSS3Pie。

所以最后的消息是：除MS Explorer之外的大多数浏览器都支持你所要求的大部分内容。对于MS Explorer，请获取CSS3Pie。

Answer 4

首先，我建议使用渐进式增强功能，因为这样可以让您在禁用JavaScript的情况下拥有不错的效果。

其次，我不会使用插件来代替所有内容，而是使用Modernizr Library。 Modernizr允许您保持对CSS3功能的非常好的控制，并且它具有非常直观的语法，使学习曲线较低。

Answer 5

永远不要使用jquery。 jquery将document.getElementById（＆＃34; blah＆＃34;）转换为$（＆＃34;＃blah＆＃34;）。从而使其成为解析查询和降低性能的额外步骤。继续.. jquery已过时。因为每个人都在使用它并不能让你受到约束。自己探索dom，你会发现它更有趣，更有见识。

尽可能使用纯css，或者使用功能强大的knockoutjs并将数据与ui分开。

jQuery插件或CSS3

5 个答案: