gpt4 book ai didi

javascript - 为什么在 Coffeescript 中创建 AngularJS Controller 时使用 @ 符号?

转载 作者:行者123 更新时间:2023-11-30 17:31:49 25 4
gpt4 key购买 nike

我正在按照教程介绍使用 Rails 4 的 AngularJS。在某些时候,作者通过这样做创建了一个 Angular Controller :

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

我读到 @ 在 CoffeeScript 中表示 this,但我很困惑为什么我们需要用 @ 定义 Controller 。我一直在读到,在 Angular 中,您可以像函数一样定义 Controller :

function MyCtrl( $scope ){

$scope.someValue = "All your base are belong to us!";

}

本教程的引用资料是:http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails

最佳答案

这是教程作者的明显错误。 CoffeeScript 中的 @ always 在 JavaScript 中编译为 this,并在其后跟一个标识符,例如 @restauranteur,它是 this.restauranteur.

在将绑定(bind)到对象的类或函数中(我们可以称之为方法),这很有意义,因为我们期望 this 对象有一个 restauranteur 属性。但是,在文件的顶级范围内,这就是他在您的示例中使用它的方式,这是没有意义的。这也是一个非常糟糕的主意;让我们看看编译成什么:

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

作为其自身的 .coffee 文件,这让我们:

(function() {
this.restauranteur.controller('HomeCtrl', ['$scope', function($scope) {}]);
}).call(this);

需要明确的是,定义后立即调用的函数是 module pattern。 (阅读更多相关信息 here)。

在未绑定(bind)到特定对象的函数中引用 this 将引用全局范围,在浏览器中为 window。这意味着您将能够从代码中的任何位置执行restauranteur,甚至在依赖项、其他模块等中。这与模块模式所寻找的恰恰相反!这是完全没有必要的,您可以从任何不是类/方法定义的地方删除它。

教程作者所做的也是定义 @restauranteur,因此 window.restauranteur 是不同文件 (main.js.coffee) 中的一个模块:

@restauranteur = angular.module('restauranteur', [])

这是它起作用的唯一原因。但是,他应该这样做才不会污染全局命名空间:

ma​​in.js.coffee

restauranteur = angular.module('restauranteur', [])

restauranteur.config(['$routeProvider', ($routeProvider) ->
[...]

实际上,将 restauranteur 定义为变量是没有用的,因为他在文件中只使用了一次它的值。不过,它可能有助于提高可读性。

HomeCtrl.js.coffee

angular.module('restauranteur').controller 'HomeCtrl', ['$scope', ($scope) ->
# Notice how this controller body is empty
]

相比之下,使用 @ 在这里很有用:

describe Restaurant do
before do
@restaurant = Restaurant.new(name: "Momofuku")
end
[...]

在这里,restaurant 将成为每个测试都可以访问的 this 对象的一部分,因此您可以像这样使用它:

describe "when name is not present" do
before { @restaurant.name = " " }
it { should_not be_valid }
end

因为 this 在两种情况下都是相同的,而不仅仅是因为它是全局范围。让我们看一个更简单的例子:

class Restaurant
isOpen = false

open: ->
@isOpen = yes

close: ->
@isOpen = no

在这种情况下,isOpen 将是 Restaurant 实例的实例字段,因为 this 将是调用该方法的实例,例如像这样:

myRestaurant = new Restaurant
myRestaurant.open()

我希望这已经足够清楚了。我建议你通读 CoffeeScript homepage从上到下,它非常简短明了。此外,在尝试将 CoffeeScript 用于实际项目之前,请务必具备良好的 JavaScript 背景,这将为您省去一些麻烦。

关于javascript - 为什么在 Coffeescript 中创建 AngularJS Controller 时使用 @ 符号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22877104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com