Membuat Plugin Jquery (Part 1)

16 views

Konsep Dasar Plugin Pada jQuery

Mengapa Membuat Plugin?

Bagi para pengguna jQuery pada umumnya niscaya sudah mengenal atau mungkin mempergunakan plugin yang sanggup ditemukan dengan gampang di internet, cukup dengan mengetikkan “jQuery plugin” di google maka akan muncul banyak sekali plugin untuk banyak sekali keperluan, ibarat plugin untuk menampilkan slide show pada halaman web, atau menambahkan fitur popup dan lain sebagainya. Dari sekian banyak Plugin yang tersedia di rimba internet, rata – rata bisa diadopsi dengan gampang kedalam halaman web yang sedang kita kembangkan dengan cara relatif mudah, cukup dengan melaksanakan beberapa konfigurasi dan adaptasi yang bisa dirujuk pada halaman web masing – masing pembuat plugin.

 

Bagi mereka yang belum begitu mengenal mengenai akomodasi memakai plugin, konsepnya sebetulnya sederhana. Sebuah plugin merupakan aktivitas yang mempunyai kegunaan tersendiri dan di ditambahkan kedalam jQuery sehingga nantinya menjadi sebuah fungsi (function) yang sanggup dipergunakan ibarat fungsi – fungsi yang sudah disediakan oleh jQuery, misalnya seperti 

$("#sebuahID").onClick( //aksi ketika di klik );

Dimana onClick() merupakan fungsi  untuk menambahkan agresi atau respon ketika sebuah elemen (pada contoh, dengan id = sebuahID) di klik. Dengan plugin, misalkan kita menciptakan sebuah plugin dengan nama pluginKu(), maka kita sanggup dengan gampang memakai plugin yang kita buat dengan memanggilnya pada jQuery seperti

$( /*selektor*/ ).pluginKu();

dan kemudian yang terjadi yaitu fungsi pluginKu() akan melaksanakan tugasnya pada elemen html yang sesuai dengan selektor yang kita pilih.

 

Kembali ke pertanyaan semula, kenapa kita menciptakan plugin? Jawabannya gampang karena

  1. Plugin yang tersedia tidak bisa memenuhi kebutuhan kita, atau mungkin sesuai akan tetapi fitur yang ditawarkan ternyata berlebihan dibanding dengan kebutuhan, sehingga dirasa terlalu banyak overhead dalam instruksi yang kita pakai,  hal tersebut akan menjadi duduk kasus terutama bagi mereka yang mempunyai sifat perfeksionis dalam membuatkan aplikasi (saya pribadi cenderung menentukan memakai plugin walaupun terdapat fitur yang tidak perlu, untuk menghemat waktu );
  2. Jika suatu penggalan instruksi yang kita tulis ternyata bisa digunakan berulang kali pada proyek yang sama ataupun pada proyek – proyek lain, maka akan mempermudah kita kalau membuatnya menjadi plugin, menghemat waktu sesuai dengan jargon DRY (don’t repeat yourself) yang artinya jangan membuang – buang waktu untuk melaksanakan hal yang sama berulang ulang;
  3. Terakhir tentu saja kalau kita memahami perihal plugin, tentu kita bisa melaksanakan modifikasi atau menciptakan ulang plugin yang disediakan oleh orang lain sesuai kebutuhan kita. Hal tersebut menjadi laba ganda sebab selain nantinya kita sanggup menghasilkan plugin yang sanggup kita pakai, kita juga punya laba sebab tidak membuatnya dari nol dan sekaligus mengatasi duduk kasus yang ditujukan oleh poin nomor 1.

 

Tentunya poin – poin yang disebutkan diatas belum lengkap, tapi semoga laba yang ditawarkan menciptakan kalian cukup tergiur dan bertambah minatnya untuk menciptakan plugin sendiri dan menciptakan kalian terus membaca goresan pena ini. 

 

Mulai Membuat

 

Untuk memulai kita perlu menciptakan sebuah function dan menambahkannya kedalam jQuery. Cara menambahkannya yaitu dengan memasukkan function tersebut kedalam $.fn atau jQuery.fn seperti

$.fn.pluginKu = function(){//kode untuk pluginKu};

Sekarang fungsi pluginKu() sudah bisa digunakan ibarat pada tumpuan sebelumnya. Penjelasannya yaitu sebab tanda $ atau jQuery (sama saja, $ sering digunakan sebab lebih singkat) merupakan objek jQuery yang selalu kita pakai, dan pada javascript setiap objek mempunyai prototype yang merupakan salah satu cara bagi suatu objek untuk “mewarisi” fungsi atau property dari objek lain. Kaprikornus jQuery memakai .fn untuk menggantikan .prototype (dibuat alias, jadi lebih singkat) dan kita bisa menambahkan fungsi gres pada prototype dengan cara menambahkannya ibarat pada tumpuan diatas, dan kemudian setelah ditambahkan bisa kita saluran dari mana saja didalam instruksi kita. Untuk kalian yang belum familiar dengan konsep prototype bisa dipastikan kini mengalami sedikit kebingungan, kini lebih baik kita lewat saja, tetapi kalau ingin mengetahui lebih lanjut, silahkan cari tahu soal prototype pada javascript.

 

Kemudian yang perlu diperhatikan adalah, didalam fungsi yang kita tulis kita harus berhati – hati jangan hingga nama variabel yang kita pakai sudah digunakan diluar fungsi, sebab variabel diluar fungsi akan menjadi variabel global yang nilainya bisa saja secara tidak sengaja berubah sebab di dalam fungsi kita mempergunakan nama yang sama. Untuk mengatasi permasalahan tersebut, maka para programmer diluar sana memakai suatu metode berjulukan IIFE (immediately-invoking function expression) apakah IIFE itu? Singkatnya IIFE digunakan untuk menciptakan lingkup (scope) sehingga variabel diluar lingkup itu tidak sanggup di saluran dari dalam, begitupun sebaliknya. Bagi mereka yang pertama kali mengetahui perihal IIFE sudah tentu akan kebingungan, maka dari itu kita lanjutkan saja ke tumpuan berikutnya (dan sempatkan untuk membaca soal IIFE)

 

(function($){$.fn.pluginKu = function(){  //kode untuk pluginKu};}(jQuery));

 

Dari tumpuan diatas terlihat bahwa instruksi kita sebelumnya dibungkus (wrapped) oleh suatu blok fungsi yaitu

(function($){ //kode sebelumnya }(jQuery));

yang artinya suatu fungsi dihukum secara eksklusif (bukan deklarasi), maka dari itu disebut dengan istilah immediately-invoking (dipanggil-segera) yang dilakukan dengan cara menambahkan kurung. Adapun alternatif sintaksnya yaitu dengan

(function($){ //kode sebelumnya })(jQuery);

walaupun penulisan kurungnya dirubah akan tetapi risikonya sama saja. Saya juga menemukan sintaks lain yaitu dengan menambahkan operator ibarat +, !,

Author: 
    author
    No related post!