Question

这是一种最佳实践＆＃39;问题，但我仍然认为可能有正确的答案。

我有一个带有六个可配置选项的指令。我应该在指令上设置六个不同的属性（如下所示）：

<my-directive
  my-width="300"
  my-height="300"
  my-status="true"
  my-foo="yes"
  my-bar="no">
</my-directive>

或者，我应该将配置对象传递给单个属性（如下所示）：

<my-directive my-options="options"></my-directive>

这只是偏好还是有一般的首选方法？任何反馈都表示赞赏。谢谢:)）

Answer 1

这是主要是的偏好问题。因为您可以通过两种途径实现最终结果。我个人更喜欢在第一个例子中看到个别属性，以便使用冗长，富有表现力的元素。

通过在第一个例子中查看<my-directive my-width="300" my-height....>，我可以对这个指令的用法做出有根据的猜测，并且可以轻松地将正在发生的事情拼凑起来。只是看到my-options="options"，除非我通过一些代码来理解这个元素的意图，否则我不知道。

作为一个项目的单一开发人员，这可能是一个低优先级的考虑因素 - 通常被认为是“好吧，差异是什么？”，但是当你介绍其他成员在相同的代码库上工作时，有冗长可以减轻了解你的意图的困难，特别是对那些不熟悉AngularJS的开发人员。

就技术优势而言，例如，您希望仅将样式规则应用于属性包含my-foo的元素。使用以下

的css选择器变得微不足道

[my-foo="yes"] {
    background-color: dodgerblue;
}

[my-foo="no"] {
    background-color: tomato;
}

另一个简单的例子 - 假设你的项目中有jQuery并希望做类似

的事情

$("[my-bar='no']") // do whatever

执行这些任务时，其他路线可能会非常棘手。考虑一下这个真实的例子：一个用户体验设计师希望利用这些操作，但是说，对AngularJS并不十分精明 - 这些任务变得不必要地痛苦。

当您开始考虑诸如此类的方面和示例时，对元素进行粒度控制将变得非常宝贵。对于你最初提出这个问题的兴趣，当然每个人都可以理解将这种想法合并到像my-options="options"这样简洁的东西的愿望 - 但是争取更短的代码并不总是有利的。

所有考虑因素，两者的组合可能是理想的，具体取决于您正在使用的属性的感知重要性。 height，width，status？ - 可能重要且描述性足以独立。一个复杂的统计对象，在指令处理中使用了很多字段？ - 可能有资格成为对象。

我应该在Angular指令中使用单个对象还是单个值作为属性？

1 个答案: