超簡單組織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，將搞定這些問題。不過在此以前，不妨試試這個超簡單的方法咯。