Introduction to the JavaScript framework (xmlplus) component (iv) List

Xmlplus is a JavaScript framework used to quickly develop frontend and backend projects. This article mainly introduces the list of xmlplus component design series, which has some reference value. If you are interested, refer to xmlplus as a JavaScript framework for fast development of front-end and back-end projects. This article mainly introduces the list of xmlplus component design series, which has some reference value. If you are interested, please refer to it.

List components are very common components and must be included by many view component systems. The list can be very simple, and only simple content is displayed. The list can also be complex and used to display rich content.

Component

The list cannot be separated from the list items and containers that contain 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: "
"},List: { xml: "
  
  

    "} 
  

Despite being simple, the framework built on this list lays the foundation for continued expansion.

Dynamic Operation

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

Example: { xml: "
 
  \  
  
   Item 1
  \  
  
   Item 2
  \  
 "}

List components generally include the add, delete, and modify operations. For simplicity, you may wish to implement these operations first. Because the list items we define are simple enough, we will not define new operation interfaces here, but directly use system interfaces.

Example: { xml: "
\  
  
   \  
   append\  
   remove\  
   modify\  
  
", 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 system function append to append the list items, and uses the list item system function remove to remove the list items, the system function text of the list item is also used to modify the data of the list item.

Since the list items above contain simple text data, it is suitable to use the text function in the above example to operate data. A list item containing more complex data is provided, which defines an additional data operation interface.

Item: { xml: "
\  red  square  
", 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 a new list item. You can also use the functions provided by the system to append and delete components. However, you can only use the newly defined interfaces for data acquisition and correction.

Example: { xml: "
\  
  
   \  
   append\  
   remove\  
   modify\  
  ", 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, such as using setValue and getValue. This depends on the specific scenario and can be selected flexibly as needed.

Use third-party list Components

Now there are various list components available in the market. We can use them through secondary encapsulation. The following describes how to operate the list component with the sorting function of JQuery.

First, encapsulate the list item because it is too long. Note that the data operation interface should be introduced.

Item: { xml: "
", map: { appendTo: "data" }, fun: function (sys, items, opts) { return { data: sys.data.text }; }}

Second, define the container component of the list item. This container component mainly encapsulates the JQuery list initialization code. This list is defined as sortable but not optional.

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: "
 
 

  
  ", fun: function (sys, items, opts) { var elem = this.elem(); $(elem).sortable(); $(elem).disableSelection(); }}
 
 

Finally, let's see how to use the list component. The usage of this example is no different from the previous one, but its functions and performance are quite different.

Example: { xml: "
 
  \  
  
   Item 1
  \  
  
   Item 2
  \  
  
   Item 3
  \  
 "}

Optimization

If your list requires frequent data updates, frequent addition and deletion of list items will inevitably occur, which may lead to poor application experience. A feasible optimization scheme is provided below, which has already appeared in the optimization chapter of the official documentation.

List: { xml: "
 
 

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

The re-creation of complex list items is costly. Therefore, this optimization scheme tries to reuse existing list items as much as possible. If not necessary, only the data is refreshed instead of the re-created list items are deleted. A new list item is created only when the existing list items are insufficient.

This series of articles is based on the xmlplus framework. If you do not know much about xmlplus, visit www.xmlplus.cn. Here are detailed introductory documents for your reference.