脚本宝典收集整理的这篇文章主要介绍了

超简单组织AngularJS模块

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <blockquote> <p>作者:@<a rel="nofollow" href="http://weibo.com/u/1685862880" target="_blank">MerlinRanhttp</a><br /> 转自:<a rel="nofollow" href="http://park.sinastorage.com/discussion/15/%E8%B6%85%E7%AE%80%E5%8D%95%E7%BB%84%E7%BB%87angularjs%E6%A8%A1%E5%9D%97" target="_blank">新浪云存储讨论区</a></p> </blockquote> <p>去年下半年接触前端开发和<a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a>JS,一路跌跌撞撞,尤以模块化代码组织的教训最深刻。</p> <p>最开始代码量小也没经验,直接在html引用所有js文件。后来搞得html文件越来越大,js的顺序一乱,就报奇奇怪怪的错误,找半天。</p> <p>第二个项目,我就想着要改进,直奔声名显赫的RequireJS去了。但RequireJS真的很麻烦有木有!平添了许多代码,和<a href="http://www.js-code.com/tag/angularjs" title="AngularJS" target="_blank">AngularJS</a>的Dependency Injection长得还挺像,一不小心就搞混。时不时报个Script Error出来,根本不知道问题在哪里。</p> <p>有没有更简单的方法呢?正想着呢,<a rel="nofollow" href="http://www.ng-newsletter.com/" target="_blank">ng-newsletter</a>一声炮响,送来了<a rel="nofollow" href="https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917" target="_blank">这篇文章</a>。作者<a rel="nofollow" href="https://medium.com/@dickeyxxx" target="_blank">Jeff Dickey</a>介绍了用模块来组织代码的四种方法,依照推荐程度,依次为:</p> <ul> <li>Require.js (Implementation of AMD)</li> <li>Browser<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>y (Implementation of CommonJS)</li> <li><a href="http://www.js-code.com/tag/angular" title="Angular" target="_blank">Angular</a> dependency <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>jection</li> <li>ES6 modules</li> </ul> <p>作者着重写了在第三种基础上,组织代码的简化方法(捂脸,我才用到第一种)。</p> <p>模块的功用,首先是要隔离命名空间。<a href="http://www.js-code.com/tag/angular" title="浏览关于“Angular”的文章" target="_blank" class="tag_link">Angular</a>的模块机制很好地解决了。除了angular这个对象本身,没有任何暴露在Global里的对象。</p> <p>然后是处理依赖关系。Angular的模块同样指定了依赖关系,而Dependency Injection在更细的粒度上做了类似的事。</p> <p>更棒的是,Angular模块的定义顺序可以随便。各个service、controller、directive注册到模块的顺序,也没有限制。唯一的要求只是:模块要先定义,后使用。请看下面的例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 模块可以按任意的顺序定义 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'); } }; }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs php"><code><span class="hljs-comment">// 模块可以按任意的顺序定义</span> angular.module(<span class="hljs-string">'app'</span>, [<span class="hljs-string">'ctrl'</span>]); angular.module(<span class="hljs-string">'ctrl'</span>, [<span class="hljs-string">'svc'</span>]); angular.module(<span class="hljs-string">'svc'</span>, []); <span class="hljs-comment">// 使用尚未注册的GithubSvc</span> angular.module(<span class="hljs-string">'ctrl'</span>) .controller(<span class="hljs-string">'GithubCtrl'</span>, <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> <span class="hljs-params">($scope, GithubSvc)</span> </span>{ GithubSvc.fetchStories().success(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(users)</span> </span>{ $scope.users = users; }); }); angular.module(<span class="hljs-string">'svc'</span>) .factory(<span class="hljs-string">'GithubSvc'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($http)</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> { fetchStories: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> $http.get(<span class="hljs-string">'https://api.github.com/users'</span>); } }; }); </code></pre> <p>可运行的代码在这个<a rel="nofollow" href="http://jsfiddle.net/merlinran/sS6z7/" target="_blank">jsFiddle</a><button class="btn btn-xs btn-default ml10 preview" data-url="merlinran/sS6z7/" data-typeid="0">点击预览</button>。</p> <p>Angular没有帮我们解决的,就剩下文件加载了。既然加载顺序无关紧要,那直接把文件合并起来不就好了?反正最终都要合并的。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('js', function () { gulp.src(['src/**/module.js', 'src/**/*.js']) .pipe(concat('app.js')) .pipe(gulp.dest('.')) }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>gulp.task(<span class="hljs-string">'js'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span></span> { gulp.src([<span class="hljs-string">'src/**/module.js'</span>, <span class="hljs-string">'src/**/*.js'</span>]) .pipe(<span class="hljs-built_in">concat</span>(<span class="hljs-string">'app.js'</span>)) .pipe(gulp.dest(<span class="hljs-string">'.'</span>)) }) </code></pre> <p>无论是按业务还是按功能划分目录,只要把每个模块的定义都放在目录下的<code>module.js</code>里,保证所有模块在使用之前都已经定义过了,直接concat毫无问题。html里却只有一行:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<script src=&quot;app.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"app.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>编写、测试还是按模块分目录和文件,代码组织清晰利落。拼接到一起在浏览器上跑。发布时,再<code>ngAnnotate</code>和<code>ugl<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>y</code>一下就好。</p> <p>库的代码,再拼出一个<code>vender.js</code>就行了。<code>gulp-bower-files</code>这个插件,可以分析<code>bower.json</code>,把依赖的每个库里的ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>属性组合起来,创建<code>gulp.src()</code>。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('vendor', function () { gulpBowerFiles() .pipe(concat('vendor.js')) .pipe(gulp.dest('.')) }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>gulp.task(<span class="hljs-string">'ven<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>r'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span></span> { gulpBowerFiles() .pipe(<span class="hljs-built_in">concat</span>(<span class="hljs-string">'vendor.js'</span>)) .pipe(gulp.dest(<span class="hljs-string">'.'</span>)) }) </code></pre> <p>每次手工<code>gulp js</code>不方便?<code>gulp watch</code>起来。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="gulp.task('watch', ['js'], function () { gulp.watch('src/**/*.js', ['js']) }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>gulp.task(<span class="hljs-string">'watch'</span>, [<span class="hljs-string">'js'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{ gulp.watch(<span class="hljs-string">'src/**/*.js'</span>, [<span class="hljs-string">'js'</span>]) }) </code></pre> <p>当然,这些都是权宜之计,因为传说中的ES6和Angular 2.0,将搞定这些问题。不过在此之前,不妨试试这个超简单的方法咯。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

超简单组织AngularJS模块

全部内容,希望文章能够帮你解决

超简单组织AngularJS模块

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过