10 petua untuk membangunkan plugin jQuery yang lebih baik

Mata utama:

Pastikan plugin jQuery anda boleh diubah dengan kembali dengan mengembalikan objek jQuery yang memanggilnya, yang membolehkan pelbagai kaedah jQuery dihubungkan.
Menyediakan tetapan lalai untuk plugin jQuery anda, membolehkan pengguna menyesuaikan mengikut keperluan mereka sendiri, dan menganggap menyokong parameter HTML untuk kegunaan mudah.
Muat naik plugin jQuery anda ke codebases seperti GitHub, Google Code, dan JQuery Plugin Directories untuk promosi, dan bersedia untuk menyediakan sokongan dan kemas kini yang diperlukan.

1. Pastikan integriti panggilan rantai

return this;

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

2. Penggunaan mudah

<p>My content</p>

$(function() {
    $("section.myjqWidget").myjqWidget();
});

3. Gunakan nombor kawalan penamaan dan versi yang sesuai

4. Menggunakan penutupan

untuk memetik jQuery. Jika pemaju memasang perpustakaan lain, ia mungkin telah diambil sebelum jQuery dimuatkan. Cara paling mudah untuk menyelesaikan masalah ini adalah untuk meluluskan jQuery sebagai parameter $ dari fungsi permulaan tanpa nama, contohnya: $ $

(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);

Tetapkan parameter lalai
kebanyakan plugin menggunakan notasi literal objek JavaScript untuk menetapkan parameter, contohnya:

$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});

$.fn.PlugIn = function(opts) {
    // 默认配置
    var config = $.extend({}, {
        opt1: 1,
        opt2: 2,
        opt3: 3,
        opt4: 4,
        opt5: 5
    }, opts);
    // ...
};

config.opt1

menyokong parameter html
Sebaik -baiknya, widget HTML harus dapat menetapkan parameter tanpa memerlukan pemaju untuk menukar kod JavaScript. Anda mungkin mempertimbangkan menggunakan atribut data HTML5, contohnya:

return this;

Ini boleh diakses melalui kaedah JQuery's data(): .data("opt1").

7. Dokumentasi kod menulis

Tambahkan komen ringkas di bahagian atas plugin, keterangan:

• nama plugin dan versi
• fungsi plugin
• Contoh Penggunaan
• Parameter
• Pautan Hubungi dan Sokongan

Jika plugin sangat kompleks, anda boleh mempertimbangkan fail ReadMe yang berasingan.

8. Cuba plug-in anda dengan teliti

Ujiannya. Kemudian uji lagi. Uji dalam semua pelayar. Mungkin ada masalah yang tidak dapat anda perbaiki, seperti isu keserasian IE6. Ia tidak penting, tetapi ia hanya disebut dalam dokumentasi anda.

9. Gunakan templat yang baik

Berikut adalah kod templat yang saya gunakan semasa membuat plugin baru:

$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();

ia memberikan titik permulaan yang baik:

• plugin dibalut dengan penutupan.
• Ia menetapkan pilihan lalai, yang ditimpa oleh parameter plugin.
• Setiap elemen yang dipilih diluluskan sebagai objek jQuery ke fungsi DoSomething.
• Mengandungi return this;.
• kod permulaan auto disediakan pada akhir.

10. Menggalakkan plug-in
anda

Jika anda mahu plugin anda digunakan oleh pemaju, muat naiknya ke codebases seperti GitHub, Google Code, dan JQuery Plugin Directories. Buat halaman demo, mempromosikannya dalam artikel, dan teruskan menyiarkan maklumat di Twitter. Kemudian bersiaplah untuk menyokong plugin dan kemas kini jika perlu. Anda akan mendapat beberapa soalan bodoh dan permintaan ciri pelik, tetapi ini adalah sebahagian daripada pengarang plugin yang berjaya.

(kandungan berikutnya, iaitu bahagian FAQ, disyorkan untuk menanganinya secara berasingan kerana panjang artikel. Bahagian FAQ boleh disusun menjadi jawapan baru secara berasingan.)

Atas ialah kandungan terperinci 10 petua untuk membangunkan plugin jQuery yang lebih baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!