0

スクリプトは非常に長いので、すべてを貼り付けるのではなく、説明しようと思います。編集：もう少し表示する必要があるようです。

毎秒数回、UL を新しいコンテンツで更新します (updateDomTree を呼び出します)。DOM ツリーは、CKEditor 内の要素を表します。

function updateDomTree(editor) {
    var selection = editor.getSelection();
    var jqElements = $(document.createElement('div'));
    var editorData = editor.document.getBody();
    var kids = editorData.getChildren();

    // Gather LI to represent Editor content DOM element hierarchy
    for (var i = 0, len = kids.count(); i < len; i++) {
        jqElements.append(HandleNode(kids.getItem(i), selectedElement, editor));
    }

    var domUL = document.createElement('ul');
    domUL.id = "dom";
    var jqUL = $(domUL).append(liElements);
    $(document.getElementById('dom')).replaceWith(jqUL);
}

// This is a recursive function, but it has no other issues than the memory leak
// If I comment out the click event, it works fine. 
// The **obj** variable is why I don't use the "delegation" method.
function HandleNode(obj, selection, editor) {
    // do other stuff, handle recursion etc.
    liElement.on('click', function(e) {
        editor.getSelection().selectElement( obj );
        editor.focus();
        editor.getSelection().scrollIntoView();
        e.stopPropagation();
    }); 
    return liElement;
}

現在IE9では、メモリ使用量が急速に上昇し始めています。クリック ハンドラをコメント アウトすると、メモリ リークはなくなりますが、機能がなくなります。この問題をどのように回避しますか?

別の説明: #dom は DOM 構造の UL 視覚的表現であり、要素を参照するにはクリック イベントが必要です。そのため、クリック イベント ハンドラーの作成中にオブジェクト参照が必要です。基礎となる DOM が変更されると、UL 表現はその変更を反映する必要があります。これが、迅速な更新の理由です。

4

2 に答える 2

2

要素を作成するたびに新しいハンドラーを作成するのではなく、liイベント委任を使用して、1 つのハンドラーをulそれ自体にバインドできます。

// when you create the list :
$('#dom').on('click', 'li', function(e) {
    // do some cool stuff
    e.stopPropagation();
});

// instead of creating a new ul,
// replace thhe existing ul's content
$('#dom').empty().append(liElements);

各ノードのカスタム データを保存する必要がある場合は、次の.data()関数を使用してみてください。

$(liElement).data('obj', obj);

その後、 handler からアクセスできます。

$('#dom').on('click', 'li', function(e) {
    var obj = $(this).data('obj');
    ...
    e.stopPropagation();
});

objこの設計により、javascript は変数へのアクセスを維持するためにライブ クロージャーを維持する必要がなくなります。メモリリークが吹き飛ばされるかどうかは100％確信が持てません。テストして確認する必要があります。

于 2013-07-10T07:56:19.763 に答える
0

UL のレベルに委譲し、UL 要素が DOM で使用可能になるまで設定します。

$('#dom').on('click','li', function(e) {
    // do some cool stuff
    e.stopPropagation(); //stopPropagation couldn't give you expected result depending why you need to stop bubbles and at which level, check it.
});
于 2013-07-10T07:54:43.947 に答える