資料結構
網路
關係型資料庫管理系統 (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
