$ .fn.plugin with chaining and callback

我寫了一個名爲mass的jquery插件。我瞭解到，通過在最後放置'return this'正確地鏈接它。

$('.thing').mass(0.5,500).draggable();

但我怎麼能給它一個回調而不傷害鏈接？

的代碼是這樣：

$('.thing').mass(0.5,500,function(){/*do some stuff*/}).draggable();

我的插件可能也只是顯示爲避免混淆和額外無關的代碼：如果我讀的例子後

$.fn.mass=function(options,callback){/*do stuff*/return this;}

我不知道有正確的理解。如果你調用回調函數，那麼你如何回到原來的函數中，將這個函數返回給鏈，或者如何將它傳遞給回調函數（this），並告訴它在完成時返回這個值？

我錯過了這裏的東西？我認爲回調（這）是要走的路，但我不希望有寫每一次裏面，像這樣返回此：

$('.thing').mass(0.5,500,function(){/*do some stuff*/return this;}).draggable();

來源

2014-07-26 8DK

回調函數執行*之後*。他們與當前的連鎖店無關。他們可以做任何你想做的事。 –

對不對！ O.o我也在想像返回[這個，回調]。 **當後鏈以後?? ** – 8DK

回調的概念是：「當你完成X時，請運行此功能」。將函數引用作爲參數傳遞不會立即執行函數，也不會阻止頁面。這就是整個問題。 –

嘗試

$(function() { 
$.fn.plugin = function(a, b, callback) { 
    // save reference to `this` as `that` 
    var that = this; 
    // change context of `callback` to `$(this)` 
    var proxy = (callback != undefined 
       ? $.proxy(typeof callback === "function" 
       ? callback 
       : $.noop(), $(this)) 
       : $.noop()); 
    var a = a || null; 
    var b = b || null; 
    // do stuff 
    $(this).append(a * b); 
    console.log(a, b); 
    // return `$(this)` , as `$(that)` , chainable 
    return $.when(proxy()).promise($(that)); 
}; 
$("#proxy").plugin(Math.PI, 123, function() { 
    // `log` `id` of `$(this)` object , i.e., `$(this) === $(that)` , 
    // returned `deferred.promise` object 
    console.log($(this)[0].id)}) // `proxy` 
    .css("color", "green"); 
});

的jsfiddle http://jsfiddle.net/guest271314/JKrc4/

見

http://api.jquery.com/jQuery.proxy/

http://api.jquery.com/deferred.promise/

來源

2014-07-26 18:53:37 guest271314

由於您的問題說明，一個體面的jQuery插件應該是一個好的團隊球員，而不是殺死連鎖。這意味着：

它應該返回一個jQuery對象，以便以後可以應用更多的方法調用。
它應該在匹配元素的原始集合上工作，並將其傳遞給下一個方法調用，可以是未經修改的，也可以是適當的修改（由插件功能記錄和規定）。

事情不要做：

忽略匹配的元素，並從頭開始
運行你自己的選擇銷燬元素集合沒有很好的理由（例如，用於返回一個新的jQuery對象不慎而不是原來的）。

回調函數在這裏扮演什麼角色？絕對沒有。

儘管我並不完全確定問題的關鍵，但常見的誤解並不是區分函數引用和函數調用。例如，鑑於這一功能：

function add(a, b){ 
    return a+b; 
}

這是一個函數調用：立即

foo(add(3+5));

add()運行，返回8並將8 foo()。但是，這是函數參考：

foo(add);

add()不運行。它只是傳遞給foo()，它可以在稍後決定如何處理它。

綜上所述，當你做這樣的事情：

$('.thing').mass(0.5,500,function(){/*do some stuff*/}).draggable();

...的/*do some stuff*/位不會運行，並且不會對鏈中的任何影響。稍後，您可以選擇運行它，但在.draggable()發揮它的魔力之後可能會很長時間。

來源

2014-07-26 18:05:50

$ .fn.plugin with chaining and callback

回答

相關問題