Tutorial pembangunan pemalam JavaScript (1)_kemahiran javascript

1, analisis pembukaan

Hai semua! Siri artikel hari ini terutamanya bercakap tentang cara membangunkan pembangunan pemalam berdasarkan "JavaScript". Saya rasa ramai orang sudah biasa dengan perkataan "plug-in",

Sesetengah orang mungkin memanggilnya "komponen" atau "komponen". Perkara utama ialah cara mereka bentuk dan cara membuat pertimbangan yang menyeluruh. Saya rasa semua orang betul

Saya mempunyai pemahaman tertentu tentang "kaedah pemalam jQuery".

Kedua, masukkan topik utama pemalam

Secara umumnya, pembangunan pemalam jQuery terbahagi kepada dua jenis: satu ialah fungsi global yang tergantung dalam ruang nama jQuery, yang juga boleh dipanggil kaedah statik.

Yang lain ialah kaedah tahap objek jQuery, iaitu kaedah digantung di bawah prototaip jQuery, supaya contoh objek jQuery yang diperoleh melalui pemilih juga boleh berkongsi kaedah ini.

(1), pembangunan pemalam peringkat kelas

Pemahaman yang paling langsung tentang pembangunan pemalam peringkat kelas ialah menambahkan kaedah kelas pada kelas "jQuery", yang boleh difahami sebagai menambah kaedah statik. Contoh biasa ialah fungsi "$.ajax()", yang mentakrifkan fungsi dalam ruang nama jQuery. Pembangunan pemalam di peringkat kelas boleh dilanjutkan dalam bentuk berikut:

1.1 Tambah fungsi global, kita hanya perlu mentakrifkannya seperti berikut, lihat kod:

Salin kod Kod adalah seperti berikut:

$.hello = function(){
alert("Hello, Big Bear!") ;
} ;

1.2 Tambah berbilang fungsi global, yang boleh ditakrifkan seperti berikut:

Salin kod Kod adalah seperti berikut:

$.extend({
Helo: fungsi(nama){
              // letakkan kod anda di sini
} ,
dunia : function(){
              // letakkan kod anda di sini
}
}) ;

Penerangan: "$.extend(target, [object1], [objectN])" (Kaedah ini digunakan terutamanya untuk menggabungkan kandungan (sifat) dua atau lebih objek ke dalam objek pertama dan mengembalikan objek Pertama yang digabungkan.

Jika kaedah hanya mempunyai satu sasaran parameter, parameter ini akan mengembangkan ruang nama jQuery, iaitu, ia akan digantung di bawah objek global jQuery sebagai kaedah statik).

(2), pembangunan pemalam peringkat objek

Pembangunan pemalam peringkat objek memerlukan dua bentuk berikut:

2.1 Gunakan "$.fn.extend()" untuk melekapkan atribut berkaitan secara dinamik sebagai prototaip.

Salin kod Kod adalah seperti berikut:

(fungsi($){
$.fn.extend({
Nama pemalam : function(opts){
                       // letakkan kod anda di sini
                                                                                                                   });
})(jQuery);

　2.2 Tambah terus sifat dinamik pada rantai prototaip.

Salin kod Kod adalah seperti berikut:

(fungsi($) {

$.fn.pluginName = function(){
// letakkan kod anda di sini
} ;  
})(jQuery);

Terangkan: kedua-duanya adalah setara Untuk pemalam jQuery, fungsi asas boleh berfungsi dengan baik, tetapi untuk pemalam yang lebih kompleks, pelbagai kaedah dan fungsi peribadi perlu disediakan.

Anda boleh menggunakan ruang nama yang berbeza untuk menyediakan pelbagai kaedah untuk pemalam anda, tetapi menambah terlalu banyak ruang nama akan menjadikan kod mengelirukan dan kurang mantap. Jadi penyelesaian terbaik adalah untuk menentukan fungsi dan kaedah peribadi dengan sewajarnya.

Jadi kami melaksanakan simulasi unit pemalam peribadi melalui gabungan fungsi dan penutupan laksana sendiri, sama seperti dalam contoh kami di atas.

(3), berikut ialah contoh mudah untuk melihat proses pelaksanaan:

(1), kod serpihan "html", seperti berikut:

Salin kod Kod adalah seperti berikut:

       style="margin-top:10px;
        margin-bottom:30px;"
>8

                                                

(2), "data.json" ditakrifkan seperti berikut:

Salin kod Kod adalah seperti berikut:

​{
"teks" : "Helo, Beruang Besar {{bb}}!" ;
}

(3), kod "bb.js" adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

$(fungsi(){
$("#bb").bigbear() ;
}) ;
(fungsi($){
$.fn.bigbear = fungsi(pilihan){
         opts = $.extend({},$.fn.bigbear.defaults,opts) ;
          kembalikan ini.setiap(fungsi(){
            var elem = $(this) ;
              elem.find("span").text(opts["title"]) ;
               $.get(opts["url"],function(data){
                   elem.find("div").text(data["text"]) ;
             }) ;
         }) ;
} ;
$.fn.bigbear.defaults = {
Tajuk: "Ini adalah ujian mudah" ,
​ url: "data.json"
} ;
})(jQuery) ;

Kesan operasi:

Untuk meringkaskan :

(1) "$.fn.bigbear.defaults" menyediakan pilihan parameter lalai bagi pemalam -in, jadi ia menyediakan keupayaan untuk memulihkan pilihan lalai yang diperlukan. Anda boleh menetapkan pilihan ini melalui kaedah lanjutan jQuery.

　(2), "return this.each(){...}" merentasi berbilang elemen dan mengembalikan jQuery menggunakan enjin pemilih Sizzle boleh menyediakan operasi berbilang elemen untuk fungsi anda (contohnya, semua nama kelas ada unsur yang sama). Ini adalah salah satu daripada beberapa ciri hebat jQuery, dan walaupun anda tidak akan menyediakan sokongan berbilang elemen untuk pemalam anda, ia masih merupakan cara yang baik untuk menyediakannya. Di samping itu, jQuery mempunyai ciri yang sangat baik yang ia boleh melakukan kaedah cascading, yang juga boleh dipanggil panggilan berantai, jadi kita tidak harus memusnahkan ciri ini dan sentiasa mengembalikan elemen dalam kaedah.

(4), ringkasan akhir

(1), jQuery menyediakan dua kaedah untuk membangunkan pemalam, iaitu: jQuery.fn.extend(objek);
jQuery.extend(objek); Untuk memanjangkan kelas jQuery itu sendiri.

(2), letakkan semua kod dalam penutupan (fungsi pelaksanaan segera pada masa ini, penutupan adalah bersamaan dengan skop peribadi, maklumat dalaman tidak boleh diakses oleh pihak luar, dan tidak akan ada pencemaran). pembolehubah global. Penjelasan rasmi mengenai spesifikasi penciptaan dan pembangunan ialah: a) mengelakkan kebergantungan global b) mengelakkan kerosakan pihak ketiga c) serasi dengan pengendali jQuery '$' dan 'jQuery';

(3) Sediakan pilihan parameter lalai untuk pemalam dengan kebolehskalaan yang baik harus membenarkan pengguna menyesuaikan pilihan parameter mengikut keperluan mereka dan mengawal tingkah laku pemalam, jadi perlu menyediakannya. pilihan lalai pulihkan. Anda boleh menetapkan pilihan ini melalui kaedah lanjutan jQuery

(4), merentasi berbilang elemen dan mengembalikan jQuery untuk menggunakan enjin pemilih Sizzle boleh menyediakan operasi berbilang elemen untuk fungsi anda (contohnya, semua elemen dengan nama kelas yang sama). Ini adalah salah satu daripada beberapa ciri hebat jQuery, dan walaupun anda tidak akan menyediakan sokongan berbilang elemen untuk pemalam anda, ia masih merupakan amalan yang baik untuk menyediakannya semasa pembangunan pemalam. Di samping itu, jQuery mempunyai ciri yang sangat baik bahawa ia boleh melakukan cascading kaedah, yang juga boleh dipanggil panggilan berantai, jadi kita tidak harus memusnahkan ciri ini dan sentiasa mengembalikan elemen dalam kaedah.

(5) Adalah penting untuk meletakkan kod sekali sahaja di luar gelung utama, tetapi ia sering diabaikan. Ringkasnya, jika anda mempunyai sekeping kod yang merupakan sekumpulan nilai lalai dan hanya perlu digunakan sekali sahaja, dan bukannya setiap kali fungsi pemalam anda dipanggil, anda harus meletakkan kod ini di luar kaedah pemalam .

(6), selepas semua orang belajar, fikirkan tentangnya Jika pemilihan teknologi projek berubah dan pemalam ini sangat bergantung pada mekanisme "jQuery", pemalam yang kami tulis sebelum ini tidak akan dapat. digunakan (dengan mengandaikan bahawa jQuery tidak digunakan), apakah yang perlu kita lakukan?

Artikel esok akan membincangkan isu ini dan membina semula logik utama pemalam, jadi nantikan. . .