javascript onLoadとonReadyの文脈でのスコープ

Question

私はjavascriptを初めて使い、自分のコードで何が起こっているのか理解したいと思っています。私はいくつかのWebマッピングを行うためにjQueryとOpenLayersを使用しています。

$(document).ready(function(){ 
    var map = new.OpenLayers.Map('map', options); 
    $.get(my_python.cgi_script which returns an html table of available layers) 
    }); 

As far as I understand、私の変数はローカルスコープを持っている「マップ」：

は、ここに私のマップ変数はonReady関数内に作成されたコードの例1、です。

この機能の中で、いくつかのレイヤーを追加したり、コントロールを生成したりします。すべては、OpenLayersのドキュメントで作業しています。また、jQueryのgetメソッドを使用してpython.cgiスクリプトを呼び出して、使用可能なレイヤーのテーブルを動的に生成しています。これはすべて上記のonReady内で発生します。

動的に生成されたコンテンツを操作する必要があり、コードをonLoad関数に配置する必要があることがわかりました。 2つ目のコードブロックをonReady関数に配置すると、サムネイルにはjQuery経由でアクセスできません。

$(document).ready(function(){ 
    var map = new.OpenLayers.Map('map', options); 
    //More code to dynamically generate a list of available layers, stored in a table 
    $.get(my_python.cgi_script which returns an html table of available layers) 
    }); 

$(body).onLoad(function(){ 
$(img.thumbnail).bind('click', function(){ 
    var name = $(this).attr('layer_name_id') 
    var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name) 
    map.addLayer('layer') //map undefined due to scope 
}); 
}); 

上記のブロックでは、「マップ」は2番目の変数では定義されていません。私は理由（範囲）を理解し、マップをグローバル変数にする必要があると決めました。私はしてみました：

var map; //This is a global because it is defined outside of any functions? 
$(document).ready(function(){ 
    map = new.OpenLayers.Map('map', options); 
    //More code to dynamically generate a list of available layers, stored in a table 
    $.get(my_python.cgi_script which returns an html table of available layers) 
    }); 

$(body).onLoad(function(){ 
$(img.thumbnail).bind('click', function(){ 
    var name = $(this).attr('layer_name_id') 
    var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name) 
    map.addLayer('layer') 
}); 
}); 

マップ変数はまだ定義されていません。どうして？グローバルな仕組みを誤解していますか？

onReadyコードブロックの内側にonLoad関数を置くことで、すべての作業を実行できました。なぜ下がうまくいくのか分かりません：

$(document).onReady(function(){ 
    var map = new.OpenLayers.Map('map', options); 
    //More code to dynamically generate a list of available layers, stored in a table 
    $.get(my_python.cgi_script which returns an html table of available layers) 

$(body).onLoad(function(){ 
$(img.thumbnail).bind('click', function(){ 
    var name = $(this).attr('layer_name_id') 
    var layer = new OpenLayers.WMS(//all the stuff to add the layer, including name) 
    map.addLayer('layer') 
    }); 
}); 

}）;

Answer 1

グローバル変数マップを宣言したコードスニペットが機能しています。しかし、Jqueryには、OnReadとonLoadのメソッドがありません。 $（document）.ready（）関数で実行されるinit（）関数を作成する方がいいです。$（document）.readyとbody.onload関数を混ぜないでください。 init関数とdocument.readyイベントを使用します。