jQuery Plugin: การเพิ่มฟังก์ชันการโทรกลับ


86

ฉันกำลังพยายามให้ฟังก์ชันการเรียกกลับปลั๊กอินของฉันและฉันต้องการให้มันทำงานในลักษณะที่ค่อนข้างดั้งเดิม:

myPlugin({options}, function() {
    /* code to execute */
});

หรือ

myPlugin({options}, anotherFunction());

ฉันจะจัดการพารามิเตอร์นั้นในโค้ดได้อย่างไร ถือเป็นเอนทิตีเต็มรูปแบบหรือไม่? ฉันค่อนข้างแน่ใจว่าฉันรู้ว่าจะวางโค้ดปฏิบัติการไว้ที่ไหน แต่ฉันจะเอาโค้ดไปใช้งานได้อย่างไร ดูเหมือนว่าจะหาวรรณกรรมในหัวข้อนี้ไม่ได้มากนัก


2
ไวยากรณ์ที่สองของคุณเรียกใช้ฟังก์ชันแทนการส่งผ่าน คุณต้องลบ()
SLaks

6
โดยส่วนตัวฉันคิดว่าคุณควรระบุการเรียกกลับเป็นส่วนหนึ่งของพารามิเตอร์ "ตัวเลือก" ดีกว่า โดยเฉพาะอย่างยิ่งหากมีการพัฒนาว่ามีเหตุผลมากกว่าหนึ่งข้อในการติดต่อกลับ
Pointy

1
Pointy จะเป็นอย่างไร? สนใจที่จะให้คำตอบ?
dclowd9901

คำตอบ:


167

เพียงดำเนินการโทรกลับในปลั๊กอิน:

$.fn.myPlugin = function(options, callback) {
    if (typeof callback == 'function') { // make sure the callback is a function
        callback.call(this); // brings the scope to the callback
    }
};

คุณยังสามารถเรียกกลับได้ในอ็อบเจ็กต์ตัวเลือก:

$.fn.myPlugin = function() {

    // extend the options from pre-defined values:
    var options = $.extend({
        callback: function() {}
    }, arguments[0] || {});

    // call the callback and apply the scope:
    options.callback.call(this);

};

ใช้แบบนี้:

$('.elem').myPlugin({
    callback: function() {
        // some action
    }
});

เพียงแค่เพิ่มคำตอบนี้ มีโพสต์ที่อธิบายเรื่องนี้: jquery-howto.blogspot.com/2009/11/…
RaphaelDDL

@David วิธีเพิ่มพารามิเตอร์การโทรกลับฉันต้องการทำสิ่งนี้$('.elem').myPlugin({ callback: function (param) { // some action } });
Jeaf Gilbert

2
@JeaffreyGilbert คุณควรนำบริบท jQuery มาด้วยฉันจะทำoptions.callback.call(this, param);
David Hellsing

@ เดวิดฉันต้องการโทรกลับสองครั้งโทรanimateBeforeและanimateAfter. ช่วยบอกวิธีใช้น้ำยา ??
user007

5

ฉันไม่รู้ว่าฉันเข้าใจคำถามของคุณถูกต้องหรือไม่ แต่สำหรับรุ่นที่สอง: สิ่งนี้จะโทรanotherFunctionทันที

โดยทั่วไปปลั๊กอินของคุณควรเป็นฟังก์ชันบางอย่างที่มีลักษณะดังนี้:

var myPlugin = function(options, callback) {
    //do something with options here
    //call callback
    if(callback) callback();
} 

คุณต้องระบุอ็อบเจ็กต์ฟังก์ชันเป็นการเรียกกลับดังนั้นfunction(){...}หรือanotherFunction(ไม่มี())


4

นำกลับมาระเบิดจากอดีต

เป็นที่น่าสังเกตว่าหากคุณมีสองข้อโต้แย้งที่ส่งผ่านตัวอย่างเช่น:

$.fn.plugin = function(options, callback) { ... };

จากนั้นคุณเรียกปลั๊กอินโดยไม่มีอาร์กิวเมนต์ตัวเลือก แต่ด้วยการโทรกลับคุณจะพบปัญหา:

$(selector).plugin(function() {...});

ฉันใช้สิ่งนี้เพื่อทำให้ยืดหยุ่นขึ้นเล็กน้อย:

if($.isFunction(options)) { callback = options }

3

ฉันคิดว่านี่อาจช่วยคุณได้

// Create closure.
(function( $ ) {
  
   // This is the easiest way to have default options.
 
        var settings = $.extend({
            // These are the defaults.
 
            onready: function(){},
 
            //Rest of the Settings goes here...
        }, options );
 
    // Plugin definition.
    $.fn.hilight = function( options ) {
 
        //Here's the Callback
        settings.onready.call(this);
 
        //Your plugin code goes Here
    };
  
// End of closure.
  
})( jQuery );

ฉันได้แบ่งปันบทความเกี่ยวกับการสร้างปลั๊กอิน jQuery ของคุณเองฉันคิดว่าคุณควรตรวจสอบว่า http://mycodingtricks.com/jquery/how-to-create-your-own-jquery-plugin/


1

เปลี่ยนฟังก์ชันปลั๊กอินของคุณเพื่อรับพารามิเตอร์ที่สอง สมมติว่าผู้ใช้ส่งผ่านฟังก์ชันพารามิเตอร์นั้นสามารถถือว่าเป็นฟังก์ชันปกติ
โปรดทราบว่าคุณยังสามารถทำให้การเรียกกลับเป็นคุณสมบัติของพารามิเตอร์ตัวเลือก

ตัวอย่างเช่น:

$.fn.myPlugin = function(options, callback) {
    ...

    if(callback)        //If the caller supplied a callback
        callback(someParam);

    ...
});

0

ตัวอย่างช้าไปหน่อย แต่ก็มีประโยชน์ การใช้อาร์กิวเมนต์สามารถสร้างฟังก์ชันการทำงานเดียวกัน

$.fn.myPlugin = function() {
    var el = $(this[0]);
    var args = arguments[0] || {};
    var callBack = arguments[1];
    .....
    if (typeof callback == 'function') {
        callback.call(this);
    }
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.