لماذا يمرر المرء كائن jQuery.fn إلى jQueryObject

Question

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

أحاول أن أتعلم من هذا المكون الإضافي ، فإنه يعين الأساليب باستخدام fn.extend ثم يمرر نفسه (مع هذا) إلى بعض الوظائف التي تم إجراؤها في jQuery.Extend.

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },

أرى أيضًا الإضافات الأخرى التي لا تفعل ذلك.

لماذا هذا؟؟ أو ما هي الفكرة وراءها.

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

شكرا ، ريتشارد

تعديل

رمز البرنامج المساعد الكامل ويستخدم اثنين من تمديدات مختلفة

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },
    stopTime: function(label, fn) {
        return this.each(function() {
            jQuery.timer.remove(this, label, fn);
        });
    }
});

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
            if (value == undefined || value == null)
                return null;
            var result = this.regex.exec(jQuery.trim(value.toString()));
            if (result[2]) {
                var num = parseFloat(result[1]);
                var mult = this.powers[result[2]] || 1;
                return num * mult;
            } else {
                return value;
            }
        },
        add: function(element, interval, label, fn, times) {
            var counter = 0;

            if (jQuery.isFunction(label)) {
                if (!times) 
                    times = fn;
                fn = label;
                label = interval;
            }

            interval = jQuery.timer.timeParse(interval);

            if (typeof interval != 'number' || isNaN(interval) || interval < 0)
                return;

            if (typeof times != 'number' || isNaN(times) || times < 0) 
                times = 0;

            times = times || 0;

            var timers = jQuery.data(element, this.dataKey) || jQuery.data(element, this.dataKey, {});

            if (!timers[label])
                timers[label] = {};

            fn.timerID = fn.timerID || this.guid++;

            var handler = function() {
                if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
                    jQuery.timer.remove(element, label, fn);
            };

            handler.timerID = fn.timerID;

            if (!timers[label][fn.timerID])
                timers[label][fn.timerID] = window.setInterval(handler,interval);

            this.global.push( element );

        },
        remove: function(element, label, fn) {
            var timers = jQuery.data(element, this.dataKey), ret;

            if ( timers ) {

                if (!label) {
                    for ( label in timers )
                        this.remove(element, label, fn);
                } else if ( timers[label] ) {
                    if ( fn ) {
                        if ( fn.timerID ) {
                            window.clearInterval(timers[label][fn.timerID]);
                            delete timers[label][fn.timerID];
                        }
                    } else {
                        for ( var fn in timers[label] ) {
                            window.clearInterval(timers[label][fn]);
                            delete timers[label][fn];
                        }
                    }

                    for ( ret in timers[label] ) break;
                    if ( !ret ) {
                        ret = null;
                        delete timers[label];
                    }
                }

                for ( ret in timers ) break;
                if ( !ret ) 
                    jQuery.removeData(element, this.dataKey);
            }
        }
    }
});

jQuery(window).bind("unload", function() {
    jQuery.each(jQuery.timer.global, function(index, item) {
        jQuery.timer.remove(item);
    });
});

Answer 1

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

يتم تمرير وظائف البرنامج المساعد هذه دائمًا كائن jQuery (أي اختيار عناصر DOM التي تم استدعاؤها) كما هذه عامل.

على سبيل المثال ، لنفترض أنك تريد إنشاء مكون إضافي jQuery يعرض عدد العناصر الموجودة في مجموعة DOM باستخدام تنبيه:

$.fn.showCount = function() { 
   alert("Count = " + this.length); // "this" is a refernce to the jQuery object
}

أو (وهو نفسه بالضبط):

// $.fn.extend is just a convenience method for extending the jQuery.fn object
// It's also the same as calling $.extend($.fn, { ... })

$.fn.extend( {
                showCount: function() { 
                        alert("Count = " + this.length);
                }
             });

لذلك عندما تتصل:

$("a").showCount();

سوف يطفو على تنبيه يخبرك بعدد <a> العلامات في المستند الخاص بك.

تعديل:

بعد رؤية الكود الخاص بك ، أنا فكر في أنا أعرف ما الذي تحصل عليه.

عند استخدام jQuery.Extend () (وليس jquery.fn.extend) ، فأنت لا تقوم بإنشاء مكون إضافي حقيقي. أنت مجرد إنشاء وظيفة أو كائن عالمي ، لا علاقة لها بـ jQuery نفسها.

في الواقع ، كان من الممكن كتابة البرنامج المساعد المؤقت على هذا النحو ، وكان من الممكن أن يفعل نفس الشيء بالضبط:

var timerPlugin = {
       global: [],
        guid: 1,
        dataKey: "jQuery.timer",
        regex: /^([0-9]+(?:\.[0-9]*)?)\s*(.*s)?$/,
        powers: {
            // Yeah this is major overkill...
            'ms': 1,
            'cs': 10,
            'ds': 100,
            's': 1000,
            'das': 10000,
            'hs': 100000,
            'ks': 1000000
        },
        timeParse: function(value) {
           //...
        }
        // ...
  };

ثم (على سبيل المثال) تتصل timerplugin.remove () بدلاً من jquery.timer.remove ().

تم توسيع كائن jQuery.fn للسماح باستدعاء وظائفك على كائنات jQuery. علي سبيل المثال: $ ("a"). myplugin ()

الشيء الذي يجب تذكره هو أن jquery.extend () لا علاقة له بالمكونات الإضافية jQuery أو jQuery. إنها ببساطة وظيفة فائدة توفرها مكتبة jQuery.

Answer 2

هناك عدة طرق يمكنك من خلالها تحديد الإضافات

$.fn.myFunc=function(opt){

};

$.fn.myOtherFunc=function(opt){

};

بالضبط مثل

$.fn.extend({
  myFunc:function(opt){

  },
  myOtherFunc:function(opt){

  }
});