Question

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

(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语句中吗？

Answer 1

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

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

jQuery插件：调用回调方法，然后可以根据响应调用插件函数

1 个答案: