我将两个文件添加到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 || {};
}())
我知道,我在全局空间中添加的内容在这里是错误的..任何正确将变量添加到全局中的人都正确吗?
我是否需要在这些文件之前添加单独的文件,以使该应用程序对所有人可用?
最佳答案
此刻,您只是隐藏现有的window.Social
变量。您无需额外分配即可轻松访问它。正确的方法是通过闭包传递window.Social
:
(function(social){
social.mySocial = function() {
};
}(window.Social));
如果可以确保可以按顺序加载文件,则可以通过外部JS文件来确保
window.Social
存在,否则每次都需要执行window.Social || (window.Social = {});
。Have a read here用于某些命名间隔模式。