文档章节

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
xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

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

qudou
2017/04/27
677
2
全栈 JavaScript 框架--xmlplus

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

qudou
2017/04/21
1K
1
JavaScript 框架 xmlplus 1.5.12 发布

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

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

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

qudou
2017/06/10
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
37分钟前
3
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
44分钟前
1
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
54分钟前
19
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
1
0
区块链技术中的那些能商用的企业级应用

WEPOWER是一家立陶宛初创企业,旨在改变可再生电力项目的付费方式。WePower公司创始人Nick Martyniuk表示,政府统一收购价的存在推动了全球风能与太阳能市场的发展。因此,他的公司希望帮助那...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部