文档章节

xmlplus 组件设计系列之四 - 列表(List)

qudou
 qudou
发布于 2017/04/26 10:07
字数 1277
阅读 42
收藏 0

列表

列表是极其常用的一种组件,是许多组件系统的必须包含的。列表可以做的很简单,只显示简洁的文本。列表也可以做的很复杂,用于展示非常丰富的内容。

<img src="http://xmlplus.cn/img/list.png" class="img-responsive"/>

列表的组成

列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件,它包含一个列表项组件 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"});
        });
    }
}

注意,对列表项接口的定义没有什么特别的要求,比如一定要使用 setValuegetValue 之类。这取决于具体的场景,根据需要灵活选择。

使用第三方列表组件

如今市面上已经有了种种功能丰富的列表组件,我们可以通过对其进行二次封装再方便地使用。这里结合 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 });
    }
}

对于复杂的列表项,重新创建的代价是巨大的。所以此优化方案尽可能地复用了已有的列表项,非必要时只刷新数据而不是删除并重建新的列表项,并且只有在已有的列表项不够用时才创建新的列表项。

© 著作权归作者所有

共有 人打赏支持
qudou

qudou

粉丝 5
博文 11
码字总数 14933
作品 2
福州
程序员
私信 提问
全栈 JavaScript 框架 xmlplus 1.5.9 发布

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与 npm 版本之间的同步。 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发...

qudou
2017/04/30
3.8K
16
全栈 JavaScript 框架--xmlplus

xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组...

qudou
2017/04/21
1K
1
xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

全栈 JavaScript 框架 xmlplus v1.5.8 正式发布 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏...

qudou
2017/04/27
691
2
JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件...

qudou
2017/05/24
549
0
JavaScript 框架 xmlplus 1.5.14 发布

JavaScript 框架 xmlplus 1.5.14 发布了。更新如下: 将原先对于 xmldom 模块的依赖改为 exmldom。exmldom 模块是对 xmldom 模块的扩展,添加了事件支持。也就是说,你可以像前端那样在 dom ...

qudou
2017/06/10
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

【PG内核】pg11秒级新增非空默认字段的实现方法

pg11新特性,可以瞬间向一个表中添加非空默认字段。 今天研究了一下这个特性的内核实现方式,写个博客简单记录一下。 结论奉上 pg在从硬盘或者内存获取到一条数据记录后(以下称tuple),会使...

movead
16分钟前
1
0
如何保证MongoDB的安全性?

上周写了个简短的新闻《MongoDB裸奔,2亿国人求职简历泄漏!》: 根据安全站点HackenProof的报告,由于MongoDB数据库没有采取任何安全保护措施,导致共计202,730,434份国人求职简历泄漏。 然...

Fundebug
23分钟前
1
0
KVM

目录 (1):简介及安装 1. KVM 介绍 1.0 虚拟化简史 1.1 KVM 架构 2. KVM 的功能列表 3. KVM 工具集合 4. RedHat Linux KVM 安装 4.1 在安装 RedHat Linux 时安装 KVM 4.2 在已有的 RedHat...

临江仙卜算子
38分钟前
0
0
脚本配置java开发环境

@echo off&setlocal enabledelayedexpansion cls @echo "This script is used to registe envionment variables......" @echo. @echo. @echo. set var=%~dp0 set var=%var:~,-1% @echo "regi......

默克鱼
58分钟前
1
0
c++中友元函数理解与使用

在学习c++这一块,关于友元函数和友元类,感觉还是不好理解,但是井下心来,理解,需要把我一下几点。 首先讲友元函数。 (1)友元函数: 1)C++中引入友元函数,是为在该类中提供一个对外(除...

天王盖地虎626
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部