欢迎光临
我们一直在努力

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 操作。

赞(0) 打赏
未经允许不得转载:码农资源网 » TaffyDB – 适用于浏览器的 JavaScript 数据库
分享到

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册