数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学TaffyDB – 一款适用于浏览器的 JavaScript 数据库
TaffyDB 是一个轻量级且功能强大的内存数据库，可用于浏览器和服务器端应用程序。它是开源的，并且免费使用。在本教程中，我们将通过几个例子来展示如何使用 TaffyDB 存储数据、执行数据查询以及执行重要数据操作。
让我们从一个简单的例子开始
让我们从一个非常基本的例子开始，在这个例子中，我们将创建一些数据，然后尝试将这些数据打印到浏览器上。
我们的第一步是拥有 **TaffyDB**。为此，我们有不同的选择。最基本的方法是使用一个 URL，其中包含 "taffydb.js" 文件的最小化版本。
"taffydb.js" 的代码可以在这个 链接 中找到。我建议您打开此链接，然后复制代码并将其粘贴到名为 "taffy.js" 的文件中。否则，您可以直接使用它的 CDN。
现在依赖项已处理完毕，让我们关注 "index.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" 文件，然后我们在 <head> 标签内创建了一个 <script> 标签。在 <script> 标签内，我们创建了一个 TAFFY 对象，在这个对象中我们创建了一个对象数组，其中包含多个具有不同属性的对象。
然后我们迭代 **countries** 变量的值，并为每个值，我们将 "name" 属性的值放入名为 "countriesName" 的数组中。
如果您在浏览器中运行以上代码，您应该看到以下输出。
使用 TaffyDB 插入记录
在上面的例子中，我们创建了一个对象数组并将其传递给 TIFFY 方法。现在让我们关注将新对象插入数据，我们可以使用 **insert()** 方法来实现。在 **insert()** 方法中，我们可以根据我们的选择传递相同的属性或不同的属性。
考虑以下代码片段，我们可以使用它将数据添加到 TaffyDB 中的 **countries** 变量。
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" 和 "state" 属性值。如果它们匹配，我们将值放入数组中，最后将数组打印到控制台中。
如果我们在浏览器中运行上面的 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** 代码，在这个代码中，我尝试使用 "!" 运算符打印除 India 之外的所有国家名称。
示例
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 操作。
浏览量：317
