Question

我在index.html中添加了两个文件，如下所示：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Marionette</title>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
</head>
<body>
    <div class="content"></div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/underscore.js"></script>
    <script src="js/backbone.js"></script>
    <script src="js/backbone.marionette.js"></script>
    <script src="js/initApp.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

这是我的routes.js文件：

    (function(){
    Social = window.Social || {};
    Social.Routes = Backbone.Router.extend({
        initialize:function(){
            console.log('from routes');
        }
    });
}());

app.js：

jQuery(document).ready(function($) {
    Social = window.App || {};
    Social.App = new Backbone.Marionette.Application();

    Social.App.addInitializer(function(){
        console.log(Social);
    });

    Social.App.start();
});

initApp.js

(function(){
    Social = window.Social || {};
}())

据我所知，我在这里添加全局空间的方式是错误的...任何人都可以将我的变量添加到全局吗？

我之前是否需要在这些文件之前添加一个单独的文件以使应用程序可供所有人使用？

Answer 1

当您隐藏现有的window.Social变量时。您可以轻松访问它而无需额外的任务。正确的方法是通过闭包传递window.Social：

(function(social){
    social.mySocial = function() {

    };
}(window.Social));

确保window.Social存在可以通过外部JS文件完成，如果您可以确定您的文件将按顺序加载，否则您每次都需要window.Social || (window.Social = {});。

Have a read here了解一些命名空间模式。

无法从全局空间检索应用程序对象

1 个答案: