كيف كتبت أول مكوّن إضافي لـ jQuery في عمر 15 وكيفية إنشائه

مرحبا! أنا أعيش في أوزبكستان وأدرس تطوير الويب بشكل مستقل للسنة الثالثة بالفعل. خلال هذا الوقت ، تعلمت إعادة اختراع العجلة بمفردي لحل المشاكل التي واجهتها. سيتم وصف إحدى هذه المشاكل وحلها هنا. اتمنى انك تجده مثيرا للإهتمام.

لماذا كان علي أن أكتب البرنامج المساعد؟

لقد بدأت في إنشاء صفحة ثابتة دون استخدام bootstrap لعدد من الأسباب ، حيث كنت بحاجة إلى إدراج شريط تمرير. يمكن للمرء أن يكتب فقط شريط تمرير ، لكني أود أن أجد حلاً يمكن إعادة استخدامه في المشاريع الجديدة.

لذلك ، بحثت عن مكونات إضافية لإدراج شريط تمرير ، ولكن ما زلت لم أجد مكونًا إضافيًا مناسبًا يناسبني وفقًا لجميع المعايير: مناسب للجوّال ، مع وحدات تحكم عن بُعد ، بحيث يتم احتواء جميع التعليمات البرمجية في ملف واحد ، والرمز المضغوط وجميع الخيارات بشكل افتراضي للمتزلجون.

ثم قررت كتابة البرنامج المساعد الخاص بي لإنشاء أشرطة التمرير ، والتي يمكن استخدامها في مشاريع أخرى وتحسينها بمساعدة المجتمع. يسمى البرنامج المساعد Slibox.

والسبب الثاني لكتابة البرنامج المساعد هو التعلم الذاتي والتنمية. من خلال إنشاء مكون إضافي ، سأكتسب خبرة في إنشاء المكونات الإضافية والوحدات النمطية. وقد تساعدني هذه المعرفة في المستقبل.

لماذا أستخدم jQuery؟

على الرغم من أنني أستطيع كتابة التعليمات البرمجية في جافا سكريبت بالفانيليا ، إلا أنني أجدها أحيانًا أكثر ملاءمة للعمل مع jQuery)

كيفية إنشاء الإضافات jQuery؟

بادئ ذي بدء ، تحتاج إلى فهم سبب إنشاء هذا البرنامج المساعد ، لحل أي مشكلة. بعد كل شيء ، يمكنك استخدام تلك الجاهزة.

بعد أن تقرر اختيار المشاكل ، يمكنك البدء في التطور.

قالب

بادئ ذي بدء ، قم بتوصيل jQuery بصفحتك:

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

بعد ذلك ، أنشئ ملفًا جديدًا ، وأضف هذا الرمز:

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

    }
})(jQuery)

هذه وظيفة ذاتية الاستدلال لعولمة plugtest. نعم ، سنتصل بـ plugtest الخاص بنا. مطلوب $ .fn حتى نتمكن من استدعاء هذه الوظيفة على بعض العناصر:

<div></div>

وأدناه في عنصر البرنامج النصي:

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

لدي خبرة في إنشاء واجهات برمجة التطبيقات والتطبيقات في PHP ، في أطر Laravel و Vue ، ولدي خبرة في node.js ، express.js. أنا مهتم أيضًا بإنشاء تطبيقات سطح المكتب عبر الأنظمة الأساسية وأحب كتابة جافا سكريبت الفانيليا للتحكم بشكل أفضل في التطبيقات. أنا مهتم بنفس القدر بمهام الواجهة الأمامية والخلفية.

أود أن أتدرب عن بعد في فريق مترابط تحت إشراف مرشد ، حيث تكون مهاراتي (باستخدام السيف الضوئي) مفيدة. شكرا على النصيحة والآراء.