我应该在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

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

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

考虑到所有这些,两者的组合可能是理想的,取决于您正在使用的属性的感知重要性.height,width,status？ - 可能重要且描述性足以独立.一个复杂的统计对象,在指令处理中使用了很多字段？ - 可能有资格保持对象.