cari

Rumah  >  Artikel  >  hujung hadapan web  >  TaffyDB – Pangkalan data JavaScript untuk penyemak imbas

TaffyDB – Pangkalan data JavaScript untuk penyemak imbas

PHPz
PHPzke hadapan
2023-08-25 13:45:181188semak imbas

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

TaffyDB ialah pangkalan data dalam memori yang ringan dan berkuasa yang boleh digunakan dalam pelayar dan aplikasi sebelah pelayan. Ia adalah sumber terbuka dan percuma untuk digunakan. Dalam tutorial ini, kami akan melalui beberapa contoh untuk menunjukkan cara menggunakan TaffyDB untuk menyimpan beberapa data, melakukan beberapa pertanyaan pada data dan melaksanakan operasi penting pada data.

Mari kita mulakan dengan contoh mudah

Mari kita mulakan dengan contoh yang sangat asas di mana kita akan mencipta beberapa data dan kemudian cuba mencetak data tersebut pada penyemak imbas.

Langkah pertama kami ialah memiliki TaffyDB. Untuk ini kami mempunyai pilihan yang berbeza. Kaedah paling asas ialah menggunakan URL yang mengandungi versi mini fail "taffydb.js".

Kod untuk "taffydb.js" boleh didapati di pautan ini. Saya cadangkan anda membuka pautan ini, kemudian salin dan tampal kod ke dalam fail yang dipanggil "taffy.js". Jika tidak, anda boleh Hanya gunakan CDN mereka.

Sekarang kebergantungan telah diuruskan, mari fokus pada fail "index.html", di mana kita akan menulis logik teras, dalam teg <script>, sudah tentu. Pertimbangkan kod HTML yang ditunjukkan di bawah. </script>

Contoh

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>

Jika anda menjalankan kod di atas dalam penyemak imbas anda, anda sepatutnya melihat output berikut.

Dalam kod di atas, kami mula-mula mengimport fail "taffy.js" dan kemudian mencipta teg <script> di dalam teg &ly;head> itu sendiri. Di dalam teg <script>, kami mencipta objek TAFFY di mana kami mencipta pelbagai objek yang terdapat berbilang objek dengan sifat berbeza. </script>

Kemudian kami mengulangi nilai-nilai pembolehubah negara dan untuk setiap pembolehubah kami meletakkan nilai atribut "nama" ke dalam tatasusunan yang dipanggil "countriesName".

Jika anda menjalankan kod di atas dalam penyemak imbas anda, anda sepatutnya melihat output berikut.

Masukkan rekod menggunakan TaffyDB

Dalam contoh di atas, kami mencipta pelbagai objek dan menyerahkannya kepada kaedah TIFFY. Sekarang mari kita fokus pada memasukkan objek baharu ke dalam data, kita boleh melakukannya dengan bantuan kaedah insert(). Dalam kaedah insert() kita boleh melepasi sifat yang sama atau sifat yang berbeza bergantung pada pilihan kita.

Pertimbangkan coretan kod yang ditunjukkan di bawah, kita boleh menggunakannya Pembolehubah Negara dalam TaffyDB. 

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

Contoh

index.html

Kod index.html yang dikemas kini ditunjukkan di bawah. 

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

Jika anda menjalankan kod di atas dalam penyemak imbas anda, anda akan melihat output berikut -

Lakukan pertanyaan menggunakan TaffyDB

Semasa kami melaksanakan pertanyaan dalam contoh di atas, marilah kami melaksanakan pertanyaan mudah sekali lagi di mana kami ingin menyimpan nama negara yang modal dan negerinya mempunyai nilai yang sama dalam data.

Contoh

index.html

Pertimbangkan kod index.html yang ditunjukkan di bawah. 

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

Dalam kod HTML di atas, kami mengulangi semua nilai pembolehubah negara dengan bantuan kaedah setiap() dan kemudian membandingkan "modal" dan "mengisytiharkan" nilai atribut dengannya. Kemudian jika ada padanan kami meletakkan nilai ke dalam tatasusunan dan akhirnya mencetak tatasusunan dalam konsol.

Jika kita menjalankan fail HTML di atas dalam pelayar kita akan dapat terminal.

Sekarang mari kita lakukan pertanyaan lain dan kali ini, kita mahu mencetak nama negara terkecil dalam susunan leksikografi. Daripada data dalam contoh di atas, ia akan menjadi "Brazil". Pertimbangkan kod HTML yang ditunjukkan di bawah.

Contoh

index.html

Pertimbangkan kod index.html yang ditunjukkan di bawah. 

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

Dalam kod di atas, baris yang mengandungi kod countries().order("name").first().name ialah tempat kami merangkai pelbagai kaedah menggunakan link bernama. Mula-mula, kami mengisih data mengikut atribut name, kemudian pilih elemen pertama daripada data yang diisih, dan akhirnya, kami mengekstrak atribut name daripada elemen itu.

Jika anda menjalankan fail HTML di atas dalam penyemak imbas anda, anda akan melihat terminal.

Gunakan TaffyDB untuk mengemas kini data

Anda boleh menggunakan kaedah kemas kini() untuk mengemas kini data dalam TaffyDB. Dalam kaedah ini, jika kita lulus harta yang tidak wujud dalam objek, maka ia akan ditambah jika ia wujud, ia akan dikemas kini.

Andaikan anda ingin menambah medan pada objek yang dipanggil "India" dan menambah harta baharu yang dipanggil financialCapital: "Mumbai". Pertimbangkan kod HTML yang ditunjukkan di bawah.

Contoh

index.html

Pertimbangkan kod index.html yang ditunjukkan di bawah. 

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

Untuk mengesahkan bahawa data yang kami tambah telah ditambahkan pada pangkalan data, saya mengulangi objek dan kemudian mencetak nilai menggunakan keadaan "jika-lain" yang mudah.

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

Atas ialah kandungan terperinci TaffyDB – Pangkalan data JavaScript untuk penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 运算符 if JS 对象 数据库
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menulis nombor mudah alih dengan cara antarabangsa menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menulis nombor mudah alih dengan cara antarabangsa menggunakan JavaScript?

Artikel berkaitan

Lihat lagi