別ファイルに定義した関数を呼び出すのはJavaScriptなら簡単です。
基本的に、関数外に書かれた、関数や変数の定義のスコープがグローバルになっているからです。
逆に、グローバルな変数をコントロールするために、即時関数を使用したりします。
グローバルな変数・関数を定義する
こちらは、まずは何も考えずに、関数の外にある変数や関数は、グローバルなものとして、どこからでもアクセス可能です。
<script type="text/javascript">
var testMessage = 'test message'; // global
function testFunction() { // global
console.log('test function message');
var localMessage = 'local message'; // local
}
console.log(localMessage); // localMessage is not defined
</script>
上記の変数localMessageは関数の内側で定義されているため、関数の中でしか使用できません。
そのほかは、グローバルに定義されるので、同時に読み込まれているほかのJavaScriptファイルなどでも、使用可能です。
プログラムに慣れている方なら問題ありませんが、注意点としては、変数や関数を使用する、前に定義してあることです。
読み込まれた順に解決されていくので、ファイル内等で使用する前に定義されている必要があります。
グローバルな変数・関数を定義したくない場合
複数人で作業している場合や、外部ライブラリ等を多用している場合など、重複を避けるためにグローバルに定義を残したくない場合があります。
その場合は、即時関数などを使用して疑似的にローカルに定義して対応したりします。
グローバルにしたくない場合
(function(){
var testMessage = 'test message'; // local
function testFunction() {
console.log('test function message'); // local
var localMessage = 'local message'; // local
}
})();
console.log(testMessage); // not defined
testFunction(); // not defined
即時関数内からグローバルに定義したい場合
(function(){
testMessage = 'test message'; // global
testFunction = function() {
console.log('test function message'); // global
var localMessage = 'local message'; // local
}
})();
console.log(testMessage); // test message
testFunction(); // test function message
上記を解説すると、変数の定義であるvarを省いて記載しています。
varを省くことで、windowオブジェクトのプロパティとして定義されるからです。
明示的に下記のように記述することもできます。
(function(){
window.testMessage = 'test message'; // global
window.testFunction = function() {
console.log('test function message'); // global
var localMessage = 'local message'; // local
}
})();
console.log(testMessage); // test message
testFunction(); // test function message
windowはブラウザの各画面ごと(タブごと)に設定されている、グローバル変数になります。
詳細はこちら
開発者向けのウェブ技術 Web API Window
まとめ
変数のスコープに関する話題になります。スコープを理解して、グローバル汚染の少ないコードを心がけると「理解しているな」と思ってもらえます。
ここからさらに、コンストラクタやプロトタイプなど理解していくと、変数や関数の扱いに長けたエンジニアといえると思います。
そのあたりも今後紹介できたらと思います。
関連記事で、下記ぜひもご覧ください。
jQuery.fn のfnってどういう意味? $.fnの使い方[jQuery]
jQueryおすすめの書籍
jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
公式を見るのが一番良いかもしれません。
jQuery公式
jQuery最高の教科書
基本から応用まで。