1

私は別の機能を提供するフレームワーク（流星ですが、私が推測する質問には関係ありません）を使用しています..

私の問題は、これらの関数間でアクセスできるようにするために、ますます多くのグローバル変数を使用していることに気づきました。たとえば、マップオブジェクト:

Meteor.startup(function () {
  map = L.map('map_canvas').locate({setView: true, maxZoom: 21});
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
});

マップを操作するには、どこからでもマップにアクセスする必要があります (リーフレットを使用) 例:

Template.messages.events({
  'click .delete-message': function (e,t) {
    e.stopPropagation();
    removeItem(e.target.id);
  },
  'click .message': function (e,t) {
    console.log('event clicked');
    map.setView([e.target.getAttribute('data-lat'),e.target.getAttribute('data-lng')], 16);
  }
});

別の場所で使用したいマーカーオブジェクトを作成したいときも同じ問題があります...

Meteor はこのように構築されているのでしょうか、それともグローバル化するよりも適切でクリーンな JS の代替手段がありますか?

編集回答ありがとうございます。たとえば、言及したパターンの 1 つを使用して、私のコードに基づいたコードの例を追加していただけますか? このように、私はそれをよりよく理解することができました。

4

1 に答える 1

1

js 変数と関数をグローバルでなくする方法はたくさんあります。

  1. オブジェクトをハッシュ マップとして使用し、ドット表記で変数にアクセスできます。オブジェクトは引き続きグローバルですが、少なくとも競合する可能性のあるグローバル名は少なくなります。
  2. namespace.jsを使用できます。
  3. クロージャーを使用して疑似 oo スタイルを使用できます。
  4. coffeescriptを使用できます。
  5. namespace.js 以外にも、dojo.jsなどの多くのフレームワークでモジュールを使用できます。
  6. おそらく他の多くのオプション。

Dojo.js とrequire.jsはモジュール設計を促進すると思います。（とりわけ）名前空間は、組み込みと使用が非常に簡単で、最小限のコード変更で問題を解決できる場合があります。私は過去にそれを使用して、グローバルからよりオブジェクト指向のスタイルに移行しました。

オプション 1、ハッシュマップ

var GKApp = new Object();
GKApp.map = blah;
GKApp.size = 1;
GKApp.doSomethingWithMap = function() {
    GKApp.map.blah();
}
// Now the only global is GKApp.
// Later, make the call. 
GKApp.doSomethingWithMap.call();

オプション 3、閉鎖

以下に示すように純粋な JavaScript クロージャーを使用するか、definedojo.js または require.js を使用してこれをラップすることができます。

GKApp = function(pmap) {
    // dbg.log("GKApp constructor.");
    // You can consider the closure to 'begin' here.

    // ********************************************************
    // @private variables:
    // ********************************************************
    var map = pmap;

    /**
     * @privileged method which has access to variables in the closure.
     * These variables are not available outside of the closure.
     * An anonymous function has access to variables in the outer scope or, the closure.
     */
    this.doSomethingWithMap = function() {
        map.blah();
    };
};

// Later, instantiate an object and use it. 
var gkApp = new GKApp(map);
gkApp.doSomethingWithMap();
于 2013-03-19T02:47:48.773 に答える