外部jsファイルから関数/ネスト関数を呼び出す

Question

外部jsファイルからいくつかの関数を実行する際に問題があります。

HTMLが含まれています：

<script src="js/file.js"></script> 

<script> 
    $("#center-button").click(function() { 
     explodePage("center"); 
    }); 
</script> 

JSファイルが含まれています：

var explodePage = function(button) { 
    //code here 
    aboutPage(); 
} 

var aboutPage = function() { 
    //code here 
} 

explodePage機能が正常に動作、しかし、すぐにそれは、ネストされたaboutPage関数の呼び出しに達すると、それは投げを開始これらの捕らえられていないタイプエラーは私のところにある。私は外部のjsファイルを使用せず、すべてをhtmlに入れるだけでうまく動作します。これにはかなり新しいので、おそらくスコープなどで明白な何かが見当たりません。どんな解決策ですか？

Answer 1

は、以下のように関数の定義を宣言します。

function explodePage(button) { 
    //code here 
    aboutPage(); 
} 

function aboutPage() { 
    //code here 
} 

説明：あなたは関数を宣言するためvarキーワードを使用する場合

、JSの実行は、変数が初期化されるときのように起こります宣言の前に変数の参照や使用はできません。 name関数defintionとは対照的に、JSインタプリタは、実行前に囲まれた関数をまず取り出し、コード実行前に初期化します。これは、AST - と呼ばれ、JSインタープリタが後に続く抽象構文ツリーです。

も忘れないでください：は

またちょうどjQueryとDOM要素がバインディングのために利用可能であることを確認するために、Jquery document ready関数内であなたのjQueryのコードをバインドします。

Answer 2

グローバルウィンドウオブジェクトを変数で汚染するのは良いことではありません。衝突が発生する可能性があるからです。そしてこれにはimmediately-invoked function expressionが良い解決策です。

(function(){ 
    //You can declare your functions in here, and invoke them below 
    $(document).ready(function() { 
     //Check that the DOM is ready, in order to manipulate it an add events 
     $("#center-button").click(function() { 
     explodePage("center"); 
     }); 
    }); 
})($); //Notice that we are injecting a dependency, in this case jQuery