主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: グローバル変数を使わずに値を保持する

                
tags: JavaScript
'14/12/18 やり方がコンパクトになるように後半を書き換え

以前にいくつかの国のAmazonの商品の金額比較をするWebアプリを書いた。
http://amazonstinger.appspot.com/

このときは知識が足らず、値を保持したいいくつかの変数をグローバル変数で管理していた。
<button onclick="clicked();">push me</button>
<script>
var p = 0;

function clicked(e)
{
alert(p++);
}
</script>


グローバル変数を使うことのまずい点は、複数のスクリプトをページに読み込んだときに、使用するグローバル変数の重複に気を払わなければならなくなること。Googleのトップページでさえ10個近くはスクリプトを読み込んでいる。膨大な数のスクリプトのグローバル変数のチェックなどやってられない。
<button onclick="clicked1();">push me 1</button>
<script>
var p = 0;

function clicked1(e)
{
alert(p++);
}
</script>
<button onclick="clicked2();">push me 2</button>
<script>
var q = 0;
//var p = 0;

function clicked2(e)
{
alert(q++);
//alert(p++);
}
</script>

 単純なint型やstring型の値なら非表示のDOM要素を作って、そこに値を入れて、必要な時にその値を読み込むという手もある。ただこれは少し手間だし配列などのオブジェクトには使えない。
 そこで2つの書き換えを施す。
1.もともとあったスクリプトを匿名関数で包む。
2.HTMLで書いていたイベント付加”<button onclick='clicked();'”をHTMLから切り離し、スクリプト内で行う。
とくに2のHTMLからイベント付加を切り離すというのは、HTMLを使ったページのいい書き方として推奨されていることだ。そういう書き方をしておけばデザイナさんとスクリプトを書く人が分離して仕事ができるし、個人でやる場合もコピペでデザインが使いまわしやすくなる。
 匿名関数で包むというのはもとあったスクリプトを”function(){・・・}”の”・・・”の部分にまず入れる。さらにその匿名関数を丸かっこで包み、その後ろに”();”を付ける。
<button id='button1' >push me</button>
<script>
(function()
{

var p = 0;
function clicked(e)
{
alert(p++);
};

document.getElementById('button1').onclick = clicked;
})();

</script>

 ・・・なにをやったかというと一連の処理を匿名関数で包んだ。JavaScriptでは関数のなかでvarを使って宣言された変数はグローバル変数にならないから。一連の処理はこの時点で一つの関数となった。実行命令を与えなければ実行されない。だからさらに丸かっこで包み後ろに”();”を付けて関数となった処理をそのまま実行するようにした。
function foo(){・・・}; → foo();
function(){・・・} → (function(){・・・})();


これなら変数pはグローバル変数ではなくなるので、別のスクリプトとのグローバル変数の重複を考えなくて済むようになる。
<button id='button1' >push me 1</button>
<script>
(function()
{
var p = 0;
function clicked(e)
{
alert(p++);
};

document.getElementById('button1').onclick = clicked;
})();
</script>
<button id="button2">push me 2</button>
<script>
(function()
{
var p = 0;
function clicked(e)
{
alert(p++);
};

document.getElementById('button2').onclick = clicked;
})();
</script>






            

コメントの投稿

非公開コメント

プロフィール

Matoba

Author:Matoba

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。