8

だから私は index.html ファイルに必要なすべてのファイルをリンクしています:

    <script src="jquery.js"></script>
    <script src="notify.js"></script>
    <script src="script.js"></script>

「notify.js」でオブジェクトを作成します:

    var notify = {
    newNotification : function(text) {
    }
}

script.js :

alert(notify.newNotification);

「script.js」の「notify」オブジェクトにアクセスしようとすると、問題なく動作しますが、jquery を使用したいので、次のように両方のファイルに $(document).ready() を追加します。

通知.js

    $(document).ready (
    function() {
var notify = {
    newNotification : function(text) {
    }
}
}
)

Script.js:

    $(document).ready (
    function() {
alert(notify.newNotification);
    }
)

そして、それを追加した後、通知が定義されていません.何が問題なのですか? うまくいかない理由を誰か説明できますか？

4

6 に答える 6

2

ここで他の全員がすでに指摘したように： DOM要素を処理していて、キーワード$().readyを使用したために変数にアクセスできない場合にのみ使用してください（想定どおり）。varvar キーワードは、定義された変数を現在のスコープに制限します。これは、DOM-Ready-Handler として使用する無名関数のスコープです。

したがって、不要なものを削除すると、$().read一時的に問題が解決します。

しかし(!) コードをクロージャーにラップして、グローバル スコープを混乱させたり、サードパーティ コードとの名前の競合を回避したりする必要があります。

そのように：

通知.js

;(function ($, window, undefined) {
  var notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

script.js

;(function ($, window, undefined) {
  alert(notify.newNotification());
})(jQuery, this);

そのため、以前と同じ問題が発生し、オブジェクトにアクセスできなくなります。

確かにnotify、Arun P Johny が彼の回答で提案したように、オブジェクトをグローバル スコープに追加することもできますが、グローバルにアクセス可能にするために必要なオブジェクトが増えることは間違いありません。それらのそれぞれをグローバルスコープに入れると、グローバルスコープが再び台無しになり始めるので、グローバルにアクセスする必要がある他のすべてのオブジェクト/変数を保持する 1 つのグローバルオブジェクトをお勧めします。(または、 requirejsのようなものを使用することをお勧めします

次のように考えてください。

main.js

;var MyApp = {}; # Only variable in global scope

# Maybe some more initalization code here, dunno

通知.js

;(function ($, window, undefined) {
  MyApp.notify = {
    newNotification : function(text) {
      return text;
    }
  };
})(jQuery, this);

script.js

;(function ($, window, undefined) {
  alert(MyApp.notify.newNotification());
})(jQuery, this);

スタックオーバーフローのスコープとクロージャーに関するいくつかの興味深い Q/A:

グローバルスコープをいじることについての良い答え：

于 2013-10-02T03:11:39.650 に答える