javascript - 将AngularJS指令限制为类为什么不好？

我们一直在避免将Angularjs指令限制为类。主要是因为我们找到了一些不建议这样做的消息来源（包括John Papas opinionated styleguide）。同时，我们一直在避免将其限制为元素，因为它会与W3C标准冲突。 （我们就是这样的纯粹主义者）。

因此，我们一直在使用的是属性的限制（不，我们不会谈论comment方法）。在大多数情况下，该方法工作正常，但在部署具体对象时似乎过于松散。例如。侧边栏。以及replace: true选项将是deprecated，这让我想知道为什么不使用限制来分类。这似乎是有道理的：

<nav class="maarten-sidebar">
    <!-- sidebar directive content -->
</nav>

相较于：

<div data-maarten-sidebar>
    <!-- sidebar directive content -->
    <nav class="sidebar"></nav>
</div>

它也可以很好地与我们的CSS文件一起使用。通过一些研究，我们发现有人建议不要这样做。但是为什么不这样做的主要原因并不十分清楚。所以我的问题实际上是：使用restrict: 'C'有什么陷阱？

最佳答案

有几个原因使restrict: 'E'通常被认为是带有模板的指令的最佳实践（在Angular 2中称为'components'，并在Angular 1中受到新的component指令的鼓励）。原因实际上只是关于可读性和一致性，但我认为它们仍然令人信服。

主要原因是因为它与W3C标准冲突。根据标准，elements may not contain separate words delimited by a dash。 AngularJS encourages developers在指令名称中的某处使用破折号。因此，当您看到其中带有短划线的元素时，您会立即知道它是Angular指令而不是标准HTML元素。因此，使用restrict: 'E'最终更具可读性和表达力。

现在，对于没有模板的指令（在Angular 2中为纯'directives'替代），通常首选restrict: 'A'。大多数HTML属性不包含破折号，尽管有nothing in the W3C standard表示不能。主要原因似乎是它们像许多HTML属性（例如onclick）一样，赋予元素某种行为，而不是简单地应用视觉样式。此外，如果指令接受输入，您可能会通过自定义属性绑定输入，例如：<nav expandable-nav expanded="false"></nav>。另一方面，这似乎很令人困惑：<nav class="expandable-nav" expanded="false"></nav>。

最后，也许顺其自然，主要原因是它们是在Angular 2中执行的。不可避免地，Angular 2将是下一个大问题，而Angular 1一直在朝着Angular-2-ish的方向发展（例如，使用component指令）。准备...

关于javascript - 将AngularJS指令限制为类为什么不好？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35524788/