Introduction to JavaScript framework (xmlplus) components (4) list

xmlplus is a JavaScriptframework used for rapid development of front-end and back-end projects. This article mainly introduces the list of xmlplus component design series, which has certain reference value. Interested friends can refer to

List group is an extremely commonly used component. , which must be included in many View component systems. Lists can be made very simple, showing only concise content. Lists can also be made very complex and used to display very rich content.

Component elements

A list cannot be separated from the list items and the container containing the list items. The following is the simplest list component, which contains a list item component Item and a list item container component List.

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

Although this list component is simple, the framework it builds lays the foundation for our continued expansion.

Dynamic operation

The most basic usage of the list component defined above is as follows. This usage is no different from the usage of native list tags. We will make further improvements.

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

List components generally include three operations: add, delete and modify. For the sake of simplicity, let’s implement these operations first. Since the list items we defined are simple enough, we no longer define a new operation interface here, but use the system interface directly.

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

This example uses the list's system function append to append the list item, and uses the list item's system function remove to remove the list item. It also uses the list item's system function text to Modify the data of a list item.

Since the above list items contain simple text data, it is appropriate to use the text function to operate on the data in the above example. Now given a list item containing more complex data, the list item additionally defines a data operation interface.

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

The following is an example of a list operation that contains new list items. For adding and deleting components, you can also use the functions provided by the system, but for data acquisition and modification, you can only use the newly defined interface.

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

There are no special requirements for the definition of the list item interface. For example, you must use setValue and getValue. This depends on the specific scenario, and you can choose flexibly as needed.

Using third-party list components

Now there are various list components with rich functions on the market, and we can use them through secondary encapsulation. Here we combine the JQuery list component with sorting function to illustrate how to operate.

First encapsulate the list item, because this list item is too long. Pay attention to the data operation interface.

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

Secondly, define the container component of the following list items. This container component mainly encapsulates JQuery's list initialization code. Here, the list is defined as sortable but not selectable.

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

Finally let’s take a look at how to use the list component. The use of this example is no different from the previous one, but the functionality and performance are quite different.

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

Optimization

If your list has frequent data update requirements, frequent additions and deletions of list items will inevitably occur, which may cause Bad app experience. A feasible optimization plan is given below, which has appeared in the optimization chapter of the official document.

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

For complex list items, the cost of re-creation is huge. Therefore, this optimization plan reuses existing list items as much as possible, only refreshes data when necessary instead of deleting and rebuilding new list items, and only creates new list items when the existing list items are not enough.

This series of articles is based on the xmlplus framework. If you don’t know much about xmlplus, you can visit www.xmlplus.cn. Detailed getting started documentation is available here.

【Related recommendations】

1. Free js online video tutorial

2. JavaScript Chinese Reference Manual

3. php.cn Dugu Jiujian (3) - JavaScript video tutorial

The above is the detailed content of Introduction to JavaScript framework (xmlplus) components (4) list. For more information, please follow other related articles on the PHP Chinese website!