jQuery plugin：调用回调方法，然后可以基于响应调用插件函数 [英] jQuery plugin: invoke callback method that can then invoke plugin functions based on response

问题描述

我正在编写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：调用回调方法，然后可以基于响应调用插件函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！