如何在客户端浏览器中进行类似 SQL 的查询？答案

【问题标题】：How to do SQL-like queries in client side browser?如何在客户端浏览器中进行类似 SQL 的查询？
【发布时间】：2012-06-11 00:56:22
【问题描述】：

我一直在寻找一种方法来执行复杂的查询，例如 SQL 可以执行但完全是客户端。我知道我可以从服务器上执行 SQL 查询获得我想要的确切结果，我什至可以 AJAX 让它看起来很流畅。然而，出于可扩展性、性能和带宽的原因，我更愿意在客户端执行此操作。

一些要求：

广泛的浏览器兼容性。任何可以运行 jQuery 的东西都可以。我实际上更喜欢它是一个 jQuery 插件。
可以对多个列进行排序。例如，按州字母顺序排列，并按字母顺序列出每个州内的所有城市。
可以过滤结果。例如，相当于“where state = 'CA' or 'NY' or 'TX'”。
必须完全在客户端工作，因此用户只需要下载大量数据一次，就可以根据需要剪切数据，而无需不断从服务器获取数据，实际上可以在初始之后离线执行所有查询拉。

我在 stackoverflow 上四处查看并找到了 jslinq，但它最后一次更新是在 2009 年并且没有文档。我也不知道它是否可以执行更复杂的查询，例如在两个不同的列上排序或执行“and”或“or”过滤。

我认为这样的事情已经完成了。我知道 HTML5 是从这条路开始的，但后来遇到了障碍。我只需要基本查询，不需要连接或任何东西。有谁知道可以做到这一点的东西？谢谢。

编辑：我认为我应该包含一个用例来帮助阐明我在寻找什么。

例如，我有一份美国 5000 个最大城市的列表。每条记录都包括 Cityname、State 和 Population。我希望能够一次下载整个数据集并用它填充一个 JS 数组，然后，仅在客户端，能够运行如下查询并根据结果记录创建一个表。

加州十大城市
以“S”开头且人口超过 1,000,000 的所有城市。
加利福尼亚州、纽约州、佛罗里达州、德克萨斯州和伊利诺伊州的三个最大城市，并按州的字母顺序，然后按人口顺序排列。即加利福尼亚，洛杉矶，3,792,621；加利福尼亚，圣地亚哥，1,307,402；加利福尼亚、圣何塞、945,942...等。

所有这些查询都可以通过 SQL 完成，但我不想一直在服务器上来回切换，我还想允许离线使用。

【问题讨论】：

Wide browser compatibility. 似乎是半不可能的。

标签： javascript jquery sql

【解决方案1】：

看看http://linqjs.codeplex.com/

它可以轻松满足您的所有要求。

【讨论】：

不错的发现。你可以做很多事情！
LinqJS 作用于 DOM 作为数据源？还是在 JavaScript 对象上？阅读项目主页，但我不是 100% 清楚。
我已经集成了 jQuery 并且也可以使用它的集合。
我确实已经看过这个了。但是（由于缺乏任何文档）我无法判断它是否可以执行更复杂的查询，例如级联排序。有关用例，请参阅原始帖子的更新。
令人困惑的是，codeplex 包含 linqjs 和 jslinq。我之前看过的是 jslinq，它的文档为零 (jslinq.codeplex.com/documentation)。 Linqjs 没有广泛的文档页面，但主页确实链接到neue.cc/reference.htm，看起来很全面。我最后还跑过 jlinq (hugoware.net/Projects/jlinq) 只是为了进一步混淆这个问题。 Linqjs 看起来确实适用于该项目。感谢您的帮助。

【解决方案2】：

只要数据可以作为对象数组放入内存，您就可以使用sort 和filter。例如，假设您要过滤产品。您想查找低于 5 美元或高于 100 美元的所有产品，并且希望按价格排序（升序），如果有两种价格相同的产品，则按制造商排序（降序）。你可以这样做：

var results = products.filter(function(product) {
    // price is in cents
    return product.price < 500 || product.price > 10000;
});
results.sort(function(a, b) {
    var order = a.price - b.price;
    if(order == 0) {
        order = b.manufacturer.localeCompare(a.manufacturer);
    }
    return order;
});

为了跨浏览器兼容性，只需填充 filter。

【讨论】：

谢谢，如果我最终不得不从头开始构建一些东西，我相信我会使用这些东西，但我会尽量避免重新发明轮子。
@WD-40：也许我误解了你在寻找什么。我以为您只需要在客户端过滤和排序数据。这样做并没有真正重新发明轮子。
理想情况下，我可以使用类似 SQL 的语法来执行更复杂的查询（请参阅我添加到原始帖子中的用例）。在最低级别，我想无论我最终使用什么，最终都会使用您列出的操作，但我更喜欢使用一些预先构建的通用框架，我可以在其中插入值并使用类似于 SQL 的运算符实际上是硬编码逻辑。

【解决方案3】：

试试Alasql.js。这是一个 javascript 客户端 SQL 数据库。

您可以使用连接和分组进行复杂查询，甚至可以优化连接和位置部分。它不使用 WebSQL。

您的需求支持：

广泛的浏览器兼容性 - 所有现代版本的浏览器，包括手机。
可以对多个列进行排序。- Alasql 使用 ORDER BY 子句进行排序。
可以过滤结果。 - 带有 WHERE 子句。
必须完全在客户端工作，因此用户只需要下载大量数据一次，就可以根据需要剪切数据，而无需不断从服务器获取数据，实际上可以在初始之后离线执行所有查询拉。 - 可以使用纯JavaScript（Array.push()等）操作来修改数据（别忘了设置table.dirty标志）。

这是一个简单的例子（在jsFiddle 中玩）：

// Fill table with data
var person = [ 
    { name: 'bill' , sex:'M', income:50000 },
    { name: 'sara' , sex:'F', income:100000 },
    { name: 'larry' , sex:'M', income:90000 },
    { name: 'olga' , sex:'F', income:85000 },
];

// Do the query
var res = alasql("SELECT * FROM ? person WHERE sex='F' AND income > 60000", [person]);

【讨论】：

【解决方案4】：

Yahoo 的YQL 怎么样？我只是简单地看了一下，但它看起来很有趣。

【讨论】：

这似乎是一个需要网络连接的 API，我试图避免这种情况。

【解决方案5】：

Backbone 是一个非常好的 js 库，它（他们的话）“通过提供具有键值绑定和自定义事件的模型、具有可枚举函数的丰富 API 的集合、具有声明性事件处理的视图，为 Web 应用程序提供结构，并通过 RESTful JSON 接口将其全部连接到您现有的 API。”

我不确定这是否是您正在寻找的，但您可以使用它来模拟您的模型并将事件侦听器绑定到它。 This 似乎是一个很好的教程来了解它的一些基本用途。

【讨论】：

【解决方案6】：

您可以使用CanJS。它是一个相对较新的库，性能优于 Backbone 和其他库，它基于臭名昭著的 JavaScript MVC 库。实际上，它是 JS MVC 的 MVC 部分，带有一点香料。

您可以通过 net.tutsplus.com http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs-part-3/ 看看这个 tut

它非常强大和快速。具有实时绑定等功能，让您的生活变得轻松。

【讨论】：

【解决方案7】：

Coils 是一个 Clojurescript 框架，可编译为 Javascopt，并具有如下客户端 SQL 查询：

(go
    (log (sql "SELECT * FROM test_table where name = ?" ["shopping"] )))

：这是传递给服务器端关系数据库的完整 SQL：

https://github.com/zubairq/coils

【讨论】：