标签：
在平时的JavaScript程序开发中，经常会使用到列表数据的展示。例如：热度榜单、头条列表、成绩榜单、待办事项等等，以上数据都有一些共同的特点，数据结构简单、数据量不大。那么，基于以上特点，自定义一个列表类，只需要封装一些查询、定位等方法就可以帮助我们去处理这些数据了。当然，一旦，数据结构非常复杂、数据量比较大的时候，列表类的作用就没有那么大了。
1.属性定义：
| 属性 | 备注 |
| dataSource | 列表的存储数据源 |
| size | 列表的长度、个数 |
| position | 列表的当前索引位置 |
2.方法定义：
| 方法 | 备注 |
| append | 添加元素 |
| insert | 插入元素（指定位置插入） |
| remove | 删除元素 |
| clear | 清除列表 |
| find | 查询元素 |
| get | 获取元素 |
| first | 获取第一个元素 |
| last | 获取最后一个元素 |
| prev | 移至前一个位置 |
| next | 移至后一个位置 |
| front | 移至开始位置 |
| end | 移至结束位置 |
| hasPrev | 是否有前一个元素 |
| hasNext | 是否有后一个元素 |
| moveTo | 移至指定位置 |
| length | 返回列表的长度 |
| contains | 是否包含指定元素 |
| toString | 返回数据源dataSource |
以上的数据结构是根据实际需求来定义，不同的使用环境可以进行相应的修改。
1 //列表类 2 var List = function () { 3 //数据源 4 this.dataSource = []; 5 //数据长度 6 this.size = 0; 7 //当前位置 8 this.position = 0; 9 }; 10 11 List.prototype.constructor = List; 12 13 List.prototype = { 14 //添加元素 15 append: function (element) { 16 this.dataSource[this.size++] = element; 17 }, 18 //插入元素 19 insert: function (position, element) { 20 if (position > -1) { 21 this.dataSource.splice(position + 1, 0, element); 22 this.size++; 23 return true; 24 } 25 return false; 26 }, 27 //移除元素 28 remove: function (position) { 29 this.dataSource.splice(position, 1); 30 }, 31 //清除数据源 32 clear: function () { 33 delete this.dataSource; 34 this.dataSource.length = 0; 35 this.size = 0; 36 this.position = 0; 37 }, 38 //查询数据 39 find: function (element) { 40 for (var i = 0; i < this.dataSource.length; i++) { 41 if (this.dataSource[i] == element) { 42 return i; 43 } 44 } 45 return -1; 46 }, 47 //获取数据 48 get: function () { 49 return this.dataSource[this.position]; 50 }, 51 //获取第一条数据 52 first: function () { 53 return this.dataSource[0]; 54 }, 55 //获取最后一条数据 56 last: function () { 57 return this.dataSource[this.size - 1]; 58 }, 59 //移至前一个位置 60 prev: function () { 61 this.position--; 62 }, 63 //移至后一个位置 64 next: function () { 65 this.position++; 66 }, 67 //移至开始位置 68 front: function () { 69 this.position = 0; 70 }, 71 //移至结束位置 72 end: function () { 73 this.position = this.size - 1; 74 }, 75 //是否有前一个元素 76 hasPrev: function () { 77 return this.position > 0; 78 }, 79 //是否有后一个元素 80 hasNext: function () { 81 return this.position < this.size - 1; 82 }, 83 //移至指定位置 84 moveTo: function (position) { 85 this.position = position; 86 }, 87 //数据源长度 88 length: function () { 89 return this.size; 90 }, 91 //是否包含指定元素 92 contains: function (element) { 93 for (var i = 0; i < this.dataSource.length; i++) { 94 if (this.dataSource[i] == element) { 95 return true; 96 } 97 } 98 return false; 99 }, 100 toString: function () { 101 return this.dataSource; 102 } 103 };
1 var list = new List(); 2 list.append("张三"); 3 list.append("李四"); 4 list.append("王五"); 5 list.append("赵六"); 6 console.log("list dataSource、size、position:", list.dataSource, list.size, list.position); 7 //打印：list dataSource、size、position: ["张三", "李四", "王五", "赵六"] 4 0 8 9 console.log("list get():", list.get()); 10 //打印：list get(): 张三 11 12 list.next(); 13 console.log("list prev():", list.get()); 14 //打印：list prev(): 李四 15 16 list.moveTo(3); 17 console.log("list moveTo():", list.get()); 18 //打印：list moveTo(): 赵六 19 20 var position = list.find("王五"); 21 console.log("list find():", position); 22 //打印：list find(): 2 23 24 var result = list.contains("曹七"); 25 console.log("list contains():", result); 26 //打印：list contains(): false
标签：
原文地址：http://www.cnblogs.com/cjp1107/p/5362940.html
