列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的。列表可以做的很简单,只显示 简洁的内容 。列表也可以做的很复杂,用于展示非常丰富的内容 。
组成元素
列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件,它包含一个 列表项组件 Item 以及一个 列表项容器组件 List。
rush:js;">
Item: {
xml: "
"
},List: {
xml: "
"
}
此列表组件尽管简单,但所构建的框架为我们的继续扩展奠定了基础。
动态操作
如上定义的列表组件的最基本的用法 如下所示。这种用法 与原生列表标签 的用法 没什么区别。我们将进行做进一步的改造。
rush:js;">
Example: {
xml: "\
- Item 1
\
- Item 2
\
"
}
列表组件普遍包含添加 、删除 以及修改 这三种操作。为简单起见,不妨先来实现这些操作。由于我们定义的列表项足够的简单,所以这里不再定义新的操作接口,而直接使用系统接口。
rush:js;">
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.f
irs t() && sys.list.f
irs t().remove();
});
sys.modify.on("click",function() {
sys.list.f
irs t() && sys.list.f
irs t().text("Item 2");
});
}
}
该示例使用列表的系统函数 append 来追加列表项,并使用列表项的系统函数 remove 来移除列表项,同时还使用列表项的系统函数 text 来修改 列表项的数据。
由于上面的列表项所包含的是简单的文本数据,所以上面示例使用 text 函数 来操作数据是适合的。现在给出一个 包含较复杂数据的列表项,该列表项额外定义了数据操作接口。
rush:js;">
Item: {
xml: "
\
red
square
",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});
}
}
下面是包含新列表项的列表操作的一个 示例。其中对于组件的追加与删除 还可以使用系统提供的函数 ,但对于数据的获取 与修正就只能使用新定义的接口了。
rush:js;">
Example: {
xml: "
\
\
append \
remove \
modify \
",function() {
sys.list.append("Item");
});
sys.remove.on("click",function() {
sys.list.f
irs t() && items.list.f
irs t().data = {color: "blue",shape: "rectangle"};
});
}
}
对列表项接口的定义没有什么特别的要求,比如一定要使用 setValue 和 getValue 之类。这取决于具体的场景,根据需要灵活选择。
使用第三方列表组件
如今市面上已经有了种种功能 丰富的列表组件,我们可以通过二次封装为我所用。这里结合 JQuery 带有排序功能 的列表组件来说明如何操作。
首先对列表项进行封装,因为这个列表项实在太长了。注意要引出数据操作接口。
rush:xhtml;">
Item: {
xml: "
",map: { appendTo: "data" },opts) {
return { data: sys.data.text };
}
}
其次,定义下列表项的容器组件,该容器组件主要封装 JQuery 的列表初始化代码 ,这里定义了该列表为可排序但不可选。
rush:js;">
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: "
",opts) {
var elem = this.elem();
$(elem)
.so rtable();
$(elem).
dis ableSelection();
}
}
最后我们来看看如何使用该列表组件。该示例的使用与前面没什么不同,但功能 与表现可就大不一样了。
rush:js;">
Example: {
xml: "\
- Item 1
\
- Item 2
\
- Item 3
\
"
}
优化
如果你的列表有频繁更新数据的要求,必然会产生频繁的列表项的增删操作,这可能会带来不好的应用体验。下面给出一个 可行的优化方案,该方案在官方文档的 优化 章节中已出现过。
rush:js;">
List: {
xml: "
",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 });
}
}
对于复杂的列表项,重新创建的代价是巨大的。所以此优化方案尽可能地复用已有的列表项,非必要时只刷新数据而不是删除 并重建新的列表项,只有当已有的列表项不够用时才创建新的列表项。
本系列文章 基于 xmlplus 框架。如果你对 xmlplus 没有多少了解,可以访问 nofollow " href="http://www.xmlplus.cn">www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容 ,希望对大家的学习有所帮助,也希望大家多多支持 编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。