ホームページ > 記事 > ウェブフロントエンド > 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
リーリー上記のコードをブラウザで実行すると、次の出力が表示されるはずです。
上記のコードでは、最初に「taffy.js」ファイルをインポートし、次に &ly;head> タグ自体の中に <script> タグを作成しました。 <script> タグ内で TAFFY オブジェクトを作成し、その中に異なるプロパティを持つ複数のオブジェクトが含まれるオブジェクト配列を作成します。 </script>
次に、countries 変数の値を反復処理し、変数ごとに、「name」属性の値を「countriesName」という配列に入れます。
上記のコードをブラウザで実行すると、次の出力が表示されるはずです。
TaffyDB を使用してレコードを挿入する
上記の例では、オブジェクトの配列を作成し、それを TIFFY メソッドに渡しました。ここで、新しいオブジェクトをデータに挿入することに焦点を当てましょう。これは、insert() メソッドを使用して行うことができます。 insert() メソッドでは、選択に応じて同じプロパティまたは異なるプロパティを渡すことができます。
以下に示すコード スニペットを考えてみましょう。これを使用して次のことができます。 TaffyDB の Country 変数。
ああああ例
index.html
更新された index.html コードは次のとおりです。
リーリー上記のコードをブラウザで実行すると、次の出力が表示されるはずです -
TaffyDB を使用してクエリを実行する
上の例ではクエリを実行しましたが、首都と州がデータ内に同じ値を持つ国の名前を保存する単純なクエリを再度実行してみましょう。
例
index.html
次に示す index.html コードを考えてみましょう。
リーリー上記の HTML コードでは、each() メソッドを使用して countries 変数のすべての値を反復処理し、「capital」と「属性値を宣言します。次に、一致するものがあれば、値を配列に入れ、最後にその配列をコンソールに出力します。
上記の HTML ファイルをブラウザで実行すると、 ターミナル。
次に、クエリを再度実行してみましょう。今回は、最小の国名を辞書順に出力します。上の例のデータからは、「ブラジル」になります。以下に示す HTML コードについて考えてみましょう。
例
index.html
次に示す index.html コードを考えてみましょう。
リーリー上記のコードでは、コード countries().order("name").first().name を含む行で、link という名前のリンクを使用します。ここで、リンクは複数のメソッドです。まず、name 属性でデータを並べ替え、次に並べ替えられたデータから最初の要素を選択し、最後にその要素から name 属性を抽出します。
上記の HTML ファイルをブラウザで実行すると、次のように表示されます。 ターミナル。
TaffyDB を使用してデータを更新する
update() メソッドを使用して、TaffyDB 内のデータを更新できます。このメソッドでは、オブジェクトに存在しないプロパティを渡すと追加され、存在する場合は更新されます。
「India」という名前のオブジェクトにフィールドを追加し、financialCapital:「Mumbai」という名前の新しいプロパティを追加するとします。以下に示す HTML コードを考えてみましょう。
例
index.html
次に示す index.html コードを考えてみましょう。
リーリー追加したデータがデータベースに追加されたことを確認するために、オブジェクトを反復処理し、単純な「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 中国語 Web サイトの他の関連記事を参照してください。