1週間のjsヒント集_javascriptスキル

1. 今日はカスタム イベントについて話しましょう
イベントについては誰もが知っていますが、多くのフレームワークでカスタム イベントの実装が存在します。

コードをコピーします コードは次のとおりです。

var cusEvent = function(){ var キャッシュ = {};
return {
addEvent:function(type,fn){
cache[type]?cache[type].push(fn):(cache[type]= [fn] ]);
},
removeEvent:function(type,fn){
if(cache[type]){
if(fn){
for(var i=0 ,ci ;ci=cache[type][i];i ){
ci===fn&&cache[type].splice(i,1)
}
}else{
キャッシュを削除 [type] ];
}
}
}、
//e はカスタム オブジェクトまたは文字列です。
fire:function(e){
if( typeof e =='string '){
e = {type:e}
};
var t = キャッシュ[e.type]
if(t){
for( var i=0,ci ;ci=t[i];i ){
//e は独自のターゲットを持つことができますが、そうでない場合は代わりにこれを使用します
ci.call(e.target||this,e)
}
}
}
}
}()
//
cusEvent.addEvent('start',function(e){alert(e.type) })
を使用しますcusEvent.addEvent('start',function(e){alert(e.type "1")})
cusEvent.fire('start')
cusEvent.removeEvent('start' )
< ;/script>

2. 誰もが innerHTML を使用したことがありますが、IE では機能しない場合があります。もちろん、select の innerHTML は読み取り専用です。これに加えて、tr や table などの要素もあります。IE での innerHTML によるこれらの要素の使用と互換性があるようにするための小さなメソッドを書きました。インスピレーションを与えることができます

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

;/head>

Hello World!
sdfsdfsdfsdf /select>


<script> <br>var div = document. createElement('div'); <br>return document.all?function(pN,h){ <br>div.innerHTML = '<select>' h '</select>'; i=0,ci;ci=pN.firstChild ;) pN.removeChild(ci) <br>for(;ci=div.firstChild.firstChild;) pN.appendChild(ci); :function(pN,h){ <br> pN.innerHTML = h; <br>} <br>}() <br></script>


IE では、一時要素 div を使用して innerHTML をスキップしますが、それはできません。使用方法の問題については、さらにいくつかのロードポイントを記述することができます。つまり、渡されたものが tr または table であると判断された場合は、対応する要素でそれを適用します
この方法は、select でのオプションの追加と変更が難しいという問題も解決できます。
グローバル g-add 変数は、js では悪魔であるため、絶対に使用しないことをお勧めします。ただし、場合によっては、

Copy code

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


var a = 1;

function fn(){ alert(a); fn() fn() 関数の実行で変更したい場合

こんな感じで書くと良いです

コードをコピーします

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


<script> <br>var fn = function(){ <div class="codetitle">var a = 1; 🎜>return function(){ <span>alert(a); <a style="CURSOR: pointer" data="74760" class="copybut" id="copybut74760" onclick="doCopy('code74760')">}() <u>fn(); </u></script> a はクロージャとして内部関数からアクセスできますが、グローバル a は生成されません

もちろん、a を直接変更したい場合は、

もできます


コードをコピーします


コードは次のとおりです。


<script> <br>var fn = function(){ </div>var a = 1; <br>return function(p){ <br>a = p===未定義?a <br>alert(a); <div class="codetitle">fn(); <span></script>
4.
従来の方法は、el.offsetParent と el.offsetLeft をトラバースして
を取得することですが、実際には getBoundingClientRect を使用するのが最も簡単な方法です。
コードは次のとおりです

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

var offset = function (o){
var d = document,m = Math.max,bl = m(d.body. clientLeft,d. documentElement.clientLeft),st,sl,
bt = m(d.body.clientTop,d.documentElement.clientTop),b,bb = document.getElementById('bb'); function(o) {
b = o.getBoundingClientRect();
st = m(d.body.scrollTop,d.documentElement.scrollTop),sl = m(d.body.scrollLeft,d.documentElement.スクロール左);
bb.style.cssText =";top:" (b.top st-bt) 'px;left:' (b.left sl-bl) "px"; }()



下部の灰色の div をクリックすると、上の赤い div が灰色の div と完全に重なります
5. IE配下のOuterHTML Fat Sauceを使ったことはありますか? 特定の要素のHTMLを返すだけでなく、この要素のHTMLも返したい
ただし、この属性は使用できます。 IE では、この属性がありません。どうすればよいですか。

コードをコピーしてください。

コードは次のとおりです。 >