在一个丑陋的大代码库中寻找 jQuery UI 的用法

Posted 2023-03-06

【中文标题】在一个丑陋的大代码库中寻找 jQuery UI 的用法

【英文标题】：Finding usage of jQuery UI in a big ugly codebase

【发布时间】：2011-03-02 11:03:12

【问题描述】：

我最近继承了一个用于生产网站的又大又丑的代码库的维护工作。 挖出你丑陋的眼睛。虽然它很大，但主要是 php 代码，除了 UI 中的一些“ajaxy”之外，它没有太多 JS。

我们当前的主要问题是网站太重了。主页目前为 1.6 Mb，所以我正在尝试清理一些内容。

主要的浪费之一是每个页面都包含 jQuery UI 库，但我认为它根本没有被使用。它肯定不会在主页和大多数页面中使用，所以我只想在必要的地方加入。

我对 jQuery 并没有真正的经验，我更像是一个原型人，所以我想知道。有什么我可以搜索的可以让我知道在哪里使用 jQuery UI 的吗？ 我正在寻找的是“通用字符串”、组件名称等

例如，如果这是脚本，我会寻找“可拖动”、“效果”等内容。 对 jQuery UI 有什么建议吗？

（当然，如果您能想到一种更强大的方法，可以在不破坏所有内容的情况下从不使用标签的页面中删除标签，我很乐意听到）

谢谢！！ 丹尼尔

【问题讨论】：

如果您发送适当的缓存标头，或使用 CDN（例如 Google 的，它会适当地处理缓存标头），那么客户端不会在每次页面加载时都下载此内容。不是这样吗？如果不是，您有一个单独的问题需要解决，重新下载静态内容不好。

我也在解决这个问题，尼克，但是第一次点击主页仍然是不必要的，我们也因此遇到了很大的带宽问题。

【参考方案1】：

jQuery UI 有一个标准的命名约定，you can view a full list of widgets/effects here。与该列表相比，您主要在寻找相应的方法：

.draggable() .droppable() .dialog() 等等……

但是，这是一个很大的问题，但是如果您的主要目标是减少页面有效负载大小，那么这应该 没有效果。您的用户不应该在每次加载页面时都下载这个，it should be cached on the client as determined by cache headers，另外还有your scripts should be minified (already provided version when you download it) and delivered gzipped。

另外，如果您使用默认主题之一，我会考虑 using a CDN for both jQuery and jQuery UI 和 the stylesheets as well。

【讨论】：

尼克，谢谢你的回答。我现在的主要问题是，当你第一次访问网站时，你会得到一个 188kb 的文件（它已经被缩小了，没有压缩，我也在努力）。至于 Google 的 AJAX 托管，我也尝试过，但这是阿根廷的服务器，供阿根廷观众使用。信不信由你（我几乎不能），当我们没有超载时，JS 文件从我们的服务器加载的速度比谷歌的要快。我可能仍会将其移至底部并向 Google 索取，但如果我可以将其完全删除，那就更好了。谢谢！

@Daniel - 需要记住的是，谷歌在地理上也是平衡的，您需要从该地区的计算机而不是远程进行测试，因为您是从不同的 CDN 节点加载的。随着越来越多的人链接到谷歌的 CDN，用户也有可能已经缓存了文件:)

我在阿根廷进行测试 :-) 我也知道“人们已经可以缓存它”的效果，但我不确定已经发生了多少。你有关于这种用途有多广泛的数据吗？也就是说，即使它来自其他人的快速服务器，我仍然更愿意删除无用（和沉重）的文件。

对，我使用 egrep（或 grep -E）按照这些思路做了一些事情，所以我可以使用正则表达式来匹配常见的 jquery-ui 字符串：egrep -r "\.draggable\(|\.droppable\(|\.resizable\(|\.selectable\(|\.sortable\(|\.accordion\(|\.autocomplete\(|\.button\(|\.datepicker\(|\.dialog\(|\.menu\(|\.progressbar\(|\.slider\(|\.tabs\(|\.tooltip\(|\$\.widget\(" src/ 这可能会产生一些误报，但是应该能让你大部分时间到达那里。

【参考方案2】：

我的建议是查看 jQuery UI 演示页面 - http://jqueryui.com/demos/ - 并查看每个演示并从每个演示中搜索主要的一两个关键字，就像您可能会为 Scriptaculous 所做的那样。祝你好运。

【参考方案3】：

见这篇文章：https://medium.com/software-developer/finding-jquery-ui-usage-in-a-project-b4fbcfc938c8

用于生成大而丑的正则表达式。

我使用它作为基础并得到下一个正则表达式：

\.\s*(accordion|autocomplete|button|buttonset|datepicker|dialog|menu|progressbar|selectmenu|slider|spinner|tabs|tooltip|effect|switchClass|switchClass|draggable|droppable|mouse|resizable|selectable|sortable|disableSelection|enableSelection|removeUniqueId|scrollParent|uniqueId|zIndex)\s*\(|['"](blind|bounce|clip|drop|explode|fade|fold|highlight|puff|scale|shake|size|slide|transfer|easeInQuad|easeOutQuad|easeInOutQuad|easeInCubic|easeOutCubic|easeInOutCubic|easeInQuart|easeOutQuart|easeInOutQuart|easeInQuint|easeOutQuint|easeInOutQuint|easeInExpo|easeOutExpo|easeInOutExpo|easeInSine|easeOutSine|easeInOutSine|easeInCirc|easeOutCirc|easeInOutCirc|easeInElastic|easeOutElastic|easeInOutElastic|easeInBack|easeOutBack|easeInOutBack|easeInBounce|easeOutBounce|easeInOutBounce)['"]|:(data|focusable|tabbable)|\.ui\b

这里可能有很多误报，但我认为这是一个好的开始。在任何情况下，您都需要手动检查所有匹配项。

【参考方案4】：

我建议搜索 $(document).ready 或尝试找出代码库用于检查 DOM 是否已准备好进行 jquery 交互的等效项。因为添加 UI 需要 DOM，所以对它们的所有调用都将在这些函数中进行 - 你可以看到它们发生的位置，你可以检查它们是否有任何常见的 interactions or widgets

【讨论】：

一个站点可能没有引用$(document).ready，或jQuery(document)，或something(document)，或$(function() ，没有document，等等......有很多快捷方式，没有一个这是特定于 jQuery UI 的。他想删除 jQuery UI，而不是 jQuery :)

【参考方案5】：

库确实应该只占页面大小的 19k。

但您可以搜索 $(' 或 $.，因为大多数（如果不是全部）jquery 调用都以 $ 开头。

【讨论】：

或搜索 jQuery( 如果代码库使用它而不是 $(' 以避免任何可能的命名冲突。

@Chad，不确定这是什么要求。我认为他想找到使用 jQuery 的地方。如果该库包含在母版页级别，那么您只会在那里找到“jQuery”。需要搜索具体的参考文献，$是比较好的参考文献。

@griegs - 我认为你们没有读过这个问题 :) 他想删除 jQuery UI，而不是 jQuery 核心。

@griegs - 有一个约定，我只是为此添加了一个更完整的答案......但我认为这不是解决 OP 速度问题的适当方法，试图包括其他一些提示。

@griegs - 看看 jQuery.noConflict 调用。由于他有一个“大而丑陋的代码库”，我认为可能有多个 JS 库，这可能意味着编写它的人最初使用了 noConflict 选项。如果是这种情况，他会想要搜索 jQuery( 而不是 $( 在任何情况下，我确实 - 不小心 - 忽略了他在询问 UI 库。