расширить плагин 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.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 2

Добавление методов к 'this' в функции return this.each не будет работать.По крайней мере, это не работает в Adobe Air.

Я пытался:

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

, но код:

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

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

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!

Answer 3

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

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