9 Tips Ampuh Untuk Pengguna jQuery

9 Tips Ampuh Untuk Pengguna jQuery

jQuery merupakan salah satu library javascript yang paling banyak digunakan karena kelebihannya serta dukungan komunitas yang luar biasa. Sayangnya banyak pengguna jQuery kurang memaksimalkan…

jQuery merupakan salah satu library javascript yang paling banyak digunakan karena kelebihannya serta dukungan komunitas yang luar biasa. Sayangnya banyak pengguna jQuery kurang memaksimalkan bagaimana penggunaannya. Dalam artikel ini akan dijabarkan beberapa tips untuk pengguna jQuery.

  1. Gunakan versi terbaru dari jQuery.
    Setiap versi baru jQuery memberikan optimasi dan perbaikan bug, sehingga cukup wajib bagi developer untuk selalu menggunakan versi terbaru. Anda pun bisa langsung mengambil jQuery secara langsung melalui server hosting CDN yang disediakan oleh Google.

        <!-- Include versi secara spesifik -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
        <!-- Include versi terbaru dari branch 1.7 -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  2. Pastikan selector sesederhana mungkin.
    Salah satu keunggulan jQuery adalah selector untuk elemen-elemen DOM html pada halaman. Anda bisa menggunakan berbagai variasi dengan style mirip selector CSS. Sayangnya bila pengunjung web Anda menggunakan beberapa versi browser tertentu, terdapat perbedaan signifikan tentang kecepatan aksesnya.

          $('li[data-selected="true"] a');	// Menarik, tapi lambat
          $('li.selected a');	// Lebih baik
          $('#elem');	// Paling baik

    Seperti yang dapat dilihat di atas, seleksi dengan menggunakan id adalah yang tercepat. Bila Anda ingin melakukan seleksi class, lebih baik diawali dengan tag terlebih dahulu, seperti $(“li.menu”). Cara lain untuk mengoptimasinya adalah dengan memasukkannya ke dalam sebuah variable, sehingga browser akan melakukan caching.

  3. jQuery Objects as Arrays.
    Hasil nilai kembali dari selector jQuery adalah jQuery object. Namun Anda juga bisa menggunakannya sebagai array javascript biasa. Bila Anda lebih mengutamakan performa, maka menggunakan “for” atau “while” akan lebih baik daripada menggunakan fungsi $.each().

          // Selecting seluruh tombol navigasi:
          var buttons = $('#navigation a.button');
    
          // Loop keseluruhan tombol:
          for(var i=0;i<buttons.length;i++){
            // elemen DOM, bukan object jQuery
              console.log(buttons[i]);
          }
    
          // Bahkan bisa dilakukan slice array:
          var firstFour = buttons.slice(0,4);
  4. Mencari elemen secara acak (random).
    Membuat algoritma random bisa jadi cukup rumit. Anda bisa membuat sebuah plugin yang memberikan sebuah kemungkinan selector baru dengan pseudo selector “random”. Cara ini ditemukan oleh Waldek Mastykarz dan ditulis di blognya. Setelah plugin selesai, Anda bisa langsung men-define selector tersebut.

          (function($){
              var random = 0;
    
              $.expr[':'].random = function(a, i, m, r) {
                  if (i == 0) {
                      random = Math.floor(Math.random() * r.length);
                  }
                  return i == random;
              };
    
          })(jQuery);
    
          // Cara penggunaannya
          $('li:random').addClass('glow');
  5. Gunakan CSS Hooks.
    Sejak versi 1.4.3, jQuery menawarkan API untuk melakukan CSS Hooks. Fitur ini dapat digunakan sedemikian rupa sehingga developer tidak perlu mendeklarasi CSS sesuai dengan spesifikasi browser yang mungkin digunakan pengunjung. jQuery akan secara otomatis mendeteksinya dan menggunakan property yang tepat, terutama untuk CSS3 yang memang belum stabil.

          $.cssHooks['borderRadius'] = {
                  get: function(elem, computed, extra){
                      // Nilai yang dibaca bergantung browsernya
                      // -moz-border-radius, -webkit-border-radius or border-radius
                  },
                  set: function(elem, value){
                      // Atur property CSS3 yang sesuai
                  }
          };
    
          // Digunakan tanpa perlu mengetahui browser apa
          $('#rect').css('borderRadius',5);
  6. Menggunakan $.proxy().
    Salah satu kelemahan dari menggunakan callback pada jQuery, ketika ada sebuah fungsi dari library yang dieksekusi, maka conteks “this” akan berubah elemennya. Sebagai contoh, bila Anda mempunyai  kode html sebagai berikut.

    <div id="panel" style="display:none">
    	<button>Close</button>
    </div>

    Setelah itu, Anda ingin mengeksekusi kode javascript berikut.

          $('#panel').fadeIn(function(){
              // "this" akan menunjuk ke #panel
              $('#panel button').click(function(){
                  // "this" akan menunjuk ke button
                  $(this).fadeOut();
              });
          });

    Anda akan menemukan masalah dengan kode javascript di atas, karena tombol akan menghilang, sedangkan panel-nya tidak. Cara ini dapat diatasi dengan menggunakan fungsi proxy() tersebut. Fungsi ini memerlukan 2 argumen, yaitu fungsi asli yang akan dieksekusi, serta context “this” yang ingin dieksekusi dalam fungsi tersebut.

          $('#panel').fadeIn(function(){
              // Using $.proxy untuk binding
    
              $('#panel button').click($.proxy(function(){
                  // "this" menunjuk ke #panel
                  $(this).fadeOut();
              },this));
          });
  7. Mengetahui ukuran dan berat dari halaman.
    Anda dapat mengetahui berat dari sebuah halaman Anda dengan fungsi jQuery sederhana ini. Semakin kecil angkanya, maka semakin cepat halaman website Anda ditampilkan. Anda bisa melakukan optimasi dengan menghapus markup yang redundan dan elemen wrap yang kurang penting.

    console.log( $('*').length );
  8. Membuat kode sebagai plugin.
    Bila Anda cukup sering menggunakan suatu fungsi yang sama untuk berbagai halaman, alangkah lebih baiknya bila Anda membuatnya sebagai plugin, agar lebih mudah digunakan dan dipindah-pindah. Dengan demikian, Anda dapat meningkatkan portabilitas kode, pengurangan dependensi, dan memudahkan organisir kode. Caranya cukup mudah, seperti kode berikut ini.

    (function($){
    	$.fn.yourPluginName = function(){
    		// Your code goes here
    		return this;
    	};
    })(jQuery);
  9. Gunakan atribut HTML5.
    Versi terbaru jQuery telah mendukung pengambilan data atribut HTML5. Cara ini cukup efektif untuk melakukan transfer data antara server dengan halaman tampilan. Sebagai contoh, bila Anda memiliki elemen HTML5 seperti berikut ini.

        <div id="d1" data-role="page" data-last-value="43" data-hidden="true"
            data-options='{"name":"John"}'>
        </div>

    Dengan atribut elemen seperti di atas, Anda bisa mengaksesnya dengan menggunakan fungsi data() dari jQuery, seperti contoh berikut ini.

          $("#d1").data("role");          // "page"
          $("#d1").data("lastValue");     // 43
          $("#d1").data("hidden");        // true;
          $("#d1").data("options").name;  // "John";

Dengan menerapkan 9 tips ampuh di atas, Anda bisa menjadi programmer javascript yang lebih baik. Masih banyak tips lainnya yang tidak akan cukup dituliskan dalam satu artikel ini saja. Selamat bereksperimen!

Tag: , ,

2 Comments

Leave Comment
  1. liliput says:

    Mas.. saya mau nanya neh mengenai jquery, coz masih awam mas…
    Gini, Saya mau buat form kyk backlink gitu, saya nyediain form input buat submit URL nya, trus untuk konfirmasinya saya beri dya code yg harus dicantumkan di web nya, disinilah masalahnya, pada saat dya submit URL, saya butuh view-source web dya untuk input hidden, biar otomatis diperiksa apakah code saya sudah dicantumkan..

    Jadi inti pertanyaan saya simpel az..
    saya butuh view-source pada saat dya submit URL..

    Gmana ya mas… solusinya,, kyk e bisa ya pake jquery??? mohon bantuannya…

  2. mas kalau untuk membuat pindah 1 halaman dari bnyak page gimana dengan jquery?

Write Comment

Your email will not be published. The marked label is required.