xmlplus组件设计系列之列表（4）
列表组件是极其常用的一类组件，是许多视图组件系统的必须包含的。列表可以做的很简单，只显示简洁的内容。列表也可以做的很复杂，用于展示非常丰富的内容。
组成元素
列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件，它包含一个列表项组件Item以及一个列表项容器组件List。
Item:{
xml:"
此列表组件尽管简单，但所构建的框架为我们的继续扩展奠定了基础。
动态操作
如上定义的列表组件的最基本的用法如下所示。这种用法与原生列表标签的用法没什么区别。我们将进行做进一步的改造。
Example:{
xml:"\
- Item1
\
- Item2
\
"
}
列表组件普遍包含添加、删除以及修改这三种操作。为简单起见，不妨先来实现这些操作。由于我们定义的列表项足够的简单，所以这里不再定义新的操作接口，而直接使用系统接口。
Example:{
xml:"\
append\
remove\
modify\
该示例使用列表的系统函数append来追加列表项，并使用列表项的系统函数remove来移除列表项，同时还使用列表项的系统函数text来修改列表项的数据。
由于上面的列表项所包含的是简单的文本数据，所以上面示例使用text函数来操作数据是适合的。现在给出一个包含较复杂数据的列表项，该列表项额外定义了数据操作接口。
Item:{
xml:"\
red
square
",
fun:function(sys,items,opts){
functiongetValue(){
return{color:sys.color.text(),shape:sys.shape.text()};
}
functionsetValue(obj){
sys.color.text(obj.color);
sys.shape.text(obj.shape);
}
returnObject.defineProperty({},"data",{get:getValue,set:setValue});
}
}
下面是包含新列表项的列表操作的一个示例。其中对于组件的追加与删除还可以使用系统提供的函数，但对于数据的获取与修正就只能使用新定义的接口了。
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"};
});
}
}
对列表项接口的定义没有什么特别的要求，比如一定要使用setValue和getValue之类。这取决于具体的场景，根据需要灵活选择。
使用第三方列表组件
如今市面上已经有了种种功能丰富的列表组件，我们可以通过二次封装为我所用。这里结合JQuery带有排序功能的列表组件来说明如何操作。
首先对列表项进行封装，因为这个列表项实在太长了。注意要引出数据操作接口。
Item:{
xml:"
其次，定义下列表项的容器组件，该容器组件主要封装JQuery的列表初始化代码，这里定义了该列表为可排序但不可选。
List:{
css:"#list{list-style-type:none;margin:0;padding:0;width:60%;}\
#listli{margin:03px3px3px;padding:0.4em;padding-left:1.5em;font-size:1.4em;height:18px;}\
#listlispan{position:absolute;margin-left:-1.3em;}",
xml:"
最后我们来看看如何使用该列表组件。该示例的使用与前面没什么不同，但功能与表现可就大不一样了。
Example:{
xml:"\
- Item1
\
- Item2
\
- Item3
\
"
}
优化
如果你的列表有频繁更新数据的要求，必然会产生频繁的列表项的增删操作，这可能会带来不好的应用体验。下面给出一个可行的优化方案，该方案在官方文档的优化章节中已出现过。
List:{
xml:"
对于复杂的列表项，重新创建的代价是巨大的。所以此优化方案尽可能地复用已有的列表项，非必要时只刷新数据而不是删除并重建新的列表项，只有当已有的列表项不够用时才创建新的列表项。
本系列文章基于xmlplus框架。如果你对xmlplus没有多少了解，可以访问www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。