将代码转换为 AJAX jQuery答案

【问题标题】：Convert code to AJAX jQuery将代码转换为 AJAX jQuery
【发布时间】：2016-04-09 04:31:51
【问题描述】：

我创建了一个 Chrome 扩展程序，它转换来自 data-href 属性的数据并将其应用于来自 Google 搜索的 href 属性。这是当前代码：

$(document).on("DOMSubtreeModified", function() {
    var e = $("#search");
    var d = e.find("a[data-href]");
    $(d).attr("href", function() {
        return $(this).attr("data-href");
    });
});

这段代码有点慢，因为每次对 DOM 进行某种更改时它都会运行，但是我想知道是否可以使用 AJAX 转换这段代码并在 Google 发出 AJAX 请求时运行？

希望这是有道理的。在此先感谢:)

【问题讨论】：

您是否尝试过使用$("#search").on('DOMSubtreeModified', fn) 来减少受影响的元素数量？
@Rory McCrossan 非常感谢 :)

标签： javascript jquery ajax dom google-chrome-extension

【解决方案1】：

将@RoryMcCrossan 的评论合并到这个答案中，首先要尝试的是缩小搜索范围。

$("#search").on("DOMSubtreeModified", function() {
    $(this).find("a[data-href]").each(function() {
        this.href = this.getAttribute("data-href");
    });
});

还要注意使用Vanilla JS 来执行将一个属性转移到另一个属性的相对简单的任务 - 更简单的代码运行得更快！

关于挂钩 AJAX 请求的问题，这取决于它们是如何完成的。例如，在我自己的项目中有一个名为ajax(url,data) 的全局函数，它返回一个jQuery XHR 对象。知道了这一点，您可以执行以下操作：

var original_ajax = window.ajax;
window.ajax = function(url,data) {
    // do pre-processing here, if needed
    var ret = original_ajax(url,data);
    // do something to ret, for instance attach listeners
    // we know it's a jQuery XHR object, so `.success` might be a good start
    return ret;
};

当然，具体的实现细节可能会有所不同——我的项目实际上返回了一个封装的 XHR，它需要一些额外的黑客攻击才能挂钩，但它仍然是可能的。您将需要研究目标网站如何发出其 AJAX 请求并相应地进行挂钩。

【讨论】：

非常感谢您提供的示例代码 :) 我还将简化代码并研究 Google 如何发出 AJAX 请求。
嗨，我发现 Google 正在使用此 URL 来处理 AJAX 请求（键入时搜索）google.com.au/s?sclient=psy。我将如何使用该 URL 实现您的代码？谢谢:)

【解决方案2】：

MutationEvents 性能不佳，因此是deprecated。请改用Mutation Observers。

function initMO(root) {
    var MO = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MO(function(mutations) {
        observer.disconnect();
        mutations.forEach(function(mutation){
             walk(mutation.target);
        });
        observe();
    });
    var opts = { childList: true, subtree: true };
    var observe = function() {
        observer.takeRecords();
        observer.observe(root, opts);
    };
    observe();
}

function walk(root) {
    $(root).find("a[data-href]").each(function() {
        this.href = this.getAttribute("data-href");
    });
});

var target = document.getElementById("search");
walk(target);
initMO(target);

【讨论】：