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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
thinkphp实现数组分页示例
2014/04/13 PHP
php实现的验证码文件类实例
2015/06/18 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
js实现图片360度旋转
2017/01/22 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
python程序 创建多线程过程详解
2019/09/23 Python
python实现飞机大战小游戏
2019/11/08 Python
Python能做什么
2020/06/02 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
初一体育教学反思
2014/01/29 职场文书
个人四风问题整改措施
2014/10/24 职场文书
小学运动会入场口号
2015/12/24 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Python几种酷炫的进度条的方式
2022/04/11 Python