当前位置：文江博客话题详情

如何在代码中查找 jQuery 或 Zepto 的所有用法

发布于 2024-12-08 08:21:10 字数 134 浏览 0 评论 0原文

我和我的团队希望在使用 Zepto 时保持从 Zepto 切换到另一个框架或本机浏览器调用（我们仅针对 WebKit）的低成本。

跟踪代码中使用 Zepto 的位置有哪些策略？还有什么比维护所用方法的自述文件列表更好的吗？你会怎么做？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我一直都在从未离去 2024-12-15 08:21:10

jQuery：您可以使用 noConflict 为 jQuery 函数指定一些好听的、唯一的名称（也许 jQuery 本身就是这是内置的，但如果这是一个痛苦的东西，很容易与其他东西区分开来，比如 $jq 或类似的东西 - noConflict 返回 jQuery 功能让你可以做例如 var $jq = jQuery.noConflict();)。

Zepto：尽管声称“jQuery 兼容语法”，但它本身似乎并不支持 noConflict。但是，看起来如果 $ 已经在 window 对象上定义，它将保留它，因为这一行：

'
所以定义 $在加载 Zepto 之前，然后仅在代码中使用 Zepto （或为其分配同样唯一的内容，例如 $jq 或 $ zt 等—例如，var $zt = Zepto;）。
无论哪种情况：如果/当您需要查找这些位时，请搜索您的代码。
 in window || (window.$ = Zepto);

所以定义 $在加载 Zepto 之前，然后仅在代码中使用 Zepto （或为其分配同样唯一的内容，例如 $jq 或 $ zt 等—例如，var $zt = Zepto;）。

无论哪种情况：如果/当您需要查找这些位时，请搜索您的代码。

jQuery: You can use noConflict to assign some nice, unique name to the jQuery function (perhaps jQuery itself as that's built-in, but if that's a pain something else readily distinguished from other things, like $jq or some such — noConflict returns the jQuery function so you can do that, e.g. var $jq = jQuery.noConflict();).

Zepto: Despite claiming a "jQuery-compatible syntax," it doesn't appear to support noConflict per se. However, it looks like if $ is already defined on the window object, it will leave it alone, because of this line:

'
So define $ before loading Zepto and then only use Zepto in your code (or assign something to it that's equally unique, like $jq or $zt, etc. — e.g., var $zt = Zepto;).
In either case: Then search your code for those if/when you need to find those bits.
 in window || (window.$ = Zepto);

So define $ before loading Zepto and then only use Zepto in your code (or assign something to it that's equally unique, like $jq or $zt, etc. — e.g., var $zt = Zepto;).

In either case: Then search your code for those if/when you need to find those bits.

回复收藏 0 原文

游魂 2024-12-15 08:21:10

除了搜索 $ 和特定方法之外，您还可以通过在运行代码中记录它们的使用情况来识别正在使用哪些方法。

以下代码将在您每次进行 jQuery 调用时记录所使用的函数和堆栈跟踪，但不会记录 jQuery 进行的任何内部调用。

<script>
(function(){
var insideJQuery = false;
function replaceMethod(obj, method, prefix) {
    var oldMethod = obj[method];
    if(typeof oldMethod !== "function")
        return;

    obj[method] = function() {
        var externalCall = !insideJQuery;
        insideJQuery = true;
        var output = oldMethod.apply(this, arguments);

        if(externalCall) {
            console.log(prefix + method + ' called');
            console.trace();
            insideJQuery = false;
        }

        return output;
    }
}

for(var method in $.fn) {
    if(method != 'constructor' &&
       method != 'init')
        replaceMethod($.fn, method, '$.fn.');
}

for(var method in $) {
    if(method != 'Event')
        replaceMethod($, method, '$.');
}
})();
</script>

当然例外的是 jQuery 调用中的 jQuery 调用，例如 $(document).ready(function(){$('div')});。

Beyond searching for $ and specific methods, you could identify which methods are in use by logging their usage in running code.

The following code will log the function used and the stack trace every time you make a jQuery call but not log any internal calls made by jQuery.

<script>
(function(){
var insideJQuery = false;
function replaceMethod(obj, method, prefix) {
    var oldMethod = obj[method];
    if(typeof oldMethod !== "function")
        return;

    obj[method] = function() {
        var externalCall = !insideJQuery;
        insideJQuery = true;
        var output = oldMethod.apply(this, arguments);

        if(externalCall) {
            console.log(prefix + method + ' called');
            console.trace();
            insideJQuery = false;
        }

        return output;
    }
}

for(var method in $.fn) {
    if(method != 'constructor' &&
       method != 'init')
        replaceMethod($.fn, method, '$.fn.');
}

for(var method in $) {
    if(method != 'Event')
        replaceMethod($, method, '$.');
}
})();
</script>

The exception of course would be jQuery calls inside jQuery calls like $(document).ready(function(){$('div')});.

回复收藏 0 原文