Einige Vorschläge zur Lesbarkeit des Vue-Codes

Vorwort:

Ich habe mich vor Kurzem in ein Vue-Projekt eingearbeitet und hatte das Gefühl, in einen Berg von altem Mist gefallen zu sein. Die Lesbarkeit ist extrem schlecht, von der Wartbarkeit ganz zu schweigen. Daher möchte ich diese Kolumne nutzen, um einige Vorschläge zur Lesbarkeit von Vue-Code zu machen. Wenn Sie die Vorschläge nützlich finden, liken Sie sie bitte. Wenn Sie die Vorschläge für unvernünftig halten, kommentieren und kritisieren Sie sie bitte. Wenn Sie bessere Vorschläge haben, kommentieren und ergänzen Sie sie bitte.

1. Nutzen Sie Komponenten sinnvoll, um den Code besser zu organisieren

Legen Sie niemals den gesamten Implementierungscode einer Seite in eine VUE-Datei. Sofern die Seite nicht sehr einfach ist, wird der Code in dieser .vue Datei lang und mühselig sein.

Der Zweck der Bereitstellung von Komponenten Vue liegt nicht nur in der Wiederverwendung, sondern sie können auch zum Aufteilen von Code verwendet werden und sogar dazu, Komponenten sinnvoll einzusetzen, um die Darstellungs- und Aktualisierungsgeschwindigkeit der Seite zu optimieren. Dies liegt daran, dass beim Aktualisieren des Vue-Seiten-Renderings die Komponenten auf der Seite nicht aktualisiert werden, es sei denn, die von den props oder slot der Komponente referenzierten Daten ändern sich.

Mit den folgenden Schritten können Sie eine Vue-Seite in Komponenten aufteilen und so den Code besser organisieren.

1. UI-Komponenten extrahieren

Wie definiert man UI-Komponenten? Ich persönlich empfehle, UI-Komponenten von Geschäftskomponenten danach zu unterscheiden, ob sie serverseitige Daten verarbeiten. Beispielsweise sind das Laden von Popup-Fenstern, sekundären Bestätigungs-Popup-Fenstern, Eingabeaufforderungsfeldern für Nachrichten usw. UI-Interaktionskomponenten.

Nach dem Extrahieren der UI-Komponenten können der UI-Interaktionscode und der Geschäftsinteraktionscode getrennt werden. Denken Sie daran, keinen Geschäftscode in UI-Komponenten zu schreiben, da die UI-Komponenten sonst nicht wiederverwendbar sind.

Um ein Gegenbeispiel zu nennen: Das Hinzufügen des Geschäftscodes, der nach der zweiten Bestätigung im zweiten Bestätigungs-Popup-Fenster verarbeitet werden soll, führt dazu, dass die UI-Komponente nicht wiederverwendet werden kann. Wir können den Aufruf des sekundären Bestätigungs-Popup-Fensters in ElementUI nachahmen, um eine sekundäre Bestätigungs-Popup-Fensterkomponente zu implementieren.

this.$confirm(Nachricht, Titel, Optionen)
  .then(res =>{})
  .catch(err =>{})

Auf diese Weise kann der Geschäftscode in die Rückruffunktion von then geschrieben werden. Der Kernimplementierungscode der Komponente lautet wie folgt:

//bestätigen.vue
<Vorlage>
  <div v-show="anzeigen">
    //...
    <div @click="ok"></div>
    <div @click="abbrechen"></div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      anzeigen: falsch,
    }
  },
  Methoden: {
    OK() {
      dies.show = falsch;
      dies.auflösen();
    },
    stornieren() {
      dies.show = falsch;
      dies.auflösen();
    },
  }
}
</Skript>

//index.js
importiere Vue von „vue“;
Importoptionen aus „./confirm.vue“;
const Confirm = Vue.extend(Optionen);
let confirm = undefiniert;
const ConfirmInit = (Optionen = {}) => {
  returniere neues Promise((lösen, ablehnen) => {
    options.resolve = auflösen;
    options.reject = ablehnen;
    bestätigen = neue Bestätigung({
      el: document.createElement('div'),
      Daten: Optionen
    })
    Dokument.Body.AppendChild(bestätigen.$el);
    Vue.nextTick(() => {
      if (bestätigen) confirm.show = true;
    })
    Rückgabe bestätigen;
  })
}
Vue.prototype.$confirm = ConfirmInit;

//main.js
importiere 'components/confirm/index.js'; //Globale Registrierung der sekundären Bestätigungs-Popup-Bestätigungskomponente

2. Geschäftskomponenten nach Modul extrahieren

Eine Seite kann in mehrere Bereiche unterteilt werden, wie etwa Kopfzeile, Fußzeile, Seitenleiste, Produktliste, Mitgliederliste usw. Jeder Bereich kann als Modul zum Extrahieren von Geschäftskomponenten verwendet werden.

3. Extrahieren Sie Funktionskomponenten nach Funktion

Nach dem Extrahieren der Geschäftskomponenten nach Modul können die Geschäftskomponenten immer noch sehr groß sein. Daher müssen weitere Funktionskomponenten nach Funktion extrahiert werden.

Die Größe von Funktionen kann unterschiedlich sein und beim Extrahieren müssen verschiedene Grundsätze beachtet werden:

Zu einfache Funktionen werden nicht extrahiert:

Beispielsweise kann eine Sammelfunktion durch die Anforderung einer Schnittstelle vervollständigt werden. Funktionen wie diese sollten nicht extrahiert werden. Es können nur Funktionen mit logischen Operationen einer bestimmten Komplexität extrahiert werden.

Die Funktion sollte einfach sein:

Eine Funktionskomponente übernimmt nur ein einziges Geschäft.

Beispielsweise muss eine Dateilesekomponente die Datei nach dem Öffnen automatisch erfassen. Wo sollte also der Code für die Erfassungslogik geschrieben werden?

Vielleicht haben Sie den Code der Sammlungslogik gedankenlos in die Methode geschrieben, die auf das erfolgreiche Öffnen von Dateien in der Komponente wartet. Nach einer Weile änderte sich die Anforderung dahingehend, dass er dem Lesedatensatz hinzugefügt werden muss, bevor auf die Schaltfläche „Sammeln“ geklickt wird. Als Sie den Code in der Komponente ändern wollten, stellten Sie fest, dass eine andere Seite ebenfalls auf diese Komponente verwies. Daher mussten Sie der Komponente einen zusätzlichen Parameter hinzufügen, um die Geschäftsszenarien zu unterscheiden. Als sich die Anforderungen änderten, wurden die Geschäftsszenarien überlagert und dem Komponentencode wurden verschiedene Beurteilungslogiken hinzugefügt, was mit der Zeit lang und langweilig wurde. Dieser Ansatz ist offensichtlich nicht akzeptabel.

Der richtige Ansatz besteht darin, ein Ereignis on-fileOpen-success im Komponententag anzupassen und die Funktion handleFileOpenSuccess zu verwenden, um auf dieses Ereignis zu warten.

<fileReader 
  @on-fileOpen-success="DateiOpenSuccess behandeln"
>
</fileReader>

Führen Sie in der Methode der Komponente zum Abhören des erfolgreichen Öffnens einer Datei this.$emit('on-fileOpen-success',data) aus, um dieses Ereignis auszulösen. data kann die Dateiinformationen weitergeben und die Funktion handleFileOpenSuccess kann Geschäftsinteraktionen wie das Sammeln oder Hinzufügen von Verlaufsdatensätzen und deren anschließendes Sammeln verarbeiten. Dieser Ansatz macht die Dateileserkomponente monolithisch.

Funktionale Komponenten sollten so wenig UI wie möglich enthalten und der UI-Teil sollte über Slots übergeben werden, was die Komponenten reiner und wiederverwendbarer macht.

Beispielsweise ist es nicht möglich, der Upload-Komponente ein Upload-Symbol hinzuzufügen, wenn sich der Entwurf des UI-Designs ändert. In diesem Fall können Sie den Slot verwenden, um das Upload-Symbol zu übergeben.

//hochladen.vue
<Vorlage>
  <div>
    <slot name="Symbol"></slot>
  </div>
</Vorlage>

//index.vue
<Vorlage>
  <div>
    <hochladen>
      <Vorlage #Symbol>
        //Upload-Symbol</template>
    </hochladen>
  </div>
</Vorlage>

2. Verwenden Sie v-bind, um Komponenteneigenschaften lesbarer zu machen

Wenn Sie alle Eigenschaften eines Objekts als prop an componentA übergeben möchten, können Sie v-bind ohne Parameter verwenden. Beispielsweise gelten für die params eines gegebenen Objekts folgende Bedingungen:

Parameter: {
  ID: 1,
  Name: "vue"
}

Vor der Optimierung:

<componentA :id="params.id" :name="params.name"></componentA>

Nach der Optimierung:

<componentA v-bind="params"></componentA>

3. Verwenden Sie Attrs und Attrs und Listener, um Komponenten von Drittanbietern zu kapseln

1. $attrs

Beim Kapseln von Drittanbieterkomponenten tritt häufig ein Problem auf: Wie können die Eigenschaften und Ereignisse der Drittanbieterkomponenten selbst über die gekapselten Komponenten verwendet werden?

Kapseln Sie beispielsweise die Input myInput in eine elementUi Komponente ein und zeigen Sie bei der Eingabe eines falschen Inhalts eine Fehlermeldung unter dem Eingabefeld an.

Der Code der myInput Komponente lautet wie folgt:

<Vorlage>
  <div>
    <el-input v-model="Eingabe"></el-input>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
    Wert: {
      Typ: Zeichenfolge,
      Standard: '',
    },
    FehlerTipp: {
      Typ: Zeichenfolge,
      Standard: '',
    }
  },
  Daten() {
    zurückkehren {
    }
  },
  berechnet: {
    Eingabe: {
      erhalten() {
        gib diesen Wert zurück
      },
      setze(Wert) {
        dies.$emit('Eingabe', Wert)
      }
    }
  }
}
</Skript>

Die Komponente myInput wird folgendermaßen aufgerufen, wobei errorTip ein Hinweis auf einen Eingabefehler im Eingabefeld ist.

<meinInput v-model="input" :errorTip="errorTip"></meinInput>

Wenn Sie myInput Komponente ein deaktiviertes Attribut hinzufügen möchten, um das Eingabefeld zu deaktivieren, wie erreichen Sie das? Die meisten Studenten würden dies tun.

<Vorlage>
  <div>
    <el-input v-model="Eingabe"
      :disabled="deaktiviert"></el-input>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
    //...
    deaktiviert:
      Typ: Boolean,
      Standard: false
    }
  },
  //...
}
</Skript>

Nach einer Weile müssen Sie der myInput Komponente weitere Attribute el-input Komponente hinzufügen. Insgesamt gibt es mehr als 27 el-input Komponenten. Was sollten Sie tun? Sollten Sie sie einzeln mit prop übergeben? Das ist nicht nur unleserlich, sondern auch umständlich. Sie können $attrs verwenden, um dies in einem Schritt zu erledigen. Schauen wir uns zunächst die Definition von attrs an.

$attrs: Enthält attribute (außer class und style ), die im übergeordneten Bereich nicht als prop erkannt (und abgerufen) werden. Wenn eine Komponente keine prop deklariert, werden alle Bindungen des übergeordneten Bereichs (außer class und style ) hier eingeschlossen und können über v-bind="$attrs " an die innere Komponente übergeben werden.

v<Vorlage>
  <div>
    <el-input v-model="Eingabe"
      v-bind="$attrs"></el-input>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>

Das reicht nicht aus, Sie müssen auch die Option inheritAttrs auf false setzen. Warum? Werfen Sie einen Blick auf die Definition inheritAttrs und Sie werden es verstehen.

Standardmäßig wird attribute bindings attribute mit übergeordnetem Gültigkeitsbereich, die nicht als props erkannt werden, ein „Fallback“ ausgeführt und sie werden als normale HTML attribute auf das Stammelement der untergeordneten Komponente angewendet. Beim Schreiben von Komponenten, die ein Zielelement oder eine andere Komponente umschließen, ist dies möglicherweise nicht immer das erwartete Verhalten. Indem Sie inheritAttrs auf false setzen, wird dieses Standardverhalten entfernt. Diese attribute können durch $attrs wirksam gemacht und durch v-bind explizit an Nicht-Root-Elemente gebunden werden. Hinweis: Diese Option wirkt sich nicht auf class und style aus.

Einfach ausgedrückt: Setzen Sie inheritAttrs auf false und v-bind="$attrs " wird wirksam.

<Vorlage>
  <div>
    <el-input v-model="Eingabe"
      v-bind="$attrs"></el-input>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  inheritAttrs: false,
  Requisiten: {
    Wert: {
      Typ: Zeichenfolge,
      Standard: '',
    },
    FehlerTipp: {
      Typ: Zeichenfolge,
      Standard: '',
    }
  },
  Daten() {
    zurückkehren {
    }
  },
  berechnet: {
    Eingabe: {
      erhalten() {
        gib diesen Wert zurück
      },
      setze(Wert) {
        dies.$emit('Eingabe', Wert)
      }
    }
  }
}
</Skript>

Auf diese Weise können die Eigenschaften der el-input -Komponente klar von den Eigenschaften der myinput Komponente unterschieden werden und die Lesbarkeit props -Option der Komponente wird erheblich verbessert.

2. $listeners

Wie implementieren Sie also ein benutzerdefiniertes Ereignis für die el-input -Komponente der myIpput Komponente? Ihre erste Reaktion könnte this.$emit。

<Vorlage>
  <div>
    <el-input v-model="Eingabe"
      v-bind="$attrs"
      @blur="unscharf">
    </el-Eingabe>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  //...
  Methoden: {
    verwischen() {
      dies.$emit('unscharf')
    }
  }
}
</Skript>

<meineEingabe 
  v-model="Eingabe"
  :errorTip="FehlerTip"
  @blur="handleBlur">
</meinInput>

el-input Komponente hat 4 benutzerdefinierte Ereignisse, was nicht zu viel ist. Was sollen wir tun, wenn wir auf eine Drittanbieterkomponente mit mehr benutzerdefinierten Ereignissen stoßen? Sollen wir sie einzeln hinzufügen? Dadurch werden nicht nur eine Menge unnötiger methods hinzugefügt, sondern sie werden auch schwer lesbar und können leicht mit den eigenen methods myInput vermischt werden. Tatsächlich können Sie $listeners verwenden, um das Ziel in einem Schritt zu erreichen. Sehen wir uns zunächst die Definition von $listeners an.

$listeners: Enthält v-on Ereignislistener im übergeordneten Bereich (ohne den Modifikator .native ). Es kann über v-on="$listeners" an innere Komponenten übergeben werden.

<Vorlage>
  <div>
    <el-input v-model="Eingabe"
      v-bind="$attrs"
      v-on="$listeners">
    </el-Eingabe>
    <div>{{FehlerTip}}</div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  //...
}
</Skript>

<meineEingabe 
  v-model="Eingabe"
  :errorTip="FehlerTip"
  @blur="handleBlur">
</meinInput>

Solange Sie in der myInput Komponente v-on="$listeners " zur el-input Komponente hinzufügen, können Sie die angepassten Ereignisse el-input -Komponente auf der myInput Komponente verwenden.

Damit ist dieser Artikel mit einigen Vorschlägen zur Lesbarkeit von Vue-Code abgeschlossen. Weitere relevante Inhalte zur Lesbarkeit von Vue-Code finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!