расширение объекта плагина jquery с функциями

Question

Я пытаюсь написать новый плагин jQuery.

база (это не мой плагин, только для лучшего понимания):

(function($) { 
    $.fn.mySuperCoolPlugin = function(options) { 

     // Build main options before element iteration 
     var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options); 

     var editText= 'pre ' + opts.text + ' post'; 


     return this.each(function() { 
      $(this).html(editText); 
     }); 

    } 

    // Default settings 
    $.fn.mySuperCoolPlugin.defaults = { 
     text: 'hi' 
    } 

})(jQuery); 

Теперь после того, как работает мой плагин, я хочу сделать некоторые дополнительные функции на нем.

var plug = $('.text').mySuperCoolPlugin({text: 'running it'}); 
plug.runAnotherFunction('blabla'); 
// this for example should set the html to "pre running it post blabla" 

plug.runAnotherFunction, например, должен теперь расширить свой предыдущий текст и добавить текст я вошел.

Знаете ли вы, что я имею в виду? Как добавить дополнительные функции в мой плагин? Я вижу только плагины, которые вы запускаете один раз с некоторыми параметрами.

Answer 1

вам нужно создать метод обертку. И есть одно важное правило: оно должно вернуть завернутый набор. Поэтому вы должны вернуть «это» (относится к обернутому набору), чтобы обеспечить цепочку (что вам также нужно). Вы можете сделать это, используя следующую закономерность:

(function($){ 
    $.fn.runAnotherFunction = function() { 
    // put your code here 
    // but you have to return 'this' to allow the chaining 
    } 
})(jQuery); 

Или, лучше сказать (для того, чтобы перебрать все обернутые наборы внутри):

(function($){ 
    $.fn.runAnotherFunction = function() { 
    return this.each(function(){ 
     // put your code here 
    }); 
    } 
})(jQuery); 

Answer 2

Просто добавьте функцию в плагине:

(function($) { 
     $.fn.mySuperCoolPlugin = function(options) { 

      // Build main options before element iteration 
      var opts = $.extend({}, $.fn.mySuperCoolPlugin.defaults, options); 

      var editText= 'pre ' + opts.text + ' post'; 


      return this.each(function() { 
       $(this).html(editText); 
      }); 

     } 

     // Default settings 
     $.fn.mySuperCoolPlugin.defaults = { 
      text: 'hi' 
     } 

     $.fn.mySuperCoolPlugin.runAnotherFunction = function(){ 
      return "this is another function"; 
     } 

    })(jQuery); 

Answer 3

Добавление методов в «это» в возвращении этого. каждая функция не будет работать. По крайней мере, это не работает в черном воздухе.

Я пробовал:

return this.each(function(){ 
    this.myActionFunction = function() { /* code here */ }; 
} 

но код:

var myPluginObject = $(...).myPlugion({..}); 
myPluginObject.myActionFunction(); // faild 
myPluginObject.first().myActionFunction(); //faild 

Так что я в конечном итоге использовала объект, wrappes объект, используемый плагином. Мой объект выглядит так:

var myPlugin = function(args) { 
    return this.init(); 
} 

var myPlugin.prototype = { 
    init : function(args) { 
     if(args !== undefinded)     
      this.target = args.target // this is the $(...) object 
     this.target.pluginCall(args.pluginArgs); // call the plugin method 
     return this; 
    }, 

    myActionMethod : function() { 
     var target = this.target; 
     // do something with target, which is the actual plugin object returned from the 
     // plugin code. 
    } 
} 

var pluginInstance = new myPlugin({ 
    target : $("#myOjbect"), 
    pluginArgs : { 
     /* plugin args here */ 
    } 
}); 

pluginInstance.myActionMethod(); // works!