Question

我创建了一个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请求时运行？

希望这是有道理的。在此先感谢：）

Answer 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请求并相应地挂钩。

Answer 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);

将代码转换为AJAX jQuery

2 个答案: