JavaScript イベントの読み込みと preloading_javascript のスキル

一般に、複数のイベントをロードする場合は、window.onload で十分です。

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

window.onload = function(){
func2();
// その他の読み込みイベント………………
}


しかし、特別なニーズがあるため、それらを一緒に書くことができない場合は?たとえば、現在の領域が管理者用の場合、ページがバックグラウンドで生成されると、ページのこの部分はユーザーが管理者の場合にのみ生成され、この部分でもいくつかの特別なスクリプトが使用されます。上記の方法は役に立ちません。 ！

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

//バックエンド コード

< script type= "text/javascript">
window.onload = function(){
func1();
//一般ユーザーが使用するスクリプトをロードします...
}

<%# 次のスクリプトは管理者用に用意されています%>
<% if @user.role == "manager"
window.onload = function(){
func1();
//機密スクリプトをロードします...




この場合に生成されたページには 2 つの window.onload コード ブロックがあり、2 番目のコード ブロックが最初のコード ブロックを上書きします。このとき、loadEvent 関数が登場します。

コードをコピー

コードは次のとおりです。 varloadEvent = function(fn) { var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = fn;
}else {
window.onload = function() {
oldonload();
fn();
}
}
}


使用法は次のとおりです。 :

コードをコピーします

コードは次のとおりです。 loadEvent(func1); loadEvent(func2); loadEvent(func3);

//その他の読み込みイベント

しかし、実際の問題は常に予想外で厄介です。最近、有名な $ DOM セレクターなどの名前の競合を避けるために、すべての関数をクロージャーに入れたいと考えています。 JQuery、Prototype、mootool はすべてセレクターの名前として使用されており、共存が深刻な問題になっています。

コードをコピー

コードは次のとおりです。 (function(){ if (!window .JS){ window['JS'] = {}

}

var onReady = function(fn){
var oldonload = window.onload
if (typeof; window.onload != 'function') {
window.onload = fn;
}else {
window.onload = function() {
oldonload();
}
}
}
JS.onReady = onReady;
var $ = function(id){
return document.getElementById(id)
JS.$ = $;
})()

クロージャ環境でのイベントの読み込み <meta charset="gb2312">