2

私は常にいくつかのフレームワークと独自の単純な構造を使用していたので、JavaScript での OOP は初めてでしたが、内部で何が起こっているのか考えたことはありませんでした。ここで、多くの JS プログラマーが直面する 1 つの問題、つまりグローバル変数に取り組みたいと思います。グローバル変数を作成するのは悪い習慣であり、多くの人が代わりにオブジェクトを使用することを提案しています。そして、ここで問題が発生します。オブジェクトを作成し、それをアプリケーションのどこかで呼び出してグローバル変数の値を取得する最良の方法が何であるかがわかりません。たとえば、init 関数を使用するかどうか、グローバル変数の値を返す方法 (関数または「ドット」表記) がわかりません。オブジェクトに関する例をたくさん見てきましたが、スタイルが異なっていました。具体例を想像してみてください。オブジェクトにグローバル変数を格納したい - window' の高さとウィンドウの幅。クロスブラウザにするために、このコードを使用します

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    w = w.innerWidth || e.clientWidth || g.clientWidth, // this is global variable
    h = w.innerHeight|| e.clientHeight|| g.clientHeight; // and this is global varibale too

では、このコードをオブジェクト内に適用する方法と、アプリケーションのどこかでこれらのグローバル変数の値を取得する方法は?

編集

今、私のコードは次のようになります。

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
return {
  getHeight:function(){
     return height;
  },
  getWidth:function(){
     return width;
  }
}
}());

heightandwidth属性にアクセスするにはgetHeight、andgetWidthメソッドを呼び出します。私にとって奇妙に見える唯一のことは、これらreturnsがオーバーラップ内にあることreturnです。それは正しい方法ですか？

4

1 に答える 1

4

Globals を避けることをお勧めします。

グローバル変数は非常に悪い考えです。

理由:自分のコードの後に​​ページに追加された他の JavaScript によってコードが上書きされる危険があります。

回避策:クロージャーとモジュール パターンを使用する

モジュールとクロージャーを説明するサンプルコード:

module = function(){
   var current = null;
   var labels = {
      'home':'home',
      'articles':'articles',
      'contact':'contact'
   };
   var init = function(){
   };
   var show = function(){
      current = 1;
   };
   var hide = function(){
      show();
   }
   return{init:init, show:show, current:current}
}();
module.init();

あなたのコード:

var module = (function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
width = w.innerWidth || e.clientWidth || g.clientWidth,
height = w.innerHeight || e.clientHeight || g.clientHeight;
    var getWidth = function(){
        console.log(width);
        return width;
}
    var getHeight = function(){
        console.log(height);
        return height;
}
    return{getWidth:getWidth, getHeight:getHeight}
}());
module.getHeight();
module.getWidth();

DEMO FIDDLE

于 2013-09-13T05:16:22.790 に答える