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 相关文章推荐
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
JavaScript 数组详解
Oct 10 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
页面点击小红心js实现代码
May 26 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 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
Linux编译升级php的详细方法
2013/11/04 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
幼教简历自我评价
2014/01/28 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
银行优秀员工事迹
2014/02/06 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
小学生期末评语
2014/04/21 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
办公室文员岗位职责
2015/02/04 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL