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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
javascript在事件监听方面的兼容性小结
Apr 07 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
antd form表单数据回显操作
Nov 02 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
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
Prototype使用指南之form.js
2007/01/10 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python functools模块学习总结
2015/05/09 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python语言的变量认识及操作方法
2018/02/11 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python实现的堆排序算法示例
2018/04/29 Python
详解Python字典的操作
2019/03/04 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python安装sklearn模块的方法详解
2020/11/28 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
项目考察欢迎辞
2014/01/17 职场文书
教师开学感言
2014/02/14 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
企业宣传工作方案
2014/06/02 职场文书
我的1919观后感
2015/06/03 职场文书
父亲节感言
2015/08/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang