javascript - 什么时候写指令？

Question

Angular 为我们提供了一种编写指令的机制——它的功能非常强大。但我一直想知道的是 - 在什么情况下您应该实际编写自己的自定义指令。

我们不断在 Stack Overflow 中和周围看到各种问题，各种人试图编写指令(在我看来)一开始就不需要编写。在大多数情况下，它们可以通过重复、切换和显示的组合来解决。查看包含我认为首先不应该是指令的指令的问题示例!

https://stackoverflow.com/questions/16101073/angularjs-directive-is-not-working-in-ie-10

Fire button click in AngularJS

angularjs: using a directive inside the ui-bootstrap modal

一些示例场景。无论如何我都不会挑剔它们......因为我确信任何人都不清楚我们何时应该使用/编写指令。

我们看到人们使用指令作为模板机制的场景。这是正确的做事方式吗？或者，还有更好的方法？ (也许是 ng-include？)使用指令作为模板机制有什么好处/坏处吗？这个问题的原因是，有时我想知道人们是否编写指令，因为来自 jquery 世界，他们首先想到的是编写 DOM 操作代码，并且由于 Angular 的方式是不在 Controller 中操作 DOM，因此所有这些都倾向于编写指令中的所有代码。

编辑:

我相信这种混淆(将东西塞进指令中)的产生是因为 Angular 没有单独的“ View ”概念——不像 Backbone(只有“ View ”但没有组件!)。指令在定义组件方面非常出色——但我认为如果您使用它们来创建“ View ”，您将失去一些“Angular ”方式。不过，这是我的意见——这就是为什么我征求 Angular 社区其他成员的想法。

简单指令(只做一件事的指令!)的好处是它们绝对容易测试。如果您查看所有 ng 指令，它们都会做一件事并且做得很好。

在 Angular 中定义可重用“ View ”(不是组件!)的最佳方式是什么？那应该写在指令中吗？或者，还有更好的方法？

如果其中一位 Angular 开发人员对此事有意见，那就太棒了!

Answer 1

好吧……这是一个很好的问题。

我认为指令主要用于“extending HTML so you can build a DSL”，提高生产力和代码质量。

问题是，这是通过组件化的东西来实现的。但最重要的是，我们了解指令不仅与视觉组件有关，也不仅与模板有关，而且与行为有关。

总而言之，使用指令您可以:

1. 创建 DSL 以增强元素行为
2. 创建DSL 小部件，这样您就可以停止重复自己
3. 包装已经存在的组件，提高您的工作效率。
4. 优化

增强行为只不过是组件化行为。 ng-click ，例如，将可点击行为添加到任何元素。想象一下，您正在创建一个包含数十个可拖动元素的应用程序。比起创建一个指令来增强元素行为，使其可拖动而无需触及元素视觉 (<span draggable>Test</span>)。再举一个例子，假设您将在鼠标悬停时获得特殊提示。 title属性不适合这个，那么你可以创建自己的my-title属性，在鼠标悬停时自动创建您的“特殊提示”(<span my-title="Some caption">Test</span>)。

在开发应用程序时，您有大量领域特定的概念和行为。例如，Stackoverflow 有很强的投票概念。您可以投票赞成/反对问题、答案、评论...这样您就可以创建一个可重复使用的 votable指令，这将添加“投票行为”和“投票小部件”(向上/向下箭头)到几乎任何元素。

这最后一个给了我们另一张脸:模板。不仅是为了懒惰的人，也是为了提高代码质量和可维护性，遵循 DRY principle .如果您正在重复 Controller 代码、HTML 结构或其他任何内容，为什么不对其进行模板化和组件化，对吧？ Directive 是这份工作的合适人选。

当然，你也有一些指令的通用应用。许多应用程序(不是说所有应用程序)都依赖于可点击的元素，这就是为什么我们有一个 ng-click ， 例如。许多应用程序都有上传区域。你会以 jQuery 的思维方式做什么？您将创建一个 jQuery 插件。正确的？在 Angular 中，您将创建一个 Angular Widget(使用指令)。您甚至可以使用指令包装一个已经存在的插件，并再次增强其行为，以便它可以顺利地与您的应用程序对话。

关于包装插件，对于每个 jQuery 插件(但可能是 MooTools、Ext...)，您必须创建一个 Controller ，调用 $('element').plugin()在它上面，关心 jQuery 事件的变化，并为你 $digest 你的范围。这是指令的另一个完美用法。您可以创建一个应用 .plugin() 的指令在你的元素上，倾听事件并为你改变/消化你的范围。这就是Angular UI Project全部内容，一起来看看吧。

最后一点是优化。我最近创建了一个应用程序，用于创建具有动态列和行(网格)的表。问题是数据是实时更新的! ng-repeat 中的 ng-repeat 用于创建 header ，这会降低应用程序性能(每个 $apply 循环中的嵌套循环，每半秒发生一次)。因此，您可以创建一个指令来创建列模板并仍然使用 ng-repeat在它里面，但是你只会在列编辑时循环遍历列。

总而言之，我认为指令是关于组件化行为和形式(模板化)，这可以为您带来生产力和代码质量。