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 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
DOM下的节点属性和操作小结
2009/05/14 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python自动生产表情包
2017/03/17 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
班级文化标语
2014/06/23 职场文书
2015年教学工作总结
2015/04/02 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
新手必备Python开发环境搭建教程
2021/05/28 Python