Javascript 角度模板-内联表达式与调用函数

这两者之间有什么区别吗：

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li>

---

其实没有什么区别。我会用

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

单击

如果我想在我的模板中只有一个这样的表达式。否则我会使用

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

单击

---

减少编写的代码。

虽然我建议使用第二种方法，但实际上不是这样，因为这更干净，有助于最大限度地减少模板中的数据传输。诚然，这似乎无关紧要，但划分javascript代码是一种很好的做法，此外，它还将获得代码缩减和gzip（如果在HTTP请求上启用）的好处

但是，如果这是一个例外情况，那么第一个可能对其他开发人员（或您自己）更有帮助，但我只会在极少数情况下使用它，因为第二个让您能够更轻松地更新/扩展/修复它，特别是当您可能重复使用相同的规则/条件时

关于Angular的绑定模型，我不确定在缓存方式（如果你是这么想的话）或性能方面是否有我个人见过的东西

---

希望有帮助

如上述答案所述，这两种方法都可以很好地工作

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

单击
单击

但也有一些不同之处

最重要的事情之一是AOT策略。从JIT迁移到AOT时，函数调用可能是一件令人头疼的事情（大多数开发人员通常都会这样做）。如果调用的函数是私有函数，AOT编译将抛出编译时错误，因为它将模板和组件视为两个不同的实体

另一点是，数据绑定可读且易于理解

话虽如此，我们可能会遇到这样一种情况：单靠数据绑定无法解决问题。在这种情况下调用函数并不是一件错误的事情

---

希望这对你有帮助！：）

唯一的区别是函数调用和在JavaScript中计算表达式之间的区别，在这里是不相关的。函数调用通常稍微慢一点，所以第一个选项应该稍微快一点

角度视图编译器为

updateRenderer

函数生成以下代码：

function(_ck, _v) {
    var _co = _v.component;
---> var currVal_0 = _ck(_v, 3, 0, ((_co.condition1 && _co.condition2) && _co.condition3));
    _ck(_v, 2, 0, currVal_0);
}

及

正如你所看到的，只有一行是不同的，这就是最重要的

您可以在文章中阅读更多关于

updatenderer

函数的信息：

---

这里的大多数答案只提到性能上的差异是微不足道的。 我不认为这是正确的，这里的表现可能非常重要。 请参阅Phil Parsons关于这方面的伟大文章：

---

您应该注意到此处显示的性能影响

没有区别，优雅而简洁的方法是，使用getter而不是函数

get shouldDisableField:boolean{返回this.condition1&&this.condition2&&this.condition3}

单击是否有任何不清楚的地方？@AngularInDepth.com不，回答非常清楚。是的，我更多地提到了缓存（如果存在）和性能问题。这会不会导致使用函数的一小部分开销？归结到javascript引擎中的堆栈空间，在您的情况下，这不值得担心。我见过一个例子，我有一些开发人员在一个表列表上运行for循环，添加了一个

click

事件处理程序，每次都创建函数声明，这导致浏览器死机。（例如，

for（tablerowbuttons中的var index）tablerowbuttons[index].onclick=function（evt）{…some function…}

使用数千个函数定义来减少堆栈空间）不确定V8现在是如何处理它们的，但决不能少。旁注：如果由于作用域的原因，您需要为每个项使用函数，我建议创建一个带有所需范围数据参数的公共函数，然后使用

function.bind

方法。（例如，这是一个俗气的示例，但给出了总体思路。

elm.onclick=handlerfunc.bind（elm，scopevar1，scopevar2，…）

，以及

函数handlerfunc（scopevar1，scopevar2，event）{…

。还有人为因素：当它被重构为组件内部的一个函数时，开发人员更可能出于偶然，将更多的逻辑、广泛的逻辑或重逻辑放在那里，因为他们正在查看组件代码，而没有查看它在模板中的使用方式。特别是如果有人标记了乐趣作为私人的行动（d'oh）。虽然放置一些次要的逻辑是可以的，但是大量或繁重的逻辑很可能会破坏性能。随着这些问题的积累，这种影响会随着源代码的生命周期而增长/堆叠。还有人为因素：当它被重构为组件内的函数时，开发人员更可能放置更多的逻辑，例如紧张逻辑，或者重逻辑，只是偶然的，因为他们在查看组件代码，而不是查看它在模板中的使用方式。特别是如果有人将函数标记为

private

（d'oh）。虽然放入一些次要逻辑是可以的，但是大量或大量的逻辑很可能会破坏性能。随着源代码的生命周期的延长，这种影响会增加/堆叠，因为这些问题会不断累积。@Quetzalcatl，是的，这是正确的。如果您需要可重用逻辑，最好的方法可能是将其放入

<li [ngClass]="{disabledField: condition1 && condition2 && condition3}">Click</li> 

<li [ngClass]="{disabledField: shouldDisableField()}">Click</li> 

function(_ck, _v) {
    var _co = _v.component;
---> var currVal_0 = _ck(_v, 3, 0, ((_co.condition1 && _co.condition2) && _co.condition3));
    _ck(_v, 2, 0, currVal_0);
}

function(_ck, _v) {
    var _co = _v.component;
--> var currVal_0 = _ck(_v, 3, 0, _co.shouldDisableField());
    _ck(_v, 2, 0, currVal_0);
}