Pertanyaan Pola Desain yang digunakan dalam pustaka jQuery


jQuery sangat terfokus pada DOM dan memberikan abstraksi yang bagus di sekitarnya. Dengan demikian, ia memanfaatkan berbagai yang sudah dikenal pola desain yang baru saja memukul saya kemarin. Salah satu contoh nyata adalah Penghias pola. Objek jQuery menyediakan fungsionalitas baru dan tambahan di sekitar objek DOM biasa.

Misalnya, DOM memiliki penduduk asli masukkanBefore metode tetapi tidak ada metode insertAfter yang sesuai. Ada berbagai implementasi tersedia untuk mengisi celah ini, dan jQuery adalah salah satu pustaka yang menyediakan fungsi ini:

$(selector).after(..)
$(selector).insertAfter(..)

Ada banyak contoh lain dari pola Dekorator yang banyak digunakan di jQuery.

Apa contoh lain, besar atau kecil, dari pola desain yang Anda perhatikan yang merupakan bagian dari perpustakaan itu sendiri? Juga, berikan contoh penggunaan pola tersebut.

Membuat wiki komunitas ini karena saya percaya bahwa berbagai hal yang disukai orang tentang jQuery dapat ditelusuri kembali ke pola desain yang terkenal, hanya saja mereka tidak sering disebut dengan nama pola. Tidak ada jawaban untuk pertanyaan ini, tetapi membuat katalog pola-pola ini akan memberikan wawasan yang berguna ke dalam perpustakaan itu sendiri.


76


asal


Jawaban:


Inisialisasi Malas:

$(document).ready(function(){
    $('div.app').myPlugin();
});

Adaptor atau pembungkus

$('div').css({
    opacity: .1 // opacity in modern browsers, filter in IE.
});

Fasad

// higher level interfaces (facades) for $.ajax();
$.getJSON();
$.get();
$.getScript();
$.post();

Pengamat

// jQuery utilizes it's own event system implementation on top of DOM events.
$('div').click(function(){})
$('div').trigger('click', function(){})

Iterator

$.each(function(){});
$('div').each(function(){});

Strategi

$('div').toggle(function(){}, function(){});

Proksi

$.proxy(function(){}, obj); // =oP

Pembangun

$('<div class="hello">world</div>');

Prototipe

// this feels like cheating...
$.fn.plugin = function(){}
$('div').plugin();

Kelas terbang

// CONFIG is shared
$.fn.plugin = function(CONFIG){
     CONFIG = $.extend({
         content: 'Hello world!'
     }, CONFIG);
     this.html(CONFIG.content);
}

89



Itu Gabungan Pola ini juga sangat umum digunakan di jQuery. Setelah bekerja dengan perpustakaan lain, saya dapat melihat bagaimana pola ini tidak begitu jelas seperti yang terlihat pada pandangan pertama. Pola dasarnya mengatakan itu,

sekelompok objek harus diperlakukan dengan cara yang sama seperti contoh tunggal dari suatu objek.

Misalnya, ketika berhadapan dengan elemen DOM tunggal atau sekelompok elemen DOM, keduanya dapat diperlakukan dengan cara yang seragam.

$('#someDiv').addClass('green'); // a single DOM element

$('div').addClass('green');      // a collection of DOM elements

13



Bagaimana dengan pola Singleton / Modul, seperti yang dibahas dalam artikel ini tentang YUI: http://yuiblog.com/blog/2007/06/12/module-pattern/

Saya yakin jQuery menggunakan pola ini di intinya, serta mendorong pengembang plug-in untuk menggunakan pola tersebut. Menggunakan pola ini adalah cara yang mudah dan efisien untuk menjaga agar namespace global terhindar dari kekacauan, yang selanjutnya berguna dengan membantu pengembang menulis kode yang bersih dan dienkapsulasi.


5



Di mata pemrograman fungsional, jQuery adalah Monad. Monad adalah struktur yang mengirimkan objek ke suatu tindakan, mengembalikan objek yang dimodifikasi dan meneruskannya ke tindakan selanjutnya. Seperti jalur perakitan.

Itu Artikel Wikipedia mencakup definisi dengan sangat baik.


2