Cara Membangunkan Plugin JQuery

Panduan Pembangunan Plug-In JQuery: Membuat Komponen yang Boleh Digunakan

mata teras:

• Buat plug-in jQuery membolehkan pemaju membuat komponen yang boleh digunakan semula di mana-mana laman web, mengurangkan risiko konflik nama fungsi. Plug-in menggunakan definisi fungsi fn jQuery. this
Apabila membangunkan pemalam jQuery, pemprosesan parameter sangat penting. Untuk mengelakkan pemprosesan parameter kompleks, lulus objek JSON tunggal dan bukannya pelbagai parameter. Anda boleh menggunakan fungsi
• jQuery untuk menggabungkan parameter lalai dan parameter pengguna. extend
Pastikan kaedah itu kembali
• untuk membolehkan fungsi lain membuat panggilan rantaian, ciri utama jQuery yang dipanggil "Panggilan Chained". Plugin harus disimpan dengan lanjutan this dan dimasukkan ke dalam halaman HTML selepas perpustakaan jQuery dimuatkan. .js

JQuery adalah perpustakaan JavaScript yang paling popular, yang banyak digunakan oleh laman web untuk mencapai kesan dinamik dan fungsi Ajax. Walau bagaimanapun, pemaju yang agak sedikit menyelidiki pembangunan plugin. Tutorial ini akan mewujudkan plugin mudah untuk menerangkan asasnya. Kod kami akan membalikkan teks dari satu atau lebih nod yang dipilih - lihat halaman demo.

Mengapa membuat plugin jQuery?

Pendek kata: digunakan semula. Dengan memperluaskan jQuery, anda boleh membuat komponen yang boleh digunakan semula di mana -mana laman web. Kod anda dikemas dan tidak mungkin anda akan menggunakan nama fungsi yang sama di tempat lain.

bagaimana jQuery berfungsi

Di bahagian teras, JQuery menerima elemen DOM atau rentetan yang mengandungi pemilih CSS. Ia mengembalikan objek jQuery, yang merupakan koleksi array seperti nod Dom. Kemudian satu atau lebih kaedah

boleh dipanggil

dalam rantai kepada kumpulan nod ini, contohnya:

NOTA: Walaupun perpustakaan jQuery dipanggil "jQuery", "$" adalah pembolehubah pintasan yang merujuknya. Perhatikan bahawa perpustakaan lain boleh menduduki "$".

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

bagaimana jQuery plugin berfungsi

JQuery membolehkan menambah kaedah ke perpustakaannya. Apabila kaedah ini dipanggil, objek jQuery diluluskan sebagai objek

JavaScript. Node DOM boleh dikendalikan seperti yang diperlukan, dan kaedah harus kembali

supaya fungsi lain dapat dipanggil dirantai. Plugin sampel kami akan dipanggil menggunakan kod berikut: this this

Kami juga akan menambah dua parameter pilihan:

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

dan

. Jika kedua -dua parameter ini ditakrifkan, panjang rentetan mestilah di antara kedua -dua had ini untuk dibalikkan. minlength maxlength

Penyataan Plugin

plugin menggunakan definisi fungsi JQuery's

, contohnya:

// 将所有 <p> 标签的颜色设置为红色
$("p").css("color", "red");</p>

menggunakan "jQuery" dan bukannya "$" memastikan bahawa ia tidak bertentangan dengan perpustakaan JavaScript yang lain. Semua kod dalaman kami juga harus merujuk kepada "jQuery" dan bukannya "$". Walau bagaimanapun, kita boleh menggunakan fungsi tanpa nama untuk menyimpan beberapa input dan mengurangkan saiz fail:

// 反转所有 <p> 标签中的文本
$("p").reverseText();</p>

Fungsi ini berjalan dengan segera dan melepasi jQuery sebagai parameter bernama "$". Oleh kerana "$" adalah pemboleh ubah tempatan, kita boleh mengandaikan bahawa ia selalu merujuk perpustakaan jQuery, dan bukannya perpustakaan pertama yang pertama untuk mendapatkan pembolehubah "$" global.

Parameter plugin

Plugin kami memerlukan dua parameter: minlength dan maxlength. Cara paling mudah adalah untuk menentukan mereka sebagai parameter fungsi, contohnya:

jQuery.fn.reverseText = function(params) { ... };

Tetapi bagaimana jika kita memutuskan untuk menambah lebih banyak parameter kemudian? Plugin kami mungkin mempunyai berpuluh -puluh pilihan - pemprosesan parameter dengan cepat menjadi rumit. Sebagai alternatif, kita boleh lulus satu objek JSON, contohnya:

(function($) {
    $.fn.reverseText = function(params) { ... };
})(jQuery);

Baris pertama fungsi harus menentukan satu set parameter lalai dan kemudian mengatasi parameter

dengan mana-mana nilai yang ditentukan pengguna reverseText. Fungsi JQuery dapat membantu kita menangani masalah ini: extend Oleh itu, melainkan jika kod panggilan menimpa nilai -nilai ini,

adalah 0 dan

(function($) {
    $.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);

// 示例
$("p").reverseText(0, 100);

adalah 99999.

params.minlength params.maxlength kod plugin

Sekarang kita boleh menulis kod plugin utama kami:

Penjelasan:

(function($) {
    $.fn.reverseText = function(params) { ... }
})(jQuery);

// 示例
$("p").reverseText( { minlength: 0, maxlength: 100 } );

Fungsi melintasi semua jQuery dom nodes dan panggil fungsi tanpa nama.

1. Dalam fungsi, "ini" mengandungi nod tunggal. Koleksi node jQuery ditugaskan untuk this.each supaya kita dapat menjalankan kaedah jQuery.
2. Variable $t ditugaskan sebagai rentetan teks dalam nod DOM.
Tetapkan ke rentetan kosong.
3. origText Jika panjang newText antara
dan
4. , gelung mencipta rentetan teks terbalik dalam origText. Kemudian kemas kini nod DOM dengan sewajarnya. params.minlength params.maxlength newText
Jangan memecahkan panggilan rantai!

Akhirnya, kita harus ingat untuk mengembalikan objek jQuery supaya kaedah lain boleh dipanggil dirantai:

kod penuh

// 合并默认参数和用户参数
params = $.extend( {minlength: 0, maxlength: 99999}, params);

kod plugin kami kini selesai:

Simpan fail ini sebagai

. Kami kemudiannya boleh memasukkan perpustakaan jQuery di mana -mana halaman HTML selepas ia dimuatkan, contohnya:

// 遍历所有节点
this.each(function() {

    // 将单个节点表示为 jQuery 对象
    var $t = $(this);

    // 查找文本
    var origText = $t.text(), newText = '';

    // 文本长度是否在定义的限制内？
    if (origText.length >= params.minlength &&  origText.length <= params.maxlength) {
        for (var i = origText.length; i--; ) newText += origText.substr(i, 1);
        $t.text(newText);
    }

});

jquery.reversetext.js senarai di halaman ini kini membalikkan teks dalam peluru pertama dan ketiga (ingat, item pertama bermula dengan 0):

return this;

Sumber:

• Lihat halaman Demo Plugin
• Lihat Plugin JavaScript Code
• muat turun plugin dan kod sampel

Anda kini harus mempunyai pemahaman yang baik tentang pembangunan pemalam jQuery. Forum SitePoint JavaScript juga merupakan sumber yang hebat untuk mencari bantuan dan nasihat. Akan datang: Tutorial tiga bahagian baru mengenai cara membina komponen halaman berguna ke dalam plugin jQuery.

(bahagian FAQ dalam dokumen asal ditinggalkan di sini kerana kandungan bahagian ini tidak sepadan dengan keperluan pseudo-asal dan terlalu panjang.)

Atas ialah kandungan terperinci Cara Membangunkan Plugin JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!