列表組件是極其常用的一類組件，是許多視圖組件系統的必須包含的。列表可以做的很簡單，只顯示簡潔的內容。列表也可以做的很復雜，用于展示非常豐富的內容。
組成元素
列表離不開列表項以及包含列表項的容器。下面是最簡單的列表組件，它包含一個列表項組件 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。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
