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

Question

这是一个“最佳实践”问题，但我仍然认为可能会有正确答案。

我有一个包含六个可配置选项的指令。我是否应该在指令上设置六个不同的属性(如下所示):

<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

用另一条路线完成这些任务可能会很棘手。考虑这个真实的例子:一个 UX 设计师想要利用这些操作，但据说对 AngularJS 不是很了解 - 这些任务变得不必要地痛苦。

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

综合考虑，根据您正在使用的属性的感知重要性，两者的结合可能是理想的。 height , width , status ？ - 可能重要且描述性足以独立。一个复杂的统计对象，有很多字段用于指令处理？ - 可能有资格保留为对象。