Heim >Web-Frontend >js-Tutorial >TaffyDB – JavaScript-Datenbank für den Browser

TaffyDB – JavaScript-Datenbank für den Browser

PHPznach vorne: 2023-08-25 13:45:181329Durchsuche

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

TaffyDB ist eine leichte und leistungsstarke In-Memory-Datenbank, die in Browsern und serverseitigen Anwendungen verwendet werden kann. Es ist Open Source und die Nutzung ist kostenlos. In diesem Tutorial zeigen wir Ihnen anhand einiger Beispiele, wie Sie TaffyDB verwenden, um einige Daten zu speichern, einige Abfragen für die Daten durchzuführen und wichtige Operationen an den Daten durchzuführen.

Beginnen wir mit einem einfachen Beispiel

Beginnen wir mit einem sehr einfachen Beispiel, in dem wir einige Daten erstellen und dann versuchen, diese Daten im Browser auszudrucken.

Unser erster Schritt ist TaffyDB. Hierfür haben wir verschiedene Möglichkeiten. Die einfachste Methode besteht darin, eine URL zu verwenden, die eine minimierte Version der Datei „taffydb.js“ enthält.

Den Code für „taffydb.js“ finden Sie unter diesem Link. Ich schlage vor, dass Sie diesen Link öffnen, dann den Code kopieren und in eine Datei namens „taffy.js“ einfügen. Ansonsten können Sie Benutzen Sie einfach ihr CDN.

Da nun die Abhängigkeiten geklärt sind, konzentrieren wir uns auf die Datei „index.html“, in die wir die Kernlogik schreiben werden, natürlich innerhalb der <script>-Tags. Betrachten Sie den unten gezeigten HTML-Code. </script>

Beispiel

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>

Wenn Sie den obigen Code in Ihrem Browser ausführen, sollten Sie die folgende Ausgabe sehen.

Im obigen Code haben wir zuerst die Datei „taffy.js“ importiert und dann ein <script>-Tag innerhalb des &ly;head>-Tags selbst erstellt. Innerhalb des <script>-Tags erstellen wir ein TAFFY-Objekt, in dem wir ein Array von Objekten erstellen, in dem es mehrere Objekte mit unterschiedlichen Eigenschaften gibt. </script>

Dann iterieren wir über die Werte der Länder-Variablen und geben für jede Variable den Wert des Attributs „Name“ in ein Array namens „Ländername“ ein.

Wenn Sie den obigen Code in Ihrem Browser ausführen, sollten Sie die folgende Ausgabe sehen.

Datensätze mit TaffyDB einfügen

Im obigen Beispiel haben wir ein Array von Objekten erstellt und es an die TIFFY-Methode übergeben. Konzentrieren wir uns nun auf das Einfügen eines neuen Objekts in die Daten. Dies können wir mit Hilfe der Methode insert() tun. In der Methode insert() können wir je nach Wahl dieselben Eigenschaften oder unterschiedliche Eigenschaften übergeben.

Bedenken Sie den unten gezeigten Codeausschnitt, wir können ihn dazu verwenden Die Variable „Land“ in TaffyDB.

countries.insert({
   name: "Brazil",
   state: "State of São Paulo",
   capital: "Brasília",
});

Beispiel

index.html

Der aktualisierte

index.html

Code wird unten angezeigt.

<!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>

Wenn Sie den obigen Code in Ihrem Browser ausführen, sollten Sie die folgende Ausgabe sehen -

Abfragen mit TaffyDB ausführen

Während wir die Abfrage im obigen Beispiel ausgeführt haben, führen wir noch einmal eine einfache Abfrage aus, bei der wir die Namen von Ländern speichern möchten, deren Hauptstadt und Bundesstaat den gleichen Wert in den Daten haben.

Beispiel

index.html

Beachten Sie den unten gezeigten Code

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>

Im obigen HTML-Code iterieren wir mit Hilfe der Methode

each()

über alle Werte der Variablen Länder und vergleichen dann die „Hauptstadt“ und „deklarieren“ den Attributwert damit. Wenn es dann eine Übereinstimmung gibt, geben wir die Werte in ein Array ein und geben das Array schließlich in der Konsole aus. Wenn wir die obige HTML-Datei in einem Browser ausführen, erhalten wir Terminal.

Jetzt führen wir die Abfrage erneut aus und dieses Mal möchten wir den Namen des kleinsten Landes in lexikografischer Reihenfolge ausgeben. Aus den Daten im obigen Beispiel wäre es „Brasilien“. Betrachten Sie den unten gezeigten HTML-Code.

Beispiel

index.html

Beachten Sie den unten gezeigten Code

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>

Im obigen Code verketten wir in der Zeile mit dem Code

countries().order("name").first().name

mehrere Methoden mithilfe eines benannten Links. Zuerst sortieren wir die Daten nach dem Attribut Name, wählen dann das erste Element aus den sortierten Daten aus und extrahieren schließlich das Attribut Name aus diesem Element. Wenn Sie die obige HTML-Datei in Ihrem Browser ausführen, wird Folgendes angezeigt: Terminal.

Verwenden Sie TaffyDB, um Daten zu aktualisieren

Sie können die Methode

update()

verwenden, um Daten in TaffyDB zu aktualisieren. Wenn wir bei dieser Methode eine Eigenschaft übergeben, die im Objekt nicht vorhanden ist, wird sie angehängt. Wenn sie vorhanden ist, wird sie aktualisiert. Angenommen, Sie möchten einem Objekt namens „India“ ein Feld und eine neue Eigenschaft namens

financialCapital

hinzufügen: „Mumbai“. Betrachten Sie den unten gezeigten HTML-Code. Beispiel

index.html

Beachten Sie den unten gezeigten Code

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>

Um zu überprüfen, ob die von uns hinzugefügten Daten zur Datenbank hinzugefügt wurden, iteriere ich über das Objekt und drucke dann die Werte mithilfe einer einfachen „Wenn-sonst“-Bedingung aus.

如果您在浏览器中运行上述 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 操作。

Das obige ist der detaillierte Inhalt vonTaffyDB – JavaScript-Datenbank für den Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie schreibe ich eine internationale Handynummer mit JavaScript?Nächster Artikel：Wie schreibe ich eine internationale Handynummer mit JavaScript?

In Verbindung stehende Artikel

Mehr sehen