関数未定義：javascript関数を同じファイル内で定義する必要がありますか？

要素にバインドされた1つのイベントと関数updateNotification()を含むファイルnotifications.jsがあります。この関数は、JSONオブジェクトがパラメータとして渡されたときに、jQueryを使用してページの特定の要素を更新します。関数未定義：javascript関数を同じファイル内で定義する必要がありますか？

問題：

私は（<script>、タグを使用して）ページ内で、この関数を呼び出そうとし、しかしよりもむしろそれを呼んでいる、それはページを分割します。私はいくつかは、クロームデベロッパーコンソール（名前がわからない）内の周りに掘った、とエラーがフラグを立てている。

/pleaseshare/views/install/:50 Uncaught ReferenceError:updateNotification is not defined

しかし、私はコンソール内でパンするとき、私ははっきりとファイルnotifications.jsは、スクリプトの下にリストされて見ることができます関数が定義されています。現在のスコープ内で関数を定義すると（たとえば、呼び出しの上の行）、関数は正常に動作します。

私は

を試してみた何関数はjQueryのを必要とするいくつかのJavaScriptが含まれているので、私はいずれかの影響を及ぼすために見せかけでもないと、とと$(document).ready(function() {});でそれを包むことなく、両方が試みてきました。

私はかなり困惑しています。なぜこれが起こっているを考え出すにおけるすべてのヘルプはhttp://snippi.com/s/znk6xe9

、またはJavaScriptの機能があるが（クロスファイルと呼ばれることができない理由の説明：良い測定のために

は、ここに私のJavaScriptとHTMLの構造を示すためのリンクです私はこれが事実でないことを願っています）、大いに感謝されるでしょう;）！

出典

2012-01-19 Avicinnian

すべての必要なファイルをページにロードしていますか？ – Marcin

はい、私は - http://snippi.com/s/nrwy83m – Avicinnian

それは動作するはずです。おそらく、あなたが実際にロードする必要があるファイルをチェックしてください。 – Marcin

これは機能しています。問題は多分多面的でしたが、私はそれを理解しました。

まず、RequireJSを使用して、updateNotification()に影響を与えました。クロスファイルと呼ぶことができないため、定義されていないとみなされました。 RequireJSがファイルをロードする方法のために私はこれを前提としています。後でドキュメンテーションを調べてみましょう。

第2に、updateNotification()は、jQueryのDOMレディローダー$(document).ready(function(){})の中に入れたときに、未定義と見なされます。しかしupdateNotification()にはjQueryを必要とする実行が含まれているので、関数の内容を$(document).ready(function(){})に入れなければなりませんでした。

これは、RequireJS/jQueryにとって非常にユニークな問題です。そのため、ほとんどのユースケースではこれが発生しませんでした。

サイドノート：これを反映するようにタグが編集されています。

出典

2012-01-19 15:53:49 Avicinnian

関数は、同じファイルに定義されていないか、呼び出す前にロードされていない限り、呼び出すことができません。

関数は、それを呼び出しようとしているスコープと同じか、それより大きいスコープ内になければ呼び出すことができません。

コードは構造がうまくいくように見えますが、明らかにテストケースが縮小されており、テストケースが縮小されていない場合があります。

出典

2012-01-19 15:07:35 Quentin

Hmm：/。構造がうまくいかないところまでテストケースが縮小されたことが意味することをさらに説明できる可能性はありますか？ – Avicinnian

@Avicinnian - テストケースをコピーして貼り付けることは、コードの束を、そこにあったものについての曖昧なコメントで置き換え、フラットファイルへの転送でディレクトリ構造を失ったために機能しません。 – Quentin

あなたのページにスクリプトをインポートする必要があります。

<script type="text/javascript" language="javascript" src="path/to/notifications.js"></script>

これはupdateNotification()

出典

2012-01-19 15:08:31

私は自分自身を少しはっきりさせるべきだったのです。私は（タグの間に）それをインポートしていますが、私は誰もがそれを拾うだろうと思っていました。しかし、私はコンソール内でパンすると、スクリプトの下にリストされたファイルnotifications.jsを明確に見ることができます。現在のスコープ（例えば、呼び出しの上の行）内で関数を定義すると、正常に動作します。 – Avicinnian

@Avicinnian javascriptファイルで404エラーが発生していないことを確認しましたか？ –

いいえ、正常に読み込まれます。私はいくつかの他の関数をクロスファイルと呼び、何が起こるかを見てみよう。私は 'require.js'ライブラリを私が使っているかもしれないと思っています。私は読み込んだと思うGoogle Chart APIのjavascriptファイルをインクルードしようとしましたが、別のファイルで呼び出されたときには機能しませんでしたファイル。 – Avicinnian

関数内で宣言する必要はありません呼び出す上記<script>のタグを追加する必要があります同じファイル。実際には、を避けるは、すべての宣言がグローバル名前空間にダンプされるのが通常はJavaScriptで懸念されます。

提供したリンクのサンプルコードでは、updateNotificationはグローバルとして宣言されているため、スコープの問題は発生しません。

ただし、同じサンプルでは、notifications.jsが含まれていることを表示しません。 <script></script>要素とを使用してインポートする必要があります。その要素は、updateNotificationへの呼び出しを含むスクリプト要素の前に来なければなりません。また、jQueryを使用するので、の前に notifications.jsを含める必要があります。だからあなたは次のようなものが必要です：

<body> 
    // One or two elements 
    <script type="text/javascript" 
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <script type="text/javascript" src="notifications.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      var json = {status : 'ok', message: 'Hello'}; 
      updateNotification(json); 
     }); 
    </script> 
    // All other elements 
</body>

出典

2012-01-19 15:20:45 dgvid

これを見て、これは含まれている ''の私の完全なマークアップを示しています - http://snippi.com/s/nrwy83m – Avicinnian

関数未定義：javascript関数を同じファイル内で定義する必要がありますか？

答えて

関連する問題