jQuery插件：調用回調方法，然後可以調用基於響應的插件功能

我正在寫入jQuery插件並將它們與AJAX集成。我切割脂肪，注重基礎知識：jQuery插件：調用回調方法，然後可以調用基於響應的插件功能

(function($) 
{ 
    function MyPlugin(el, options) 
    { 
    this.element = $(el); 
    this.myInput = false; 
    this.options = $.extend(
    { 
     onSave:function(){} 
    }, options); 
    this.initialize(); 
    } 

    $.fn.myPlugin = function(options) 
    { 
     var control = new MyPlugin(this.get(0), options); 
     return control; 
    }; 

    MyPlugin.prototype = 
    { 
    initialize:function() 
    { 
     var me = this; 
     //specifics shouldn't really matter 
     //it creates some HTML to go inside the element 
     //within that HTML is an input, which I can successfully invoke keyup: 
     me.myInput.keyup(function(event) 
     { 
     if(keyPressIsEnter(event) 
      me.saveFunction(); 
     }); 
    }, 
    saveFunction:function() 
    { 
     var value = this.myInput.val(); 
     this.options.onSave(value); 

     //CURRENTLY I CALL SUCCESS ANIMATION 
     successAnimation(); 
    }, 
    successAnimation:function() 
    { 
     //do something to the markup within element for success 
    }, 
    failureAnimation:function() 
    { 
     //do something to the markup within element for failure 
    }   
    }; 
})(jQuery);

，讓我們說我有一個div並將其設置爲使用我的插件像這樣：

$("myDiv").myPlugin({onSave:function(value){myAjaxSaveFunction(value);});

採用這種設置，插件，保存功能和動畫所有的工作（假設從來沒有錯誤）。但是，myAjaxSaveFunction是異步的，可能會返回成功或失敗。我目前在調用成功動畫的插件中有保存功能。如果我讓myAjaxSaveFunction返回true/false，我可以（理論上）在插件中使用該返回值來確定是否運行成功或失敗，但如果函數是異步的，則不能。

那麼，這種情況通常如何處理？爲了重用，我需要能夠自定義處理數據的函數作爲可選的回調函數，但是我需要插件根據函數的結果（它可能是異步的，或者可能不是）。

@Kevin B：你在暗示這個嗎？

saveFunction:function() 
{ 
    var value = this.myInput.val(); 
    var success = this.options.onSave(value); 
    if(success) 
     successAnimation(); 
    else 
     failureAnimation(); 
},

當this.options.onSave函數執行時，是不是會立即落入if語句？

來源

2013-03-20 AceCorban

附：我想避免在我的AJAX調用中設置異步：false，因爲這可能會導致應用程序掛起。 – AceCorban 2013-03-20 18:28:19

除了使用setTimeout和setInterval之外，您不能在javascript中「等待」，這對於ajax來說效果不佳。我會做的是允許onSave返回布爾值或承諾對象。如果它是一個承諾對象，它將綁定到.done和.fail方法並等待響應。 – 2013-03-20 18:28:46

@Kevin B所以我建立了保存以返回一個值？ onSave是插件的保存功能還是可選的回調？ – AceCorban 2013-03-20 18:31:55

我建議允許onSave函數返回一個布爾值或承諾對象。現在

saveFunction:function() 
{ 
    var value = this.myInput.val(); 
    var success = this.options.onSave(value); 
    if(success && success.promise) 
     success.promise().done(successAnimation).fail(failureAnimation); 
    elseif (success) 
     successAnimation(); 
    else 
     failureAnimation(); 
},

，你可以使用它像這樣：

$("myDiv").myPlugin({onSave:function(value){return myAjaxSaveFunction(value);}); 

function myAjaxSaveFunction(value) { 
    return $.ajax({...}); 
}

來源

2013-03-20 19:09:28

感謝您花時間幫助我解決Kevin。 – AceCorban 2013-03-20 19:12:05

jQuery插件：調用回調方法，然後可以調用基於響應的插件功能

回答

相關問題