JavaScript框架（xmlplus）元件的介紹（四）列表

xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus組件設計系列之列表，具有一定的參考價值，有興趣的小伙伴們可以參考一下

列表組件是極其常用的一類組件，是許多視圖元件系統的必須包含的。清單可以做的很簡單，只顯示簡潔的內容。清單也可以做的很複雜，用來展示非常豐富的內容。

組成元素

清單離不開清單項目以及包含清單項目的容器。以下是最簡單的清單元件，它包含一個清單項目元件 Item 以及一個清單項目容器元件 List。

Item: {
 xml: "<li id=&#39;item&#39;/>"
},
List: {
 xml: "<ul id=&#39;list&#39;/>"
}

此列表元件儘管簡單，但所建立的框架為我們的繼續擴展奠定了基礎。

動態操作

如上定義的清單元件的最基本的用法如下所示。這種用法與原生清單標籤的用法沒什麼兩樣。我們將進行做進一步的改造。

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  </List>"
}

清單元件普遍包含新增、刪除、修改這三種動作。為簡單起見，不妨先來實現這些操作。由於我們定義的列表項目足夠的簡單，所以這裡不再定義新的操作接口，而直接使用系統接口。

Example: {
 xml: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>modify</button>\
  </p>",
 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=&#39;item&#39;>\
  <span id=&#39;color&#39;>red</span>
  <span id=&#39;shape&#39;>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: "<p id=&#39;example&#39;>\
  <List id=&#39;list&#39;/>\
  <button id=&#39;append&#39;>append</button>\
  <button id=&#39;remove&#39;>remove</button>\
  <button id=&#39;modify&#39;>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=&#39;ui-state-default&#39;><span class=&#39;ui-icon ui-icon-arrowthick-2-n-s&#39;/><span id=&#39;data&#39;/></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=&#39;list&#39;/>",
 fun: function (sys, items, opts) {
 var elem = this.elem();
 $(elem).sortable();
 $(elem).disableSelection();
 }
}

最後我們來看看如何使用該清單元件。這個範例的使用與前面沒什麼不同，但功能與表現可就大不一樣了。

Example: {
 xml: "<List id=&#39;example&#39;>\
  <Item>Item 1</Item>\
  <Item>Item 2</Item>\
  <Item>Item 3</Item>\
  </List>"
}

優化

如果你的清單有頻繁更新資料的要求，必然會產生頻繁的清單項目的增刪操作，這可能會帶來不好的應用體驗。下面給出一個可行的優化方案，該方案在官方文件的 優化 章節中已出現過。

List: {
 xml: "<ul id=&#39;list&#39;/>",
 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。這裡有詳盡的入門文件可供參考。

【相關推薦】

1. 免費js線上影片教學

2. JavaScript中文參考手冊

3. php.cn獨孤九賤（3）－JavaScript影片教學

以上是JavaScript框架（xmlplus）元件的介紹（四）列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！