別ファイルに定義した関数を呼び出すのは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 messagewindowはブラウザの各画面ごと(タブごと)に設定されている、グローバル変数になります。
まとめ
変数のスコープに関する話題になります。スコープを理解して、グローバル汚染の少ないコードを心がけると「理解しているな」と思ってもらえます。
ここからさらに、コンストラクタやプロトタイプなど理解していくと、変数や関数の扱いに長けたエンジニアといえると思います。
jQuery.fn のfnってどういう意味? $.fnの使い方[jQuery]
jQueryおすすめの書籍
jQueryの書籍は、古いものが多いです。ただ、jQuery自体は今も進化しています。
📦