ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript学習メモ Black.Caffeine 09.11.28_基礎知識

JavaScript学習メモ Black.Caffeine 09.11.28_基礎知識

WBOY
WBOYオリジナル
2016-05-16 18:40:391142ブラウズ

1. これまでは、使用する関数をただ記述するだけでしたが、今回はカプセル化されたクラスを作成しました。使用するのは悪くありませんが、多くの問題に遭遇しました。パラメータを渡すときに問題が発生するため、多くの情報を参照して次のようにまとめました:
1) 動的バインディング イベントの問題:
onclick イベントはリスト項目などのオブジェクトにバインドする必要があります。イベントを上書きするのではなく関数操作を追加するには、addEventListener またはattachEvent を使用する必要があります。ただし、attachEvent は FF をサポートしておらず、FF は addEventListener のみを使用できます。したがって、この 2 つを組み合わせる関数が必要なので、この関数が生まれました:

コードをコピー コードは次のとおりです:

関数 addEventHandler(oTarget, sEventType, fnHandler)
{
if(oTarget.addEventListener)
{oTarget.addEventListener(sEventType, fnHandler, false);}
else if(oTarget.attachEvent)
{oTarget.attachEvent('on' sEventType, fnHandler);}
else{oTarget['on' sEventType] = fnHandler;}
}

2) このパラメータを渡す際の問題:
関数と属性をクラスにカプセル化しているため、onclick などのイベントをバインドするときに問題が発生します。たとえば、addEventHandler(this.elems[i],"click") ,this.Move);、これは失敗します。onclick イベントが発生したとき、呼び出される this はこのカプセル化されたクラスを指していないため、apply() を使用する必要があります ~—— オブジェクトのメソッドを適用し、現在のオブジェクトと別のオブジェクト。特定の形式について言及する必要はありません。インターネット上には多くの関数があります。
コードをコピー コードは次のとおりです。

var Bind = function(object,func){
var args = Array.prototype.slice.call(arguments).slice(2); ){
return func.apply (object,args);クラス
にカプセル化されたメンバー関数が定義されています。//this.elems[i].onclick=this._fnMove;//上記の文をこの文に置き換えることもできますが、onclick イベントは this._fnMove
addEventHandler(this.elems[i],"click",this._fnMove); を追加する代わりに this._fnMove に置き換えられます。これでOKです~
PS.call()は基本的に同じ関数ですが、特定のパラメータが異なります
2.setIntervalの問題
1) setTimeoutとの違い
一般的にsetTimeoutは実行されるだけです(もちろん、関数内で繰り返される場合は setTimeout を呼び出して繰り返し実行できます)、setInterval は、clearIntercal() まで繰り返し実行できます
2) IE での非互換性の問題
この問題は 50% 私を苦しめました将来的には、IE との戦いで人生の半分を無駄にしたいですか? 。 。
もともと、Chrome、FF、Safari で非常に快適に動作していたので、IE のことを忘れるほどでした。 。 。その後、IE で試してみたところ、修正して Google で検索したところ、ほぼ 1 日かかって、ようやく完成しました。 以前は、ステートメントは次のようになっていました: this.timer=setInterval(this.unfold,5,this.divs[index],this); この結果は、IE ではまったく使用できませんでした。最後に、ヒーローの記事で次の記述を見つけました。 IE では、setTimeout と setInterval はパラメーターの受け渡しをサポートしていません。問題はすぐに解決されました。
問題は解決されました。




コードをコピーします


コードは次のとおりです。
var mySetInterval = setInterval; 🎜>window .setInterval = function(callback, interval) { var args = Array.prototype.slice.call(arguments, 2); function callFn(){callback.apply(null, args) );} return mySetInterval(callFn, interval); }
var mySetTimeOut = setTimeout; // setInterval を変更します
window.setTimeout = function(callback, ti​​meout)
{
var args = Array.prototype.slice.call(arguments, 2);
function callFn(){callback.apply(null, args);}


次に window を使用します。 setTimeout または window .setInterval~ を呼び出すだけです~
私のステートメントは次のように変更されます:
this.timer=window.setInterval(this.unfold,5,this.divs[index],this); //そのうち、 this.divs [index]、これは渡される 2 つのパラメータです
そのヒーローにもう一度感謝します。彼は私のことを知りませんでした~
現在、IE にはまだ小さなレイアウトの問題がいくつかあります。学習を続けてください~ウサギいっぱい!
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。