Question

我有一个我写过的简单模块。目的是在页面上创建链接，其中包含某个类名称下的任何URL

以下是执行所有脏工作的主要功能

generateLinks: function(){
    $('.link-gen').each(function(index, item){
        var replace = $(item).html().replace(_regEx, _linkMarkUp);
        $(item).html(replace);
    });
}

我的理解是，我应该尝试立即应用所有dom更改，因此我不需要不断访问dom。如果我可能修改页面上的许多不同链接，我将如何进行此操作？

Answer 1

我会尝试回答你问题的具体细节。

如果您需要修改页面中的N个单独元素，您的选项是：

获取包含所有N个单独元素的HTML的公共父级的HTML，并使用某种搜索和替换RAW HTML来查找要在每个目标元素中更改的部分。然后将更改的HTML设置回公共父级。
对整个HTML格式执行与上述步骤相同的操作。
在DOM中查找需要修改的每个对象并直接更改其HTML（正如您当前的代码所做的那样）。

虽然选项1和2的DOM操作较少，但它们通常是一种糟糕的做事方式，因为您要求浏览器执行大量繁重的工作，丢弃大量现有DOM对象，再次从头开始解析原始HTML然后创建大量新的DOM对象。这也有消除该HTML中所有现有事件处理程序的副作用（因为它们都是新的DOM对象）。因此，大多数情况下不建议使用1和2。

这会让你选择3，这就是你已经在做的事情。要修改N个单独的对象，请使用N DOM操作 - 每个对象一个。

我怀疑你读到的评论是为了解决这样的事情会是一件坏事（很多DOM操作，但所有在一个对象上）：

var item = $("#foo");
for (var i = 0; i < collection.length; i++) {
    item.html(item.html() + "<br"> + collection[i]);
}

当这样的事情会更好（一个DOM操作）：

var item = $("#foo");
var newText = "";
for (var i = 0; i < collection.length; i++) {
    newText += "<br"> + collection[i];
}
item.html(item.html() + newText);

Dom操纵。所有变化一下子

1 个答案: