Viele Eigenschaften oder Eigenschaftsobjekt: Auswahlkriterien

Mit Vue entwickeln wir Komponenten verschiedener Arten und Nutzungsbedingungen. Einer der Hauptbestandteile jeder Komponente ist ihre Schnittstelle. In Vue sind übergebene Eigenschaften ein sehr wichtiger, wenn nicht der wichtigste Teil der Komponentenschnittstelle.

In einer Situation, in der eine Komponente viele Daten benötigt, können verschiedene Methoden zum Übertragen dieser Daten angewendet werden. Betrachten Sie sie.

Eigenschaftssatz

Eine Möglichkeit besteht darin, für jeden Atomwert eine eigene Eigenschaft zu erstellen. Betrachten wir den Komponentencode mit einem ähnlichen Ansatz:

Muster

<template> <div> <div>First name: {{ firstName }}</div> <div>Last name: {{ lastName }}</div> <div>Birth year: {{ birthYear }}</div> </div> </template> 

Skript

 const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { firstName: { type: String, required: true, validator: firstName => firstName !== '' }, lastName: { type: String, required: true, validator: lastName => lastName !== '' }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() } } } 

Schauen wir uns die Verwendung dieser Komponente an.

  <!-- Other part of html template--> <PersonInfo first-name="Jill" last-name="Smith" :birth-year="2000" /> <!-- Other part of html template--> 

Berücksichtigen Sie die Vor- und Nachteile dieses Ansatzes

Die Vorteile

• Alle Eigenschaften sind unabhängig. Wenn einer der Werte ungültig ist, ist die Fehlermeldung genauer.
• Der Inhalt der übertragenen Eigenschaften ist klar
• "Flach ist besser als nisten"
• Das Hinzufügen neuer optionaler Eigenschaften ist ziemlich einfach: Fügen Sie einfach eine Eigenschaft hinzu, die den default

 props: { firstName: { type: String, required: true, }, lastName: { type: String, required: true, }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() }, city: { type: String, default: 'New York' } } 

Nachteile

• Genug ausführlicher Code in der übergeordneten Komponente, insbesondere wenn Daten von einem einzelnen Objekt stammen. Ein Beispiel:

  <!-- Other part of html template--> <PersonInfo :first-name="person.firstName" :last-name="person.lastName" :birth-year="person.birthYear" /> <!-- Other part of html template--> 

• Ausführlichkeit bei der Definition von Eigenschaften (im Vergleich zur Beschreibung des Objekts)

Objekteigenschaft

Es gibt Situationen, in denen Atomdaten keine primitiven Typen sind. In dem gegebenen Beispiel können solche Daten ein person .

Betrachten Sie ein Beispiel:

Muster

 <template> <div> <div>First name: {{ person.firstName }}</div> <div>Last name: {{ person.lastName }}</div> <div>Birth year: {{ person.birthYear }}</div> </div> </template> 

Skript

 import quartet from 'quartet' // npm validation package const v = quartet() const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { person: { type: Object, required: true, validator: v({ firstName: 'string', lastName: 'string', birthYear: v.and( 'safe-integer', v.min(MIN_BIRTH_YEAR), v.max(new Date().getFullYear()) ) }) } } } 

Schauen wir uns die Verwendung von an:

  <!-- Other part of html template--> <PersonInfo :person="person"/> <!-- or (bad) --> <PersonInfo :person="{ firstName: 'Jill', lastName: 'Smith', birthYear: 2000 }"/> <!-- Other part of html template--> 

Berücksichtigen Sie die Vor- und Nachteile

Die Vorteile

• Der Code in der übergeordneten Komponente wird kürzer
• Wenn sich eine bestimmte Datenstruktur nicht ändert, wird der Code weniger redundant

Nachteile

• Alle Werte werden an ein Objekt gebunden. Wenn einer der Werte ungültig ist, zeigt eine Fehlermeldung an, dass das gesamte Objekt ungültig ist
• Bei Verwendung eines Objekts in der übergeordneten Komponente: Der Inhalt der übertragenen Daten wird hinter der Abstraktion dieses Objekts verborgen
• Eine zusätzliche Verschachtelungsebene in der Komponente
• Das Hinzufügen neuer optionaler Eigenschaften mit Werten innerhalb des Objekts ist nicht möglich (ich weiß nicht, wie das geht).
• Um ein Objekt im gleichen Umfang zu validieren, müssen Sie zusätzliche Validierungswerkzeuge verwenden (z. B. eine quartet Validierungsbibliothek).

Schlussfolgerungen

Ich bin zu folgenden Schlussfolgerungen gekommen:

• Die Verwendung einzelner Eigenschaften ist vorzuziehen.
• Die Verwendung einer Objekteigenschaft ist zulässig, wenn die Datenstruktur dieses Objekts nicht mit zusätzlichen optionalen Feldern mit einem Standardwert aufgefüllt wird.

P. S.

Ich freue mich über Ihre Auswahlkriterien. Welchen Ansatz verwenden Sie und warum? In anderen Angelegenheiten ist dies der Hauptzweck des Schreibens dieses Artikels. Kann jemand von Ihnen die Best Practices und ihre Gründe kennen? Danke für deine Zeit.

Update 19:26, 16.01.2019

Es gibt auch eine dritte Option, c v-bind. Siehe Diskussion hier