Einführung in die Liste der Komponenten des JavaScript-Frameworks (xmlplus) (4).

xmlplus ist ein JavaScriptFramework für die schnelle Entwicklung von Front-End- und Back-End-Projekten. In diesem Artikel wird hauptsächlich die Liste der xmlplus-Komponentendesignserien vorgestellt, die einen gewissen Referenzwert haben.

Listenkomponente ist eine äußerst häufig verwendete Komponente, die in vielen enthalten sein muss Ansicht Komponentensysteme. Listen können sehr einfach erstellt werden und nur prägnante Inhalte anzeigen. Listen können auch sehr komplex gestaltet werden und zur Anzeige sehr umfangreicher Inhalte verwendet werden.

Kompositionselemente

Eine Liste kann nicht von den Listenelementen und dem Container, der die Listenelemente enthält, getrennt werden. Das Folgende ist die einfachste Listenkomponente, die eine Listenelementkomponente Item und eine Listenelementcontainerkomponente List enthält.

Item: {
 xml: "<li id=&#39;item&#39;/>"
},
List: {
 xml: "<ul id=&#39;list&#39;/>"
}

Obwohl diese Listenkomponente einfach ist, legt das Framework, das sie aufbaut, den Grundstein für unsere weitere Expansion.

Dynamische Operationen

Die grundlegendste Verwendung der oben definierten Listenkomponente ist wie folgt. Diese Verwendung unterscheidet sich nicht von der Verwendung nativer Listen-Tags. Wir werden weitere Verbesserungen vornehmen.

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  </List>"
}

Listenkomponenten umfassen im Allgemeinen drei Vorgänge: Hinzufügen, Löschen und Ändern. Der Einfachheit halber implementieren wir diese Vorgänge zunächst. Da die von uns definierten Listenelemente einfach genug sind, definieren wir hier keine neue Bedienschnittstelle mehr, sondern verwenden direkt die Systemschnittstelle.

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </p>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item").text("Item 1");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && sys.list.first().text("Item 2");
 });
 }
}

In diesem Beispiel wird die Systemfunktion der Liste append verwendet, um das Listenelement anzuhängen, und die Systemfunktion „remove“ des Listenelements wird verwendet, um das Listenelement zu entfernen, wobei auch das System des Listenelements verwendet wird Funktionstext zum Ändern der Daten des Listenelements.

Da die obigen Listenelemente einfache Textdaten enthalten, ist es sinnvoll, die Textfunktion zu verwenden, um die Daten im obigen Beispiel zu bearbeiten. Wenn nun ein Listenelement vorliegt, das komplexere Daten enthält, definiert das Listenelement zusätzlich eine Datenoperationsschnittstelle.

Item: {
 xml: "<li id=&#39;item&#39;>\
  <span id=&#39;color&#39;>red</span>
  <span id=&#39;shape&#39;>square</span>
  </li>",
 fun: function (sys, items, opts) {
 function getValue() {
  return {color: sys.color.text(), shape: sys.shape.text()};
 }
 function setValue(obj) {
  sys.color.text(obj.color);
  sys.shape.text(obj.shape);
 }
 return Object.defineProperty({}, "data", { get: getValue, set: setValue});
 }
}

Das Folgende ist ein Beispiel für eine Listenoperation, die ein neues Listenelement enthält. Für das Hinzufügen und Löschen von Komponenten stehen Ihnen ebenfalls die vom System bereitgestellten Funktionen zur Verfügung, für die Beschaffung und Änderung von Daten steht Ihnen jedoch nur die neu definierte Schnittstelle zur Verfügung.

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </List>",
 fun: function (sys, items, opts) {
 sys.append.on("click", function() {
  sys.list.append("Item");
 });
 sys.remove.on("click", function() {
  sys.list.first() && sys.list.first().remove();
 });
 sys.modify.on("click", function() {
  sys.list.first() && items.list.first().data = {color: "blue", shape: "rectangle"};
 });
 }
}

Für die Definition der Listenelementschnittstelle gibt es keine besonderen Anforderungen. Beispielsweise müssen Sie setValue und getValue verwenden. Dies hängt vom jeweiligen Szenario ab und Sie können flexibel nach Ihren Bedürfnissen wählen.

Verwendung von Listenkomponenten von Drittanbietern

Heutzutage gibt es verschiedene Listenkomponenten mit umfangreichen Funktionen auf dem Markt, die wir durch sekundäre Kapselung nutzen können. Hier kombinieren wir die Listenkomponente JQuery mit der Sortierfunktion, um die Funktionsweise zu veranschaulichen.

Kapseln Sie zuerst das Listenelement, da dieses Listenelement zu lang ist. Achten Sie auf die Einführung der Datenbetriebsschnittstelle.

Item: {
 xml: "<li class=&#39;ui-state-default&#39;><span class=&#39;ui-icon ui-icon-arrowthick-2-n-s&#39;/><span id=&#39;data&#39;/></li>",
 map: { appendTo: "data" },
 fun: function (sys, items, opts) {
 return { data: sys.data.text };
 }
}

Zweitens definieren Sie die Containerkomponente der folgenden Listenelemente. Diese Containerkomponente kapselt hauptsächlich den Listeninitialisierungscode von JQuery. Hier ist die Liste als sortierbar, aber nicht auswählbar definiert.

List: {
 css: "#list{ list-style-type: none; margin: 0; padding: 0; width: 60%; }\
  #list li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }\
  #list li span { position: absolute; margin-left: -1.3em; }",
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 var elem = this.elem();
 $(elem).sortable();
 $(elem).disableSelection();
 }
}

Schließlich werfen wir einen Blick auf die Verwendung der Listenkomponente. Die Verwendung dieses Beispiels unterscheidet sich nicht vom vorherigen, die Funktionalität und Leistung unterscheiden sich jedoch erheblich.

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  <Item>Item 3</Item>\
  </List>"
}

Optimierung

Wenn Ihre Liste Anforderungen an die häufige Aktualisierung von Daten stellt, kommt es unweigerlich zu häufigen Hinzufügungen und Löschungen von Listenelementen, was zu Problemen führen kann Bringt eine schlechte Anwendungserfahrung mit sich. Nachfolgend finden Sie einen realisierbaren Optimierungsplan, der im Optimierungskapitel des offiziellen Dokuments enthalten ist.

List: {
 xml: "<ul id=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 function setValue(array) {
  var list = sys.list.children();
  for ( var i = 0; i < array.length; i++ )
  (list[i] || sys.list.append("Item")).show().text(array[i]);
  for ( var k = i; k < list.length; k++ )
  list[k].hide();
 }
 return Object.defineProperty({}, "value", { set: setValue });
 }
}

Bei komplexen Listenelementen sind die Kosten für die Neuerstellung enorm. Daher verwendet dieser Optimierungsplan vorhandene Listenelemente so weit wie möglich wieder, aktualisiert Daten nur bei Bedarf, anstatt neue Listenelemente zu löschen und neu zu erstellen, und erstellt nur dann neue Listenelemente, wenn die vorhandenen Listenelemente nicht ausreichen.

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.

[Verwandte Empfehlungen]

1. Kostenloses JS-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3. php.cn Dugu Jiujian (3) – JavaScript-Video-Tutorial

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