jQuery plugin：调用回调方法，然后可以基于响应调用插件函数

问题描述

我正在编写jQuery插件并将它们与AJAX集成。我正在削减脂肪，并专注于基础：

I'm getting into writing jQuery plugins and integrating them with AJAX. I'm cutting the fat and focusing on the basics:

(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并设置为使用我的插件：

and let's say I have a div and set it to use my plugin like so:

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

使用此设置，插件，保存函数和动画都可以工作（假设没有错误） 。然而，myAjaxSaveFunction是异步的，并且可能返回成功或失败。我目前有在插件内调用成功动画的保存功能。如果我有myAjaxSaveFunction返回true / false，我可以（在理论上）使用插件中的返回值来确定是否运行成功或失败，但不是如果函数是异步的。

With this setup, the plugin, save function and animation all work (assuming there is never an error). However, the myAjaxSaveFunction is asyncronous and might either return a success or failure. I currently have the save function within the plugin calling the success animation. If I had myAjaxSaveFunction return a true/false, I could (in theory), use that return value within the plugin to determine whether to run the success or failure, but not if the function is asyncronous.

那么，这个场景是如何处理的呢？为了重用，我需要能够定制作为可选回调处理数据的函数，但是我需要插件等待它是否基于函数的结果运行成功/失败动画（这可能是异步的，或者可能不是）。

So, how is this scenario typically handled? For reuse, I need to be able to customize the function that handles the data as an optional callback, but I need the plugin to wait on whether it runs the success/fail animation based on the result of the function (which might be asyncronous, or might not be).

@Kevin B：你建议这个吗？

@Kevin B: Are you suggesting this?

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

不会立即通过if语句。 .options.onSave函数正在执行？

wouldn't this just fall through to the if statement immediately while the this.options.onSave function is executing?

推荐答案

我建议允许onSave函数返回布尔值，一个promise对象。

I'd suggest allowing the onSave function to be returned either a boolean value, or a promise object.

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();
 },

现在，您可以这样使用：

Now, you can use it like this:

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

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

这篇关于jQuery plugin：调用回调方法，然后可以基于响应调用插件函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！