首页 > 文章 > web前端 > TaffyDB – 适用于浏览器的 JavaScript 数据库

TaffyDB – 适用于浏览器的 JavaScript 数据库

PHPz转载: 2023-08-25 13:45:181166浏览

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> 标签本身内创建了一个 <script> 标签。在 <script> 标签内，我们创建了一个 TAFFY 对象，在其中创建了一个对象数组，其中存在多个具有不同属性的对象。</script>

然后，我们迭代 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 操作。

以上是TaffyDB – 适用于浏览器的 JavaScript 数据库的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html 运算符 if JS 对象数据库

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用 JavaScript 以国际方式编写手机号码？下一篇：如何在webGL和p5.js中创建3D几何体？

查看更多