10 petua untuk membantu anda mencipta plugins_jquery jQuery yang lebih baik

Artikel ini meringkaskan 10 cadangan untuk membantu anda mencipta pemalam jQuery yang lebih baik. Kongsikan dengan semua orang untuk rujukan anda. Arahan khusus adalah seperti berikut:

Selepas membangunkan banyak pemalam jQuery, saya perlahan-lahan memikirkan satu set struktur dan corak yang agak standard untuk membangunkan pemalam jQuery. Dengan cara ini saya boleh menyalin & menampal kebanyakan struktur kod dan hanya fokus pada kod logik utama. Menggunakan corak reka bentuk dan seni bina yang sama juga memudahkan untuk membetulkan pepijat atau melakukan pembangunan sekunder. Seni bina yang terbukti boleh memastikan bahawa pemalam saya tidak akan menyebabkan masalah besar, tidak kira sama ada pemalam itu ringkas atau kompleks. Di sini saya kongsikan 10 pengalaman yang telah saya rumuskan.

1. Letakkan semua kod anda di dalam penutup

Ini adalah yang paling saya gunakan. Tetapi kadang-kadang kaedah di luar penutupan tidak boleh dipanggil.

Tetapi kod pemalam anda hanya menyediakan pemalam anda sendiri, jadi masalah ini tidak wujud. Anda boleh meletakkan semua kod dalam penutupan.

Kaedah itu mungkin harus diletakkan di dalam kaedah Prototaip.

(function($) {  
  //code here 
})(jQuery);

2. Sediakan pilihan lalai untuk pemalam

Pemalam anda sepatutnya mempunyai beberapa pilihan yang boleh ditetapkan oleh pembangun, jadi anda perlu menyediakan pilihan lalai pemulihan. Anda boleh menetapkan pilihan ini melalui fungsi lanjutan jQuery:

var defaultSettings = {   mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});

3 Kembalikan elemen menggunakan

JavaScript/jQuery mempunyai ciri yang baik yang ia boleh melakukan cascading kaedah, jadi kita tidak seharusnya memusnahkan ciri ini dan sentiasa mengembalikan elemen dalam kaedah tersebut. Saya mengikut peraturan ini dalam setiap pemalam jQuery yang saya buat.

$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

4. Letakkan kod sekali di luar gelung utama

Ini sangat penting, tetapi sering diabaikan. Ringkasnya, jika anda mempunyai sekeping kod yang merupakan sekumpulan nilai lalai dan hanya perlu digunakan sekali sahaja, dan bukannya digunakan setiap kali fungsi pemalam anda dipanggil, anda harus meletakkan kod ini di luar pemalam kaedah. Ini membolehkan pemalam anda berjalan dengan lebih cekap dan menjimatkan memori.

var defaultSettings = {  
               mode      : 'Pencil',   
               lineWidthMin  : '0',   
               lineWidthMax  : '10',   
               lineWidth    : '2' }; 
settings = $.extend({}, defaultSettings, settings || {});
$.fn.wPaint = function(settings) {  
 return this.each(function() { 
    var elem = $(this);    
  //run some code here   
 } 
}

Anda dapat melihat bahawa "defaultSettings" dalam kod di atas sepenuhnya di luar kaedah pemalam Memandangkan kod ini berada di dalam penutupan, kami tidak perlu risau tentang pembolehubah ini ditindih.

5. Mengapa perlu menyediakan Prototaip Kelas

Sebagai daging dan darah kod anda, kaedah dan fungsi harus diletakkan dalam fungsi prototaip. Terdapat dua sebab:

◆ Ia boleh menjimatkan banyak memori kerana anda tidak perlu mencipta kaedah ini berulang kali.

◆ Adalah lebih cepat untuk merujuk kaedah yang sudah siap daripada menciptanya semula.

Ringkasnya, prototaip memanjangkan objek dan menyediakan kaedah untuknya tanpa menggunakan kaedah ini dalam setiap objek. Ini juga menjadikan kod anda lebih teratur dan cekap. Sebaik sahaja anda membiasakan diri dengan cara pembangunan ini, anda akan mendapati bahawa ia menjimatkan banyak masa untuk projek masa depan anda.

6. Cara menyediakan Prototaip Kelas

Menyediakan kaedah prototaip mempunyai dua bahagian. Mula-mula kita perlu mencipta definisi kelas awal kita, yang dalam kebanyakan kes bermakna mencipta objek. Takrifan ini mengandungi bahagian yang berbeza untuk setiap contoh objek. Dalam Pemalam Paint jQuery saya, saya menulis ini:

function Canvas(settings) {  
 this.settings = settings;   
 this.draw = false;   
 this.canvas = null;    
   this.ctx = null;  
  return this;
}

Mari tambah kaedah global:

Canvas.prototype = {   
 generate: function() { 
    //generate code  
 } 
}

Kunci di sini adalah untuk menjadikan kaedah prototaip universal, tetapi data adalah unik untuk setiap kejadian dan boleh dirujuk dengan "ini".

7 Gunakan objek "ini"

Dengan menggunakan "$this", kita boleh menghantar rujukan yang betul kepada penutupan lain. Kami juga mungkin perlu menghantar rujukan $ini kepada kaedah lain. Perlu diingatkan bahawa nama $this boleh ditukar, dan sebarang nama pembolehubah boleh digunakan.

Canvas.prototype = {  
 generate: function()  { 
    //some code    
  var $this = this;    
  var buton = //...some code  
    button.click(function(){ 
    //using this will not be found since it has it's own this    
    //use $this instead.     
   $this.someFunc($this);    
  });  
 }, 
 someFunc: function($this)   {  
    //won't know what "this" is.  
   //use $this instead passed from the click event  
  } 
}

8. Simpan tetapan dalam setiap objek

Saya telah menyimpan tetapan saya sendiri dalam setiap objek dan kemudian memanipulasi tetapan sendiri. Dengan cara ini anda tidak perlu melepasi banyak parameter dalam kaedah yang berbeza. Meletakkan pembolehubah ini dalam objek juga memudahkan anda memanggil pembolehubah ini di tempat lain.

function Canvas(settings) {  
 this.settings = settings;  
  return this; 
}

9. Pisahkan logik kaedah Prototaip anda

Ini mungkin prinsip asas. Apabila anda teragak-agak untuk menyediakan kaedah, anda boleh bertanya kepada diri sendiri "Jika orang lain mengatasi kaedah ini, adakah kod anda memenuhi keperluan mereka atau "Seberapa sukar untuk orang lain menulis kaedah ini?" Sudah tentu ini adalah persoalan fleksibiliti. Berikut ialah senarai kaedah Plugin jQuery Color Picker saya, anda boleh merujuknya:

generate() 
appendColors() 
colorSelect() 
colorHoverOn() 
colorHoverOff() 
appendToElement() 
showPalette() 
hidePalette()

10. Sediakan pilihan Setter/Getter

Yang ini tidak perlu, tetapi saya mendapati bahawa semua pemalam saya termasuk yang ini. Kerana ia hanya memerlukan sedikit kod untuk menyediakan fungsi yang mungkin mereka perlukan kepada orang lain.

Pada asasnya, kami hanya perlu membenarkan pembangun menetapkan atau mendapatkan nilai elemen sedia ada:

var lineWidth = $("#container").wPaint("lineWidth"); 
$("#container").wPaint("lineWidth", "5");

Zusammenfassung: Die oben genannten zehn Punkte decken im Wesentlichen den Kern der jQuery-Plug-in-Entwicklung ab und können als Vorlage für die Entwicklung verwendet werden. Ein grundlegender Codesatz kann Ihre Entwicklungszeit erheblich verkürzen und Sie beim Entwerfen Ihrer Plug-in-Architektur sicherer machen.

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.