我有一个使用JavaScript从web服务检索JSON的网页。JSON可以包含10条记录或100条记录。在网页上,我想提供一个灵活的界面,允许用户过滤和排序数据。过滤/排序数据应该在浏览器中处理。我不希望web服务进行过滤,因为每个操作都需要往返服务器,这似乎非常低效。
我有JQuery的经验,但解决方案不需要依赖于JQuery。
我喜欢的许多选项都与JavaScript中的LINQ有关。下面是基于LINQ的JavaScript库列表;我还添加了库最后更新的日期。这个行业有使用的标准吗?
- LINQ .js - LINQ for JavaScript(2011年1月21日)
- JSINQ - LINQ to Objects for JavaScript (Apr, 2010) LINQ to JavaScript(2009年6月16日)
无论选择哪个库,都需要跨浏览器支持。
我不要求库必须与JQuery兼容,或者要求它必须使用LINQ的语法。但是我确实喜欢JQuery和LINQ提供的灵活性。
重要的一点是JSON数据只是一个JavaScript对象,因此您可以使用任何允许您操作对象的库。
我建议将underscore.js作为解决这类问题的通用工具带。
这样我们可以很容易地操作数据
var jsonData = $.getJSON(url);
var filtered = _.filter(jsonData, function(val, key) {
if (val > 10) return true;
});
var sorted = _.sortBy(jsonData, function(val, key) {
return order(val);
});
过滤和排序依赖于您的数据模型。我建议您使用某种包装器在客户机上表示您的数据模型。
var MyModel = function(json) {
var data = json;
this.filterBySize = function(size) {
data = _.filter(data, function(val) {
return val > size
});
};
...
}
var model = new MyModel(json);
model.filterBySize(10);
另一种选择是使用像backbone.js这样的大型库,为你的记录创建一个Backbone.Model
,为你的整个数据集创建一个Backbone.Collection
。然后,您可以简单地调用.sort
, .sortBy
, .filter
在您的集合。
如果你要把骨干带出来,然后你转向客户端MVC,你可以使用整个工具集来连接你的数据和你的UI很好地在一起。只需用您自己的服务器通信覆盖Backbone.sync
。
检查一下昨天刚刚发布的linq库,它非常强大
https://github.com/iabdelkareem/LINQ-To-JavaScript