4

我开始编写 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 返回真/假，我可以（理论上）在插件中使用该返回值来确定是运行成功还是失败，但如果函数是异步的，则不能。

那么，这种情况通常是如何处理的呢？为了重用，我需要能够将处理数据的函数自定义为可选回调，但我需要插件等待它是否根据函数的结果运行成功/失败动画（这可能是异步的，或者可能不是）。

@Kevin B：你是在暗示这个吗？

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

在 this.options.onSave 函数执行时，这不会立即落入 if 语句吗？

4

1 回答 1

3

我建议允许 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-20T19:09:28.387 回答