首页 文章

为什么在angularJS中设置app变量'bad practice'?

提问于
浏览
12

我查看了一些angularJS教程和样式指南,并找到了这样的评论(from Todd Motto

Bad:
var app = angular.module('app', []);
app.controller();
app.factory();

Good:
angular
  .module('app', [])
  .controller()
  .factory();

我首先通过示例学习了“坏”技术,并且从那以后看到一些参考(除了这一个)之外说“坏”技术是......好坏 .

到目前为止,在我的搜索中没有人说为什么它不好?

Edit: 为什么这个问题有所不同?虽然这与提出的重复问题之间的差异很微妙,但有两个重要的区别:

  • '什么是最好的做法?'与“为什么不好?”不一样......虽然对另一个问题的接受答案详细阐述了“为什么”,但是具有相同答案的两个问题是不够的,可以标记为重复 .

  • 使用我作为此问题的 Headers 放置的确切文本进行了有力的搜索,但没有透露建议的副本 . 也许SE应考虑允许将“可选 Headers ”添加到问题中以增强搜索性......但该功能尚未到位且其他人提出与我相同的问题仍然无法找到另一个问题 .

2 回答

  • 3

    全局变量通常被认为是不好的做法,尽管 angular 本身就是一个全局变量,所以我认为只要你保持一致,老实说这并不是什么大不了的事 .

    如果你不小心做了这样的事情,就会出现问题:

    app = angular.module("app");
    // some other file
    app = somethingNotAnAngularModule();
    

    外部库可能会覆盖变量 app 等 .

    您也可以使用特定于您的应用的名称,而不是使用名称 app ...

    dustrModule = angular.module("dustr", []);
    

    链接是一回事,但是如果要将组件拆分成单独的文件,则始终可以使用 .module 获取模块

    // app.js
    angular.module("app", []);
    
    // LoginCtrl.js
    angular.module("app").controller("LoginCtrl", LoginCtrl);
    
  • 9

    不使用 var module = angular.module('foo', []); 然后使用变量的全部意义纯粹是自以为是 . 做这个IMO没什么不好的,特别是如果你把它与browserify结合起来并且这样做:

    富/ FooModule.js:

    var ng = require('angular');
    
    module.exports = ng.module('Foo', []);
    

    富/ FooController.js:

    var FooModule = require('foo/FooModule');
    
    function FooController() {
        this.bar = 'bar';
    }
    
    FooModule.controller('FooController', FooController);
    
    module.exports = FooController;
    

    富/ FooRoutes.js:

    var Router = require('base/Router');
    var FooController = require('foo/FooController');
    
    function initialize() {
        Router.route('/foo', 'FooController as foo');
    }
    
    module.exports = initialize;
    

    main.js:

    var FooRoutes = require('foo/FooRoutes');
    
    FooRoutes();
    

    嗯,比这更重要的是在定义控制器和工厂时不使用匿名函数 .

    所以你

    function MyCtrl($dep1) { ... }
    function MyFactory() { ...}
    

    然后

    angular.module()
        .controller('my', ['$dep1', MyCtrl])
        .factory('fac', MyFactory);
    

    这样您就可以将实际代码与Angular依赖注入和声明分开,并将所有AngularJS内容保存在一个位置 .

    有些人告诉你第一种方法是坏的原因是因为你在所有地方散布“角度的东西”,不得不扫描整个代码以获得实际的“东西” .

    还尝试使用立即调用的函数表达式(IIFE)来封装所有这些代码:

    (function(){ /* code */ }());
    

相关问题