2

在创建 angularJS 应用程序时，将几乎所有“组件”创建为指令是最佳实践吗？当我说组件时，我指的是任何一组执行功能的 HTML 元素。例子：

登录：

 - <input type="text" name="username" />
 - <input type="password" name="password" />
 - <button>Login</button>

事件：

 - <h3>Title</h3>
 - <input type="date" name="eventStart" />
 - <p>This is an event description</p>

博文：

 - <h3>Title</h3>
 - <small>Blog meta - Blog Author</small>
 - <p>This is a post blah blah blah</p>
4

2 回答 2

1

指令允许您重用代码。我当然会将所有重用的内容放入指令中。为避免重复自己，您应该使用指令。我什至会说，即使你没有重复自己，即代码只在一个地方，你也应该将它变成一个指令。

仅在一个地方使用的指令不会减少代码，但会分离关注点。我认为指令类似于类。类作用域不是一大块代码，而是强制类是独立的块。同样，创建具有自己范围的指令使它们成为独立的块，以有限的方式与周围环境交互。

ngInclude 有点不同。我认为它相当于 eval 或 C 的#include。您确实得到了一点分离，但是所有内容都共享相同的范围，并且很容易使部分交织在一起，但除非经过检查，否则它们看起来并不像。

至于 YAGNI，我认为这是一个不同的问题。YAGNI 正在谈论添加功能。我更多地谈论的是代码结构，而不是添加任何额外的东西。我看到相同的代码，但组织方式略有不同。当然指令需要一些工作来编写，但就像类一样，它们也可以是轻量级的并且很容易创建（就所需的思考量而言）。

于 2013-07-20T21:31:14.843 回答
0

除非存在可重用行为的元素，否则我将使用部分模板（ng-include + ng-template）和控制器来实现您提供的示例。

所以我的登录模板会变成

<script type="text/ng-template" class="template" id="login">
 <div ng-controller='LoginController'>
   <input type="text" name="username" />
   <input type="password" name="password" />
   <button>Login</button>
 </div>
</script>

它现在可以在任何地方重复使用

<div ng-include='login'>

我认为使用上述方法可以轻松实现登录和博客文章。因为event我不确定取决于封装了多少行为。

我发现指令有用的一些地方是

  • 包装一个 jquery 控件以使其在 Angular 中可用。
  • 做DOM操作。
  • 添加额外的行为现有的 html 元素。例如制作html input元素以支持自定义验证（UI + 行为）
  • 当然还有定义高可用性的新 html 元素。
于 2013-07-21T10:29:15.623 回答