xmlplus组件设计系列之列表(4)


Posted in Javascript onApril 26, 2017

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

组成元素

列表离不开列表项以及包含列表项的容器。下面是最简单的列表组件,它包含一个列表项组件 Item 以及一个列表项容器组件 List。

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

此列表组件尽管简单,但所构建的框架为我们的继续扩展奠定了基础。

动态操作

如上定义的列表组件的最基本的用法如下所示。这种用法与原生列表标签的用法没什么区别。我们将进行做进一步的改造。

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

列表组件普遍包含添加、删除以及修改这三种操作。为简单起见,不妨先来实现这些操作。由于我们定义的列表项足够的简单,所以这里不再定义新的操作接口,而直接使用系统接口。

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

该示例使用列表的系统函数 append 来追加列表项,并使用列表项的系统函数 remove 来移除列表项,同时还使用列表项的系统函数 text 来修改列表项的数据。

由于上面的列表项所包含的是简单的文本数据,所以上面示例使用 text 函数来操作数据是适合的。现在给出一个包含较复杂数据的列表项,该列表项额外定义了数据操作接口。

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

下面是包含新列表项的列表操作的一个示例。其中对于组件的追加与删除还可以使用系统提供的函数,但对于数据的获取与修正就只能使用新定义的接口了。

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

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

使用第三方列表组件

如今市面上已经有了种种功能丰富的列表组件,我们可以通过二次封装为我所用。这里结合 JQuery 带有排序功能的列表组件来说明如何操作。

首先对列表项进行封装,因为这个列表项实在太长了。注意要引出数据操作接口。

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 的列表初始化代码,这里定义了该列表为可排序但不可选。

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

最后我们来看看如何使用该列表组件。该示例的使用与前面没什么不同,但功能与表现可就大不一样了。

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

优化

如果你的列表有频繁更新数据的要求,必然会产生频繁的列表项的增删操作,这可能会带来不好的应用体验。下面给出一个可行的优化方案,该方案在官方文档的 优化 章节中已出现过。

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

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

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解,可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 #Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 #Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 #Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 #Javascript
Vue.js实现文章评论和回复评论功能
May 30 #Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 #Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
python进程与线程小结实例分析
2018/11/11 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 不以科学计数法输出的方法
2018/07/16 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
django 单表操作实例详解
2019/07/30 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
预备党员思想汇报范文
2013/12/29 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
车间主任岗位职责
2014/03/16 职场文书
保护母亲河倡议书
2014/04/14 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
运动会加油稿20字
2014/11/15 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015年药店工作总结
2015/04/20 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python