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

This is kind of a 'best practices' question, but I still think there may be a correct answer.

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

I have a directive with six configurable options. Should I set up six different attributes on the directive (like below):

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

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

or, should I pass a configuration object into a single attribute (like below):

或者,我应该将配置对象传递给单个属性(如下所示):

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

Is this just preference or is there a generally preferred method? Any feedback is appreciated. Thanks :)

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

1 个解决方案

#1

This is a mostly matter of preference. Since you can achieve the eventual outcome with both routes. I personally prefer to see individual attributes as suggested in your first example for the sake of working with verbose, expressive elements.

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

Just by looking at <my-directive my-width="300" my-height....> in your first example, I can make an educated guess as to what this directive is used for and can easily piece together what is going on. Just seeing my-options="options", I would have no idea unless I dug through some code to understand the intention of this element.

只需在第一个例子中查看 ,我就可以对这个指令的用法进行有根据的猜测,并且可以轻松拼凑出正在发生的事情。上。只要看到my-options =“options”,我就不知道了,除非我通过一些代码来理解这个元素的意图。

As a single developer on a project, though, this may be a low-priority consideration - often chalked up as "well, whats the difference?", but as you introduce other members working on the same code base, having verbosity can alleviate struggles to understand your intentions, especially to developers who are not as familiar with AngularJS.

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

As far as technical benefits, say for example you wish to only apply a style rule to elements whose attributes include my-foo. This becomes trivial with css selectors with the following

就技术优势而言,例如,您希望仅将样式规则应用于其属性包含my-foo的元素。对于具有以下内容的css选择器,这变得微不足道

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

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

Another quick example - say you have jQuery in your project and wish to do something like

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

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

Doing these tasks the other route has the potential to be tricky. Consider this real-word example: A UX designer wants to leverage these manipulations, but is say, not very savvy with AngularJS - these tasks become unnecessarily painful.

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

When you begin to consider aspects and examples such as these, having granular control on your elements becomes invaluable. To your original interest in asking this question, surely everyone can understand the desire for consolidating this into something succinct like my-options="options" - but striving for shorter code is not always advantageous.

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

All considered, a combination of both is likely ideal depending on the perceived importance of the attribute you are working with. height, width, status? - likely important and descriptive enough to standalone. A complex statistical object with many fields used in directive processing? - likely qualifies to remain an object.

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

#1