1. Analisis pembukaan
Hai, semuanya! Serangkaian artikel hari ini terutama berbicara tentang cara mengembangkan pengembangan plug-in berdasarkan "JavaScript". Saya pikir banyak orang tidak terbiasa dengan kata "plugin".
Beberapa orang mungkin menyebutnya "komponen" atau "komponen", yang tidak penting. Kuncinya adalah melihat cara merancang dan bagaimana membuat pertimbangan yang komprehensif. Ini adalah konsep yang difokuskan oleh artikel ini. Saya pikir semua orang benar
Saya memiliki pemahaman tertentu tentang "metode plug-in jQuery". Kami akan membahasnya bersama berdasarkan topik ini dan akhirnya memberikan rencana implementasi yang relevan untuk terus meningkatkan kemampuan kami.
2. Masukkan topik plug-in
Secara umum, pengembangan plug-in jQuery dibagi menjadi dua jenis: satu adalah fungsi global yang tergantung di bawah jQuery namespace, yang juga dapat disebut metode statis.
Metode lain adalah metode level objek jQuery, yaitu metode yang digantung di bawah prototipe jQuery, sehingga instance objek jQuery yang diperoleh melalui pemilih juga dapat berbagi metode.
(1), pengembangan plug-in kelas
Pemahaman paling langsung tentang pengembangan plug-in tingkat adalah menambahkan metode kelas ke kelas "jQuery", yang dapat dipahami sebagai menambahkan metode statis. Contoh tipikal adalah fungsi "$ .AJAX ()", yang mendefinisikan fungsi dalam namespace jQuery. Tentang pengembangan plug-in tingkat dapat diperpanjang dalam bentuk berikut:
1.1 Tambahkan fungsi global, kita hanya perlu mendefinisikannya sebagai berikut dan melihat kode:
Salinan kode adalah sebagai berikut:
$ .hello = function () {
waspada ("Halo, beruang besar!");
};
1.2 Tambahkan beberapa fungsi global, yang dapat didefinisikan sebagai berikut:
Salinan kode adalah sebagai berikut:
$ .extend ({
halo: function (name) {
// Letakkan kode Anda di sini
},
World: function () {
// Letakkan kode Anda di sini
}
});
Deskripsi: "$ .Extend (Target, [Object1], [Objectn])" (Metode ini terutama digunakan untuk menggabungkan konten (atribut) dari dua atau lebih objek ke objek pertama dan mengembalikan objek pertama yang digabungkan.
Jika metode ini hanya memiliki satu target parameter, parameter akan memperluas namespace of jQuery, yaitu, itu akan digantung di bawah objek global jQuery sebagai metode statis).
(2), pengembangan plug-in tingkat objek
Pengembangan plug-in tingkat objek membutuhkan dua formulir:
2.1 Memasang atribut yang relevan secara dinamis melalui "$ .fn.extend ()" sebagai prototipe.
Salinan kode adalah sebagai berikut:
(function ($) {
$ .fn.extend ({
pluginname: function (opts) {
// Letakkan kode Anda di sini
}
});
}) (jQuery);
2.2 Langsung tambahkan atribut dinamis ke rantai prototipe.
Salinan kode adalah sebagai berikut:
(function ($) {
$ .fn.pluginname = function () {
// Letakkan kode Anda di sini
};
}) (jQuery);
Izinkan saya menjelaskan: keduanya setara. Untuk plug-in jQuery, fungsi dasar dapat bekerja dengan baik, tetapi untuk plug-in yang lebih kompleks, perlu untuk menyediakan berbagai metode dan fungsi pribadi.
Anda dapat menggunakan ruang nama yang berbeda untuk menyediakan berbagai metode untuk plug-in Anda, tetapi menambahkan terlalu banyak namespace akan membuat kode berantakan dan kurang kuat. Jadi solusi terbaik adalah mendefinisikan fungsi dan metode pribadi dengan tepat.
Jadi kami menerapkan unit plug-in pribadi yang disimulasikan dengan menggabungkan fungsi yang dieksekusi sendiri dengan penutupan, seperti pada contoh kami di atas.
(3), mari kita berikan contoh sederhana untuk melihat proses implementasi:
(1), kode fragmen "html" adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<Div id = "bb">
<span> </span>
<Div
style = "margin-top: 10px;
margin-bottom: 30px; "
> 8 </div>
</div>
(2), definisi "data.json" adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
{
"Teks": "Halo, Big Bear {{BB}}!" ;
}
(3), kode "BB.JS" adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
$ (function () {
$ ("#bb"). Bigbear ();
});
(function ($) {
$ .fn.bigbear = fungsi (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
kembalikan this.each (function () {
var elem = $ (ini);
elem.find ("span"). Teks (opts ["title"]);
$ .get (opts ["url"], function (data) {
elem.find ("div"). Teks (data ["teks"]);
});
});
};
$ .fn.bigbear.defaults = {
Judul: "Ini adalah tes sederhana",
URL: "data.json"
};
}) (jQuery);
Efek Menjalankan:
Mari kita ringkas :
(1) "$ .fn.bigbear.defaults" memberikan opsi parameter default untuk plug-in. Plug-in dengan ekstensibilitas yang baik harus memungkinkan pengguna untuk menyesuaikan opsi parameter sesuai dengan kebutuhan mereka dan mengontrol perilaku plug-in, sehingga perlu untuk menyediakan opsi default yang dipulihkan. Anda dapat mengatur opsi ini melalui metode Perlu JQuery.
(2), "Kembalikan this.each () {...}" melintasi beberapa elemen dan mengembalikan jQuery menggunakan mesin pemilih sizzle, Sizzle dapat menyediakan operasi multi-elemen untuk fungsi Anda (seperti elemen yang sama untuk semua nama kelas). Ini adalah salah satu dari beberapa fitur jQuery yang sangat baik, dan bahkan jika Anda tidak siap untuk memberikan dukungan multi-elemen untuk plugin Anda selama pengembangan, mempersiapkan ini masih merupakan cara yang bagus. Selain itu, JQuery memiliki fitur bagus yang dapat melakukan cascades metode, yang juga dapat disebut panggilan rantai, jadi kita tidak boleh menghancurkan fitur ini dan selalu mengembalikan elemen dalam metode ini.
(Iv), ringkasan akhir
(1) jQuery telah memperkenalkan dua metode untuk plug-in pengembangan, yaitu: jQuery.fn.extend (objek); Tambahkan metode ke objek jQuery.
jQuery.extend (objek); Menambahkan metode baru ke kelas untuk memperluas kelas jQuery itu sendiri.
(2) Masukkan semua kode di penutupan (fungsi eksekusi instan). Pada saat ini, penutupan setara dengan ruang lingkup pribadi. Eksternal tidak dapat mengakses informasi internal, dan tidak akan ada polusi variabel global. Spesifikasi pengembangan resmi dijelaskan: a) Hindari ketergantungan global; b) Hindari kerusakan pihak ketiga; c) Kompatibilitas dengan operator jQuery '$' dan 'jQuery'.
(3) Berikan opsi parameter default untuk plug-in. Plug-in dengan ekstensibilitas yang baik harus memungkinkan pengguna untuk menyesuaikan opsi parameter sesuai dengan kebutuhan mereka dan mengontrol perilaku plug-in. Oleh karena itu, perlu memberikan opsi default yang dipulihkan. Anda dapat mengatur opsi ini melalui metode perpanjangan jQuery
(4), beralih melalui beberapa elemen dan mengembalikan jQuery menggunakan mesin pemilih sizzle, Sizzle dapat menyediakan operasi multi-elemen untuk fungsi Anda (seperti elemen dengan nama kelas yang sama). Ini adalah salah satu dari beberapa fitur jQuery yang sangat baik, dan bahkan jika Anda tidak siap untuk memberikan dukungan multi-elemen untuk plugin Anda selama proses pengembangan, mempersiapkan ini masih merupakan praktik yang baik. Selain itu, JQuery memiliki fitur bagus yang dapat melakukan cascades metode, yang juga dapat disebut panggilan rantai, jadi kita tidak boleh menghancurkan fitur ini dan selalu mengembalikan elemen dalam metode ini.
(5) Penting untuk menempatkan kode satu kali di luar loop utama, tetapi sering diabaikan. Sederhananya, jika Anda memiliki sepotong kode yang merupakan sekelompok nilai default yang hanya perlu dipakai sekali, alih -alih instantiasi setiap kali Anda memanggil fungsi plugin, Anda harus meletakkan kode ini di luar metode plugin.
(6) Setelah belajar, mari kita pikirkan. Jika pemilihan teknologi proyek dan penggantian plug-in ini, itu bergantung pada mekanisme "jQuery", plug-in yang kami tulis sebelumnya tidak akan digunakan (dengan asumsi bahwa jQuery tidak digunakan). Bagaimana cara refactor?
Artikel besok akan membicarakan masalah ini dan akan refactor logika kunci plug-in, jadi tunggu saja. . .