快捷導(dǎo)航

xmlplus組件設(shè)計(jì)系列之列表（4）

更新時(shí)間：2017年04月26日 12:00:55 作者：qudou

xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

列表組件是極其常用的一類組件，是許多視圖組件系統(tǒng)的必須包含的。列表可以做的很簡(jiǎn)單，只顯示簡(jiǎn)潔的內(nèi)容。列表也可以做的很復(fù)雜，用于展示非常豐富的內(nèi)容。

組成元素

列表離不開列表項(xiàng)以及包含列表項(xiàng)的容器。下面是最簡(jiǎn)單的列表組件，它包含一個(gè)列表項(xiàng)組件 Item 以及一個(gè)列表項(xiàng)容器組件 List。

Item: {
 xml: "<li id='item'/>"
},
List: {
 xml: "<ul id='list'/>"
}

此列表組件盡管簡(jiǎn)單，但所構(gòu)建的框架為我們的繼續(xù)擴(kuò)展奠定了基礎(chǔ)。

動(dòng)態(tài)操作

如上定義的列表組件的最基本的用法如下所示。這種用法與原生列表標(biāo)簽的用法沒什么區(qū)別。我們將進(jìn)行做進(jìn)一步的改造。

Example: {
 xml: "<List id='example'>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  </List>"
}

列表組件普遍包含添加、刪除以及修改這三種操作。為簡(jiǎn)單起見，不妨先來(lái)實(shí)現(xiàn)這些操作。由于我們定義的列表項(xiàng)足夠的簡(jiǎ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 來(lái)追加列表項(xiàng)，并使用列表項(xiàng)的系統(tǒng)函數(shù) remove 來(lái)移除列表項(xiàng)，同時(shí)還使用列表項(xiàng)的系統(tǒng)函數(shù) text 來(lái)修改列表項(xiàng)的數(shù)據(jù)。

由于上面的列表項(xiàng)所包含的是簡(jiǎn)單的文本數(shù)據(jù)，所以上面示例使用 text 函數(shù)來(lái)操作數(shù)據(jù)是適合的。現(xiàn)在給出一個(gè)包含較復(fù)雜數(shù)據(jù)的列表項(xiàng)，該列表項(xiàng)額外定義了數(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});
 }
}

下面是包含新列表項(xiàng)的列表操作的一個(gè)示例。其中對(duì)于組件的追加與刪除還可以使用系統(tǒng)提供的函數(shù)，但對(duì)于數(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"};
 });
 }
}

對(duì)列表項(xiàng)接口的定義沒有什么特別的要求，比如一定要使用 setValue 和 getValue 之類。這取決于具體的場(chǎng)景，根據(jù)需要靈活選擇。

使用第三方列表組件

如今市面上已經(jīng)有了種種功能豐富的列表組件，我們可以通過(guò)二次封裝為我所用。這里結(jié)合 JQuery 帶有排序功能的列表組件來(lái)說(shuō)明如何操作。

首先對(duì)列表項(xiàng)進(jìn)行封裝，因?yàn)檫@個(gè)列表項(xiàng)實(shí)在太長(zhǎng)了。注意要引出數(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 };
 }
}

其次，定義下列表項(xiàng)的容器組件，該容器組件主要封裝 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();
 }
}

最后我們來(lái)看看如何使用該列表組件。該示例的使用與前面沒什么不同，但功能與表現(xiàn)可就大不一樣了。

Example: {
 xml: "<List id='example'>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  <Item>Item 3</Item>\
  </List>"
}

優(yōu)化

如果你的列表有頻繁更新數(shù)據(jù)的要求，必然會(huì)產(chǎn)生頻繁的列表項(xiàng)的增刪操作，這可能會(huì)帶來(lái)不好的應(yīng)用體驗(yàn)。下面給出一個(gè)可行的優(yōu)化方案，該方案在官方文檔的優(yōu)化章節(jié)中已出現(xiàn)過(guò)。

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 });
 }
}

對(duì)于復(fù)雜的列表項(xiàng)，重新創(chuàng)建的代價(jià)是巨大的。所以此優(yōu)化方案盡可能地復(fù)用已有的列表項(xiàng)，非必要時(shí)只刷新數(shù)據(jù)而不是刪除并重建新的列表項(xiàng)，只有當(dāng)已有的列表項(xiàng)不夠用時(shí)才創(chuàng)建新的列表項(xiàng)。

本系列文章基于 xmlplus 框架。如果你對(duì) xmlplus 沒有多少了解，可以訪問(wèn) www.xmlplus.cn。這里有詳盡的入門文檔可供參考。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: