0

私は Javascript スコープについて非常に多くのことを読み、必要な機能を作成しました。この質問を投稿して、方法/理由を 1 か所で明確にすることにしました。

私の場合、マッピング用の JavaScript ライブラリである Leaflet を使用していました。

私の最初の質問は、「L」とは何かということです。

たとえば、次のコードを使用できます。

current_map = L.map(map_id);

L は何を表し、それを介して関数にアクセスできるのはなぜですか?

第二に、私のウェブサイトには、マップの設定など、いくつかの共通コードを共有する複数の異なるマップがあります。

そのため、たとえばマップをセットアップしてマーカーを追加する「共通コード」を開発したいと考えました。

そこで、map_global.js に次のコードを書きました。

    var current_map;

window.setup_map = function(map_id)
{


    if ($("#"+map_id)[0])
    {

        $("#"+map_id).show();

        current_map = L.map(map_id);

    }
}

次に、map_individual.js ファイルに次のように記述します。

map_setup('map_div');

そして私のマップがセットアップされました。

これを行うことができるのは、関数名を定義する際に window を使用することで、グローバル スコープで関数を設定しているためです。同様に、変数 current_map を任意の関数の外側に設定すると、それもグローバルになりますか?

これは、この機能を達成するための効率的/安全/合理的な方法ですか?

最後に、map_individual.js で current_map にアクセスできないのはなぜですか?

どうもありがとう。

トム

4

1 に答える 1

2

これは、変数のスコープの問題です。

「L」は概念的に名前空間と考えてください。L は、マップ、L.map() などのメソッドを公開します。

「current_map」変数を公開したいようです。map_global.js ファイルでは、 current_map は現在ローカル変数です。これは、 varで宣言したためです。そのため、map_global.js スコープ外のものは current_map にアクセスできません。

map_individual.js で current_map にアクセスする手っ取り早い方法が必要な場合は、グローバルな window.current_map を L.map(map_id) に設定することで公開できるため、current_map 変数のスコープを変更します。

もちろん、これはグローバルスコープを汚染することにつながるため、探索できることの1つは、「モジュラー」クライアント側JavaScriptを実現する方法です。これを行う簡単な方法は、独自の名前空間を実装することです。たとえば、map_global.js では、1 つの「オブジェクト」 (独自の名前空間) のみを公開し、それをウィンドウにアタッチできます。すべてのメソッドと変数をウィンドウ (グローバル名前空間) に直接アタッチする代わりに、それらのメソッドと変数をその「オブジェクト」にアタッチすると、名前空間を使用して current_map と setup_map() にアクセスできます。

 function setup_map(){ ...}

 var current_map; 

 window.my_lib = {
   setup_map = setup_map,
   current_map = current_map
 }

したがって、my_lib.setup_map()、およびmy_lib.current_mapは、後でこの方法でアクセスできます。これは、 my_libをグローバルにするだけであるためです。my_lib が 12 個の関数を公開した場合を想像してみてください。これは、12 個すべての関数をウィンドウ (グローバル名前空間) にアタッチするのではなく、より組織化されるという考えです。これは、同じ名前の関数を持つ異なるファイル/「モジュール」がある場合に後で役立ちます。このようにして、相互に上書きすることなく my_lib.render() と client_lib.render() を使用し、その分離を維持して、既にグローバル名前空間にあるものを上書きするリスクを減らすことができます。

スクリプトをインポートする順序も重要であることに注意してください。また、RequireJS、CommonJS などのライブラリもあり、いくつか例を挙げると、このモジュール性全体の依存関係の側面に対処しようとするもので、探索する価値があります。慎重に踏み込んで、これがお役に立てば幸いです。

于 2013-03-20T18:21:50.963 に答える