CoffeeScript - 禁止在 Angular 表达式中引用 DOM 节点

什么是 CoffeeScript？

CoffeeScript 是一种高级编程语言，它可以被编译成 JavaScript。它的语法更加简洁易读，有助于提高开发效率。

Angular 中的表达式

Angular 是一个流行的前端框架，它采用了一套自己的模板语言来描述 UI 组件。在 Angular 的模板语言中，我们可以使用一些表达式来动态地展示数据。

下面是一个简单的例子：

<div>
  {{ message }}
</div>

这个模板会把 message 变量的值渲染到 div 元素中。

禁止在 Angular 表达式中引用 DOM 节点

然而，在 Angular 表达式中，我们不应该引用 DOM 节点。这是因为 Angular 希望表达式只关注数据，而不是视图。

如果我们在表达式中引用了 DOM 节点，那么就可能会导致意想不到的问题。比如说：

<div ng-click="doSomething()">
  {{ document.title }}
</div>

在这个例子中，我们希望用户点击这个 div 元素之后执行 doSomething() 函数。但是，因为我们在表达式中引用了 document.title，所以每次更新表达式时都会重新查找文档标题，这会导致性能问题。

为了避免这样的问题，我们应该在控制器中定义一个变量来保存 DOM 节点，然后在表达式中引用这个变量。比如说：

<div ng-click="doSomething()">
  {{ pageTitle }}
</div>

class MyCtrl
  constructor: ->
    @pageTitle = document.title

  doSomething: ->
    console.log('doing something...')

在这个例子中，我们在控制器中定义了一个 pageTitle 变量来保存文档标题，然后在模板中引用了这个变量。这样就可以避免在表达式中引用 DOM 节点带来的问题。

总结

在 Angular 中，我们不应该在表达式中引用 DOM 节点。如果需要使用 DOM 节点的值，应该在控制器中定义一个变量来保存它，并在表达式中引用这个变量。这样可以避免性能问题和其他潜在的问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26785