JavaScriptで使うグローバルな名前を減らす方法 - Blogger
グローバルな名前を減らすと、JavaScriptを含む記事を並べて表示した時に、名前が重なり難くなります。このブログで使っているのは、3つの方法です。
o ローカル変数を使う方法
o 一時的に使う変数や関数を、名前の無い関数の中に閉じ込める方法
o グローバル変数を1つだけ公開して、外から使いたい関数や変数をグローバル変数のプロパティにする方法
**** 手順
** ローカル変数を使う方法
o JavaScriptにおけるローカル変数とは、関数の中でのみ有効な変数の事です。
o 関数の引数（functionの直後にある丸括弧の中に書いた変数）の名前は、何も書かなくてもローカルになります。
o また、関数の中で変数を初めて使う場所で、「var 変数名; 」もしくは、「var 変数名 = 」の形で書くと、その変数名もローカルになります。
--------
<script type="text/javascript">
//<![CDATA[
<!--
function f(name) {
var d = document;
for (var i = 1; i <= 3; ++i) {
d.writeln("ミクさんが" + i + "人<\/br>");
d.writeln( name +"さんが" + i + "人<\/br>");
}
}
f("ネギ");
//-->
//]]>
</script>
--------o この場合、変数 name, d, i は、関数 f の外から見えません。
** 一時的に使う変数や関数を、名前の無い関数の中に閉じ込める方法
o そして、中で使う変数には varを付けて、ローカル変数化します。
--------
<script type="text/javascript">
//<![CDATA[
<!--
(function(){
var v = new Date();
document.write("今日は" +v.getDate() + "日です。");
})()
//-->
//]]>
</script>
--------o この場合、変数 v は無名関数の外から見えません。
o documentは、ブラウザーが用意しているグローバルな名前です。
** グローバル変数を1つだけ公開して、外から使いたい関数や変数をグローバル変数のプロパティにする方法
o ページ毎にキーワードを決めます。この例のキーワードは、MikuSan です。
o グローバル変数の名前を「MikuSan」、操作したいspanタグのidを「MikuSan_name」にする事で、他ページからの干渉を防ぎます。
--------
<script type="text/javascript">
//<![CDATA[
<!--
var MikuSan = new (function() {
var $ = function(v) {
return document.getElementById("MikuSan_" + v);
}
this.setSpan = function(span_id, message) {
$(span_id).innerHTML = message;
return true;
}
})();
//-->
//]]>
</script>
<form>
<input type="button" value="挨拶ボタン" onclick="return MikuSan.setSpan('name', 'こんにちは、ミクさん。');">
<span id="MikuSan_name"></span>
</form>
--------o この場合、var を使って宣言したローカル変数 $は、関数 f の外から見えません。
o 関数 f の外から見えるのは、this. を使って宣言したプロパティ setSpan です。
o 変数 MikuSan はグローバル変数です。関数の外で var を付けているからです。
**** メモ
o グローバルな名前を減らす利点については「ブログの本文にJavaScriptを書く時の注意点」をどうぞ。
o 上の書き方は一例です。JavaScriptは表現の幅が広い言語ですから、自分の好みの書き方で実現します。
＝＝
関連ページ：
▼Bloggerブログの本文を書く。ラベルと貼り付けとHTMLモード
▼Blogger
▼制作メモ
＞ HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
HTMLモード。特定ページのサイドバーが下にずれる時の確認点
+
ブログの本文にJavaScriptを書く時の注意点
（2010年9月26日変更。プロパティにする例について単純化と説明追加）
