Question

我有以下设置，test.html，test_bar.js，test_foo.js：

   /* test_bar.js */
    BAR = {
      init: function() {
         console.log("BAR LOADED!");
         /* I'd like to call FOO.hello(); here */
      }
    };

    $(function() {
      $(window).load(function() {
        BAR.init();
      });

    });

    /* test_foo.js */
    FOO = {
      init: function() {
       console.log("FOOO LOADED");
       },
      hello: function(){ 
       console.log("hello I'm FOO");
      }
    };

    $(function() {
      $(window).load(function() {
        Foo.init();
      });

    });

    <!DOCTYPE html>
    <html>
    <head>
    	<title>FOO BAR HELP</title>
    </head>
    <body>

    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/test_bar.js"></script>
        <script src="js/test_foo.js"></script>
    </html>

我一直收到以下错误：

    Uncaught ReferenceError: Foo is not defined
        at test_foo.js:9
        at dispatch (jquery.min.js:3)
        at r.handle (jquery.min.js:3)

我怀疑是因为我正在做window.load，两次（每次.js一次）并尝试在加载之前调用FOO。我应该注意代码库是继承的，我想将FOO和BAR保存在单独的.js文件中。

如何重构设计以便我可以调用FOO.hello（）等函数;来自BAR？

由于

Answer 1

您将对象名称定义为FOO，但将其命名为Foo。

FOO = {
    init: function() {
        console.log('foo loaded');
    }
}

$( function() {
    FOO.init(); // "foo loaded"
});

如果你想在BAR内拨打FOO，你必须在BAR之前加入FOO，如下所示：

<script src="js/test_foo.js"></script>
<script src="js/test_bar.js"></script>

从另一个调用一个nodejs模块

1 个答案: