jquery - 一个 JQuery UI 网站的 CSS 规划(小部件和页面如何协同工作)

Question

我们建立了一个广泛使用 JQuery UI 的 AJAX 网站。我们有 30 多个自制的 JQuery UI 小部件(动态加载)。我们到处都使用 JQuery native 小部件:对话框、 slider 、日期选择器。我们使用 JQGrid - 最新版本，它是在 JQuery 之上构建的 css-wise。我们的网站由一个骨架和大约 20 个页面组成。

我想到了一些可能导致 future 困惑的问题，由于我们有时间进行清理，所以我想征求一些建议。

1. CSS 类命名:目前我们的小部件的 css 命名与 jquery UI 主题是分开的(我们不使用 jquery UI 的类作为标题/标题等)。这种方法的优缺点是什么？
2. Include 我们有很多 css 和 js include(有推荐的依赖注入(inject)插件吗？)
3. Less CSS 我读到了这种类似于脚本的 css 方法。我们的系统是中型的，但每天都在增长，这可能会非常复杂。我们应该迁移吗？
4. 自定义 CSS 小部件:假设我们的网站上有 4 个不同的对话框。创建 4 种不同外观的 jquery UI 对话框的最佳方法是什么？

非常感谢，

Answer 1

我和你在同一条船上，但我认为我们走了不同的路。也许我的一些想法可以帮助您进行元素设计。

我的应用程序(用于营销自动化)是使用 Jquery UI 选项卡设置的，因此我能够使用我称之为包含的“init”文件创建一个主索引页面。一处用于管理，一处用于变更，这大大简化了事情。我争论过根据我需要的元素做某种自动加载器或条件加载，但我得出的结论是缓存是我的 friend ，为此我只需要预先加载所有文件。话虽这么说，我已经将一些较小的脚本合并到一个较大的 JS 文件中，以减少 HTTP 命中率。这是一个使用大量 jquery 和 CSS 的大型应用程序，但加载速度并不比 CNN 或 ESPN 等其他主要网站慢......事实上，我认为它比使用大量愚蠢的 flash 和视频的网站更快。

我选择广泛使用 Themeroller(以及相关的 Jquery UI 命名方案)，实际上是为我的自定义元素利用 themeroller 样式。缺点是它会将你锁定在非常一致的风格中，如果你的客户想要所有不同颜色的元素，这可能会很麻烦(是的，事实上，我现在正在处理这个问题)但是，话又说回来，一切都可以在 CSS 中覆盖，并且知道我可以通过上传不同的 themeroller 主题为我的客户重新命名整个应用程序，这让我感到难以置信。它帮助我的应用程序在行业中脱颖而出，它让我在品牌 reshape 过程中获得了难以置信的利润。

根据我在一家大型国际银行工作的经验，我选择不缩小或做 less CSS 之类的事情。在那里，我在一个每天被点击大约 200 万次的网站上工作，我实际上建议我们走那条路。该请求提升了指挥链，一些比我更有经验的人决定反对它。为什么？简单。虽然他们可以通过缩小每天减少超过 1 TB 的数据传输，但他们决定在他们使用的 SVN 方案中进行缩小，然后快速更新可能会在团队中造成困惑。此外，由于我们在应用程序中投入了大量的硬件，很少有网站(甚至是大型网站)真正从额外的工作中获得那么多的 yield 。当然，我们都希望我们的应用程序是最流畅的。但分析师推断，花在迁移到新方案和缩小上的额外时间最好花在其他功能上。我同意。因此，只需打开 gzip 压缩，确保您的 CSS 是流线型的 (this is a great site for that) 并使用它。问题解决了。不要忘记，缓存在初始加载后再次发挥作用。

我打破了我自己关于尝试充分利用 Jquery UI 核心的规则，并使用 Qtip 进行对话。它们更强大、更成熟，并且可以随意设置样式。在 Jquery UI 在他们的对话框方案上走得更远之前，我个人会推迟。我强烈建议您检查一下。

最后，对我的应用程序真正有帮助的一件事是广泛使用 DataTables作为网格。我在我的应用程序中处理大量数据——一个客户端，超过 500 万条可能的记录。 DataTables 不仅使呈现数据变得非常容易，而且我可以通过 Ajax“管道化”加载，为用户提供令人难以置信的快速查询体验。与大多数网格一样，它只需几行代码即可让我进行排序、分页、过滤和排序。而且，最重要的是，DataTables 使我的应用程序脱颖而出。我绝对建议您看一看。

祝你好运。