10 petua untuk membangunkan plugin jQuery yang lebih baik

pemalam jQuery yang sangat baik adalah popular di kalangan puluhan ribu pemaju web di seluruh dunia, sementara mereka yang mempunyai reka bentuk yang lemah cepat dilupakan. Artikel ini menyediakan beberapa petua untuk membantu anda membangunkan plugin jQuery yang lebih baik dan meningkatkan pengaruh mereka.

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

Kecuali plugin anda mengembalikan nilai, baris terakhir fungsi plugin mestilah:

<code class="language-javascript">return this;</code>

Ini memastikan bahawa panggilan kaedah boleh dibuat dalam rantai, contohnya:

<code class="language-javascript">$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();</code>

2. Penggunaan mudah

Dalam kebanyakan kes, plugin anda harus berfungsi dengan betul tanpa pemaju mencari dokumentasi, menetapkan pilihan, atau mengedit kod plugin. Jika ia adalah widget visual, pemaju tidak perlu mengedit sebarang kod JavaScript. Anda hanya boleh menyediakan HTML dengan kelas/ID, yang secara automatik akan memulakan kod anda, contohnya:

<code class="language-html"><p>My content</p></code>

pemalam anda boleh diasaskan dengan sendirinya, contohnya:

<code class="language-javascript">$(function() {
    $("section.myjqWidget").myjqWidget();
});</code>

3. Gunakan nombor kawalan penamaan dan versi yang sesuai

Plug-in jQuery banyak. Nama seperti "tab" mungkin telah digunakan. Walaupun ini tidak selalu menjadi masalah, penggunaan nama -nama yang samar -samar atau berpotensi bercanggah harus dielakkan. Nombor versi juga penting, terutamanya apabila pemaju melaporkan isu.

4. Menggunakan penutupan

Jangan bergantung pada

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: $ $

<code class="language-javascript">(function($) {
    // 此处的代码可以使用$来引用jQuery
})(jQuery);</code>

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

Ini mempunyai beberapa kelebihan: parameter mudah dibaca, boleh diatur dalam apa -apa perintah atau boleh ditinggalkan sama sekali. Walau bagaimanapun, anda harus menetapkan nilai lalai dalam kod plugin dan menimpa mereka dengan sewajarnya, sebagai contoh:

<code class="language-javascript">$("#select").MyPlugin({opt1: 1, opt2: 2, opt3: "three"});</code>

Plugin anda boleh menggunakan kod seperti

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

kepada parameter rujukan.

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:

<code class="language-javascript">return this;</code>

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:

<code class="language-javascript">$("div#myid").yourPlugin().anotherPlugin().yetAnotherPlugin();</code>

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!