超简单社团AngularJS模块

二零一八年下半年接触前端开发和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>

编纂、测试依然按模块分目录和文书,代码协会清晰利落。拼接到一起在浏览器上跑。发布时,再ngAnnotateuglify时而就好。

库的代码,再拼出一个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,将搞定这多少个题目。可是以前,不妨尝试那个超简单的不二法门咯。


[补充]

  1. gulp-bower-files已被main-bower-files取代。
  2. moduleconfig等级是有各个依赖的。比如,要定义route里的controller,就要求该controller不可能不存在。

相关文章