Bagaimana untuk menggunakan semula jquery

jQuery ialah pustaka JavaScript yang sangat popular yang boleh memudahkan kerja pembangunan bahagian hadapan web. Walau bagaimanapun, dalam kerja pembangunan sebenar, kita akan mendapati bahawa banyak kod akan digunakan berulang kali. Pada masa ini, adalah sangat perlu untuk menggunakan semula kod jQuery, yang boleh meningkatkan kecekapan kerja kami. Jadi, bagaimanakah jQuery boleh digunakan semula?

1. Tentukan fungsi

Apabila menulis kod jQuery, kita boleh merangkum kod yang biasa digunakan ke dalam fungsi dan mentakrifkannya dalam fail js yang berasingan. Dengan cara ini, apabila anda perlu menggunakan kod ini, anda hanya perlu memperkenalkan fail ini dalam halaman yang diperlukan untuk melengkapkan penggunaan semula kod tersebut.

Sebagai contoh, kesan yang sering kita gunakan ialah menukar gaya elemen apabila tetikus melayang di atasnya. Mula-mula kita boleh menulis fungsi dan kemudian memanggil fungsi ini dalam halaman yang perlu kita gunakan:

function hoverChangeStyle(element) {
  element.hover(function() {
    $(this).css('color', 'red');
  }, function() {
    $(this).css('color', 'black');
  });
}

hoverChangeStyle($('.my-element'));

Dengan cara ini, kita hanya perlu memanggil fungsi hoverChangeStyle selepas memperkenalkan fail js ini untuk melaksanakan kod Guna Semula.

2. Buat pemalam

Selain mentakrifkan fungsi, kami juga boleh merangkum kod yang biasa digunakan dengan mencipta pemalam untuk kegunaan mudah di halaman lain.

Pemalam jQuery ialah fungsi khas yang membolehkan kami merangkum kod yang biasa digunakan. Fikirkan kod ini sebagai teg atau kelas tersuai supaya ia boleh digunakan semula dalam mana-mana halaman.

Berikut ialah contoh pemalam jQuery yang mudah:

(function ($) {
  $.fn.changeColor = function () {
    return this.each(function () {
      $(this).css('color', 'red');
    });
  };
}(jQuery));

Kaedah menggunakan pemalam ini sangat mudah:

$('.my-element').changeColor();

Dengan cara ini , kami telah berjaya menggunakan yang biasa digunakan Kod ini dirangkumkan ke dalam pemalam dan boleh digunakan semula dengan mudah di halaman lain.

3. Gunakan perpustakaan templat

Apabila kita perlu menggunakan semula beberapa kod berkaitan HTML, kita boleh menggunakan beberapa perpustakaan templat, seperti: Handlebars.js, Misai.js, dll. Pustaka templat ini boleh membantu kami menyusun kod templat dengan lebih baik dan menyokong fungsi yang lebih maju, seperti pernyataan bersyarat, pernyataan gelung, dsb.

Apabila menggunakan Handlebars.js, kita boleh mentakrifkan templat dahulu dan kemudian mengisi kandungan di mana ia perlu digunakan. Berikut ialah contoh Handlebars.js yang mudah:

<div id="container"></div>

<script id="user-template" type="text/x-handlebars-template">
  {{#each users}}
    <div class="user">
      <h2>{{ name }}</h2>
      <p>{{ age }} years old</p>
    </div>
  {{/each}}
</script>

Seterusnya, kita perlu memperkenalkan perpustakaan Handlebars.js ke dalam halaman dan menulis kod JavaScript:

var users = [
  {
    name: '张三',
    age: 20
  },
  {
    name: '李四',
    age: 21
  },
  {
    name: '王五',
    age: 22
  }
];

var userTemplate = Handlebars.compile($('#user-template').html());
$('#container').html(userTemplate({users: users}));

Dengan cara ini , Kami telah berjaya merangkumkan kod HTML yang biasa digunakan ke dalam perpustakaan templat, yang boleh digunakan semula dengan mudah di halaman lain.

Ringkasan

Di atas adalah beberapa cara biasa untuk menggunakan semula kod jQuery Kita boleh memilih kaedah yang sesuai dengan kita mengikut keperluan sebenar. Melalui penggunaan semula kod, kami boleh meningkatkan kecekapan pembangunan, mengurangkan pertindihan kerja dan mengekalkan kod dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan semula jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!