Einführung in die Komponenten des JavaScript-Frameworks (xmlplus) (Neun) Baum (Baum)

xmlplus ist ein JavaScript-Framework, das für die schnelle Entwicklung von Front-End- und Back-End-Projekten verwendet wird. In diesem Artikel wird hauptsächlich der Baum der xmlplus-Komponentendesignreihe vorgestellt, der einen gewissen Referenzwert hat.

Die Baumkomponente ist eine Komponente mit einer hierarchischen Struktur und wird häufig in verschiedenen Arten von Szenen verwendet. In diesem Kapitel wird eine einfache Baumkomponente implementiert. Obwohl ihre Funktionalität begrenzt ist, können Sie sie erweitern, um die benötigte Baumkomponente zu implementieren.

Datenquelle

Die Datenquelle der Baumkomponente kann ein Datenobjekt im JSON-Format sein oder es kann ein Datenobjekt mit XML-strukturierten Daten oder anderen hierarchisch strukturierten Daten sein. In diesem Kapitel werden Datenobjekte mit dem folgenden JSON-Format verwendet.

var data = {
 name: 'My Tree',
 children: [
 { name: 'hello' },
 { name: 'world' },
 {
  name: 'child folder',
  children: [
  { name: 'alice' }
  ]
 }
 ]
};

In der obigen Datenquelle wird der Namenswert als Name des Baumknotens angezeigt, und das Array mit den untergeordneten Elementen stellt die untergeordneten Elemente des Knotens dar.

Design der rekursiven Struktur

Das Objekt besteht aus den Listenelementen ul und li in HTML. Das Objekt hat eine natürliche Baumstruktur Wir verwenden sie gut als Grundelemente für den Aufbau von Baumkomponenten. Die äußerste Schicht der Baumkomponente muss ein ul-Element sein, daher können wir die Baumkomponente vorübergehend wie folgt definieren:

Tree: {
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`
}

Die undefinierte Komponente Element hier ist eine Unterelementkomponente, die rekursiv definiert werden muss . Nachkommende Objekte werden basierend auf den bereitgestellten Daten rekursiv generiert. Hier ist ein mögliches Design:

Item: {
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;/>
   </li>`,
 map: { defer: "entries" }
}

Beachten Sie, dass das obige Neme-Objekt zur Anzeige des Namensattributs verwendet wird. Das Erweiterungsobjekt wird zum Erweitern oder Schließen von untergeordneten Objekteinträgen verwendet. Untergeordnete Objekteinträge sind so eingerichtet, dass eine verzögerte Instanziierung erforderlich ist, und werden nur dann instanziiert, wenn der Benutzer auf das erweiterte Objekt klickt, um das untergeordnete Objekt zu erweitern.

Laden und Rendern von Daten

Wie im vorherigen Abschnitt erwähnt, legen wir fest, dass die untergeordneten Objekteinträge träge instanziiert werden. Daher sollte die für den Unterpunkt „Item“ bereitgestellte Dateneinstellungsschnittstelle die Einträge nicht sofort instanziieren. Im Folgenden geben wir zunächst die Datenschnittstellenfunktion an.

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data;
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Dieser Schnittstellenfunktionswert legt lediglich den Inhalt fest, der sich auf den aktuellen Knoten bezieht. Als nächstes hören wir auf das Klickereignis des Erweiterungsobjekts und schließen die Instanziierung der Komponentenobjekteinträge rechtzeitig ab.

Item: {
 // css, xml, map 项同上
 fun: function (sys, items, opts) {
  var data, open;
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 0 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Der obige Code enthält einen offenen Parameter, der aufzeichnet, ob sich der aktuelle Knoten in einem erweiterten Zustand zur Verwendung durch verwandte Listener befindet.

Knoten dynamisch hinzufügen

Jetzt nehmen wir eine kleine Erweiterung an der obigen Komponente vor, damit sie die Funktion des dynamischen Hinzufügens von Baumknoten unterstützt. Zuerst fügen wir dem untergeordneten Objekt der Objekteinträge eine Auslöseschaltfläche hinzu und nennen sie „add“.

Item: {
 xml: "<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>",
 map: { defer: "entries" }
}

Zweitens müssen Sie das Klickereignis des Add-Objekts abhören und das Hinzufügen des Objekts im Listener abschließen.

Item: {
 // css, xml, map 项同前
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id='add']", function () {
   var stuff = {name: 'new stuff'};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  // 其余代码同前
 }
}

Hier ist zu beachten, dass die Listening-Methode für das Add-Objekt nicht direkt verwendet werden kann: sys.add.on("click",...), aber die Proxy-Methode sollte verwendet werden, andernfalls wird ein Fehler gemeldet. Da es sich bei der übergeordneten Komponente um eine verzögert instanziierte Komponente handelt, ist das Add-Objekt erst sichtbar, wenn das Einträge-Objekt instanziiert wird.

Vollständige Baumkomponente

Basierend auf dem obigen Inhalt wird nun eine vollständige Version der Baumkomponente gegeben:

Tree: {
 css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
   #tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
 xml: `<ul id=&#39;tree&#39;>
   <Item id=&#39;item&#39;/>
   </ul>`,
 fun: function (sys, items, opts) {
  return items.item;
 }
},
Item: {
 css: "#item { cursor: pointer; }",
 xml: `<li id=&#39;item&#39;>
   <p id=&#39;content&#39;>
    <span id=&#39;neme&#39;/><span id=&#39;expand&#39;/>
   </p>
   <ul id=&#39;entries&#39;>
    <li id=&#39;add&#39;>+</li>
   </ul>
   </li>`,
 map: { defer: "entries" },
 fun: function (sys, items, opts) {
  var data, open;
  sys.item.on("click", "//*[@id=&#39;add&#39;]", function () {
   var stuff = {name: &#39;new stuff&#39;};
   data.children.push(stuff);
   sys.add.before("Item").value().val(stuff);
  });
  sys.expand.on("click", function () {
   open = !open;
   sys.expand.text(open ? " [-]" : " [+]");
   open ? (sys.entries.show() && load()) : sys.entries.hide();
  });
  function load() {
   if ( sys.entries.children().length == 1 )
    for ( var item of data.children )
    sys.add.before("Item").value().val(item);
  }
  function val(value) {
   data = value;
   sys.neme.text(data.name);
   data.children && data.children.length && sys.expand.show().text(" [+]");
  }
  return { val: val };
 }
}

Die Baumkomponente in tatsächlichen Anwendungen wird funktionaler sein als hier. Sie können sie basierend auf dem obigen Code weiter verbessern, z. B. indem Sie einige ICON-Symbole hinzufügen, Unterelemente ziehbar machen usw. Es ist jedoch sehr wichtig, den Code während des Verbesserungsprozesses so weit wie möglich zu komplizieren. Es ist notwendig, einen Teil des Codes entsprechend zu entfernen und in Komponenten zu kapseln.

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 Chinese Reference Manual

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

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