Introduction à la liste des composants du framework JavaScript (xmlplus) (4)

xmlplus est un JavaScriptframework pour le développement rapide de projets front-end et back-end. Cet article présente principalement la liste des séries de conception de composants XMLplus, qui ont une certaine valeur de référence. Les amis intéressés peuvent se référer à

Le composant de liste est un composant extrêmement couramment utilisé et doit être inclus dans de nombreux. Afficher les systèmes de composants. Les listes peuvent être très simples, affichant uniquement un contenu concis. Les listes peuvent également être très complexes et utilisées pour afficher un contenu très riche.

Éléments de composition

Une liste ne peut pas être séparée des éléments de la liste et du conteneur contenant les éléments de la liste. Ce qui suit est le composant de liste le plus simple, qui contient un composant d'élément de liste Item et un composant conteneur d'élément de liste List.

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

Bien que ce composant de liste soit simple, le cadre qu'il construit jette les bases de notre expansion continue.

Opérations dynamiques

L'utilisation la plus basique du composant liste défini ci-dessus est la suivante. Cette utilisation n'est pas différente de l'utilisation des balises de liste natives. Nous apporterons d'autres améliorations.

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

Les composants de liste comprennent généralement trois opérations : ajouter, supprimer et modifier. Par souci de simplicité, implémentons d’abord ces opérations. Étant donné que les éléments de liste que nous avons définis sont assez simples, nous ne définissons plus ici une nouvelle interface d'opération, mais utilisons directement l'interface système.

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");
 });
 }
}

Cet exemple utilise la fonction système de la liste append pour ajouter l'élément de liste, et utilise la fonction système de l'élément de liste supprimer pour supprimer l'élément de liste, tout en utilisant également le système de l'élément de liste texte de fonction pour modifier les données de l’élément de liste.

Étant donné que les éléments de la liste ci-dessus contiennent des données textuelles simples, il est approprié d'utiliser la fonction texte pour opérer sur les données dans l'exemple ci-dessus. Étant désormais donné un élément de liste contenant des données plus complexes, l'élément de liste définit en outre une interface d'opération de données.

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});
 }
}

Voici un exemple d'opération de liste qui contient un nouvel élément de liste. Pour ajouter et supprimer des composants, vous pouvez également utiliser les fonctions fournies par le système, mais pour obtenir et modifier des données, vous ne pouvez utiliser que l'interface nouvellement définie.

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"};
 });
 }
}

Il n'y a pas d'exigences particulières pour la définition de l'interface des éléments de liste. Par exemple, vous devez utiliser setValue et getValue. Cela dépend du scénario spécifique et vous pouvez choisir de manière flexible selon vos besoins.

Utilisation de composants de liste tiers

De nos jours, il existe sur le marché divers composants de liste dotés de fonctions riches, et nous pouvons les utiliser via une encapsulation secondaire. Ici, nous combinons le composant de liste JQuery avec la fonction de tri pour illustrer comment fonctionner.

Encapsulez d’abord l’élément de liste, car cet élément de liste est trop long. Faites attention à l'introduction de l'interface d'exploitation des données.

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 };
 }
}

Deuxièmement, définissez le composant conteneur des éléments de liste suivants. Ce composant conteneur encapsule principalement le code d'initialisation de la liste de JQuery. Ici, la liste est définie comme triable mais non sélectionnable.

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();
 }
}

Enfin, voyons comment utiliser le composant liste. L'utilisation de cet exemple n'est pas différente du précédent, mais les fonctionnalités et les performances sont assez différentes.

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

Optimisation

Si votre liste nécessite une mise à jour fréquente des données, il y aura inévitablement des ajouts et des suppressions fréquents d'éléments de liste, ce qui peut entraîner Apporte une mauvaise expérience d’application. Un plan d'optimisation réalisable est donné ci-dessous, qui est apparu dans le chapitre optimisation du document officiel.

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 });
 }
}

Pour les éléments de liste complexes, le coût de recréation est énorme. Par conséquent, ce plan d'optimisation réutilise autant que possible les éléments de liste existants, actualise les données uniquement lorsque cela est nécessaire au lieu de supprimer et de reconstruire de nouveaux éléments de liste, et crée de nouveaux éléments de liste uniquement lorsque les éléments de liste existants ne suffisent pas.

Cette série d'articles est basée sur le framework xmlplus. Si vous ne savez pas grand-chose sur XMLplus, vous pouvez visiter www.xmlplus.cn. Une documentation détaillée de démarrage est disponible ici.

[Recommandations associées]

1. Tutoriel vidéo en ligne js gratuit

2. Manuel de référence en chinois JavaScript

.

3. php.cn Dugu Jiujian (3) - Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!