JavaScript

JavaScriptでグローバル変数を減らす方法

js_global

グローバル変数はいいことない!
もしかしたら使っているライブラリーと変数名がかぶってしまうかもしれないし、できるなら使いたくないです。

とはいえ使わないとなにもできません。

個人的に使っている方法として
グローバル変数を減らすために以下のように
するのがオススメです。

1
2
3
4
5
6
7
8
9
//グローバル変数を定義
var GL = {};
 
//「.」で変数を定義。
//もういろいろ作れます。
//普通の変数みたいな扱いでイケます。
GL.qcount = 0;
GL.pattern = 0;
GL.stage = 0;

ひとつのグローバル変数を定義して
それに変数を追加していくと、
結果としてひとつのグローバル変数で
いろいろできるようになります。

他にも以下のように
なんでも放り込めてしまいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
GL.count = 
    {
        count: 0,
        name: hoge,
        tel: 080-0000-0000
    }
 
GL.book = [
    { 
        p6x: '272px',
        p6y: '199px'
    },
    { 
        p6x: '300px',
        p6y: '230px'
    },
    { 
        p6x: '50px',
        p6y: '100px'
    },
];

実は同じようなことを以下の記述でもできます。

1
2
3
4
5
//以下と同じこと
GL['qcount'] = 0;
 
//上と同じこと
GL.qcount = 0;

[ ]を使うときは以下のように動的に
変数名を変更したいときに有効です。

1
2
3
4
5
6
7
8
9
10
11
//初期化
for (var i=0; i<5; i++){
    GL['qcount' + i] = 0;
}
 
//のfor文は以下と同じ
GL['qcount0'] = 0;
GL['qcount1'] = 0;
GL['qcount2'] = 0;
GL['qcount3'] = 0;
GL['qcount4'] = 0;

グローバル変数を減らして
堅牢なコードを目指したいですね。

関連記事

  1. tweenmax_js_oncomplete.jpg

    JavaScript

    【TweenMax.js】アニメーション終わりに関数を呼び出す!

    最近はWebアプリでアニメーションが必要になったときに、「Twen…

  2. css_sprite.jpg
  3. parseInt.jpg

    JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  4. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  5. chrome_touchevents.jpg

    JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  6. canvas.jpg

    JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

アーカイブ

  1. 日常

    実用的衝動買い
  2. 日常

    タイムアップ!
  3. 日常

    稲妻フェスティバル2007
  4. 日常

    『季刊d/SIGN(No.5) レイアウト宣言』
  5. dartslive_card2.PNG

    プロダクト

    パロディ・デザインが逸品のDARTSLIVEカードを衝動買いした! その名も「ダ…
PAGE TOP