我應該在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 ？ - 可能重要且描述性足以獨立。 一個復雜的統計對象，在指令處理中使用了很多字段？ - 可能有資格保持對象。