Wie ich mit 15 mein erstes jQuery-Plugin geschrieben habe und wie man sie erstellt

Hallo! Ich lebe in Usbekistan und studiere seit dem dritten Jahr alleine Webentwicklung. Während dieser Zeit lernte ich, ein Fahrrad zu erfinden, um die aufgetretenen Probleme unabhängig zu lösen. Eines dieser Probleme und seine Lösung wird hier beschrieben. Ich hoffe du wirst interessiert sein.

Warum musste ich ein Plugin schreiben?

Ich habe aus mehreren Gründen angefangen, eine statische Seite ohne Bootstrap zu erstellen, wo ich einen Schieberegler einfügen musste. Man könnte einfach einen Schieberegler schreiben, aber ich würde gerne eine Lösung finden, die in neuen Projekten wiederverwendet werden kann.

Daher habe ich nach Plugins gesucht, um einen Schieberegler einzufügen, aber ich konnte immer noch kein geeignetes Plugin finden, das mir in allen Kriterien entspricht: mobilfreundlich, mit Fernbedienungen, damit der gesamte Code in eine Datei passt, kompakter Code und alle Standardoptionen für Schieberegler.

Dann habe ich beschlossen, mein eigenes Plugin zum Erstellen von Schiebereglern zu schreiben, das in anderen Projekten verwendet und mithilfe der Community verbessert werden kann. Das Plugin heißt Slibox.

Und der zweite Grund für das Schreiben eines Plugins ist das Selbstlernen und die Entwicklung. Durch das Erstellen eines Plugins würde ich Erfahrung beim Erstellen von Plugins und Modulen sammeln. Und dieses Wissen könnte mir in Zukunft helfen.

Warum habe ich jQuery verwendet?

Obwohl ich Code in Vanille-JavaScript schreiben kann, finde ich es manchmal bequemer, mit jQuery zu arbeiten.

Wie erstellen Sie jQuery-Plugins?

Zunächst müssen Sie verstehen, warum dieses Plugin erstellt wurde, um welches Problem zu lösen. Immerhin können Sie fertige verwenden.

Nachdem Sie sich für die Auswahl der Probleme entschieden haben, können Sie mit der Entwicklung beginnen.

Vorlage

Verbinden Sie zunächst jQuery mit Ihrer Seite:

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

Erstellen Sie dann eine neue Datei und fügen Sie diesen Code hinzu:

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

    }
})(jQuery)

Dies ist eine selbstaufrufende Funktion für die Plug-Test-Globalisierung. Ja, wir werden unser Plugtest-Plugin aufrufen. $ .fn wird benötigt, damit wir diese Funktion für jedes Element aufrufen können:

<div></div>

und unten im Skriptelement:

$('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

Ich habe Erfahrung in der Erstellung von APIs und Anwendungen in PHP-, Laravel- und Vue-Frameworks. Ich habe Erfahrung mit node.js, express.js. Ich bin auch daran interessiert, plattformübergreifende Desktop-Anwendungen zu erstellen, und liebe es, Vanille-JavaScript für eine bessere Anwendungssteuerung zu schreiben. Ich interessiere mich gleichermaßen für die Aufgaben des Frontends und des Backends.

Ich möchte aus der Ferne in einem engen Team unter der Aufsicht eines Mentors trainieren, wo meine Fähigkeiten (Besitz eines Lichtschwerts) nützlich wären. Danke für die Tipps und Meinungen.