10 Tips terbaik dalam membuat jQuery Plugins

 Author : hadinug, 13 April, 2014, Komentar

Kami telah mencoba, mengembangkan dan mempelajari plugin dalam banyak kasus baik dalam projek maupun produk dengan jQuery selama beberapa tahun belakangan dan melalui proses ini kami telah belajar banyak hal tentang itu. Ada  jutaan plugin di luar sana yang sangat menarik, tetapi kadang-kadang kita harus mengubah sesuia dengan kebutuhan projek, dan ini sangat menguras tenaga dan waktu.



Sebelumnya kami juga, telah membagikan sedikit tips dan trik bagaiman cara membuat plugin di jquery, disitu dijelaskan oleh kami bagaimana cara membuat plugin jquery step by step.


Kita langsung saja ke fokus utama dari judul, dan berikut ini adalah beberapa tips sederhana yang telah berhasil kami kumpulkan yang akan membantu setiap pengembang dalam menulis plugin jQuery. Ada beberapa hal yang mungkin tidak cukup jelas pada awalnya, tetapi ini merupkan cara yang baik untuk mengembangkan plugin jQuery anda dan membantu mempertahankan serta memperluas plugin yang anda buat.


Hal ini juga penting untuk dicatat adalah, bahwa memiliki struktur yang solid dan pedoman yang baak dalam membuat plugin. Disini kami tidak akan menuliskan bagaimana cara membuat plugin di jQuery tapi lebih ke optimalisasi plugin yang anda buat nantinya.


Plugins Harus Bekerja Out of the Box

Ini adalah syarat utama ketika plugin yang kita buat akan digunakan di luar sana sehingga. Plugin anda akan bekerja seperti seharusnya tanpa ada setup atau struktur yang harus didefinisikan terlebih dahulu. 

$ ("#selector") myPlugin();


Selalu Memberikan Default Settings

Plugin yang baik, harus memiliki default setting, sehingga pemanggilan nya bisa bersifat optional, dengan menambahkan settingan atau mengikuti setingan yang sudah ada


var defaultSettings = {
    text: 'Hello Wolrd!' ,
    color : '#ccc ' , 
    Linewidth : '2 '
} ; 

Kode di atas adalah cara standar untuk mengatur pengaturan default plugin yang anda buat.


Buat Penamaan Yang Unik

Ketika membuat plugin anda anda harus selalu berhati-hati dalam memberikan penamaan dan harus benar-benar unik dan ini juga berlaku untuk class , id dan nama plugin itu sendiri


$ ("# container") tooltip() ; / / kurang baik , karna sudah banyak plugin dengan nama ini
$ ("#container")myTooltip() . ; / / lebih baik



Standard Plugin dan Tata Letak

Plugin yang baik memiliki semua potongan source yang penting dan bisa dikembangkan, dipelihara dan diperbarui.


(function($) {
 
    $.fn.myPlugin = function(options) {
 
        // default settings
        var settings = $.extend({
            text: 'Example plugin!',
            color: null,
            fontStyle: null
        }, options);
 
        return this.each(function() {
            // We'll get back to this in a moment
        });
 
    };
 
}(jQuery));


Memiliki Struktur Direktori Yang Baik

Dengan memiliki strutur folder yang baik akan memudahkan pengguna dalam menggunakan atau memakai plugin yang anda buat. Misal untuk librrary javascript nya kita letakan dalam folder js/ dan jikalau ada file css akan lebih baik jika diletakan dalam folder style/. Untuk penamaan folder bebas, namun akan lebih baik nama folder mewakili isi dari folder tersebut.


Gunakan Class Prototyping

Pada dasarnya ada dua alasan utama untuk prototipe fungsi anda. Anda tidak harus melakukan instantiasi atau menyalinan secara terpisah dari tiap-tiap metode dan ini akan jauh lebih efisien dan berjalan lebih cepat. Plugin memiliki referensi ke masing-masing metode dari objek dan tidak memiliki salinan.


fungtion Canvas(setting)
{
    this.canvas = null;
    this.ctx = null;
}
Canvas.prototype =
{
    result : function ( )
    {
        / / mengembalikan kode
    }
}

Hal ini juga berfungsi untuk mengatur kode anda dan membuatnya jauh lebih dapat digunakan kembali. Pada kasus di atas hanya objek kanvas yang akan dipakai untuk setiap objek baru sementara fungsi prototyped hanya direferensikan .


Menyediakan setter dan getter

Menyediakan setter dan getter bukan suatu keharusan tapi kami merasa ini adalah pilihan yang baik untuk memberikan pengembang tentang apa yang yang mereka butuhkan. Semua yang kita lakukan di sini akan memungkinkan plugin yang kita buat dimodifikasi oleh para pengembang.


if(typeof option === 'object'){
    settings = option;
}else if(typeof option === 'string'){
    if(
        this.data('_wPaint_canvas') &&
        defaultSettings[option] !== undefined
    ){
        var canvas = this.data('_wPaint_canvas');

        if(settings){
            canvas.settings[option] = settings;
            return true;
        }else{
            return canvas.settings[option];
        }
    }else return false;
}


Uji di Semua Browser

Ini benar-benar penting untuk kelangsungan pemakain plugin anda da tahap ini saya rasa sangat melelahkan karena setelah menyelesaikan plugin anda harus mengecek ke masing-masing browser dan memastikannya berjalan di tiap-tiap browser.


Packaging untuk Rilis

Setelah plugin anda selesai dipoles dan siap untuk rilis luangkan waktu untuk melakukan tiga langkah sederhana berikutnya.

  • Menulis beberapa dokumentasi untuk bagian-bagian rumit , tidak hanya untuk pengembang lain yang mungkin akan melihat kode anda, tetapi untuk diri sendiri juga.
  • Versi Plugin baik oleh nama file atau dokumentasi dipisahkan pda suatu tempat. Hal ini memungkinkan para pengembang untuk dapat melihat versi apa yang mereka sedang mereka gunakan dan memeriksa updetan terbaru.
  • Terakhir menyediakan versi minified kode plugin yang anda buat, hanya butuh beberpa waktu, cukup copy dan pastekan code anda pada halaman onlie tool javascript compressor.

Upload Plugin Anda

Ada banyak orang diluar sana yang mungkin akan membantu anda dlama mengembangkan plugin yang telah anda buat. Ini memungkinkan anda untuk berkolaborasi dengan para pengembang diluar sana. Kami rasa ini sangat baik


Semoga bermanfaat dan mudah-mudahan bisa menginspirasi kita dalam membuat plugin jQuery yang lebih baik.


 
Bagikan halaman ke sosial media
 
Tags :   jQuery    plugin       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda