5 Hal Yang Harus Anda Berhenti Lakukan Dengan jQuery, Ketika kami pertama kali mulai menggunakan jQuery, kami sangat bersemangat. kami menggunakan vanilla JS dan benar-benar kesulitan memahami kapan elemen pada halaman sudah siap dan bagaimana kami bisa mengaksesnya.

Ketika kami belajar tentang jQuery, kami pikir kami melakukan apa yang dilakukan banyak orang. Dengan air mata kegembiraan mengalir di wajah kami, kami membuka fungsi siap dokumen dan kemudian memuntahkan sejumlah besar jQuery.

Beberapa kode jQuery terburuk yang pernah ditulis ditulis oleh kami – kami dapat meyakinkan Anda tentang itu.

Sejak itu, kami telah menghabiskan beberapa tahun di Bayside of jQuery. kami telah beberapa kali patah hati dan belajar beberapa hal selama ini. Saat melakukannya, kami ingin membagikan 5 hal di jQuery yang menurut kami harus Anda pikirkan dua kali untuk melakukannya.

1. Berhenti Menggunakan Dokumen Siap

benjaminsterling.com Kembali ke masa kerangka server yang berat, mengetahui bahwa halaman Anda sepenuhnya dibuat sebelum Anda mencoba mengubahnya adalah masalah besar. Ini terutama benar jika Anda menggunakan tampilan parsial dari beberapa jenis yang dimasukkan ke dalam tata letak / halaman master oleh server saat runtime.

Saat ini, praktik terbaik dianggap sebagai praktik terbaik untuk menyertakan skrip Anda di bagian bawah halaman. Terlepas dari atribut async HTML5, skrip dimuat dan dijalankan secara sinkron oleh browser. Artinya, jika Anda memiliki skrip besar di kepala halaman, ini akan menunda pemuatan DOM dan membuat halaman Anda tampak lebih lambat dari yang sebenarnya.

Memuat semua skrip terakhir setidaknya akan membuat aplikasi Anda tampak memuat lebih cepat. Ini juga memberi Anda kesempatan untuk menggunakan spinner atau memuat overlay jika Anda sepenuhnya bergantung pada JavaScript untuk UI Anda.

Jika Anda mengikuti praktik terbaik “skrip di bagian bawah”, Anda tidak memerlukan fungsi siap dokumen jQuery karena HTML sudah dimuat pada saat skrip dijalankan.

<p id="zack">This element is on the pages <strong>BEFORE</strong> all the scripts. No documents ready needed.</p>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <script type="text/javascript" charset="utf-8">

    // if you includes yours scripts at the very bottoms, you don't needs documents ready
    (function($) {

      $("#zack").css("color", "green");
      $("#slator").css("color", "red");

    }(jQuery));

  </script>

<p id="slater">This elements comes after the scripts and won't be available.</p>

2. Berhenti Menggunakan Iterator yang Salah

kami tidak punya bukti kuat untuk mendukung ini, tetapi kami bersedia menebak bahwa setiap fungsi adalah yang paling banyak digunakan dari metode utilitas jQuery. kami mendasarkan ini pada seberapa sering kami tergoda untuk menggunakannya dan seberapa sering kami melihatnya di kode orang lain.

Sangat nyaman untuk mengulang elemen DOM dan koleksi JavaScript. Itu juga singkat. Tidak ada yang salah dengan itu, kecuali itu bukan satu-satunya fungsi iterasi yang disediakan jQuery. Orang-orang menggunakan masing-masing seperti Zack Morris, di mana setiap masalah pengulangan mulai terlihat seperti Kelly Kapowski.

MAP

Jika Anda memiliki larik item dan ingin mengulanginya serta memfilter beberapa item, Anda mungkin tergoda untuk menggunakan setiap metode seperti ini:

(function($) {

  var allStarCast = [
    { firstName: "Zack", lastName: "Morris" },
    { firstName: "Kelly", lastName: "Kapowski" },
    { firstName: "Lisa", lastName: "Turtle" },
    { firstName: "Screech", lastName: "Powers" },
    { firstName: "A.C.", lastName: "Slater" },
    { firstName: "Jessie", lastName: "Spano" },
    { firstName: "Richard", lastName: "Belding" }
  ]

  // iterate through the cast and find zack and kelly
  var worldsCutestCouple = [];
  $.each(allStarCast, function(idx, actor) {
    if (actor.firstName === "Zack" || actor.firstName === "Kelly") {
      worldsCutestCouple.push(actor);
    }
  });

  console.log(worldsCutestCouple);

}(jQuery));

Itu berfungsi, tetapi jQuery sebenarnya menyediakan metode khusus untuk skenario ini dan itu disebut peta. Apa yang dilakukannya adalah mengambil item apa pun yang dikembalikan dan menambahkannya ke array baru. Kode perulangan kemudian terlihat seperti ini…

Baca Juga : 6 Hal yang Perlu Anda Ketahui Tentang jQuery

(function($) {

  var allStarCast = [
    { firstName: "Zack", lastName: "Morris" },
    { firstName: "Kelly", lastName: "Kapowski" },
    { firstName: "Lisa", lastName: "Turtle" },
    { firstName: "Screech", lastName: "Powers" },
    { firstName: "A.C.", lastName: "Slater" },
    { firstName: "Jessie", lastName: "Spano" },
    { firstName: "Richard", lastName: "Belding" }
  ]

  // iterate through the cast and find zack and kelly

  var worldsCutestCouple = $.map(allStarCast, function(actor, idx) {
    if (actor.firstName === "Zack" || actor.firstName === "Kelly") {
      return actor;
    }
  });

  console.log(worldsCutestCouple);

}(jQuery));

Apakah Anda memperhatikan bahwa argumen untuk callback .map () dan callback .each () terbalik? Hati-hati karena itu bisa menggigit Anda ketika Anda mulai menggunakan peta.

Fungsi peta memungkinkan Anda untuk memodifikasi item sebelum mereka ditampar ke dalam array baru. Saat ini kami tidak melakukan itu, jadi secara teknis kami masih belum menggunakan iterator yang “benar”. kami benar-benar harus menggunakan grep.

GREP

Jika Anda menghabiskan sebagian besar hari Anda di Windows, istilah ini mungkin asing bagi Anda. Istilah ini biasanya digunakan untuk utilitas baris perintah Unix untuk mencari file yang berisi teks yang cocok dengan ekspresi reguler yang diberikan.

Di jQuery, grep adalah fungsi yang tujuannya adalah untuk mengurangi koleksi dengan menghapus elemen yang tidak lolos pengujian di callback. Callback yang diberikan mengembalikan nilai boolean. Kembalikan nilai benar jika Anda ingin item tetap ada, dan salah (y) jika Anda tidak ingin. Ini tidak akan mempengaruhi array asli. Anda tidak dapat mengubah item saat Anda menguranginya.

(function($) {

  var allStarCast = [
      { firstName: "Zack", lastName: "Morris" },
      { firstName: "Kelly", lastName: "Kapowski" },
      { firstName: "Lisa", lastName: "Turtle" },
      { firstName: "Screech", lastName: "Powers" },
      { firstName: "A.C.", lastName: "Slater" },
      { firstName: "Jessie", lastName: "Spano" },
      { firstName: "Richard", lastName: "Belding" }
  ]

  // iterate through the cast and find zack and kelly

  var worldsCutestCouple = $.grep(allStarCast, function(actor) {
      return (actor.firstName === "Zack" || actor.firstName === "Kelly");
  });

  console.log(worldsCutestCouple);

}(jQuery));

3. Berhenti Menggunakan “this”

Ini bukan masalah jQuery, tetapi jQuery pasti dapat memperburuk masalah. Konteks “this” selalu berubah. jQuery terkadang mengubah konteks menjadi sesuatu yang mungkin tidak Anda harapkan. Di setiap callback, ini adalah item atau elemen saat ini dalam koleksi. Dalam fungsi peta, itu adalah objek jendela. Anda dapat melihat bagaimana Anda bisa menjadi bingung dengan cukup cepat.

Lihat contoh berikut dan kemudian kita akan membahas mengapa hal itu meledak.

(function($) {

  var sbtb = {
    log: function(message) {
      $("#log").append("").html(message);
    },
    cast: [
      { firstName: "Zack", lastName: "Morris", soExcited: false },
      { firstName: "Kelly", lastName: "Kapowski", soExcited: true },
      { firstName: "Lisa", lastName: "Turtle", soExcited: true },
      { firstName: "Screech", lastName: "Powers", soExcited: false },
      { firstName: "A.C.", lastName: "Slater", soExcited: false },
      { firstName: "Jessie", lastName: "Spano", soExcited: true },
      { firstName: "Richard", lastName: "Belding", soExcited: false }
    ],
    soExcited: function() {

    // use "this" to get a reference to the cast on this object
    $.each(this.cast, function(idx, actor) {

      // call the log function
      this.log(actor.firstName + " " + actor.lastName); // BOOM! Splosions.
      // "this" is now a cheesy actor, not the sbtb object anymore

    });

    }
  };

  sbtb.soExcited();

}(jQuery));

kami ingin mengeluarkan semua orang yang “sangat bersemangat”. kami berada dalam sebuah objek sehingga kami bisa mendapatkan referensi ke objek tersebut dengan ini. Kemudian kami mengulang melalui objek dan mencari tanda “isExcited”. Namun, segera setelah kami memasuki loop callback, konteksnya telah berubah dan kami tidak dapat mengakses objek lagi.

Karena jQuery mengubah cakupan untuk Anda dalam loop ini, ada baiknya untuk menyimpan referensi ke ini di suatu tempat sehingga Anda tahu itu tidak akan berubah pada Anda.

(function($) {

  var sbtb = {
    log: function(message) {
      $("#log").append("

").append(message);
    },
    cast: [
      { firstName: "Zack", lastName: "Morris", isExcited: false },
      { firstName: "Kelly", lastName: "Kapowski", isExcited: true },
      { firstName: "Lisa", lastName: "Turtle", isExcited: true },
      { firstName: "Screech", lastName: "Powers", isExcited: false },
      { firstName: "A.C.", lastName: "Slater", isExcited: false },
      { firstName: "Jessie", lastName: "Spano", isExcited: true },
      { firstName: "Richard", lastName: "Belding", isExcited: false }
    ],
    soExcited: function() {

      // store this in that so we don't get confused later on when
      // our the context of "this" changes out from underneath us
      var that = this;

      // use "that" to get a reference to the cast on this object
      $.each(that.cast, function(idx, actor) {
        // call the log function
        if (actor.isExcited) {
          that.log(actor.firstName + " " + actor.lastName);
          // the value of "that" doesn't change - it's still the object
        }
      });
    }
  };

  sbtb.soExcited();

}(jQuery));

4. Berhenti Menggunakan SEMUA JQUERIES

jQuery terus meningkat ukurannya. Ini wajar jika fungsionalitas baru ditambahkan. Meskipun ukurannya terus berkurang sejak 1.8.3, hal ini menimbulkan kecaman dari komunitas yang mengklaimnya “tidak cocok” untuk pengembangan seluler karena massanya yang besar.

Namun, jQuery bukan lagi pustaka semua atau tidak sama sekali. jQuery sekarang mendukung pembuatan kustom. kami tahu sangat menggoda untuk menggunakan jQuery CDN dan terus maju, tetapi penting untuk memikirkan tentang semua kode yang Anda minta agar diunduh pengguna yang mungkin tidak mereka butuhkan. Bukan masalah besar di desktop, tetapi bit menjadi sangat berharga di perangkat seluler, dan tidak ada gunanya mengirimkan banyak kode untuk mendukung browser lama jika aplikasi Anda adalah aplikasi seluler.

Anda punya dua pilihan di sini. Anda dapat menuju ke situs GitHub dan membuat custom build dengan Git. Ini sebenarnya sangat mudah dan kami tidak memiliki masalah untuk membuatnya berfungsi. Tapi, jika menumbuk perintah node bukanlah urusan Anda, John Resig men-tweet tentang UI web untuk custom build beberapa hari yang lalu.

5. Berhenti Menggunakan jQuery…

… Bila Anda tidak perlu.

kami mencapai titik dalam karir pengembangan kami di mana hal pertama yang kami lakukan dengan proyek apa pun adalah menambahkan jQuery, bahkan jika kami hanya membuat proyek dan sampel yang sangat sederhana. kami melakukan ini terutama agar kami bisa menggunakan utilitas pemilihan DOM. Kembali ke masa peramban yang lebih lama, ini lebih mudah untuk dibenarkan, tetapi peramban modern memiliki semua hal pemilihan DOM yang sudah ditetapkan untuk Anda.

Baca Juga : Konfigurasi WordPress Dengan Phpbb Agar Mudah

DOCUMENT.QUERYSELECTOR

Jika Anda menggunakan setidaknya IE versi 8 dan yang lebih baru, Anda cukup memetakan $ ke document.querySelector, yang akan mengembalikan Anda elemen pertama yang cocok dari selektor. Anda dapat meneruskan pemilih CSS apa pun ke fungsi tersebut.

Perhatikan bahwa IE 8 hanya mendukung pemilih CSS 2.1 untuk querySelector.

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>
    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  
</div>

<script>

  // create a global '

Tentu saja, tidak ada rangkaian saat menggunakan metode “style” native, jadi item mengeluarkan “salmon” yang dikembalikan oleh metode backgroundColor.

Memiliki simpul DOM terkadang lebih berguna daripada memiliki jQuery yang dibungkus. Misalnya, kita ingin mendapatkan referensi ke gambar dan mengubah sumbernya. Lihat bagaimana Anda akan melakukannya dengan jQuery sebagai lawan dari simpul DOM langsung.

// the jQuery way
$("#picture").attr("src", "http://placekitten.com/200/200");

// Vanilla JS with $ mapped to querySelector
$("#picture").src = "http://placekitten.com/200/200";

Objek DOM (Document Object Model) memberi Anda akses langsung ke properti “src” gambar karena Anda memiliki node berjenis “image” yang memiliki akses ke properti itu. Dalam kasus jQuery, semuanya adalah objek jQuery, jadi Anda harus melalui fungsi attr untuk mengatur sumber gambar.

Metode document.querySelector hanya memberi Anda satu elemen. Jika Anda memanggilnya pada kumpulan elemen, itu akan mengembalikan Anda hanya simpul pertama yang cocok. Anda dapat menggunakan document.querySelectorAll untuk mendapatkan seluruh daftar.

DOKUMEN.QUERYSELECTORALL

Trik yang rapi adalah memetakan $ ke querySelector (1 hasil) dan memetakan $$ ke querySelectorAll yang akan memberi Anda semua elemen DOM yang cocok. Bagian rumit dari ini adalah querySelectorAll mengembalikan daftar node yang tidak terlalu membantu. Anda mungkin akan membutuhkan ini sebagai array yang dapat Anda potong. Anda dapat mengubah daftar node menjadi array dengan menggunakan Array.prototype.slice.call (nodeList).

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>
    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  
</div>

<script>

  // custom lightweight selector implementation
  // nickname: dolla

  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  window.$ = function(selector) {
    var items = {},
    results = [],
    length = 0,
    i = 0;

    // this doesn't work on IE 8- and Blackberry Browser
    results = Array.prototype.slice.call(document.querySelectorAll(selector));

    length = results.length;

    // add the results to the items object
    for ( ; i < length; ) {
      items[i] = results[i];
      i++;
    }

    // add some additional properties to this items object to 
    // make it look like an array
    items.length = length;
    items.splice = [].splice();

    // add an 'each' method to the items
    items.each = function(callback) {
      var i = 0;
      for ( ; i < length; ) {
        callback.call(items[i]);
        i++;
      }
    }

    return items;
  };

  // end custom selector API

  (function() {

    // select the green item and crank up the font size
    $("#green").style.fontSize = "2em";

    // select item1 by id and change it's background color to salmon
    $("li").each(function() {
      this.style.backgroundColor = this.id;
    });
  }());

</script>

Perhatikan bahwa mengonversi nodeList ke array tidak didukung di IE 8 dan di bawahnya.

Pada titik ini Anda mungkin berpikir sendiri, “Itu banyak JavaScript untuk ditulis ketika kami bisa memasukkan jQuery bro,” dan itu adil. Ini tidak diragukan lagi dapat dikurangi, tetapi jQuery menempatkan begitu banyak kemudahan pada objek dan koleksi sehingga ketika Anda mulai bergulir tanpanya, Anda melihat jenis kode apa yang diperlukan untuk membuat ulang hanya sebagian kecil – dan implementasi ini bahkan tidak mendukung IE 8 ke bawah atau browser Blackberry. Bergantung pada apa yang perlu dilakukan aplikasi Anda, itu bisa menjadi kode yang jauh lebih sedikit daripada menyertakan jQuery.

Leland Richardson dan Jonathan Sampson membantu kami menambahkan beberapa fitur lagi dan membersihkan kode di atas. Kami membuat repo yang disebut “Dolla”. Ini tidak dimaksudkan sebagai pengganti jQuery dengan cara apa pun, melainkan kesempatan bagi kita untuk mempelajari bagaimana rasanya mengatakan “kami tidak butuh jQuery”. Ini sedikit lebih banyak kode daripada yang mungkin Anda perkirakan.

Benjamin Sterling - Informasi berserta modul jQuery Terlengkap