Javascriptでラッパーオブジェクトを書く

Question

まず、私の質問が正しく言い表せられなければ謝罪してください - 私はプロのコーダーではないので、私の用語は変わっているかもしれません。私のコードがあまりにも恥ずかしいではないことを願っています:(

私はfade()の方法でマウスのロールオーバーでイメージをフェードインまたはフェードアウトします。私はラッパーオブジェクトを使用したいと思います。イメージ要素といくつかの必要なプロパティを保持するために、私はこれを達成する方法を知らない。fade()は、HTMLから呼び出され、多くの追加設定なしでページにドロップするように設計されているちょうどこのように、任意のHTMLへの画像）フェージング：ポインタが離れて移動されたときに

<div id="obj" onmouseover="fade('obj', 1);" onmouseout="fade('obj', 0);"> 

がfade(obj, flag)方法は画像をフェードインするsetIntervalを開始し、そして、間隔がクリアされます画像をフェードアウトするために新しいSetIntervalが作成されます。不透明度の状態を保存するために、オブジェクトにいくつかのプロパティ、すなわちobj.opacity,obj.upTimer、およびobj.dnTimerを追加しました。

すべては問題なく動作しますが、HTML要素にプロパティを追加することは嫌いです。これは、他のメソッドがこれらのプロパティを上書きするという将来の状況につながる可能性があるからです。理想的には、私はラッパーオブジェクトが含まれるべきだと思いますが、ページが読み込まれたときにオブジェクトを作成するコードを追加せずにこれをきちんと実行する方法がわかりません。誰かが何か提案があれば、私は大いに感謝します！

var DELTA = 0.05; 

function fade(id, flag) { 

    var element = document.getElementById(id); 
    var setCmd = "newOpacity('" + id + "', " + flag + ")"; 

    if (!element.upTimer) { 
    element.upTimer = ""; 
    element.dnTimer = ""; 
    } 
    if (flag) { 
    clearInterval(element.dnTimer); 
    element.upTimer = window.setInterval(setCmd, 10); 
    } else { 
    clearInterval(element.upTimer); 
    element.dnTimer = window.setInterval(setCmd, 10); 
    } 
} 

function newOpacity(id, flag) { 

    var element = document.getElementById(id); 

    if (!element.opacity) { 
    element.opacity = 0; 
    element.modifier = DELTA; 
    } 

    if (flag) { 
    clearInterval(element.dnTimer) 
    element.opacity += element.modifier; 
    element.modifier += DELTA; // element.modifier increases to speed up fade 
    if (element.opacity > 100) { 
     element.opacity = 100; 
     element.modifier = DELTA; 
     return; 
    } 
    element.opacity = Math.ceil(element.opacity); 
    } else { 
    clearInterval(element.upTimer) 
    element.opacity -= element.modifier; 
    element.modifier += DELTA; // element.modifier increases to speed up fade 
    if (element.opacity < 0) { 
     element.opacity = 0; 
     element.modifier = DELTA; 
     return; 
    } 
    element.opacity = 
     Math.floor(element.opacity); 
    } 
    setStyle(id); 
} 

function setStyle(id) { 

    var opacity = document.getElementById(id).opacity; 

    with (document.getElementById(id)) { 
    style.opacity = (opacity/100); 
    style.MozOpacity = (opacity/100); 
    style.KhtmlOpacity = (opacity/100); 
    style.filter = "alpha(opacity=" + opacity + ")"; 
    } 
} 

Answer 1

これは直接あなたの質問に答えるものではありませんが、jQueryライブラリを使用することができます。

は、ここに私のフェーダー方法です。それは、簡単です、あなたがしなければならないすべては、上部にスクリプトタグを追加するだけです。

あなたドンので、jQueryのあなたのためのすべてのブラウザの依存関係を処理する

<div id="obj" onmouseover="$('#obj').fadeIn()" onmouseout="$('#obj').fadeOut()"> 

：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 

その後、あなたのdivは次のようになりますfirefoxとmozillaの違いなどを気にする必要はありません。

Answer 2

HTMLをきれいに保つには、JQueryを使用してイベントを設定することを検討する必要があります。

あなたのHTMLは次のようになります。 -

<div id="obj"> 

あなたのJavaScriptは、このような "何か" になります： -

$(document).ready(function() { 
    $("#obj").mouseover(function() { 
     Page.fade(this, 1); 
     }).mouseout(function(){ 
     Page.fade(this, 0); 
     }); 
}); 

var Page = new function() { 
    // private-scoped variable 
    var DELTA = 0.05; 

    // public-scoped function 
    this.fade = function(divObj, flag) { 
     ... 
    }; 

    // private-scoped function 
    var newOpacity = function (divObj, flag) { 
     ... 
    }; 

    // private-scoped function 
    var setStyle = function (divObj) { 
     ... 
    }; 
}; 

を私はあなたではないことを確認するためにあなたのJavaScriptでいくつかのスコープの概念が導入されました関数の問題をオーバーライドするようになります。

Answer 3

あなたのHTMLにハンドラを追加するのは良いことではありません。また、1つのオブジェクトに複数のイベントハンドラを割り当てることもできます。

残念ながら、Microsoftはイベントハンドラをアタッチすることに関して、自分のやり方を行っています。しかし、あなたはそれを世話する小さなラッパー関数を書くことができるはずです。

詳細については、quirksmode.org - Advanced event registration modelsをお読みください。

（IEではありません）W3C互換性のあるブラウザのための例：代わりにHTMLにあなたのイベントハンドラを追加するので、要素への参照を取得し、呼び出しaddEventListener：

var obj = document.getElementById('obj'); 

obj.addEventListener('mouseover', function(event) { 
    fade(event.currentTarget, 1); 
}, false); 

obj.addEventListener('mouseout', function(event) { 
    fade(event.currentTarget, 0); 
}, false); 

あなたは、私が「見ることができるようにオブジェクトへの参照を直接渡すので、fadeメソッドではすでにオブジェクトへの参照があります。

ID（または参照）を受け入れる関数でこれをラップすることができます。イベントハンドラを特定の要素にアタッチするたびに、この関数にID（または参照）を渡すだけで済みます。

あなたのコードの再利用可能にしたい場合は、私はこのように、オブジェクトにすべてを置くことをお勧め：

var Fader = (function() { 
    var DELTA = 0.05; 
    function newOpacity() {} 

    function setStyle() {} 

    return { 
     fade: function(...) {...}, 

     init: function(element) { 
      var that = this; 
      element.addEventListener('mouseover', function(event) { 
       that.fade(event.currentTarget, 1); 
      }, false); 

      element.addEventListener('mouseout', function(event) { 
       that.fade(event.currentTarget, 0); 
      }, false); 
     } 
    }; 
}()) 

あなたの機能を保持するためにオブジェクトを使用するには、グローバルな名前空間の汚染を低減します。

その後、あなたがそれを呼び出すことができます：1で私たちは、意味の即時機能(function(){...}())を持って

、関数が定義され、実行されます（()）：

Fader.init(document.getElementById('obj')); 

上記のコードの説明を行く。この関数は、initとfadeというプロパティを持つオブジェクト（return {...};、{..}はオブジェクトのリテラル表記）を返します。両方のプロパティは、即値関数内で定義されたすべての変数にアクセスできる関数を保持します（クロージャです）。つまり、外部からアクセスできないnewOpacityとsetStyleにアクセスできます。返されたオブジェクトはFader変数に割り当てられます。