Devo utilizzare un singolo oggetto o singoli valori come attributi in una direttiva Angolare?

Question

Questa è una sorta di "best practice", ma continuo a pensare che potrebbe esserci una risposta corretta.

Ho una direttiva con sei opzioni configurabili. Devo impostare sei diversi attributi sulla direttiva (come qui di seguito):

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

o, dovrei passare un oggetto di configurazione in un singolo attributo (come di seguito):

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

Si tratta solo di preferenza o c'è un metodo generalmente preferito? Qualsiasi feedback è apprezzato. Grazie :)

Answer 1

Questo è uno principalmente questione di preferenza. Dal momento che è possibile raggiungere il risultato finale con entrambe le rotte. Personalmente preferisco vedere i singoli attributi come suggerito nel primo esempio per il lavoro con elementi verbosi ed espressivi.

Solo osservando il numero <my-directive my-width="300" my-height....> nel primo esempio, posso formulare un'ipotesi su quale sia l'uso di questa direttiva e può facilmente mettere insieme ciò che sta accadendo. Semplicemente vedendo my-options="options", non avrei idea se non ho scavato qualche codice per capire l'intenzione di questo elemento.

Come singolo sviluppatore di un progetto, tuttavia, questa può essere una considerazione a bassa priorità, spesso indicata come "bene, qual è la differenza?", Ma come si introducono altri membri che lavorano sulla stessa base di codice, avendo la verbosità può alleviare le difficoltà per comprendere le tue intenzioni, in particolare per gli sviluppatori che non hanno familiarità con AngularJS.

Per quanto riguarda i vantaggi tecnici, ad esempio, si consiglia di applicare una regola di stile solo agli elementi i cui attributi includono my-foo. Questo diventa banale con i selettori CSS con il seguente

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

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

Un altro esempio veloce - dire che avere jQuery nel progetto e desiderio di fare qualcosa di simile

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

Facendo queste operazioni l'altro itinerario ha il potenziale di essere difficile Prendi in considerazione questo esempio di parole reali: un progettista di UX vuole sfruttare queste manipolazioni, ma è, diciamo, poco esperto con AngularJS - questi compiti diventano inutilmente dolorosi.

Quando si iniziano a considerare aspetti ed esempi come questi, avere il controllo granulare sui propri elementi diventa inestimabile. Per il tuo interesse originale a fare questa domanda, sicuramente tutti possono comprendere il desiderio di consolidare questo in qualcosa di succinto come my-options="options" - ma cercare di ottenere un codice più breve non è sempre vantaggioso.

Tutti considerati, è probabile che una combinazione di entrambi sia ideale in base all'importanza percepita dell'attributo con cui si sta lavorando. height, width, status? - probabilmente importante e abbastanza descrittivo da essere autonomo. Un oggetto statistico complesso con molti campi usati nell'elaborazione direttiva? - probabilmente si qualifica per rimanere un oggetto.