xmlplus 組件設計系列之四 - 列表（List）

列表是極其經常使用的一種組件，是許多組件系統的必須包含的。列表能夠作的很簡單，只顯示簡潔的文本。列表也能夠作的很複雜，用於展現很是豐富的內容。

列表的組成

列表離不開列表項以及包含列表項的容器。下面是最簡單的列表組件，它包含一個列表項組件 Item 以及一個列表項容器組件 List。

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

此列表只是對原生列表元素的簡單封裝。裏定義的列表組件儘管簡單，但所構建的框架爲咱們的繼續擴展奠基了基礎。

使用系統接口操做列表

如上定義的列表組件的最基本的用法以下。這種用法與原生列表標籤的用法沒什麼區別。咱們將進行作進一步的改造。

// 04-01
Index: {
    xml: `<List id='index'>
             <Item>Item 1</Item>
             <Item>Item 2</Item>
          </List>`
}

列表組件廣泛包含添加、刪除以及修改這三種操做。因爲咱們定義的列表項足夠的簡單，因此這裏再也不定義新的操做接口，而直接使用系統提供的接口。

// 04-02
Index: {
    xml: `<div id='index'>
             <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 函數來操做數據是適合的。如今給出一個包含較複雜數據的列表項，該列表項額外定義了數據操做接口。

// 04-03
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});
    }
}

下面是包含新列表項的列表操做的一個示例。其中對於組件的追加與刪除還可使用系統提供的函數，但對於數據的獲取與修正就只能使用新定義的接口了。

// 04-03
Index: {
    xml: `<List id='index'>
             <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() {
            var item = sys.list.first();
            item && (item.value().data = {color: "blue", shape: "rectangle"});
        });
    }
}

注意，對列表項接口的定義沒有什麼特別的要求，好比必定要使用 setValue 和 getValue 之類。這取決於具體的場景，根據須要靈活選擇。

使用第三方列表組件

現在市面上已經有了種種功能豐富的列表組件，咱們能夠經過對其進行二次封裝再方便地使用。這裏結合 JQuery 帶有排序功能的列表組件來講明如何操做。

首先須要對原列表項進行封裝，由於原列表項實在太長了。注意須要引出數據操做接口。

// 04-04
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 的列表初始化代碼。該初始化代碼用於指明當前列表爲可排序但不可選。注意須要同時把相關的樣式也給寫上。

// 04-04
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:first-child { position: absolute; margin-left: -1.3em; }`,
    xml: "<ul id='list'/>",
    fun: function (sys, items, opts) {
        var elem = this.elem();
        $(elem).sortable();
        $(elem).disableSelection();
    }
}

最後咱們來看看如何使用該列表組件。該示例的使用與前面沒什麼不一樣，但功能與表現可就大不同了。

// 04-04
Index: {
    xml: `<List id='index'>
             <Item>Item 1</Item>
             <Item>Item 2</Item>
             <Item>Item 3</Item>
          </List>`
}

優化

若是你的列表有頻繁更新數據的要求，必然會產生頻繁的列表項的增刪操做，這可能會帶來很差的應用體驗。下面給出一個可行的優化方案，該方案在官方文檔的 優化 章節中已出現過。

// 04-05
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 });
    }
}

對於複雜的列表項，從新建立的代價是巨大的。因此此優化方案儘量地複用了已有的列表項，非必要時只刷新數據而不是刪除並重建新的列表項，而且只有在已有的列表項不夠用時才建立新的列表項。