関数外のvarにはどのようにアクセスすればよいですか？

Question

xとyの2つのセットを比較できるように、何かのx、yを与える2つの関数を作成したいと思います。以下はその機能の1つです。 2つ目は同じことをするでしょう。

私はconsole.log position.gxとposition.gyを関数の中に入れることができますが、関数の外でそれをアクセスするにはどうすればposition.gxとposition.hxを比較するかのようにすることができますか？

私はそれが範囲の問題だと知っていますが、私はこれを書き直す方法を理解することができないので、私はposition.gxと別の機能のものを比較できます。

（独学であることに問題が私は愚かなものにハングアップを取得される。）

function guyLocation() { 

var myElement = document.querySelector("#guy"); 
var xPosition = 0; 
var yPosition = 0; 

    function getPosition(el) { 
     this.addEventListener("load", true); 

     while (el) { 
     if (el.tagName == "BODY") { 

      var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
      var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

      xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
      yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
     } else { 
      xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
      yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
     } 

     el = el.offsetParent; 
     } 
     return { 
     gx: xPosition, 
     gy: yPosition 
     }; 
    }; 

    document.body.onkeydown = function() { 
     position = getPosition(myElement); 
     console.log(position.gx + ", " + position.gy); 
    }; 
}; 

Answer 1

あなたは、関数をエクスポートし、それのいくつかのプロパティを設定することができます。 （これは少しファンキーですが、それが何をしているか/どのようにあなたが表示されるはずです）：

NOTE（変更のため、このコードの最後の数行を参照）

この単純なマークアップ：

<div id="guy"> 
    Howdy 
</div> 

このコード：

function guyLocation() { 
    var myElement = document.querySelector("#guy"); 

    var xPosition = 0; 
    var yPosition = 0; 

    function getPosition(el) { 
    // this.addEventListener("load", true); 

    while (el) { 
     if (el.tagName == "BODY") { 

     var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
     var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

     xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
     yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
     } else { 
     xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
     yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
     } 

     el = el.offsetParent; 
    } 
    return { 
     gx: xPosition, 
     gy: yPosition 
    }; 
    }; 

    document.body.onkeydown = function() { 
    guyLocation.position = getPosition(myElement); 
    console.log(guyLocation.position.gx + ", " + guyLocation.position.gy); 
    }; 
    guyLocation.getPosition = getPosition;// allows outside calls 
}; 

guyLocation();// sets stuff up, exports function 
console.log(guyLocation.position);// undefined 
// sets value 
guyLocation.position = guyLocation.getPosition(document.querySelector("#guy")); 
console.log(guyLocation.position);// Object {gx: 8, gy: 8} 

Answer 2

私はここで問題がないと思うの外（窓スコープで変数を宣言任意のコード本体がどこにでもアクセスできます）。デザイナーのソリューションとしてクラス（プロトタイプ）をチェックアウトし、オブジェクトの位置を追跡して更新するエンジンオブジェクトを作成し、このエンジンをウィンドウスコープに格納し、どこからでもクエリを実行できます。タイマーで更新ループを作成し、エンジンオブジェクトにスプライトを格納し、そのデータのすべての更新とクエリを管理する、より洗練されたゲームエンジンを作成するという基盤があります。

Answer 3

あなたが本当にやりたいことは、あなたの問題を解決するためのやや異なるアプローチをとることだと思います。

動きを処理するコードブロックであるmoduleを作成した場合、他の場所で使用する必要がある内部メソッドが公開されます。ここで

は、ビデオは種類のあなたがステップバイステップに取得する方法を歩くシリーズの1つです

• http://weblogs.asp.net/dwahlin/techniques-strategies-and-patterns-for-structuring-javascript-code-revealing-module-pattern
• https://www.youtube.com/watch?v=HkFlM73G-hk

を助けるかもしれないいくつかのリンクありモジュールパターンを明らかにする。

最初は奇妙なことになりますが、JavaScriptで非常によく使われていて非常に強力なので、学習する価値があります。

Answer 4

は...関数呼び出し外のKeyDownイベントリスナーを移動

function guyLocation() { 

    var myElement = document.querySelector("#guy"); 
    var xPosition = 0; 
    var yPosition = 0; 

    // return the parts you want to expose outside the function scope... 
    return { 
     getPosition: getPosition 
    }; 

    function getPosition(el) { 
     this.addEventListener("load", true); 

     while (el) { 
      if (el.tagName == "BODY") { 

       var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft; 
       var yScrollPos = el.scrollTop || document.documentElement.scrollTop; 

       xPosition += (el.offsetLeft - xScrollPos + el.clientLeft); 
       yPosition += (el.offsetTop - yScrollPos + el.clientTop); 
      } else { 
       xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft); 
       yPosition += (el.offsetTop - el.scrollTop + el.clientTop); 
      } 

      el = el.offsetParent; 
     } 
     return { 
      gx: xPosition, 
      gy: yPosition 
     }; 
    } 

} 

function dollLocation() { 

    // return the parts you want to expose outside the function scope... 
    return { 
     getPosition: getPosition 
    }; 

    function getPosition(el) { 
     // more logic here... 
    } 

} 

// put this part outside the `guyLocation` function 
document.body.onkeydown = function() { 
    // access different functions, and compare in here... 
    guyPosition = getPosition(myElement); 
    dollPosition = getPosition(myElement); 
    console.log(guyPosition.gx + ", " + guyPosition.gy); 
    console.log(dollPosition.gx + ", " + dollPosition.gy); 
};