TaffyDB – 适用于浏览器的 JavaScript 数据库-码农资源网

正文概述

taffydb – 适用于浏览器的 javascript 数据库

TaffyDB 是一个轻量级且功能强大的内存数据库，可用于浏览器和服务器端应用程序。它是开源的并且可以免费使用。在本教程中，我们将通过几个示例来展示如何使用 TaffyDB 存储一些数据、对数据执行一些查询以及对数据执行重要操作。

让我们从一个简单的示例开始

让我们从一个非常基本的示例开始，在该示例中我们将创建一些数据，然后尝试在浏览器上打印该数据。

我们的第一步是拥有TaffyDB。为此，我们有不同的选择。最基本的方法是使用包含“taffydb.js”文件的缩小版本的 URL。

“taffydb.js”的代码可以在此链接中找到。我建议您打开此链接，然后复制代码并将其粘贴到名为“taffy.js”的文件中。否则，你可以
只需使用其 CDN。

现在处理了依赖关系，让我们关注“index.html”文件，我们将在其中编写核心逻辑，当然，在 <script> 标记内。考虑下面显示的 HTML 代码。</script>

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        let countriesNames = [];
        countries().each(function(r) {
            countriesNames.push(r.name);
        });
        document.write(countriesNames);
    </script>
</head>
<body>
</body>
</html>

如果您在浏览器中运行上述代码，您应该会看到以下输出。

在上面的代码中，我们首先导入了“taffy.js”文件，然后在 &ly;head> 标签本身内创建了一个

然后，我们迭代 countries 变量的值，对于每个变量，我们将“name”属性的值放入名为“countriesName”的数组中。

如果您在浏览器中运行上述代码，您应该会看到以下输出。

使用 TaffyDB 插入记录

在上面的示例中，我们创建了一个对象数组并将其传递给 TIFFY 方法。现在让我们重点关注向数据插入一个新对象，我们可以借助 insert() 方法来完成此操作。在 insert() 方法中，我们可以传递相同的属性或不同的属性，具体取决于我们的选择。

考虑下面显示的代码片段，我们可以使用它向
TaffyDB 中的国家变量。

countries.insert({
   name: "Brazil",
   state: "State of São Paulo",
   capital: "Brasília",
});

示例

index.html

更新后的index.html代码如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let countriesNames = [];
        countries().each(function(r) {
            countriesNames.push(r.name);
        });
        document.write(countriesNames);
    </script>
</head>
<body>
</body>
</html>

如果您在浏览器中运行上述代码，您应该会看到以下输出 –

使用 TaffyDB 执行查询

虽然我们在上面的示例中执行了查询，但让我们再次执行一个简单的查询，其中我们要存储其首都和州在数据中具有相同值的国家/地区的名称。

示例

index.html

考虑下面所示的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let res = [];
        countries().each(function(r) {
            if (r.state === r.capital) {
                res.push(r.name)
            }
        });
        document.write(res);
    </script>
</head>
<body>
</body>
</html>

在上面的 HTML 代码中，我们借助 each() 方法迭代 countries 变量的所有值，然后比较“capital”并用它们“声明”属性值。然后，如果匹配，我们将值放入数组中，最后在控制台中打印该数组。

如果我们在浏览器中运行上面的 HTML 文件，我们将在
终端。

现在让我们再执行一次查询，这一次，我们要打印字典顺序中最小的国家/地区的名称。从上面示例中的数据来看，它将是“巴西”。考虑下面显示的 HTML 代码。

示例

index.html

考虑下面所示的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        let res = countries().order("name").first().name;
        document.write(res);
    </script>
</head>
<body>
</body>
</html>

在上面的代码中，包含代码 countries().order(“name”).first().name 的行是我们使用名为链接，其中链接多个方法。首先，我们按 name 属性对数据进行排序，然后从排序后的数据中选择第一个元素，最后，我们从该元素中提取 name 属性。

如果您在浏览器中运行上述 HTML 文件，您将在
终端。

使用 TaffyDB 更新数据

可以借助 update() 方法来更新 TaffyDB 中的数据。在这个方法中，如果我们传递一个对象中不存在的属性，那么它将被追加；如果确实存在，则会更新。

假设您要在名为“India”的对象中添加一个字段，并添加一个名为 financialCapital 的新属性：“Mumbai”。考虑下面显示的 HTML 代码。

示例

index.html

考虑下面所示的 index.html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        countries({
            name: "India"
        }).update({
            financialCapital: "Mumbai"
        })
        countries().each(function(r) {
            if (r.name == "India") {
                document.write(r.financialCapital + "<br>")
            } else {
                document.write(r.capital + "<br>")
            }
        })
    </script>
</head>
<body>

为了验证我们添加的数据是否已添加到数据库中，我迭代该对象，然后使用简单的“if-else”条件打印值。

如果您在浏览器中运行上述 HTML 文件，您将在
终端。

使用“!”运算符

通过使用“!”运算符，您可以在 TaffyDB 中编写复杂的查询。考虑下面显示的 index.html 代码，其中我尝试使用“！”来打印除印度之外的所有具有该名称的国家/地区。运算符。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaffyDB</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/taffydb/2.7.3/taffy-min.js"></script>
    <script>
        let countries = TAFFY([{
            name: "India",
            state: "Uttar Pradesh",
            capital: "New Delhi",
        }, {
            name: "USA",
            state: "California",
            capital: "Washington DC",
        }, {
            name: "Germany",
            state: "Berlin",
            capital: "Berlin",
        }]);
        countries.insert({
            name: "Brazil",
            state: "State of São Paulo",
            capital: "Brasília",
        });
        countries({
            name: {
                "!is": "India"
            }
        }).each(function(r) {
            document.write(r.name + "<br>");
        })
    </script>
</head>
<body>
</body>
</html>

如果您在浏览器中运行上述 HTML 文件，您将在终端。

结论

在本教程中，我们使用多个示例来演示如何在 TaffyDB 中执行 CRUD 操作。

想要了解更多内容，请持续关注码农资源网，一起探索发现编程世界的无限可能!
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除

码农资源网 » TaffyDB – 适用于浏览器的 JavaScript 数据库

码农资源网普通

分享到：

让我们从一个简单的示例开始

示例

使用 TaffyDB 插入记录

示例

使用 TaffyDB 执行查询

示例

示例

使用 TaffyDB 更新数据

示例

使用“!”运算符

示例

结论

码农资源网普通

升级SVIP会员

工作时间

让我们从一个简单的示例开始

示例

使用 TaffyDB 插入记录

示例

使用 TaffyDB 执行查询

示例

示例

使用 TaffyDB 更新数据

示例

使用“!”运算符

示例

结论

码农资源网 普通

相关推荐

提供最优质的资源集合

升级SVIP会员

工作时间

码农资源网普通