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

スポンサーサイト

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

JavaScript: スクリプトを再利用可能な形にする

                
tags: JavaScript
スクリプトを書くとき、関数の命名は規約にのっとって、シンプルにわかりやすくする。でもそうすると、複数のスクリプトを読み込ませたとき、関数の名前の重複が起こる可能性が出てくる。
<body>
<script> // script1
function hoge(target)
{
alert(target.id);
}
</script>
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
<script> // script2
function hoge(target)
{
alert("ID: " + target.id);
}
</script>
</body>


関数名の重複を避けるために、JavaScriptライブラリでは関数を一つのオブジェクトのメソッドにまとめているのが一般的になっている。
<body>
<script> // script1
var library1 = {};
library1.hoge = function(target)
{
alert(target.id);
}
</script>
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
-- content --
<script> // script2
var library2 = {};
library2.hoge = function(target)
{
alert("ID: " + target.id);
}
</script>
</body>



上記の書き方は簡単なメソッドを並べるならいい。ただライブラリ内からのみアクセスできるような変数を用意したくなるなど、ライブラリを発展させていくような場合にはもっといい書き方がある。
JavaScriptのなかでもかなりポピュラーなライブラリであるjQueryでは、おおよそ下記のように書いている。おおよそ。
(function()
{
var jQuery = {},
foo1 = 1,
foo2 = 2;
jQuery.method1 = function(){};
==================
省略
==================
window.$ = jQuery;
})();


自作の場合には以下のように書くのもいいかもしれない。
var library1 = (function()
{
var obj = {},
foo1 = 1,
foo2 = 2;
obj.property1 = foo1;
obj.method1 = function(){};
==================
省略
==================
return obj;
})();

上記のように匿名関数で包んでしまうことで、ライブラリ内で共通かつ、外部からは見えない変数を持つことができる。関数内の変数objにメソッドやプロパティを登録しておけば、"library.property1;library1.method1();"というふうに記述して呼び出せる。objのメンバにしなければ、外から直接その変数を見ることはできない。

やっているのは、
1.匿名関数で包む
2.匿名関数内にオブジェクトを作り、利用したい変数や関数をオブジェクトにプロパティやメソッドとして加える
3.プロパティやメソッドを登録したら、匿名関数の最後でそのオブジェクトを返す
4.匿名関数をそのまま実行し、返り値を一つの変数に格納
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

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

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