Как создать функцию jQuery, которая возвращает другой объект?

Question

Я создаю плагин jQuery:

$.fn.myGrid = function () {

    return ???;
}

Я хочу, чтобы возвращаемое значение myGrid включало функцию добавления, чтобы я мог использовать ее следующим образом;

var grid = $(".myGrid").myGrid();
grid.add();

Как я могу это сделать?Как я должен объявить функцию добавления?И что я должен вернуть в myGrid плагин?

Я также был бы счастлив иметь что-то, что работает следующим образом:

$.myGrid.add();

Возможно ли это?

Answer 1

Один подход, который вы могли бы использовать, это:

$.fn.myGrid = function () {
    var that = this;

    return {
        add: function () {
            that.after('<h2>Here I am, adding something'); // Note `that` rather than `this`.
        },
        remove: function () {
            that.next().remove();
        }
    };
}

Важно захватить переменную this, потому что в противном случае методы объекта, который вы return из вашей функции myGrid() не смогут получить доступ к объекту jQuery, который вы вызывали myGrid().

Смотрите код в действии здесь; http://jsfiddle.net/HpeS8/

Answer 2

        (function ($) {
             var methods = {
                init: function () {
                  //Initilize
             },
             var add = {
                 //Do something
             }
              $.fn.myGrid= function (method) {
                    if (methods[method]) { 
                        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
                   }
                   else if (typeof method === 'object' || !method) { 
                        return methods.init.apply(this, arguments); 
                   }
        else { $.error('Method ' + method + ' does not exist on jQuery.myGrid'); }
    };
})(jQuery);

Звоните вот так

var grid = $(".myGrid").myGrid();
grid.myGrid("add");

Answer 3

Обычно лучшим соглашением для написания плагина является что-то вроде этого:

$.fn.pluginName = function(){
    // return the same object to preserve chainability
    // and also apply the plugin's functionality to all the
    // dom elements in this jquery collection
    return this.each(function(i,el){
       // do whatever you want with $(el)
    });
};

Если вы пишете плагин, который возвращает значение, а не манипулирует каким-либо образом текущим объектом (скажем, как width работает), вы должны вернуть это значение вместо текущей ссылки на объект (this):

$.fn.maxWidth = function(){
    var max = 0;
    this.each(function(i,el){
       var w = $(el).width(); 
       if(w > max)
           max = w;
    });
    return max;
};

Если вы хотите дать пользователю возможность получить доступ и изменить функциональность вашего плагина, вам определенно следует сохранить цепочечность (я имею в виду вернуть this, а не какой-либо другой объект, содержащий API вашего плагина) и предоставить API плагина для пользователь с помощью метода data элемента jQuery.
Вот пример. Допустим, мы делаем плагин jquery для видеоплеера. Мы хотим сохранить возможность объединения, но при этом иметь доступ к основным функциям этого плагина.
правильный способ сделать это будет выглядеть примерно так:

$.fn.videoPlayer = function(){
    var api = {
        play : function(){/*...*/},
        pause : function(){/*...*/},
        stop : function(){/*...*/}
    };  

    return this.each(function(i,el){
       $(el).data('videoPlayerApi',api);
    });
};

Пример использования, демонстрирующий мою точку зрения:

$('video')
    // initialising the plugin
    .videoPlayer()
    // the return value is the original jQuery object,
    // so we can still call jQuery methods on it
    .css('opacity',1)
    // select the first video
    .eq(0)
        // access the first video's plugin api
        .data('videoPlayerApi')
            // start only the first video
            .start();