Maison >interface Web >js tutoriel >TaffyDB – Base de données JavaScript pour le navigateur

TaffyDB – Base de données JavaScript pour le navigateur

PHPzavant: 2023-08-25 13:45:181201parcourir

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

TaffyDB est une base de données en mémoire légère et puissante qui peut être utilisée dans les navigateurs et les applications côté serveur. Il est open source et gratuit à utiliser. Dans ce didacticiel, nous allons vous montrer à travers quelques exemples comment utiliser TaffyDB pour stocker certaines données, effectuer des requêtes sur les données et effectuer des opérations importantes sur les données.

Commençons par un exemple simple

Commençons par un exemple très basique dans lequel nous allons créer des données, puis essayer d'imprimer ces données sur le navigateur.

Notre première étape est d'avoir TaffyDB. Pour cela, nous avons différentes options. La méthode la plus basique consiste à utiliser une URL contenant une version réduite du fichier « taffydb.js ».

Le code de « taffydb.js » peut être trouvé sur ce lien. Je vous suggère d'ouvrir ce lien, puis de copier et coller le code dans un fichier appelé "taffy.js". Sinon, vous pouvez Utilisez simplement leur CDN.

Maintenant que les dépendances sont prises en charge, concentrons-nous sur le fichier « index.html », où nous écrirons la logique de base, au sein des balises <script>, bien sûr. Considérez le code HTML présenté ci-dessous. </script>

Exemple

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>

Si vous exécutez le code ci-dessus dans votre navigateur, vous devriez voir le résultat suivant.

Dans le code ci-dessus, nous avons d'abord importé le fichier "taffy.js", puis créé une balise <script> à l'intérieur de la balise &ly;head> elle-même. À l'intérieur de la balise <script>, nous créons un objet TAFFY dans lequel nous créons un tableau d'objets dans lequel se trouvent plusieurs objets avec des propriétés différentes. </script>

Ensuite, nous parcourons les valeurs des variables countries et pour chaque variable nous mettons la valeur de l'attribut "name" dans un tableau appelé "countriesName".

Si vous exécutez le code ci-dessus dans votre navigateur, vous devriez voir le résultat suivant.

Insérer des enregistrements à l'aide de TaffyDB

Dans l'exemple ci-dessus, nous avons créé un tableau d'objets et l'avons transmis à la méthode TIFFY. Concentrons-nous maintenant sur l'insertion d'un nouvel objet dans les données, nous pouvons le faire à l'aide de la méthode insert(). Dans la méthode insert() nous pouvons transmettre les mêmes propriétés ou des propriétés différentes selon notre choix.

Considérez l'extrait de code ci-dessous, nous pouvons l'utiliser pour La variable Country dans TaffyDB.

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

Exemple

index.html

Le code index.html mis à jour est présenté ci-dessous.

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

Si vous exécutez le code ci-dessus dans votre navigateur, vous devriez voir le résultat suivant -

Exécuter des requêtes à l'aide de TaffyDB

Pendant que nous avons exécuté la requête dans l'exemple ci-dessus, exécutons à nouveau une requête simple dans laquelle nous souhaitons stocker les noms des pays dont la capitale et l'État ont la même valeur dans les données.

Exemple

index.html

Considérez le code index.html ci-dessous.

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

Dans le code HTML ci-dessus, nous parcourons toutes les valeurs de la variable countries à l'aide de la méthode each(), puis comparons la "capitale" et "déclarons" la valeur de l'attribut avec elles. Ensuite, s'il y a une correspondance, nous mettons les valeurs dans un tableau et enfin imprimons le tableau dans la console.

Si nous exécutons le fichier HTML ci-dessus dans un navigateur, nous obtiendrons Terminal.

Maintenant, exécutons à nouveau la requête et cette fois, nous voulons imprimer le nom du plus petit pays par ordre lexicographique. D'après les données de l'exemple ci-dessus, ce serait "Brésil". Considérez le code HTML présenté ci-dessous.

Exemple

index.html

Considérez le code index.html ci-dessous.

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

Dans le code ci-dessus, la ligne contenant le code countries().order("name").first().name est l'endroit où nous enchaînons plusieurs méthodes en utilisant un link nommé. Tout d'abord, nous trions les données par l'attribut name, puis sélectionnons le premier élément des données triées, et enfin, nous extrayons l'attribut name de cet élément.

Si vous exécutez le fichier HTML ci-dessus dans votre navigateur, vous verrez Terminal.

Utilisez TaffyDB pour mettre à jour les données

Vous pouvez utiliser la méthode update() pour mettre à jour les données dans TaffyDB. Dans cette méthode, si nous transmettons une propriété qui n'existe pas dans l'objet, alors elle sera ajoutée si elle existe, elle sera mise à jour ;

Supposons que vous souhaitiez ajouter un champ à un objet appelé "Inde" et ajouter une nouvelle propriété appelée financialCapital : "Mumbai". Considérez le code HTML présenté ci-dessous.

Exemple

index.html

Considérez le code index.html ci-dessous.

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

Pour vérifier que les données que nous avons ajoutées ont été ajoutées à la base de données, je parcourt l'objet puis j'imprime les valeurs en utilisant une simple condition "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 操作。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment écrire un numéro de mobile de manière internationale en utilisant JavaScript ?Article suivant：Comment écrire un numéro de mobile de manière internationale en utilisant JavaScript ?

Articles Liés

Voir plus