4

画像の CSS プロパティ「表示」が他の JS スクリプト/関数によって変更されたときに、いくつかの JS コードを実行したいと考えています。その変更を監視してコールバック関数を設定する方法はありますか?

$(this).bind.('propertychange', function(){})

これを行うことはできず、setInterval も悪い考えです。

他に何ができるでしょうか？

4

4 に答える 4

8

これはあなたが探しているものです：

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);
于 2012-05-05T03:12:33.967 に答える
1

答え: この他の投稿を参照してください >> Webkit で動作する DOMAttrModified に代わるものはありますか

The Rant: DOM Mutation イベントが問題の鍵を握っています。しかし、ブラウザー戦争の新しい波では、Wekit と Gecko は意見が一致しません。Gecko には DOMAttrModified がありますが、webkit にはミューテーション オブザーバーと呼ばれるものがあります (イベントにアタッチされているイベント ハンドラーのパターンを壊しますが、ユーザー/コーダーを正しくロックしたい場合に一貫性を気にする人はいますか? ;)

PS: 同じ知恵の将来の探求者のために、ここにこれを追加するだけです.

于 2012-05-31T21:58:35.357 に答える
1

これは、変更したくないレガシー JavaScript ファイル内にあります。

// this is your original, unmodified function
function originalFunction(sel) {
    alert(sel);
    $(sel).css("display","none");
}

これはあなたのコードにあります：

// here is a sample callback function you pass into the extended function below
function myCallback(s) {
    alert("The image with src = '" + $(s).attr("src") + "' has been modified!");
}


// here is how you can extend the function to do what you want 
  // without needing to modify the actual code above
originalFunction = (function(legacyFn, callback) {

    // 1 arg function to be returned and reassigned to originalFunction
    return function(sel) {

        // call "original" originalFunction, with alert and image hide.
        legacyFn(sel);  

        if(callback) callback(sel);  // invoke your callback
    }

})(originalFunction, myCallback);

変数originalFunctionには、引数を 1 つ取る関数が割り当てられます。originalFunction引数を 1 つ取る関数は、変更前の への参照と関数への参照の 2 つの引数を取る無名の自己実行関数によって返されcallbackます。これら 2 つの関数参照はクロージャ内で「ロック」されるためoriginalFunction、自己実行関数によって に新しい値が割り当てられたときに、変更される前の へlegacyFnの参照がパラメータに含まれたままになります。originalFunction

要約すると、より高いレベルで、originalFunctionとmyCallbackがパラメーターとして自己実行型の無名関数に渡され、変数 legacyFn と callback に渡され、新しい関数が に割り当てられoriginalFunctionます。

これで、 を呼び出すoriginalFunction('.someClassOnAnImage')と、legacyFn が起動し、セレクターに警告が表示され、表示プロパティが none に設定されます。その後、コールバック関数が存在する場合は起動し、次のように表示されます。

The image with src = '.someClassOnAnImage' has been modified!

これは仮想またはプラットフォーム固有の addEventListener ほど優れたものではありませんが、これらのファイルを物理的にクラックして開いたり変更したりすることなく、レガシー コードの関数の動作を変更できます。これは単に関数を拡張して追加の動作を実行するだけですが、元の関数や元のファイルを変更する必要はありません。

すべての拡張機能を個別の JavaScript ファイル (または作業中の JavaScript ファイル) にきちんと含めることができます。元の動作に戻したい場合は、拡張機能を削除するだけです。

于 2012-05-05T18:26:21.773 に答える
0

ジェフの提案に基づいて、画像スタイルプロパティを変更する単一の関数を作成し、その関数を他のすべての関数がその画像スタイルプロパティを変更するために通過しなければならないボトルネックとして使用することをお勧めします。

function showImage(selector, callback) {
    $(selector).css("display","block");
    if(callback)
        callback();
}

function hideImage(selector, callback) {
    $(selector).css("display","none");
    if(callback)
        callback();
}

画像のCSSプロパティを変更する必要がある場合は、JavaScriptのどこからでも上記の2つの関数を呼び出すことができます。関数はまた、関数をパラメーターとして受け取ります。これは、関数が2番目のパラメーターとして渡されたと想定して後で実行されます。

これをさらに単純化して1つの関数にすることもできますが、これを行う際の目標が正確にわからないため、これはお任せします。

于 2012-05-05T03:09:35.423 に答える