Corak Reka Bentuk Modular di JavaScript

mata teras

• Pemahaman Jenis Ahli: Menguasai perbezaan antara ahli awam, swasta, istimewa dan dilindungi dalam JavaScript.
• Variasi mod modul: Ketahui tentang nuansa antara mod modul asas dan mod modul yang mendedahkan, yang menyediakan gaya pengekodan dalaman yang konsisten dan kawalan fleksibel pendedahan.
• Menggunakan ahli istimewa: Gunakan ahli istimewa untuk dengan selamat mendedahkan pembolehubah swasta melalui kaedah awam, yang membolehkan akses terkawal sambil mengekalkan enkapsulasi.
• Melindungi dasar ahli: Dayakan perlindungan dalam JavaScript dengan mendedahkan data sementara dalam skop terkawal dan kemudian kembali ke data persendirian, dengan itu berkongsi data antara pelbagai modul tanpa akses luaran, tanpa akses luaran.
• Teknologi yang dipertingkatkan: meneroka kaedah seperti untuk mengikat modul tambahan ke dalam satu konteks, dengan itu mencapai keadaan bersama dan pengurusan sambil mengekalkan kemerdekaan modul dan kelakuan. apply()

Artikel ini akan menerangkan struktur dan kelebihan corak reka bentuk modul lanjutan, yang merangkumi empat jenis ahli utama:

• ahli awam: ahli yang boleh diakses dari mana -mana sahaja. Ahli Persendirian:
ahli yang hanya boleh diakses dari dalam objek.
• Ahli -ahli Swasta: ahli yang hanya boleh diakses secara langsung dari objek, tetapi boleh diakses secara tidak langsung dari luar melalui kaedah awam .
• melindungi ahli: ahli yang hanya boleh diakses dari objek dalam atau dari mana -mana modul mereka. Artikel ini bukan mengenai pengaturcaraan berorientasikan objek, kerana struktur yang akan kita buat adalah corak singleton, yang merupakan struktur contoh tunggal yang tidak dapat diterapkan beberapa kali. Sebenarnya, ia tidak diterjemahkan sama sekali (dari perspektif memiliki pembina), jadi ia adalah corak berasaskan objek, bukan corak berorientasikan objek. Untuk maklumat lanjut mengenai perbezaan antara pengaturcaraan berorientasikan objek dan berorientasikan objek, dan pengenalan kepada pengaturcaraan berorientasikan objek di JavaScript, saya cadangkan anda membaca artikel Ryan Frishberg: pengaturcaraan berorientasikan objek JavaScript.
• Corak reka bentuk modular

di sini akan digunakan sebagai corak reka bentuk asas, yang merupakan varian corak modul klasik tetapi dengan lebih banyak kawalan. Walaupun beberapa artikel telah menggambarkan corak ini, sedikit yang benar -benar menjelaskan bagaimana mereka bekerja, dan sedikit yang mempunyai set ciri lengkap!

Mod Modul Asas

Corak Modul Klasik membungkus semua kod skrip dalam fungsi tanpa nama yang ditugaskan kepada pembolehubah tunggal apabila dikembalikan. Fungsi literal hanyalah fungsi yang memanggil dirinya sendiri, jadi tugasan akhir fungsi literal bukanlah fungsi, tetapi apa -apa nilai yang dikembalikan oleh fungsi tersebut. Untuk memberikan contoh mudah, fungsi literal mengandungi pengiraan, jadi nilai yang diberikan kepada jumlah adalah hasil pengiraan itu:

<code class="language-javascript">var sum = (function() { return 6 * 7; })();</code>

Untuk menggambarkan makna sintaks ini, berikut adalah kod yang sama, dicabut ke dalam fungsi yang dinamakan:

<code class="language-javascript">function calculate() { return 6 * 7; }
var sum = (calculate)();</code>

Dalam kes ini kita sebenarnya tidak perlu meletakkan kurungan di sekitar calculate, tetapi apabila menggunakan fungsi tanpa nama, kita perlu berbuat demikian untuk menilainya sebagai ungkapan tunggal tanpa pra-pemberian.

ahli awam dan swasta

Jadi, dalam fungsi literal kita boleh meletakkan kod lain -seperti pembolehubah, sifat, dan fungsi -dan pelbagai jenis sintaks yang digunakan untuk menentukan data dalaman menentukan ahli awam dan pembahagian antara ahli swasta. Berikut adalah contoh:

Sejak kita mengembalikan objek atribut, dan objek diberikan kepada

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();</code>

, atribut ini boleh diakses dari luar objek, seperti

dan MyModule. Tetapi kita tidak boleh mengakses MyModule.myPublicData atau MyModule.myPublicFunction kerana pembolehubah hanya boleh diakses dalam skop asalnya. Skop pembolehubah adalah untuk menentukan konteksnya, yang ditentukan oleh pernyataan myPrivateData. Dalam contoh ini, skop pembolehubah swasta adalah myPrivateFunction objek, jadi mereka hanya boleh diakses dari dalam objek tersebut. var MyModule

Mod Modul Mengungkap

Menggunakan mod modul, kami menggunakan dua sintaks yang berbeza untuk mewujudkan perbezaan antara ahli awam dan swasta. Mengungkapkan corak modul adalah varian corak ini yang membolehkan kita menggunakan sintaks yang sama untuk semua pembinaan dalaman, hanya menangguhkan notasi objek literal pada akhirnya untuk mengembalikan (atau mendedahkan) ahli awam. Mari kita lihat objek itu lagi, tetapi kali ini menggunakan mod modul mendedahkan:

Pembahagian antara ahli awam dan swasta masih sama, tetapi kali ini ia tidak dilaksanakan oleh sintaks asal yang digunakan untuk menentukan ahli -ahli ini, tetapi hanya oleh kandungan yang dikembalikan. Ini menjadikan corak modul mendedahkan varian yang berguna, kerana ia membolehkan penggunaan gaya pengekodan konsisten secara dalaman. Ini juga bermakna anda boleh menukar nama ahli awam apabila anda kembali, dan juga mengubah ahli -ahli yang akan menjadi ahli awam pada bila -bila masa.

<code class="language-javascript">var MyModule = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  var myPublicData = 42;
  function myPublicFunction() {
    alert('public');
  }
  return {
    myPublicData : myPublicData,
    myPublicFunction : myPublicFunction
  };
})();</code>

Corak ini diinovasi oleh Christian Heilmann, yang menjelaskan corak ini dan corak modul yang mendasari dalam artikelnya: sekali lagi menggunakan corak modul - mendedahkan sesuatu kepada dunia.

(Kandungan berikut akan dikeluarkan dalam segmen kerana panjang artikel)

Atas ialah kandungan terperinci Corak Reka Bentuk Modular di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!