超简单组织AngularJS模块

做者：@MerlinRanhttp
转自：新浪云存储讨论区

去年下半年接触前端开发和AngularJS，一路跌跌撞撞，尤以模块化代码组织的教训最深入。

最开始代码量小也没经验，直接在html引用全部js文件。后来搞得html文件愈来愈大，js的顺序一乱，就报奇奇怪怪的错误，找半天。

第二个项目，我就想着要改进，直奔声名显赫的RequireJS去了。但RequireJS真的很麻烦有木有！平添了许多代码，和AngularJS的Dependency Injection长得还挺像，一不当心就搞混。时不时报个Script Error出来，根本不知道问题在哪里。

有没有更简单的方法呢？正想着呢，ng-newsletter一声炮响，送来了这篇文章。做者Jeff Dickey介绍了用模块来组织代码的四种方法，依照推荐程度，依次为：

• Require.js (Implementation of AMD)
• Browserify (Implementation of CommonJS)
• Angular dependency injection
• ES6 modules

做者着重写了在第三种基础上，组织代码的简化方法（捂脸，我才用到第一种）。

模块的功用，首先是要隔离命名空间。Angular的模块机制很好地解决了。除了angular这个对象自己，没有任何暴露在Global里的对象。

而后是处理依赖关系。Angular的模块一样指定了依赖关系，而Dependency Injection在更细的粒度上作了相似的事。

更棒的是，Angular模块的定义顺序能够随便。各个service、controller、directive注册到模块的顺序，也没有限制。惟一的要求只是：模块要先定义，后使用。请看下面的例子：

// 模块能够按任意的顺序定义
angular.module('app', ['ctrl']);
angular.module('ctrl', ['svc']);
angular.module('svc', []);

// 使用还没有注册的GithubSvc
angular.module('ctrl')
.controller('GithubCtrl', function ($scope, GithubSvc) {
  GithubSvc.fetchStories().success(function (users) {
    $scope.users = users;
  });
});

angular.module('svc')
.factory('GithubSvc', function ($http) {
  return {
    fetchStories: function () {
      return $http.get('https://api.github.com/users');
    }
  };
});

可运行的代码在这个jsFiddle。

Angular没有帮咱们解决的，就剩下文件加载了。既然加载顺序可有可无，那直接把文件合并起来不就行了？反正最终都要合并的。

gulp.task('js', function () {
  gulp.src(['src/**/module.js', 'src/**/*.js'])
    .pipe(concat('app.js'))
    .pipe(gulp.dest('.'))
})

不管是按业务仍是按功能划分目录，只要把每一个模块的定义都放在目录下的module.js里，保证全部模块在使用以前都已经定义过了，直接concat毫无问题。html里却只有一行：

<script src="app.js"></script>

编写、测试仍是按模块分目录和文件，代码组织清晰利落。拼接到一块儿在浏览器上跑。发布时，再ngAnnotate和uglify一下就好。

库的代码，再拼出一个vender.js就好了。gulp-bower-files这个插件，能够分析bower.json，把依赖的每一个库里的main属性组合起来，建立gulp.src()。

gulp.task('vendor', function () {
  gulpBowerFiles()
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('.'))
})

每次手工gulp js不方便？gulp watch起来。

gulp.task('watch', ['js'], function () {
  gulp.watch('src/**/*.js', ['js'])
})

固然，这些都是权宜之计，由于传说中的ES6和Angular 2.0，将搞定这些问题。不过在此以前，不妨试试这个超简单的方法咯。