xmlplus组件设计系列之列表（4）
列表组件是极其常用的一类组件，是许多视图组件系统的必须包含的。列表可以做的很简单，只显示简洁的内容。列表也可以做的很复杂，用于展示非常丰富的内容。
组成元素
列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件，它包含一个列表项组件 Item 以及一个列表项容器组件 List。
Item: {
xml: "<li id='item'/>"
},
List: {
xml: "<ul id='list'/>"
}
此列表组件尽管简单，但所构建的框架为我们的继续扩展奠定了基础。
动态操作
如上定义的列表组件的最基本的用法如下所示。这种用法与原生列表标签的用法没什么区别。我们将进行做进一步的改造。
Example: {
xml: "<List id='example'>\
<Item>Item 1</Item>\
<Item>Item 2</Item>\
</List>"
}
列表组件普遍包含添加、删除以及修改这三种操作。为简单起见，不妨先来实现这些操作。由于我们定义的列表项足够的简单，所以这里不再定义新的操作接口，而直接使用系统接口。
Example: {
xml: "<div id='example'>\
<List id='list'/>\
<button id='append'>append</button>\
<button id='remove'>remove</button>\
<button id='modify'>modify</button>\
</div>",
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");
});
}
}
该示例使用列表的系统函数 append 来追加列表项，并使用列表项的系统函数 remove 来移除列表项，同时还使用列表项的系统函数 text 来修改列表项的数据。
由于上面的列表项所包含的是简单的文本数据，所以上面示例使用 text 函数来操作数据是适合的。现在给出一个包含较复杂数据的列表项，该列表项额外定义了数据操作接口。
Item: {
xml: "<li id='item'>\
<span id='color'>red</span>
<span id='shape'>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});
}
}
下面是包含新列表项的列表操作的一个示例。其中对于组件的追加与删除还可以使用系统提供的函数，但对于数据的获取与修正就只能使用新定义的接口了。
Example: {
xml: "<div id='example'>\
<List id='list'/>\
<button id='append'>append</button>\
<button id='remove'>remove</button>\
<button id='modify'>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"};
});
}
}
对列表项接口的定义没有什么特别的要求，比如一定要使用 setValue 和 getValue 之类。这取决于具体的场景，根据需要灵活选择。
使用第三方列表组件
如今市面上已经有了种种功能丰富的列表组件，我们可以通过二次封装为我所用。这里结合 JQuery 带有排序功能的列表组件来说明如何操作。
首先对列表项进行封装，因为这个列表项实在太长了。注意要引出数据操作接口。
Item: {
xml: "<li class='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s'/><span id='data'/></li>",
map: { appendTo: "data" },
fun: function (sys, items, opts) {
return { data: sys.data.text };
}
}
其次，定义下列表项的容器组件，该容器组件主要封装 JQuery 的列表初始化代码，这里定义了该列表为可排序但不可选。
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='list'/>",
fun: function (sys, items, opts) {
var elem = this.elem();
$(elem).sortable();
$(elem).disableSelection();
}
}
最后我们来看看如何使用该列表组件。该示例的使用与前面没什么不同，但功能与表现可就大不一样了。
Example: {
xml: "<List id='example'>\
<Item>Item 1</Item>\
<Item>Item 2</Item>\
<Item>Item 3</Item>\
</List>"
}
优化
如果你的列表有频繁更新数据的要求，必然会产生频繁的列表项的增删操作，这可能会带来不好的应用体验。下面给出一个可行的优化方案，该方案在官方文档的 优化 章节中已出现过。
List: {
xml: "<ul id='list'/>",
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 });
}
}
对于复杂的列表项，重新创建的代价是巨大的。所以此优化方案尽可能地复用已有的列表项，非必要时只刷新数据而不是删除并重建新的列表项，只有当已有的列表项不够用时才创建新的列表项。
本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
bind函数，顾名思义，用于为调用函数绑定一个作用域，因为this很容易跟丢它原来所在的作用域，直接指向顶层的window对象。2010-01-01
这篇文章主要为大家详细介绍了基于iScroll实现下拉刷新和上滑加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
用javascript实现一下所谓的动态渐变，考虑动态原因就不上图了，我来简单介绍下思路2014-05-05
下面小编就为大家带来一篇基于js对象,操作属性、方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细解析了Boostrap 栅格布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2017-01-01
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。 event对象只在事件发生的过程中才有效。2008-04-04
可能很多人看到这个题目就会想到LABjs、RequireJS、SeaJS... 这些库，但无奈小编没用过这些库，什么 AMD 、CMD 哪来那么多术语... 前端的库太多了，要看各种乱七八糟的文档，好难啊，还不如自己写一个库呢。于是就有了这文章，有需要的朋友们下面来一起学习学习吧。2016-11-11
下面小编就为大家带来一篇简单谈谈axios中的get,post方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JavaScript乘法口诀表的简单实现，文中给出了详细的示例代码，这样对大家的理解和学习更有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
最新评论