1

私が書いた簡単なモジュールがあります。目的は、特定のクラス名で任意のURLを使用してページにリンクを作成することです

以下は、すべての汚い仕事をする主な機能です

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

domに継続的にアクセスする必要がないように、すべてのdomの変更を一度に適用する必要があることを理解しています。ページ上の多くの異なるリンクを変更する可能性がある場合、これをどのように行うのですか？

4

1 に答える 1

1

私はあなたの質問の詳細に答えようとします。

ページ内のN個の個別の要素を変更する必要がある場合、オプションは次のとおりです。

  1. N個の個別の要素すべてのHTMLを含む共通の親のHTMLを取得し、ある種の検索を使用してRAW HTMLを置き換え、各ターゲット要素で変更する部分を見つけます。次に、変更したHTMLを共通の親に戻します。

  2. 本文のHTML全体について、上記の手順と同じことを行います。

  3. DOMで変更する必要のある各オブジェクトを見つけて、そのHTMLを直接変更します（現在のコードのように）。

オプション1と2はDOM操作が少ないですが、ブラウザに大量の作業を要求し、既存のDOMオブジェクトを大量に破棄し、生のHTMLを最初から解析してから大量に作成するため、一般的には悪い方法です。新しいDOMオブジェクトの。これには、そのHTML内の既存のすべてのイベントハンドラーを消去するという副作用もあります（これらはすべて新しいDOMオブジェクトであるため）。したがって、ほとんどの場合、1と2は推奨されません。

それはあなたがすでにしていることであるオプション3をあなたに残します。N個の個別のオブジェクトを変更するには、各オブジェクトに1つずつ、N個のDOM操作を使用します。

あなたが読んだコメントが対処することを意図していると私が思うのは、このようなものは悪いことだろうということです（たくさんのDOM操作ですが、すべてが1つのオブジェクトにあります）：

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

このようなものがはるかに優れている場合（1つのDOM操作）：

var item = $("#foo");
var newText = "";
for (var i = 0; i < collection.length; i++) {
    newText += "<br"> + collection[i];
}
item.html(item.html() + newText);
于 2012-10-11T04:33:38.287 に答える