Javascript 如何组织js代码？

我正在做一个项目，使用Angular作为前端框架。我将所有代码以以下格式放入abc.js：

(function(){

    var globalVariable1;
    var globalVariable2;
    var globalVariable3;
    var globalVariable4;

    var myApp = angular.module('coolapp',[]);

    myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

    myApp.factory('Factory1', function(){
           //blah blah
    });
    //....
})();

现在它有500多行，有很多全局变量

我计划把它们分成不同的文件。我该怎么办？比如说我创造了

main.js

(function(){

    var globalVariable1;
    var globalVariable2;
    var globalVariable3;
    var globalVariable4;

    var myApp = angular.module('coolapp',[]);


})();

Controller1.js

(function(){

    var myApp = angular.module('coolapp');

    myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

})();

---

我应该在main.js中写些什么来要求、包含或插入控制器1.js？我不确定它们之间的区别是什么？

您只需要创建另一个模块来处理所有控制器并提供对主模块的依赖性：-

main.js

var myApp = angular.module('coolapp',['cntrlApp']);

Controller1.js

var myApp = angular.module('cntrlApp');
 myApp.controller('Controller1', [$scope, $rootScope, function(){
           //blah blah
    }]);

---

对。你的方式是正确的。您还可以查看RequireJS

假设您的项目将继续增长，我建议您在Typescript中使用require.js。我们已经实现了这一点，它大大提高了代码的健壮性，并且更容易管理和重构代码

---

然后，根据应用程序的复杂程度，您可以考虑将其结构化为域模型，然后查看视图、服务等。。。。显然，这在很大程度上取决于你正在构建的项目有多复杂，以及你认为你的项目将走向何方。

关于如何最好地构建Angular应用程序，有很多观点。你似乎正朝着一个好的方向前进。以下是我喜欢的做法：

在index.html中，分别包含脚本。自调用匿名函数将使用Angular进行设置。以后使用Grunt或Gulp之类的构建过程来缩小和连接这些

<script src="main.js"></script>
<script src="Controller1.js"></script>
<script src="Factory1.js"></script>

在Controller1.js中，设置控制器，将其定义为角度控制器和应用程序的一部分

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Controller1', Controller1);


  function Controller1($scope) {
    // do something
  }


})();

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Factory1', Factory1);


  function Factory1() {
    return function() {
      // return something
    };
  }


})();

在Factory1.js中，设置factory函数，并将其定义为角度工厂和应用程序的一部分

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Controller1', Controller1);


  function Controller1($scope) {
    // do something
  }


})();

(function() {

  'use strict';


  angular
    .module('MyApp')
    .controller('Factory1', Factory1);


  function Factory1() {
    return function() {
      // return something
    };
  }


})();

在那之后，就没什么事可做了。My main.js通常有一个配置函数，用于处理路由。您可以通过将ng app=MyApp添加到html或正文来初始化应用程序。只需将属性ng controller=Controller1添加到DOM中的元素，就可以初始化控制器1。如果您需要Controller1可以访问Factory1，那么当您在Controller1.js中定义函数Controller1时，就像函数Controller1$scope，Factory1{}一样

---

这就是使用单独的文件启动和运行它所需要的一切。

要为下面的好评论添加一些特殊性，使用全局变量，您应该使用module.value或module.factory将这些变量注册为Angular服务，然后您可以将它们注入到其他文件中定义的组件中。