jQuery Academy · Pelajaran

Corak Reka Bentuk Pemalam dan Skop

Fahami corak reka bentuk pemalam yang umum seperti ungkapan fungsi yang dipanggil serta-merta (IIFE) dan amalan terbaik untuk penskopan pemboleh ubah bagi mengelakkan konflik.

Pelajaran 1 daripada 311 langkah

Corak Reka Bentuk Pemalam dan Skop ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah Plugin jQuery?

Plugin jQuery ialah cebisan kod kecil yang memperluas keupayaan jQuery, lalu membolehkan Anda menambahkan kaedah baharu pada objek $.fn.

Plugin membantu Anda membungkus fungsi yang boleh digunakan semula, menjadikan kod lebih modular, tersusun dan mudah diselenggara. Anggaplah plugin sebagai alat tersuai yang Anda tambahkan pada kotak alat jQuery.

Mengapa Menggunakan Plugin?

Plugin menawarkan beberapa manfaat:

Kebolehgunaan semula: Tulis kod sekali dan gunakannya di mana-mana.
Modulariti: Pecahkan ciri kompleks kepada bahagian yang lebih kecil dan mudah diurus.
Pengkapsulan: Asingkan logik dalaman plugin Anda daripada skrip lain.
Perkongsian: Kongsi ciri tersuai Anda dengan pembangun lain dengan mudah.

Struktur Asas Plugin (Permulaan)

Plugin yang sangat asas boleh dicipta dengan menambahkan fungsi pada $.fn. Walau bagaimanapun, pendekatan ini mempunyai kelemahan utama: pendekatan ini tidak melindungi kod Anda daripada konflik pemboleh ubah global.

Pertimbangkan plugin ringkas yang tidak dikapsulkan ini. Plugin tersebut menambahkan mySimplePlugin terus pada prototaip jQuery:

$.fn.mySimplePlugin = function() {
  return this.each(function() {
    $(this).css("color", "blue");
  });
};

// Usage (assuming jQuery and HTML are loaded):
// $('p').mySimplePlugin();

Memperkenalkan IIFE

Immediately Invoked Function Expression (IIFE) ialah fungsi JavaScript yang berjalan sebaik sahaja ditakrifkan. Fungsi ini mencipta skop peribadi untuk pemboleh ubah dan fungsinya, lalu menghalangnya daripada mencemarkan ruang nama global.

Hal ini penting bagi plugin untuk mengelakkan konflik dengan skrip lain pada halaman.

(function() {
  var privateVar = "I'm private!";
  console.log(privateVar);
})();

// console.log(privateVar); // This would cause an error!

Corak IIFE Plugin Standard

Corak yang disyorkan untuk plugin jQuery menggunakan IIFE yang menerima jQuery sebagai argumen dan memberikan alias $ kepadanya. Ini memastikan bahawa $ di dalam plugin Anda sentiasa merujuk kepada jQuery, walaupun pustaka lain (seperti Prototype.js) turut menggunakan $.

(function($) {
  // Your plugin code goes here
  // $ now safely refers to jQuery

  $.fn.mySafePlugin = function() {
    return this.each(function() {
      $(this).text("Hello from safe plugin!");
    });
  };

})(jQuery); // Pass jQuery object to the IIFE

// Example usage after plugin definition:
// $('div').mySafePlugin();

Membina Plugin Terkapsul Pertama Anda

Mari kita cipta plugin ringkas menggunakan corak IIFE. Plugin ini akan menambahkan class tertentu pada elemen yang dipilih. Perhatikan bahawa semua pemboleh ubah dan fungsi di dalam IIFE mempunyai skop setempat.

Cuba jalankan contoh ini:

(function($) {
  $.fn.highlightText = function() {
    return this.each(function() {
      // 'this' refers to the DOM element in .each()
      // $(this) wraps it into a jQuery object
      $(this).addClass('highlighted');
    });
  };
})(jQuery);

// Assume we have some HTML like:
// <p>This is some text.</p>
// <p>Another paragraph.</p>

// Now, let's use our plugin:
$('p').highlightText();

// This would make paragraphs have a 'highlighted' class.

Memahami 'this' dalam Plugin

Di dalam fungsi plugin Anda (contohnya, $.fn.myPlugin = function() { ... }), kata kunci this merujuk kepada objek jQuery yang memanggil plugin tersebut.

Untuk bekerja dengan setiap elemen DOM secara individu dalam set yang dipadankan, Anda hendaklah menggunakan this.each(function() { ... });. Di dalam fungsi panggil balik .each(), this merujuk kepada elemen DOM semasa.

(function($) {
  $.fn.showInfo = function() {
    console.log("Plugin called on: ", this.selector);
    return this.each(function() {
      // 'this' inside .each refers to the DOM element
      var elementTag = this.tagName;
      console.log("Processing element: ", elementTag);
      $(this).append(" <i>(processed)</i>");
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Item 1</p><div>Item 2</div>
$('p, div').showInfo();

Penskopan Setempat untuk Pemboleh Ubah Dalaman

Dalam IIFE plugin Anda, isytiharkan sebarang pemboleh ubah atau fungsi pembantu menggunakan var, let atau const. Ini memastikan pemboleh ubah dan fungsi tersebut kekal setempat sepenuhnya kepada plugin Anda, lalu mengelakkannya daripada bertembung dengan skrip lain.

Ini ialah amalan terbaik untuk menghasilkan kod yang kemas dan bebas konflik.

(function($) {
  // This helper function is only visible inside this IIFE
  function getFormattedTime() {
    var now = new Date();
    return now.toLocaleTimeString();
  }

  $.fn.addTimestamp = function() {
    return this.each(function() {
      var timestamp = getFormattedTime(); // Call local helper
      $(this).append('<small> - ' + timestamp + '</small>');
    });
  };
})(jQuery);

// Example usage:
// Assume HTML: <p>Last updated:</p>
$('p').addTimestamp();

Mencegah Kebocoran Pemboleh Ubah Global

Tanpa IIFE, sebarang pemboleh ubah yang diisytiharkan terus dalam skrip (tanpa var, let atau const) menjadi global. Hal ini boleh menyebabkan tingkah laku yang tidak dijangka apabila berbilang skrip mentakrifkan pemboleh ubah dengan nama yang sama.

IIFE bertindak sebagai pembungkus pelindung yang memastikan bahagian dalaman plugin Anda kekal peribadi.

Semakan Pantas tentang Manfaat IIFE

Anda telah mempelajari tentang Immediately Invoked Function Expression (IIFE) dan peranannya dalam pembangunan plugin jQuery. Ini ialah corak asas untuk mencipta plugin yang mantap dan bebas konflik.

Antara berikut, apakah manfaat utama membungkus plugin jQuery dalam IIFE, khususnya corak (function($) { ... })(jQuery);?

Jawab dalam pelajaran interaktif

Ulang Kaji: Corak Plugin dan Penskopan

Dalam pelajaran ini, kita meneroka konsep teras untuk membina plugin jQuery yang mantap:

Plugin jQuery: Memperluas fungsi jQuery supaya boleh digunakan semula.
IIFE: Immediately Invoked Function Expression mencipta skop peribadi.
Corak Standard: (function($) { ... })(jQuery); penting untuk mencegah konflik global $ dan mengkapsulkan kod Anda.
Kata Kunci this: Merujuk kepada objek jQuery; gunakan .each() untuk elemen individu.
Penskopan Setempat: Isytiharkan pemboleh ubah dalaman (var, let, const) di dalam IIFE untuk mencegah kebocoran global.

Penguasaan corak ini memastikan plugin Anda bersifat modular, mudah diselenggara dan boleh berfungsi dengan baik bersama skrip lain.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Corak Reka Bentuk Pemalam dan Skop” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Corak Reka Bentuk Pemalam dan Skop”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Corak Reka Bentuk Pemalam dan Skop”?

Fahami corak reka bentuk pemalam yang umum seperti ungkapan fungsi yang dipanggil serta-merta (IIFE) dan amalan terbaik untuk penskopan pemboleh ubah bagi mengelakkan konflik. Anda berlatih jQuery Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 3.

Berapa lamakah pelajaran “Corak Reka Bentuk Pemalam dan Skop” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Corak Reka Bentuk Pemalam dan Skop
Membina Pemalam yang Boleh Dikonfigurasi dan Digunakan Semula
Mengintegrasikan Kaedah Awam dan Panggilan Balik

← Kembali ke jQuery Academy