去年下半年接触前端开发和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的?？橥付艘览倒叵担鳧ependency Injection在更细的粒度上做了类似的事。
更棒的是，Angular?？榈亩ㄒ逅承蚩梢运姹恪８鞲鰏ervice、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('.'))
})
无论是按业务还是按功能划分目录，只要把每个?？榈亩ㄒ宥挤旁谀柯枷碌?code>module.js里，保证所有?？樵谑褂弥岸家丫ㄒ骞耍苯觕oncat毫无问题。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，将搞定这些问题。不过在此之前，不妨试试这个超简单的方法咯。
[补充]
-
gulp-bower-files已被main-bower-files取代。 -
module在config阶段是有顺序依赖的。比如，要定义route里的controller，就要求该controller必须存在。
