Melaksanakan Corak Singleton dalam JavaScript ES6+: Panduan Langkah demi Langkah

Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan corak Singleton dalam JavaScript.

Jika anda seorang pembangun JavaScript tindanan penuh, anda tahu bahawa JavaScript ialah bahasa berkuasa yang boleh anda gunakan untuk membina tapak web yang menakjubkan. Sebaliknya, jika anda hanya menggunakan JavaScript untuk pengesahan borang bahagian hadapan dan panggilan AJAX, anda hanya menconteng permukaan perkara yang boleh dilakukannya, dan ia lebih daripada itu. Memandangkan ia adalah bahasa yang kaya dengan ciri, terdapat banyak rangka kerja yang dibina di atasnya.

Dalam artikel ini, kita akan membincangkan corak pengaturcaraan yang berguna dalam JavaScript berorientasikan objek: corak tunggal. Objek Singleton dicipta hanya sekali dalam skop global semasa aplikasi sedang berjalan. Ia digunakan untuk berkongsi sumber atau menyelaras antara bahagian aplikasi yang berlainan.

Apakah corak singleton?

Mari kita lihat definisi corak tunggal:

Dalam kejuruteraan perisian, corak tunggal ialah corak reka bentuk perisian yang mengehadkan instantiasi kelas kepada contoh "tunggal". Ini berguna apabila hanya satu objek diperlukan untuk menyelaraskan operasi keseluruhan sistem.

Apabila anda membangunkan aplikasi, kadangkala anda perlu mencipta objek global merentas aplikasi. Khususnya, anda mahukan objek yang dibuat seketika hanya sekali untuk sepanjang hayat permintaan. Sebagai contoh, ia mungkin objek sambungan pangkalan data yang anda mahu kekalkan secara global merentas permintaan, kerana anda tidak perlu membuat berbilang objek pangkalan data untuk setiap permintaan. Dalam kes ini, corak singleton sangat berguna kerana ia menjamin bahawa hanya satu salinan objek akan dijadikan instantiated.

Pandangan Pantas: Corak Singleton dalam Versi Lama JavaScript

Dalam bahagian ini, kita akan melihat dengan pantas cara melaksanakan corak tunggal dalam versi JavaScript yang lebih lama.

Mari kita lihat contoh di bawah.

Dalam contoh di atas, kami melaksanakan objek Singleton sebagai penutupan, jadi ia akan dipanggil serta-merta. Ia melaksanakan kaedah getInstance, yang boleh kita panggil untuk membuat instantiate objek. Dalam kaedah getInstance, kami menyemak sama ada harta instance sudah mempunyai objek yang kami cari, jika ada, kami tidak mencipta objek lain. Jika ia tidak mengandungi sebarang objek, kami memanggil kaedah createInstance untuk membuat instantiate objek baharu dan kemudian mengembalikannya. Dengan cara ini ia memastikan bahawa hanya satu salinan objek dibuat apabila anda cuba membuat instantiate objek baharu. Singleton 对象实现为闭包，因此它将立即被调用。它实现了 getInstance 方法，我们可以调用该方法来实例化一个对象。在 getInstance 方法中，我们检查 instance 属性是否已经拥有我们正在查找的对象，如果存在，我们不会创建另一个对象。如果它不包含任何对象，我们将调用 createInstance 方法来实例化一个新对象，然后返回它。通过这种方式，它可以确保每当您尝试实例化新对象时只会创建对象的单个副本。

为了演示它，我们调用 Singleton.getInstance() 方法两次来检查它是否确实创建了两个不同的对象。在控制台中，您应该能够看到两个对象是相同的，并且它们都打印相同的日期和时间。

这就是在旧版本的 JavaScript 中实现单例模式的方法。在下一节中，我们将了解如何在 JavaScript ES6+ 版本中实现它。

ES6+ 中的单例模式

在本节中，我们将了解如何在 JavaScript ES6+ 版本中实现单例模式。当谈到 ES6 方式时，您可以使用几种不同的方法来实现单例模式。

ES6 模块

如果您使用过 ES6 模块，并且您还不知道，ES6 模块默认情况下是单例的。具体来说，通过组合模块和 const 关键字，您可以轻松编写单例。

让我们看一下下面的ES6模块代码。

const currentDateAndTime = new Object("I am instantiated at:" + new Date().toLocaleString());

export default currentDateAndTime;

所以现在，每当您导入上述 ES6 模块时，都保证获得相同版本的 currentDateAndTime 对象。由于 currentDateAndTime 对象的作用域为模块，因此每次在其他文件中包含上述 ES6 模块时，都保证您会得到相同的对象。

ES6 类

在本节中，我们将了解如何使用 ES6 类来实现单例模式。

让我们看一下下面的例子。

如您所见，我们已经实现了 DBConnection 类，我们可以使用它来跨应用程序实例化数据库连接对象。

为了测试这一点，我们通过调用 DBConnection 类的 getInstance 方法实例化了两个对象。然后，我们比较两个对象，看看它们是否相同。由于我们使用的是单例模式，因此它们应该是相同的，并且 console.log 语句将打印 true

Untuk menunjukkannya, kami memanggil kaedah Singleton.getInstance() dua kali untuk menyemak sama ada ia benar-benar mencipta dua objek berbeza. Dalam konsol anda sepatutnya dapat melihat bahawa kedua-dua objek adalah sama dan kedua-duanya mencetak tarikh dan masa yang sama.

Ini adalah cara untuk melaksanakan corak tunggal dalam versi JavaScript yang lebih lama. Dalam bahagian seterusnya, kita akan melihat cara untuk melaksanakan ini dalam versi JavaScript ES6+. 🎜 🎜Corak singleton dalam ES6+🎜 🎜Dalam bahagian ini, kita akan belajar cara melaksanakan corak tunggal dalam versi JavaScript ES6+. Apabila ia datang kepada cara ES6, terdapat beberapa cara berbeza anda boleh melaksanakan corak tunggal. 🎜

Modul ES6

🎜Jika anda telah menggunakan modul ES6 dan anda belum mengetahuinya lagi, modul ES6 adalah tunggal secara lalai. Khususnya, anda boleh menulis singleton dengan mudah dengan menggabungkan modul dengan kata kunci const. 🎜 🎜Mari kita lihat kod modul ES6 di bawah. 🎜

  constructor(conString) {}

  static getInstance(conString) {
    if (!this.instance) {
      this.instance = new DBConnection(conString);
    }

    return this.instance;
  }
}

const dbConObj = DBConnection.getInstance('mysqldb1');

export default dbConObj;

🎜Jadi sekarang, apabila anda mengimport modul ES6 di atas, anda dijamin mendapat versi yang sama bagi objek currentDateAndTime. Memandangkan objek currentDateAndTime adalah modul-skop, anda dijamin mendapat objek yang sama setiap kali anda memasukkan modul ES6 di atas dalam fail lain. 🎜

Kelas ES6

🎜Dalam bahagian ini, kita akan belajar bagaimana untuk melaksanakan corak tunggal menggunakan kelas ES6. 🎜 🎜Mari kita lihat contoh di bawah. 🎜 🎜

Atas ialah kandungan terperinci Melaksanakan Corak Singleton dalam JavaScript ES6+: Panduan Langkah demi Langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!