角度如何污染全球空间

How angular is polluting the global space?

本文关键字：空间 污染 何污染      更新时间：2023-09-26

我是 angularJS 的新手，我从 http://curran.github.io/screencasts/introToAngular/exampleViewer/开始练习 angularJS

在下面的示例中，有人说我们正在污染全局空间，

但我不明白我们如何在示例 1 中污染全局空间，但在示例 2 中则没有。

例 1

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script>
      function NameCtrl($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Smith';
      }
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

例 2

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Smith';
      });
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

我现在只想用示例 1 中的示例污染全局空间。

这两个示例都将angular添加到全局命名空间。示例 1 还将函数 NameCtrl 添加到全局命名空间，这符合污染它的条件。但是，示例 2 还向全局命名空间添加了nameApp，因此您可以争辩说它们都同样污染了全局命名空间。但是，在示例 2 中，至少控制器未添加到全局命名空间中，因此它被认为是更好的形式。换句话说，如果要向全局命名空间添加任何内容，最好添加一个模块并使用它来添加任何控制器。实际上，如果您愿意，您甚至可以避免将模块添加到命名空间中，因此，如果您想拆分头发（并惹恼人们），您可以争辩说，如果目标是避免污染全局命名空间，则两者都不是 100% 正确的。

在示例 1 中，您声明函数的方式是可以在 js 代码中的任何位置访问它 - 但在第二个示例中，您声明它的方式是，除了通过 angular 之外，它不能在任何地方调用 - 因为您将控制器函数作为函数参数本身传入， 从而将其限制在该angular.module().controller()功能范围内。

函数和变量的声明通常仅限于它们声明的最小范围 - 如果您在 <script> 标记的范围内命名函数，那么您是在主全局window对象的作用域中声明它，从而"污染全局范围"。希望这有帮助。

相关文章：