xmlplus組件設(shè)計系列之列表(4)
列表組件是極其常用的一類組件,是許多視圖組件系統(tǒng)的必須包含的。列表可以做的很簡單,只顯示簡潔的內(nèi)容。列表也可以做的很復(fù)雜,用于展示非常豐富的內(nèi)容。
組成元素
列表離不開列表項以及包含列表項的容器。下面是最簡單的列表組件,它包含一個列表項組件 Item 以及一個列表項容器組件 List。
Item: { xml: "<li id='item'/>" }, List: { xml: "<ul id='list'/>" }
此列表組件盡管簡單,但所構(gòu)建的框架為我們的繼續(xù)擴展奠定了基礎(chǔ)。
動態(tài)操作
如上定義的列表組件的最基本的用法如下所示。這種用法與原生列表標(biāo)簽的用法沒什么區(qū)別。我們將進行做進一步的改造。
Example: { xml: "<List id='example'>\ <Item>Item 1</Item>\ <Item>Item 2</Item>\ </List>" }
列表組件普遍包含添加、刪除以及修改這三種操作。為簡單起見,不妨先來實現(xiàn)這些操作。由于我們定義的列表項足夠的簡單,所以這里不再定義新的操作接口,而直接使用系統(tǒng)接口。
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"); }); } }
該示例使用列表的系統(tǒng)函數(shù) append 來追加列表項,并使用列表項的系統(tǒng)函數(shù) remove 來移除列表項,同時還使用列表項的系統(tǒng)函數(shù) text 來修改列表項的數(shù)據(jù)。
由于上面的列表項所包含的是簡單的文本數(shù)據(jù),所以上面示例使用 text 函數(shù)來操作數(shù)據(jù)是適合的?,F(xiàn)在給出一個包含較復(fù)雜數(shù)據(jù)的列表項,該列表項額外定義了數(shù)據(jù)操作接口。
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}); } }
下面是包含新列表項的列表操作的一個示例。其中對于組件的追加與刪除還可以使用系統(tǒng)提供的函數(shù),但對于數(shù)據(jù)的獲取與修正就只能使用新定義的接口了。
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 之類。這取決于具體的場景,根據(jù)需要靈活選擇。
使用第三方列表組件
如今市面上已經(jīng)有了種種功能豐富的列表組件,我們可以通過二次封裝為我所用。這里結(jié)合 JQuery 帶有排序功能的列表組件來說明如何操作。
首先對列表項進行封裝,因為這個列表項實在太長了。注意要引出數(shù)據(jù)操作接口。
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(); } }
最后我們來看看如何使用該列表組件。該示例的使用與前面沒什么不同,但功能與表現(xiàn)可就大不一樣了。
Example: { xml: "<List id='example'>\ <Item>Item 1</Item>\ <Item>Item 2</Item>\ <Item>Item 3</Item>\ </List>" }
優(yōu)化
如果你的列表有頻繁更新數(shù)據(jù)的要求,必然會產(chǎn)生頻繁的列表項的增刪操作,這可能會帶來不好的應(yīng)用體驗。下面給出一個可行的優(yōu)化方案,該方案在官方文檔的 優(yōu)化 章節(jié)中已出現(xiàn)過。
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 }); } }
對于復(fù)雜的列表項,重新創(chuàng)建的代價是巨大的。所以此優(yōu)化方案盡可能地復(fù)用已有的列表項,非必要時只刷新數(shù)據(jù)而不是刪除并重建新的列表項,只有當(dāng)已有的列表項不夠用時才創(chuàng)建新的列表項。
本系列文章基于 xmlplus 框架。如果你對 xmlplus 沒有多少了解,可以訪問 www.xmlplus.cn。這里有詳盡的入門文檔可供參考。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- xmlplus組件設(shè)計系列之網(wǎng)格(DataGrid)(10)
- xmlplus組件設(shè)計系列之文本框(TextBox)(3)
- xmlplus組件設(shè)計系列之選項卡(Tabbar)(5)
- xmlplus組件設(shè)計系列之下拉刷新(PullRefresh)(6)
- xmlplus組件設(shè)計系列之路由(ViewStack)(7)
- xmlplus組件設(shè)計系列之分隔框(DividedBox)(8)
- xmlplus組件設(shè)計系列之樹(Tree)(9)
- xmlplus組件設(shè)計系列之按鈕(2)
- xmlplus組件設(shè)計系列之圖標(biāo)(ICON)(1)
相關(guān)文章
JavaScript NodeTree導(dǎo)航欄(菜單項JSON類型/自制)
利用閑暇時間自己做了個JavaScript NodeTree,網(wǎng)上有很多類似的效果,本例主要是練練手,鞏固下知識,感興趣的朋友可以了解下,或許對你學(xué)習(xí)NodeTree導(dǎo)航欄有所幫助,認(rèn)為好的就分享嘍2013-02-02javascript獲取下拉列表框當(dāng)中的文本值示例代碼
需要將用戶點擊下拉列表當(dāng)中某個選項后,將其所選的內(nèi)容保存起來,下面與大家分享下如何使用js獲取下拉列表框文本值,由此需求的朋友可以參考下2013-07-07每天一篇javascript學(xué)習(xí)小結(jié)(RegExp對象)
這篇文章主要介紹了javascript中的RegExp對象知識點,對RegExp對象的基本使用方法,以及各種方法進行整理,感興趣的小伙伴們可以參考一下2015-11-11JavaScript 模式之工廠模式(Factory)應(yīng)用介紹
工廠模式也是對象創(chuàng)建模式之一,它通常在類或類的靜態(tài)方法中去實現(xiàn),本文將詳細介紹JavaScript 工廠模式2012-11-11深入理解JavaScript Promise鏈?zhǔn)秸{(diào)用與錯誤處理機制
在JavaScript的異步編程中,Promise是一個非常重要的概念,它允許我們以鏈?zhǔn)降姆绞教幚懋惒讲僮?使得代碼更加清晰和易于管理,本文將通過一系列代碼示例,深入探討Promise的鏈?zhǔn)秸{(diào)用和錯誤處理機制,需要的朋友可以參考下2024-09-09js 數(shù)組操作之pop,push,unshift,splice,shift
本篇文章主要介紹了js數(shù)組操作之pop,push,unshift,splice,shift。需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01javascript Array數(shù)組對象的擴展函數(shù)代碼
我們經(jīng)常給 String,Function,Array 的原型加上自定義的擴展函數(shù),比如去除字符串空格,數(shù)組排序等2010-05-05Javascript實現(xiàn)快速排序(Quicksort)的算法詳解
排序算法(Sorting algorithm)是計算機科學(xué)最古老、最基本的課題之一,要想成為合格的程序員,就必須理解和掌握各種排序算法。2015-09-09