Bagaimana saya menulis plugin jQuery pertama saya di 15 dan bagaimana membuatnya

Halo! Saya tinggal di Uzbekistan dan secara mandiri mempelajari pengembangan web untuk tahun ketiga. Selama waktu ini, saya belajar untuk menciptakan kembali roda sendiri untuk menyelesaikan masalah yang saya hadapi. Salah satu masalah dan solusinya akan dijelaskan di sini. Saya harap Anda akan tertarik.

Mengapa saya harus menulis plugin?

Saya mulai membuat halaman statis tanpa menggunakan bootstrap karena sejumlah alasan, di mana saya perlu memasukkan slider. Saya bisa saja menulis slider, tetapi saya ingin menemukan solusi yang dapat digunakan kembali dalam proyek-proyek baru.

Oleh karena itu, saya mencari plugin untuk memasukkan slider, tetapi saya masih tidak dapat menemukan plugin yang cocok yang cocok untuk saya di semua kriteria: mobile-friendly, dengan remote-controller, sehingga semua kode cocok dalam satu file, kode ringkas dan bahwa ada semua opsi default untuk slider.

Kemudian saya memutuskan untuk menulis plugin sendiri untuk membuat slider, yang dapat digunakan dalam proyek lain dan ditingkatkan dengan bantuan komunitas. Plugin ini disebut Slibox.

Dan alasan kedua untuk menulis sebuah plugin adalah belajar mandiri dan pengembangan. Dengan membuat plugin, saya akan mendapatkan pengalaman dalam membuat plugin dan modul. Dan pengetahuan ini bisa membantu saya di masa depan.

Mengapa saya menggunakan jQuery?

Meskipun saya dapat menulis kode dalam JavaScript vanilla, kadang-kadang saya merasa lebih nyaman untuk bekerja dengan jQuery)

Bagaimana Anda membuat plugin jQuery?

Pertama-tama, Anda perlu memahami mengapa plugin ini dibuat, untuk menyelesaikan masalah yang mana. Lagi pula, Anda dapat menggunakan yang sudah jadi.

Setelah Anda memutuskan pilihan masalah, Anda bisa mulai berkembang.

Templat

Pertama-tama, hubungkan jQuery ke halaman Anda:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Lalu, buat file baru dan tambahkan kode ini:

(function($) {
    $.fn.plugtest = function(options) {

    }
})(jQuery)

Ini adalah fungsi self-invaging untuk globalisasi plugtest. Ya, kami akan memanggil plugin plugtest kami. $ .fn diperlukan agar kita dapat memanggil fungsi ini pada elemen apa pun:

<div></div>

dan di bawah ini dalam elemen skrip:

$('div').plugtest({})

, options .

this

console.log(this) , :

(function($) {
    $.fn.plugtest = function(options) {
        console.log(this)
    }
})(jQuery)

, :

(function($) {
        $.fn.plugtest = function(options) {
            let o = $.extend({
                greeting: '!'
            }, options)
            console.log(this[0].tagName + '  ' + o.greeting)
        }
    })(jQuery)

extend «» . greeting :

$('div').plugtest({
        greeting: "!"
})

:

, :

let test = $('div').plugtest({
        greeting: "!"
})

(function($) {
    $.fn.plugtest = function(options) {
        let o = $.extend({
            greeting: '!'
        }, options)
        return this.each(function() {
            console.log(this[0].tagName + '  ' + o.greeting)
        })
    }
})(jQuery)

, , - . . , !

Slibox github-e:

Slibox

Saya memiliki pengalaman dalam membuat API dan aplikasi dalam kerangka PHP, Laravel dan Vue, saya memiliki pengalaman dengan node.js, express.js. Saya juga tertarik untuk membangun aplikasi desktop lintas platform dan suka menulis JavaScript vanilla untuk kontrol aplikasi yang lebih baik. Saya sama-sama tertarik pada tugas-tugas frontend dan backend.

Saya ingin melatih dari jarak jauh dalam tim yang erat di bawah pengawasan seorang mentor, di mana keterampilan saya (menggunakan lightsaber) akan berguna. Terima kasih atas saran dan pendapatnya.