Soll ich ein einzelnes Objekt oder einzelne Werte als Attribute in einer Angular-Direktive verwenden?

Question

Dies ist eine Art "Best Practices" -Frage, aber ich denke immer noch, dass es eine richtige Antwort geben kann.

Ich habe eine Richtlinie mit sechs konfigurierbaren Optionen. Sollte ich bis sechs verschiedene Attribute über die Richtlinie (wie unten):

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

oder sollte ich ein Konfigurationsobjekt in ein einziges Attribut übergeben (wie unten):

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

Ist das nur Präferenz oder gibt es eine allgemein bevorzugte Methode? Jede Rückmeldung wird geschätzt. Thanks :)

Answer 1

Dies ist eine meist Frage der Präferenz. Da können Sie das Ergebnis mit beiden Routen erreichen. Ich persönlich bevorzuge es, einzelne Attribute wie in Ihrem ersten Beispiel vorgeschlagen zu sehen, um mit ausführlichen, expressiven Elementen zu arbeiten.

Nur durch Blick auf <my-directive my-width="300" my-height....> in Ihrem ersten Beispiel, kann ich eine fundierte Schätzung, was diese Richtlinie verwendet wird, und kann leicht zusammen, was los ist. Wenn ich nur my-options="options" sehe, hätte ich keine Ahnung, wenn ich nicht einen Code durchgearbeitet hätte, um die Absicht dieses Elements zu verstehen.

Als ein einziger Entwickler in einem Projekt, dies kann jedoch eine niedrige Priorität sein - oft als "gut, was ist der Unterschied?", Aber wie Sie andere Mitglieder arbeiten auf der gleichen Code-Basis, haben Ausführlichkeit kann Kämpfe erleichtern, um Ihre Absichten zu verstehen, besonders für Entwickler, die mit AngularJS nicht so vertraut sind.

Soweit die technischen Vorteile, sagen Sie zum Beispiel, dass Sie nur eine Stilregel auf Elemente anwenden möchten, deren Attribute my-foo enthalten. Dies wird trivial mit CSS-Selektoren mit dem folgende

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

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

Einem weiteren kurzen Beispiel - sagen Sie jQuery in Ihrem Projekt und wollen so etwas wie

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

Doing diese Aufgaben die andere Route zu tun haben das Potenzial, sei knifflig. Betrachten Sie dieses Beispiel aus der Praxis: Ein UX-Designer möchte diese Manipulationen nutzen, ist aber mit AngularJS nicht sehr vertraut - diese Aufgaben werden unnötig schmerzhaft.

Wenn Sie beginnen, Aspekte und Beispiele wie diese zu betrachten, granulare Kontrolle auf Ihre Elemente wird unschätzbar. Um Ihr ursprüngliches Interesse an diese Frage, doch jeder kann den Wunsch verstehen, das für die Konsolidierung in etwas lapidar wie my-options="options" - aber für kürzeren Code Streben ist nicht immer vorteilhaft.

Alles in allem ist eine Kombination von beiden wahrscheinlich ideal in Abhängigkeit von der wahrgenommenen Bedeutung des Attributs, mit dem Sie arbeiten. height, width, status? - wahrscheinlich wichtig und beschreibend genug, um eigenständig zu sein. Ein komplexes statistisches Objekt mit vielen Feldern, die bei der Verarbeitung von Anweisungen verwendet werden? - Wahrscheinlich qualifiziert, um ein Objekt zu bleiben.