Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (3) TextBox (TextBox)

xmlplus ist ein JavaScriptFramework für die schnelle Entwicklung von Front-End- und Back-End-Projekten. In diesem Artikel wird hauptsächlich das Textfeld der xmlplus-Komponentendesignreihe vorgestellt, auf das sich interessierte Freunde beziehen können.

Das Textfeld ist die am häufigsten verwendete Eingabekomponente auf der Seite und wird standardmäßig verwendet Methode ist wie folgt:

9887ef52099b93ef81a4073036326c37

Natürlich kann der `type='text' hier sein weggelassen. In den meisten Fällen stellt die Verwendung des Standardtextfelds als Eingabekomponente kein Problem dar, in bestimmten Projekten ist jedoch zwangsläufig eine Funktionserweiterung erforderlich. Hier nehmen wir nur als Beispiel, wie die formatierte Eingabe Ausgabefähigkeit von Textfelddaten erhöht werden kann, um zu veranschaulichen, wie die native Textfeldkomponente erweitert werden kann. Zusätzlich zum Inhalt dieses Kapitels können Sie auch auf das Kapitel „Parameterzuordnung“ in der offiziellen Dokumentation verweisen.

Funktionsanalyse der Zielkomponente

Für das native Textfeld ist der Wert, den wir erhalten, vom Typ Text, wie im folgenden Beispiel gezeigt:

Example: {
  xml: "<input id=&#39;input&#39; value=&#39;text&#39;/>",
  fun: function (sys, items, opts) {
    console.log(typeof this.prop("value")); // string
  }
}

Wenn Sie andere Typwerte benötigen, müssen Sie die erhaltenen Daten formatieren. Wenn Sie beispielsweise Ganzzahlen benötigen, müssen Sie die Funktion parseInt verwenden; wenn Sie Gleitkommazahlen benötigen, müssen Sie die Funktion parseFloat verwenden . Wenn wir den Vorgang der Formatierung von Daten kapseln können, ist die Verwendung recht praktisch. Um unsere Erwartungen zu verdeutlichen, können wir auch zuerst ein Beispiel für die Verwendung der Zielkomponente geben.

Index: {
  xml: "<p id=&#39;index&#39;>\
       <TextBox id=&#39;foo&#39;/>\
       <TextBox id=&#39;bar&#39; format=&#39;int&#39;/>\
     </p>",
  fun: function (sys, items, opts) {
    items.foo.value = "hello, world";
    items.bar.value = 27.1828;
    console.log("foo", items.foo.value);
    console.log("bar", items.bar.value);
  }
}

In diesem Beispiel werden zwei Eingabekomponenten instanziiert. Die Komponente „Eingabe“ ermöglicht den Empfang eines Formatparameters als Eingabe für die statische Schnittstelle und die Bereitstellung eines Attributwerts als dynamische Eingabe- und Ausgabeschnittstelle. Der Formatparameter hat drei mögliche Werte: string (Standard), int und float. Diese drei Werte entsprechen jeweils drei Datentypen : Zeichenfolgentyp , Ganzzahltyp und Gleitkommatyp. Der Attributwert formatiert Eingabe und Ausgabe entsprechend dem Formatwert. Die Ausgabe des Beispiels sollte wie folgt aussehen:

Hallo Welt
227

Implementierung der Zielkomponente

Um die obige Zielkomponente zu vervollständigen, geben wir zunächst ein Komponentengerüst eines Textfelds an.

TextBox: {
  xml: "<input id=&#39;input&#39; type=&#39;text&#39;/>",
  opt: { format: "string" },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      // 这里需要获取 input 的值并根据 opts.format 值选择适当的格式化函数，
    }
    function setValue(value) {
      // 这里需要根据 opts.format 值选择适当的格式化函数，对 value 进行格式化后同去赋值
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

Der entscheidende Punkt oben ist die Auswahl der Formatierungsfunktion. Der Einfachheit halber verwenden wir die Tabelle Abfrage . Diese Funktion ist während der Komponenteninitialisierungsphase bereit. Die obige Analysefunktion ist die erforderliche Formatierungsfunktion. Es ist jedoch zu beachten, dass der Formatierungsfunktionstyp dieser Komponente festgelegt wird, wenn die Komponente initialisiert wird. Wenn Sie variable Formatierungsfunktionen benötigen, müssen Sie einige Änderungen an der Komponente vornehmen. Okay, die vollständige Textfeldkomponente kann unten angegeben werden.

TextBox: {
  xml: "<input id=&#39;input&#39; type=&#39;text&#39;/>",
  opt: { format: &#39;string&#39; },
  map: { attrs: { input: "disabled value placeholder readonly" } },
  fun: function (sys, items, opts) {
    var parse = {"int": parseInt, "float": parseFloat, "string": String}[opts.format];
    function getValue() {
      return parse(sys.input.prop("value"));
    }
    function setValue(value) {
      sys.input.prop("value", parse(value));
    }
    return Object.defineProperty({}, "value", { get: getValue, set: setValue });
  }
}

Bitte beachten Sie außerdem, dass die oben genannten Komponenten einige Attributzuordnungsinhalte hinzugefügt haben, die je nach Bedarf in bestimmten Projekten hinzugefügt oder gelöscht werden können.

Diese Artikelserie basiert auf dem xmlplus-Framework. Wenn Sie nicht viel über xmlplus wissen, können Sie www.xmlplus.cn besuchen. Eine ausführliche Dokumentation zu den ersten Schritten finden Sie hier.

Das obige ist der detaillierte Inhalt vonEinführung in die Komponenten des JavaScript-Frameworks (xmlplus) (3) TextBox (TextBox). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!